I define fonts on their own like this:
.smallboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:11px;color:#3A63A5;}
.medregblue{font-family:Trebuchet MS;font-size:13px;color:#3A63A5;}
.medboldblue{font-family:Trebuchet MS;font-weight:bold;font-size:13px;color:#3A63A5;}
I also define elemets that are recurrent such menu options or section titles like this:
.MenuOptions{float:right;margin-right:0px;}
.SectionOption{float:left;margin:10px 0px 0px 50px;}
So when I create divs, I often find myself writing this:
<div class="MenuOptions medboldblue">
I know I could merge the two classes but I like to have my fonts in one class and another class to handle positioning and such.
Is there a way in CSS to have all MenuOptions be of font medboldblue so that if I want to change the font from a medboldblue to a largeboldblue I do can that change without going through every MenuOptions div? I know I can easily do this with jquery and addClass but I was wondering if there a way to do this with pure CSS.
Thanks.
No, you can't do that with pure CSS.
You could use SASS or LESS CSS.
Or you can add the styles from medboldblue to MenuOptions.
But really I would recommend reading about OOCSS if you want to learn about the best way to organize CSS.
Unless I misunderstand your question, you can very easily do that with css.
All the properties that you define in the first section are inherited (font, color), so you only need to apply your style to the parent / menu element and the styles will be inherited by all menu options.
When you decide to change the font class, you just have to change it for the menu.
Related
H ello, everyone!
I have a problem with styling md-tab
It looks like this by default:
This is what it should look like:
What I am trying to achieve is:
use styles from material theme or colors from it (ng-colors)
update background of active/inactive elements (as in the second picture)
Here are some thoughts:
CSS modifying doesn't seem to be right in this case because I want to rely on theme colors.
md-primary class assignment doesn't work on md-tab for some reason (don't understand why)
md-colors assignment doesn't work for the same reason, I suppose.
probably, I will have to create some custom tab components instead of these and then style them. I am not sure if it is right in my case.
Question. Is it possible to style md-tab the way I described?
Thanks!
The fastest and easiest way to do this is via updating css like this
md-tabs .md-tab {background:white; margin-left:20px}
md-tabs .md-tab.md-active {background:#006E7B; color:white !important}
md-ink-bar {display:none}
I think the title is a bit vague but my vocabulary is limited in english. I'll try to explain what I want to do.
I have two CSS files from products I have no control ( are not mine ). Lets say AdminLTE bootstrap and a JQuery plugin.
The problem is the Box class is in both styles.
and messing my flight indicators from the JQuery plugin. I know I have to choose the order of CSS style files or add important to one of them but I'm afraid of start to mess with my bootstrap interface.
Is there any other way to solve this?
I know I have to choose the order of CSS style files or add important to one of them
you don't, you could simply write a selector with higher specificity which would override the jQuery plugin styles, like body div.instrument .box
I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.
I see two solutions:
Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.
There are other solutions? Which is the correct one?
You can put those styles in a CssResource as well.
Just put #external on top of those styles in your css file, and you are good to go.
For example:
#external gwt-DatePicker;
.gwt-DatePicker {
...
}
Hope it helps.
Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.
You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.
Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?
I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.
in my <head> tags, ive placed the location of bootstrap.css
if i place <div class="container"> it creates a fixed width.
what i wanted to happen is manipulate the default values of the container width by importing another set of stylesheet.
another scenario is, if i placed a span8 how do i put background colors on it without actually editing the bootstrap.css rather, customize it using a new stylesheet.
does putting 2 stylesheet possible? then inherit / manipulate all values in the bootstrap.css in a new stylesheet?
i apologize if my explanation aren't that clear. its kinda hard to express verbally what i wanted to happen. :)
When you add a second stylesheet, you can override rules of the first one. Just make sure you add them to your html page in the right order.
If you want to make sure a rule won't be overridden you can add !important to it. Example:
.example {
color: red !important;
}
Yes it is possible. That is what the "Cascading" part of CSS is. Short answer is to add your own style sheet after the bootstrap.css and before the responsive.css and your styles will be used because they are the latest definition, i.e. the rules "cascade" down.
Long answer is take a look at the docs. There's a lot to learn there if you have the time.
Also have a look at the bootstrap customization page
I'd like to import an external CSS (eg. Bootstrap) into my site-- the problem is I'd like to apply the Bootstrap styles only to a specific region of the page. When I include Bootstrap, it applies its styles to the entire page, restyling all tables, divs, etc.
Is it possible to only apply Bootstrap to a region (say a parent div or something?)
Thanks
The only way to do this is to have a separate iframe for the content you want to style with Bootstrap (unless you want to edit the Bootstrap CSS, and add your outer div's selector to the beginning of EVERY rule).
HTML5 introduced the new scoped attribute, which is made specifically for your use case, but has not yet been implemented by any one of the major browsers.
If you are using jQuery (which you probably are, since all of Bootstrap's Javascript functionality is dependent upon jQuery), you might wanna try Simon Madine's jQuery Scoped CSS plugin.
Import Bootstrap before your own styles. That way your own styles will overwrite the changes made by Bootstrap where applicable.
I've only tried this locally and not given it any thorough testing but it seems to work fine. I created a div around the content and assigned it an id. Then prefixed all of the bootstrap selectors with the id I assigned the surrounding div. The prefixing was done with a couple of search and replace operations. Perhaps it can be done easier with less
Forgot to mention that the body selector of the bootstrap.css has to be replaced with the id and not prefixed like the other selectors.