<div class="col-lg-3">
<ul class="nav navbar-nav login-right">
<li>Login or create account</li>
</ul>
</div>
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
I tried to give normal class to each link and just to call that classes in external CSS file but solution fails.
Any idea?
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
You can use nth-child and color both a tags differently
ul.nav li a:nth-child(1){
color:green;
}
And
ul.nav li a:nth-child(2){
color:blue;
}
Since both have the same padding style you can place it in a common style definition
ul.nav li a{
padding:0;
}
Important: make sure the external file which you write this in is placed last in your HTML hierarchy. By CSS prioritisation rule the file placed last in the hierarchy gets the priority.
Edit: seems like you have many elements with same structure. In this case it's better to select specific element and using id will be our best choice. Add id to your ul as below
<ul id="colorMe" class="nav navbar-nav login-right">
And change your CSS selectors to
#colorMe li a:nth-child(1)
Do similar to other selectors too
Related
I’m using an internal CSS style sheet to define styles for my <ol> and <li> elements. However, for one list which I have, I’d like to use inline styling. I want the list elements to be one color (blue) and the list bullets to be another (red). If I was to use an internal style sheet, the following would accomplish this for the list in question:
<style>ol { list-style-type:upper-roman; color:blue; } ol li span { color: red; } </style>
But I can’t figure out how to do this using inline styling. I don’t want to style each <li>. This following works to apply just one color for everything:
<ol list-style-type:upper-roman; style="color:blue;">
<li><span>Apple</span></li>
<li><span>Orange<span></li>
<li><span>Pear<span></li>
<li><span>Grape<span></li>
</ol>
But I don’t know how to add in the part to the inline styling statement which in the inline style sheet is:
ol li span { color: red; }
in order to color the list items different than the bullets, without coding each list item itself.
You're going to have to be very specific and deliberate. That's the way inline styles work. You apply them directly to each and every element. You can get away with some inheritance but if you need to override that inheritance then you'll have to manually override it for each and every element.
<ol style="color:blue; list-style-type:upper-roman;">
<li><span style="color: red;">Apple</span></li>
<li><span style="color: red;">Orange</span></li>
<li><span style="color: red;">Pear</span></li>
<li><span style="color: red;">Grape</span></li>
</ol>
I always modify Bootstrap by including my custom stylesheet after the Bootstrap one, in this particular case, like this:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mainstyle.css" rel="stylesheet">
I have a list on the site, some of whose elements also have the class advanced-only.
The list elements have the style in Bootstrap:
.nav > li {
position: relative;
display: block;
}
And the advanced-only class in my custom stylesheet has:
.advanced-only {
display: none;
}
There are other styles such as color and border but they are not relevant here. As you see, the advanced-only elements should be hidden when the page loads, but they are displayed. When I inspect one of these elements, I see that the .advanced-only style is crossed out and the .nav li style from Bootstrap is active. When I deactivate the Bootstrap one from there, then the custom one activates and all is well.
Also, when I do
.advanced-only {
display: none !important;
}
it hides it like it should. However, this would interfere with a bunch of Javascript code (for example, show() and hide() won't work properly with !important elements) so I would like to understand why Bootstrap is overriding the custom style and what I can do about this.
The HTML looks like this:
<ul class="nav nav-sidebar">
<li>
<a>Pending Actions</a>
</li>
<li class="advanced-only">
<a>Hidden stuff</a>
</li>
</ul>
That is because the specificity of your selectors are lower than the Bootstrap selectors. Strongly suggest you reading http://www.w3.org/TR/CSS2/cascade.html#specificity.
The specificity is calculated based on many factors, not just by the order of definition.
For example, this selector .nav > li has an attribute selector and a tag selector, while your rule .advanced-only has only an attribute selector. So your rule is not making affect. Try to make your selector more specific when giving customized styles.
This is because bootstrap's styling is more specific than your custom styling.
To fix this you need to add a more specific selector, e.g:
nav .advanced-only {
display: none;
}
For more reading on CSS Specifity check out this link.
I have defined a class in my main.css file.
.red {
color: #d14;
}
And using it like this.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active red">
<i class="icon-leaf icon-white"></i>Admin
</li>
</ul>
</div>
</div>
Besides my main.css I also import the twitter bootstrap css file.
This way it does not work. Is it because Bootstrap is overruling my color definition?
The only element in your markup that could visually apply this style is the <a>, and that element has a lot of really specific CSS rules applied to it by Twitter Bootstrap, stuff like this:
.navbar .nav .active > a,
.navbar .nav .active > a:hover {
color:#FFFFFF;
}
You'll have to write something even more specific to get the style to apply:
.navbar .navbar-inner .nav .red a {
color: #d14;
}
Demo: http://jsfiddle.net/pYGaG/
You could use !important on the rule if you really had to, but I really feel that you should avoid it as much as possible. If this is a single element that has this style, consider adding an id to it, which carries a lot of weight specificity-wise:
<li class="active" id="home_link">
<i class="icon-leaf icon-white"></i>Admin
</li>
#home_link a {
color: #d14;
}
http://jsfiddle.net/pYGaG/1/
Here are a couple good articles on CSS specificity:
http://css-tricks.com/specifics-on-css-specificity/
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
And as a side note, try to avoid presentational class names like red. Use more meaningful ones that aren't tied to the way it should look, but what it is (for example, .active-link).
Your're defining the red color on a <li>-Tag, but there is no text. The text is inside the <a>-Tag, so you need to overwrite this rule.
Code something like this:
.red a {
color: #d14;
}
Update: Go for the answer given by Wesley Murch.
I'm creating a navigation bar and its made using an unordered list. I want to override my style for the first one so it looks different. I tried changing its class, but the actual style overrides it. Thanks
CSS is order-sensitive.
If you define the styles for the first element, and then define the styles for all elements, then the styles for all elements will take precedence, even for the first element.
Alternatively, if you define the styles for all the elements first, and then define the styles for the first element, then the styles for the first element will take precedence over the styles for all elements when the browser gets around to figuring out how to render the first element.
In the style declarations, use !important, like this:
.myFirstOne {
color: blue !important; /* for example */
}
Make sure you put the !important last. Is there a way you can factor the attributes out of the style attribute and into a class? That would be a cleaner and less tedious way of doing it, as !important must come after every declaration.
See this link for more information on CSS cascading rules.
I don't perfer using !important I'd rather put a class on the first element and style it as such:
<!-- html -->
<ul>
<li class="first">first item</li>
<li>second item</li>
<li>third item</li>
</ul>
/* css */
ul li {
color: blue;
}
ul li.first {
color: red;
}
I'm creating a custom master page for a MOSS publishing site. The designers have come up with this idea for the fly out menu...
alt text http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg
which uses graduated/different backgrond and text colours for each menu option.
Does anyone know how to accomplish this?
You can use the CSS next-sibling selector (+) to achieve this however IE6 won't get the styles.
Do something like the following (colour properties are just for example):
ul ul li { background: darkblue; color: lightblue; }
ul ul li+li { background: blue; color: lightblue; }
ul ul li+li+li { background: lightblue; color: darkblue; }
ul ul li a:hover { color: black; }
Alternatively, you'll have to either apply a CSS class to each subitem going down (talk to the programmer if you're not responsible for that), or do it by adding classes with javascript.
Ideally try to convince them that you can't do it for IE6 but modern browsers will manage fine. As long as the site is still usable the gradient of colours is a very minor loss.
I see two possibilites with pure css:
1.
If you have fixed pixel height for the entry lines you could always use one single background image with the gradients on it. If you make your menus with lists you could just slap it on the encompassing list tag.
2.
If you want to to keep the line height/ font size flexible you can work with multiple classes: one for every color tone. Just give give every nth-line a special class with the corresponding color tone as a background color and slap that class on the tag for that line.
design critic:
The problem that I see here is that you will have a maximum number of entries because with this level of gradual fade the background color will become white after six or seven entries.
kind words:
As long as the menu doesn't have to be transparent you should be fine.
If you want to be able to calculate a gradient of arbitrary colors, this page has some useful functions for handling hex color triplet calculations.
I would probably use the Suckerfish method with different a CSS class for each level of <li> in the menu:
<ul id="menu">
<li class="root">Home</li>
<!-- etc. -->
<li>Products
<ul>
<li class="sub1">BTE Legal Expense Insurance</li>
<li class="sub2">Legal Services</li>
<!-- etc. -->
</ul>
</li>
<!-- etc. -->
</ul>
I found this not to be possible with the Sharepoint