Let's say I have a class called TextEditor which extends TextArea, so what's the right selector for this? Selector like .text-editor didn't help.
Well, actually .text-area works fine, but that's no the solution.
CSS isn't aware of the Java classes that you have created. Manually add a CSS class and use that to style it. E.g. class="TextEditor" then style it with .TextEditor
You may define your own selector that customizes the default .text-area selector. And set the id of your custom class with this selector. See the "Changing the table column header style : Customzing" section of this answer.
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 :)
A question about CSS.
I am working on some dated code. This code has its own css rules which are linked to some 'css manager'... now I want to use jQuery UI with its nice and cute dialogues etc.
Now my question is:
I have a css rule say...
#menu-bar{something}
jQuery UI is using rules like:
.ui-dialog-titlebar{something2}
Can I (without modifying jQueryUI stylesheets) do something akin to :
.ui-dialog-titlebar = #menu-bar?
So .ui-dialog-titlebar will be overwritten with {something} from #menu-bar?
Thanks in advance.
PS. Let me add that I can not simply do
.ui-dialog-titlebar {something}
becasue {something} is changing depending on the 'style manager' used.
I don't think a css rule can inherit from another one, definitely not CSS 2 or CSS 3. What you can do is to add multiple css classes to the elements. In your case, you could simply add the ID to the dialog element:
<div id="menu-bar" title="dialog">...</div>
or add it programmically:
$('.dialog').dialog(...).attr('id', 'menu-bar');
Note though, #menu-bar should really be a class rather than an ID, if you want multiple elements to have the style.
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.
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.