I'm trying to apply a specific color (green) on my sub-menu items when user is on the page of this specific item.
The problem is :
-All my menu items needs to be set to base color (ocher)
.header_menu {
text-decoration: none;
color: var(--lightocher);}
-So all anchors are set to same color for keeping them ocher even if visited.
.header_menu a:visited {
color: var(--lightocher);}
-So my green can't pass because he is overwritted by :visited color
.current_page_item, .current-menu-item, .current-menu-parent {
color: var(--green);}
How can I deal with this ?
Try to add also a more specific setting:
a.current-menu-parent:visited, a.current-menu-item:visited {
color: var(--green);
}
You could also add !important to the rule even though its not very good to add it in specificity context.
current-menu-parent:visited, current-menu-item:visited {
color: var(--green) !important;
}
Related
I am trying to change the colour of the font which appears in images in gallery pages such as this page on the site.
I would like to change the text below each image (such a Trail Necklace 111) from #666666 to #007faa.
I used the web inspector to identify that this is an H4 tag in a div class called portfoliotitle_3
It is also a link so altogether I've updated the following parts of the CSS, saved the CSS and refreshed the page a few times but the text colour doesn't change.
#contentwide .portfoliotitle h4 {
color: #007faa;
}
.portfoliotitle a,
.portfoliotitle a:visited {
color: #007faa;
}
#contentwide .portfoliotitle_3 h4 {
color: #007faa;
}
.portfoliotitle_3 a,
.portfoliotitle_3 a:visited {
color: #007faa !important;
}
.portfoliotitle_3 a:hover {
color: #007faa;
text-decoration: none !important;
}
I must be missing something very basic and if anyone can take a fresh look and give me some pointers, that would be very appreciated.
Many thanks
i think Thats because the page load style.css of the page after each reload
It's because of an anchor tag that has some important in color.. so you should probably change the anchor tag to change the color.
.portfoliotitle_3 a, .portfoliotitle_3 a:visited {
color:#007faa !important
}
Cascading is apply for the element a. You can delete this code in internal css style element.
.portfoliotitle_3 a, .portfoliotitle_3 a:visited {
color: rgb(85, 212, 255) !important;
}
I am trying to change the color of the Wordpress Download Manager (WPDownloadManager) plugin's link-template-button.
It doesn't seem to have it's own color style for the colored button, which is problematic, since it uses the primary link color of the rest of the site.
The primary link color of the site has a red-ish color, while my download button is blue.
I want the download-button text to be white (to achieve white on blue) instead of the current red on blue.
These are the css-classes used by the button: wpdm-download-link wpdm-download-locked btn btn-primary
I tried to add CSS additions as follows (none of which are working):
.wpdm-download-link.wpdm-download-locked.btn.btn-primary a:link {
color: #ffffff;
}
.wpdm-download-link a:link {
color: #ffffff;
}
a.wpdm-download-link:link {
color: #ffffff;
}
...and other combinations of of these classes.
I also tried for a:visited, a:hoover etc.
I found that the set primary link color you select on the Customize > Colours > Primary Link Color uses a #content attribute, so in order to change the color for all WPDownloadManager, you need to add Additional CSS like so:
#content a.wpdm-download-link {
color: #ffffff;
}
or if you want different colors/styles e.g for link and hover:
#content a.wpdm-download-link:link {
color: #ffffff;
}
#content a.wpdm-download-link:hover {
color: #aaffaa;
}
I am using Wordpress and have the following code to style my menu items
css (the attributes I'm looking to change)
.main-nav li a {
color: #222;
}
.main-nav li a:after {
background-color: #d11e5d;
}
I have applied a custom class .btn-contact on one of the buttons so I can override its color and other attributes but I can't seem to target it. (using .btn-contact { color: red; } or .btn-contact { color: red !important; } doesn't work )
the output
Just add
.btn-contact {
color: red !important;
}
The !important should override every other value for the same property.
I don't know what the :after element is there for, but you need add the content property inside the rule, otherwise it will not render. You can also use en empty string like content: "".
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}
please consider these styles:
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }
And now this markup:
Normal link
Special link
I expect the "special" link to be pink while keeping the other colors. However, pink replaces the other colors.
Why is this happening? How could I fix it? Thank you.
Its aggravating...and order matters here:
a:hover{
color:green;
}
a:visited{
color:red;
}
This means that unvisited links will turn green when you hover over them, and visited links will stay red when you hover on them.
Switch:
a:visited{
color:red;
}
a:hover{
color:green;
}
This means that both visited links and unvisited links will turn green when you hover on them. I hate that the order of these properties changes the behavior; the hover style should take effect regardless.
a:link{
color:blue;
}
a.one:hover{
color:green;
}
a.one:visited{
color:red;
}
a.two:visited{
color:red;
}
a.two:hover{
color:green;
}
<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>
I believe it has to do with CSS priority order.
Because #special is an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID's style).
Though, considering there is no "present style" applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:
a:hover { color: green !important; }
Why is this happening?
Styles for the :link pseudo-class apply to all links states, so it includes :hover, :visited and :active
This is what I have observed since I started using CSS years ago. I don't know if it's how it is supposed to work but it is how I have seen it working and expect it to work.
So when, you set a style for #special:link, that style also applies to #special:hover, #special:visited and #special:active
Note that the use of an ID does not change much here.
If you try it with the below CSS, you will have both links pink... even for :hover state
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }
How could I fix it?
You can use !important as suggested by Brad or set the various states styles for #special together with the regular links.
a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }
Here is another quick way around:
You can use :not(:hover).
#special:link:not(:hover) { color: pink }
DEMO
No, it is not going to use the other colors because of its ID, in such case you should add the rest of actions and colors to the ID.
For example, the link that you have, the "special" one, when over will say.
Ok, I'm 'a' ... link ... and my ID is .. special, so, I will keep the special parameters.
That's why that's not going to change.
Hope this helps,