Let's say I want to include my content to somebody elses site. Is there a way to make my style unique and cannot be overriden by his css files.
I have my content in a div with specific ID. If I write my css like this
#divId a {
color:red;
}
The link color can still be overriden by his style. I hope the question is understandable...
#divId a {
color:red !important;
}
This will give your style precedence, but if he later uses !important in his own style for the same element it will follow normal cascading rules and override yours.
The Best would be if you would create different classes for action like this to not having trouble leater for example if you want some elements always red creade class like this :
.always-red {
color : red !important;
}
And create different files for this called helpers or something else. so now if you would like some different elements always red you can use it simply like this :
<div class="col-md-12 always-red">
// Some html in here which text color will be always red
</div>
Related
I want change text color etc of help_text in fields models.
I see in html that there is helptext class:
<span class="helptext">Sentenses</span>
so I try in my css file:
.helptext {
color: #bd512f;
}
and it dont do changes.
Is there collision with bootstrap?
In CSS, the style that is specified last is applied. Perhaps the styles of your frameworks are loaded later than the one you specified. Also, inline styles like your <span> have even more precedence.
I found the answer by code:
.helptext {
color: #bd512f !Important;
}
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
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 :)
I have a css sheet for a big project that I can't change, "cantChange.css"
I also have a css sheet for a small portion of the project that I am able to change "canChange.css"
Both css sheets describe the style for a certain class -- and cantChange.css is overriding canChange.css.
Is there any way to give priority to a certain style sheet for a URL? Is there another way to do this with css specificity rules?
The loading order of course is important. You should load "canChange.css" after you loaded the other one. On top of that CSS offers !important . Which allows for something like:
background-color: blue !important;
If that still doesn't do anything add an id to the element in question and style that one. IDs are always higher prioritized then classes or common selectors.
You've got a few options to address this:
Make your selector more specific (e.g. #body #small-project .cool-class)
Apply the styles inline (e.g. style="color: #000")
If you can change the order in which the stylesheets are loaded, load canChange.css file after cantChange.css
Give priority using !important (What does this mean?)
You can make your own declaration MORE SPECIFIC to override the others.
For example:
body.someclass .anotherclass { ... }
<body class="someclass">
will always override .anotherclass { ... }
I'm new to the web side of things, and am confused how to deal with CSS. (Thankfully), there is little direct manipulation of HTML/CSS when using ExtJS4 so far... so now that I'm in need to change the CSS, I'm having problems.
Specifically, I'm trying to dynamically change the color of accordion header backgrounds.
Javascript:
afterrender: function(subForm) {
subForm.getHeader().getEl().addCls('custom-accordion-hd-valid');
// this works - so I know it's the right element.
subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
}
CSS:
// attempt 1
.custom-accordion-hd-valid {
background: green;
}
// attempt 2
.custom-accordion-hd-valid .x-accordion-hd {
background: green;
}
So:
setting style via setStyle does work, but it doesn't easily allow me to remove a style
setting via addCls with CSS attempt 1 loads the CSS, but it gets overridden by .x-accordion-item
setting via addCls with CSS attempt 2 fails to load the CSS
Help?
if you for instance wanted to remove the background style you set here:
subForm.getHeader().getEl().setStyle('background', 'hsl(100, 60%, 60%)');
css will allow you to simply override it by setting it again eg:
subForm.getHeader().getEl().setStyle('background', 'none');
or
subForm.getHeader().getEl().setStyle('background', 'blue');
css has a particular priority on how it judges which styles are most "important" when multiple styles are provided - take a look here at this great article on css specificity
and realize by using that setStyle() method you are applying "inline" styles to these elements, where as other css definitions either in a file or in a style html tag have a lower priority