I am using the twitter follow us widget from https://twitter.com/about/resources/followbutton and I would like to change the color of the text. Right now the text is aqua blue which doesn't work well on my sites background.
Is there a way to override the styling inside the iframe? If so, how?
There's no way to modify the DOM or style of the content in an iframe. The best you can do is link to a different-styled iframe, as twitter offers both light and dark themes.
EDIT: That being said, there are several parameters in the <a> tag that can be used to customize the theme even further. Try modifying the data-button, data-text-color, and data-link-color parameters to your liking!
Related
I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.
I have a div and apply the latest version of tinymce (4.2.5) to it, including some of my websites stylesheets.
When I use the editor old fashioned way the loaded css is only applied to the div I'm attaching tinymce to. Like a charm.
But I want to use the inline: true option. When I use that all the css is applied to the complete page of the application, not only the div.
Is this expected behavior? Or should I look for another approach? My main reason to use the inline feature is that it keeps the toolbar visible on scrolling. Unfortunately tinymce loads different sets of html for the inline and fixed toolbar (for example, the menu bar and icon/tool bar are separate div's. On inline they have a parent div) so just applying the same or similar css isn't working out.
Anybody has any tips or tricks for me? Or should I accept the limitations of one or the other?
You will have to accept the limitations.
Both editor modes need different css for the UI and in inline mode it seems to be necessary to apply it to the complete page (even though you don't like that).
I got a JSF page which has a <rich:tooltip> as well as an arbitrary component with a title attribute.
Those two do neither look, nor act in the same way.
HTML title attribute has rounded corners, a black border, a smaller font and does not show directly on mouseover.
Do you have any idea, how I can achieve a more similar behaviour on both tooltips? I thought of CSS styling via the styleClass option of <rich:tooltip>.
The appearance of #title depends on the browser and OS, you cannot style it with CSS. You can try making the tooltip look the same but on a different computer they might be different anyway.
I've been trying to add a different background color to the facebook comments box on my site.
I've tried`'
and I've tried to add a which wraps the code. But nothing seems to work.
How do I change the background color of the comments box?
you may use the light theme and put the FBDIV inside another container..then change the background of container... of course you can't edit the css becouse the comment plugin loads inside an iframe... You can use FBML but it's deprecated.
Does anyone know the name of the CSS classes responsible for styling the dojo promptMessages (or invalidMessages) tooltip associated with ValidationTextBoxes.
Normally Firebug does a great job of revealing all the inner workings of CSS, but in this case the tooltip prompt disappears when I try to inspect it!
I am intending to play with such CSS properties as padding and width for the promptMessage tooltip.
Dijit Tooltip template reveals the structure:
<div class="dijitTooltip dijitTooltipLeft" id="dojoTooltip">
<div class="dijitTooltipContainer dijitTooltipContents" dojoAttachPoint="containerNode" waiRole='alert'></div>
<div class="dijitTooltipConnector"></div>
</div>
Actually, although my question remains for general purposes, in the specific case that interests me, it's probably as easy to include as part of the tooltip content the css markings that will do what I want:
dijit.form.ValidationTextBox({
promptMessage = "<div class='customizedWidth'>Blabla</div>"
},myNode);
That said, I would still be eager to learn the dijit class for that specific tooltip. It would become necessary in the case of wanting to change the look of that entire class...
I had a similar problem when trying to debug why the css for the ToolTip on the ValidationTextBox was showing up as a plain grey box instead of using the proper css. The normal way to view css and other information in Firebug does not work because the tooltip will disappear when you click on it. However, I found that using the standard Web Developer Toolbar you can go to the CSS menu item and select View Style Information (or just do cmd-shift-Y on your keyboard). This will turn the cursor into a crosshair. You can then move the crosshair over the tooltip and the entire css chain will display for the tooltip. This solved my particular styling problem by providing the hint that I needed to apply the proper theme class to the body tag. The system I am coding against does not allow me to directly alter or add to the body tag in the generated html. However I used dojo to add the class after load like this:
dojo.query("body").addClass("claro");
and everything (Dialogs and tooltips) work great now.