I am using a CssResource contained within a ClientBundle according to this guide:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles
I am accessing the styles from my UiBinder xml according to this guide using ui:with:
http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Using_an_external_resource
This works great for accessing my css using class on html elements or styleName on GWT widgets. However, I would like to override the body selector, how can I accomplish that?
This worked great when I previously used tag within my html-file or when I pointed to the css within my GWT module xml. But since this was depracted I switched to only using CssResource. Now my own body selector is not used and the one from GWT Standard Theme is used.
Alright, I found two solutions myself for this:
Add #external to the body CSS selector to suppress selector obfuscation, according to this guide:
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes
#external body;
body {
my style
}
Add an id to the body, grab the element using GWTs DOM.getElementById and add the style.
Element body = DOM.getElementById("bodyId");
body.addClassName(AppResources.layout().body());
Hope this can help other in the same situation.
Related
When I define a code for a class within the custom CSS of a post this is working however if I define the same code globally under my theme options-> Custom CSS this is not working.
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview {
color: #13fff8;
}.
Therefore I have to go post by post adding this code to get the proper font color... and I would like to have it globally working.
Any idea why this happened?
First, check whether you have a typo or not. After verifying that you have entered class name properly. You can try out as,
.your-class-name{
color : #ffffff !important;
}
!important has the superpower to override previous CSS class and it's properties.
There are guidelines and defined the precedence of different CSS stylings.
Checkout,
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Ask in the comment if required a more specific answer.
Check with the order of the css files loaded. If you have declared multiple css for same element latest class css will be applied. Along with that check the specificity of the css selectors. The selector with higher specificity will be affect the style.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
So I have a CSS for .status-msg-body My blog is hosted in Blogger platform and in that a CSS file is there which cannot be removed. That CSS file contains a CSS for.status-msg-body but I want to change it so I have put an inline to my blog. But that does not works it still shows the CSS specified in the file provide by Blogger by default.
You can try using !important property to override those css styles.
Try including !imporant in every line of your css class.
For instance if you have
.status-msg-body
{
color:Red;
}
and you want it blue, add this class
.status-msg-body
{
color:Blue!important;
}
This will override the existing style.
Say I have 2 sites, http://1.example.com, http://2.example.com.
My issue is this : I am to dynamically add content to 1.example.com and 2.example.com, as part of this dynamic content addition I need to download and apply a css file via javascript. Now there is a <hr> tag in my dynamic content I'd like to style. When I apply this on 1.example.com, all works fine, but when I try to apply it to 2.example.com, the issue is that 2.example.com has a stylesheet that already defines stylerules for the <hr> tag. Like say padding. I don't want to override the properties manually. Is there a way to ignore <hr> styles defined in 2.example.com for my dynamic content and only apply styles I downloaded?
Be more specific. Learn about CSS specificity to override styles.
You could, for example, add a class to the <hr> and style that.
Try like this,
You may find parent div in your dymanic content,
For example: .parent-div hr{ your styles }
I want to override my label color so redfined it one of the css in application using .gwt-label class. However at one specific location in the application, I need a different color. So I did the overriding the css style class in the UI binder of that class using #external
<ui:style field='otherStyle'>
#external .gwt-Label;
.gwt-Label { color: #fff; }
</ui:style>
It works fine but the moment I access this page in the browser, all the labels style take the effect of above style.
Any clue would be helpful.
Thanks in advance
I recommend you use a different style name, and add it to all of the elements you want to be a different color. You can't selectively choose which version of a single css class to use on different elements.