I have an issue to override the bootstrap css for .active.
I have managed to override many others but not this one. Does anyone have an idea?
What I want to do is to change color and bg-color.
Here is my CSS:
.active {
color: #AAAA33;
background-color: #303030;
}
what about include "!important" to your code? like
color: #AAAA33 !important;
background-color: #303030 !important;
If still not work write down all the line in your own css file
.navbar-default .navbar-nav > .active > a {
color: #AAAA33;
background-color: #303030;
}
To override this kind of elements, you should declare them as !important:
.active {
color: #AAAA33 !important;
background-color: #303030 !important;
}
Even if the use of this !important is fairly relevant here, considering the frameworks, you should be careful about this and don't take the bad habit to use it everywhere, like suggested in the article When Using !important is The Right Choice by Chris Coyier.
Related
I hava a customized costom_css.css to overwrite others
blockquote {
font-size: 14px !important;
}
.pagination>.active>a {
background-color: orange !important;
border-color: orange !important;
}
I have to append !important to every single line,
Could this operation be implemented in one place?
Rather than using !important, which is notoriously bad practice and makes your codebase almost unmaintainable, you should add specificity to your selectors instead. Prepending your selectors with body should product more specificity to your selectors:
body blockquote {
font-size: 14px;
}
body .pagination > .active > a {
background-color: orange;
border-color: orange;
}
MDN has a great article on CSS specificity, check it out.
It's also worth noting that you should include your own CSS files (or code) after any external CSS files to ensure that they cascade correctly.
Why aren't my hyperlinks changing colors or underlining? I have in my CSS in a standard VS 2010 site:
a:link, a:visited
{
color: #034af3;
outline: none;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
outline: none;
}
a:active
{
color: #034af3;
outline: none;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
What am I doing wrong? Am I in the wrong spot? Thanks!
First thing to do is rule out that there are no other style rules being applied later that override yours, or none earlier that are more specific (or use !important) which will not be overridden by your styles.
Also make sure your CSS is in the right place within the HTML.
Make sure there are no other elements, such as a span, within the link that might have styles applied to them which are overriding the a styles.
There are a multitude of other debugging steps to take, but I hope this gets you pointed in the right direction.
You have it set to not display any text-decoration on hover.
With Hover Decoration:
http://jsfiddle.net/KbZNb/
Without Hover Decoration:
http://jsfiddle.net/KbZNb/1/
It looks like it is changing color, but only slightly due to the color similarities of #1d60ff and #034af3
The colors are nearly the same that's why you didn't see the changes. Change the a:hover to #ff0000 and see the outcome
a:hover {color:#ff0000}
I have default properties defined for my links like this:
a{
color: blue;
}
a:hover{
color: red;
}
The problem is that I lose the all the hover properties when I do something like this:
#header a{
color: gray;
}
So to keep the hover working as I defined it before in the defaults, I'd have to declare it again:
#header a:hover{
color: red;
}
Is there any way to do this without loosing the original hover action defined?
Unfortunately, if you want it to work in all browsers, you'll have to override it.
a { color:blue; }
a:hover { color:red; }
#header a { color:grey; }
#header a:hover { color:red; }
Example.
Alternatively, you can make use of !important. Usually this is a sign that something weird is going on in your css, but this seems to be the only alternative to duplicating your css.
a { color:blue; }
a:hover { color:red !important; }
#header a:hover { color:red; }
Example.
You could also make use of a css compiler such as sass or less which would let you write it in a manor where you aren't duplicating effort - but that's beyond the scope of this question.
You're over-riding the styles with a cascade. Putting "#header a" gives that style more weight than the original style. You can over-ride it with a !important (although I wouldn't recommend it). Here's an article that explains this concept.
One way you can do this is to specify the default style as !important.
Using !important is usually a sure fire sign that your code can be improved however in this context, and without re-defining the styles, it seems like the best choice (best I know of right now).
a:hover{
color:blue !important;
}
Working Example
Also note that if you do go down the route of using the specific selector that you can combine both selectors together to reduce code duplication.
a:hover, #header a:hover{ color: red;}
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});
i have a a:hover for all my links on my page:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
thanks
Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
thanks for all the answers.
Rather than using id with css use Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important"..
So for your problem you can try:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
Link with reset
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
I think if you do the reverse of what Pranav said, you can have less modifications i,e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
</div>
</body>
</html>
As you can see, I'm defining the a style using the not selector. So, I'm saying that I want to put a green background and a red color to all the a that doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the style defined and Test 2, Test 4 and Test 6 will be normal, without the style.
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whatever if you want.
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
If you want only particular page, add
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}