How to change the CSS file of yammer share button? I want to add my own CSS for the alignment for WordPress.
You can tell it to use a custom element and then style that element as you wish.
Source: https://developer.yammer.com/docs/share-button
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
<script type="text/javascript">
var yammer_options = {
customButton : true,
classSelector: 'my-custom-yammer-share-button'
};
yam.platform.yammerShare(yammer_options);
</script>
Related
I want to change the max-width of a column in a sharepoint list view. For some reason this will work for increasing the column which is a multiline text field but not decrease it.
here is what I have tried
<style type='text/css'>
td.ms-vb2[DisplayName="Current Issue or Update"]
{
max-width:100px !important;
}
</style>
If it is a multiline text field, please set the style for the class start with "ExternalClass" using Jquery below:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("[class*='ExternalClass']").css('max-width', '50px');
});
</script>
I have some code using Jquery Growl function. But I want to customize it to something like that - https://codepen.io/killerek/pen/qqdZJp
I'm using a code:
<script type="text/javascript">
$.jGrowl('{$message}');
</script>
I wanted to use my own css code by editing this line as follows but didn't work for me.
<script type="text/javascript">
$.jGrowl('{$message}','{theme: 'default'});
</script>
Any other ideas? Thanks
The key to using the theme option is the CSS definition, as theme just maps to a CSS class.
In the jGrowl repository there is an example folder that demonstrates this behavior:
Check out the CSS here:
https://github.com/stanlemon/jGrowl/blob/master/examples/jgrowl.html#L16-L19
.jGrowl .manilla {
background-color: #FFF1C2;
color: navy;
}
And the javascript here:
https://github.com/stanlemon/jGrowl/blob/master/examples/jgrowl.html#L95-L120
$.jGrowl("Here is a custom theme.", {
theme: 'manilla'
});
Notice theme of manilla maps to .jGrowl .manilla.
For your situation you would need a similar declaration .jGrowl .default.
I know this question has already been asked but mostly for Fancybox 2 (and not 3) and the only answer I did found didn't help me though.
My web page has two frames, one hosts the Fancybox Gallery. So far, when I click on images, they only open in the corresponding frame and Id like the images to fill the whole screen. Following the answer here (Open fancybox 3 into iframe parent) I made the following code but I didn't went right.
Did I forgot something ? Should I put some code in the main page of my project, the one that holds the two iframes ? Something else I should do ?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="jquery.fancybox.min.css" rel="stylesheet">
<script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
parent.jQuery.fancybox.getInstance().update();
});
$.fancybox.open([
{
src : 'IMG_3301.JPG',
opts : {
caption : 'First caption',
thumb : 'IMG_3301 - copie.JPG'
}
},
{
src : 'IMG_3302.JPG',
opts : {
caption : 'Second caption',
thumb : 'IMG_3302 - copie.JPG'
}
}
], {
loop : false
});
</script>
</head>
<body>
<a data-fancybox="gallery" href="IMG_3301.JPG">
<img src="IMG_3301 - copie.JPG">
</a>
<a data-fancybox="gallery" href="IMG_3302.JPG">
<img src="IMG_3302 - copie.JPG">
</a>
</body>
</html>
By using parent.jQuery.fancybox you can access fancybox within the parent iframe, and, to start fancybox in parent iframe, simply combine your two snippets, like parent.jQuery.fancybox.open(..)
Example:
var $links = $(".imglist a");
$links.click(function () {
parent.jQuery.fancybox.open($links, {
// Your custom options
}, $links.index(this));
return false;
});
Demo - http://fancyapps.com/tmp/embed/
I am trying to make a semi-resuseable widget but I am running into a problem. I am trying to encapsulate a some CSS code inside a shadow root so that it does not affect the rest of the webpage but this CSS is used across multiple widgets so I am trying to include a remote stylesheet. None of the examples I have found use a remote style sheet and I was wondering if this was possible.
EX:
<template id="templateContent">
<head>
<link rel="stylesheet" href="css/generalStyle1.css">
</head>
<body>
<div class="affectedByGeneralStyle1"></div>
</body>
</template>
script to include template:
<div id="host"></div>
<script>
var importedData = (html_import_element).import.getElementById("templateContent");
var shadow = document.querySelector('#host').createShadowRoot();
var clone = document.importNode(importedData.content, true);
shadow.appendChild(clone);
</script>
I came across the same problem recently. What I ended up doing was using:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Additional info: This worked just fine except that now I'm having some cache issues as Chrome does not seem to reload those resources after a hard reload.
Let add to the answer . Now direct tag is supported in shadow dom.
You can directly use
<link rel="stylesheet" href="yourcss1.css">
<link href="yourcss2.css" rel="stylesheet" type="text/css">
Check they has been update by whatwg and W3C
Useful link for using css in shadow dom.
https://w3c.github.io/webcomponents/spec/shadow/#inertness-of-html-elements-in-a-shadow-tree https://github.com/whatwg/html/commit/43c57866c2bbc20dc0deb15a721a28cbaad2140c
https://github.com/w3c/webcomponents/issues/628
Direct css link can be use in shadow dom
Thanks.
I added the stylesheet's link element directly to the shadow root this way:
let link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'whatever.css');
this.shadowRoot.appendChild(link);
It seems to work fine. (I called this from the constructor of the component.)
actually polymer has an internal utility to load css links, i have implemented a javascript function that is using polymer internal css processor,so if you want to add css links at runtime you can use it:
Polymer('my-element', {
ready: function () {
this.importCss("path/myfile.css");
},
importCss: function (path) {
var $shadow = $(this.shadowRoot);
var $head = $("<div></div>");
var $link = $("<link rel='stylesheet' type='text/css'>");
$link.attr("href", path);
$head.append($link);
var head = $head[0];
this.copySheetAttributes = Polymer.api.declaration.styles.copySheetAttributes;
Polymer.api.declaration.styles.convertSheetsToStyles.call(this, head);
var styles = Polymer.api.declaration.styles.findLoadableStyles(head);
if (styles.length) {
var templateUrl = this.baseURI;
Polymer.styleResolver.loadStyles(styles, templateUrl, function () {
var $style = $shadow.find("style");
if ($style.length > 0){
$shadow.find("style").append($head.find("style").html());
}else{
$shadow.append($head.html());
}
});
}
}
});
Note: this code needs jquery to run
In my web application I've set the CSS style for all the buttons like,
input[type=button], button
{
//
}
If I want to use some other CSS class for a particular button, If its a ASP button I can simply use the property EnableTheming="false".
but I've a html button, for this I need to disable theming. I tried EnableTheming, but its not working. How can I do this, can anyone help me here.
I tried to setting the removeClass using jQuery like,
<script type="text/javascript">
$(document).ready(function () {
$(":button").removeClass("marked");
});
</script>
but, its not working
you can remove the css class using jquery
$(":button").removeClass("marked");
if you want to add class
$(":button").addClass("marked");
If your class has something like this
input[type=button], button
{
border:1px solid #fco;
padding : 0;
margin:0;
}
Do this to make the style default
$(document).ready(function () {
$(":button").css({"border":"", "padding":"", "margin":""});
});