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;
}
Related
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;
}
I've got a CSS prob i'd love some help with.
My site (www.melodylakerart.com) has a 'Read More' link in its cookie notice bar (to the right of the privacy notice).
The 'read more' link is currently only visible on mouse over. Since the cookie bar is black I therefore assume the link text is black untill mouseover
I just want to make the text a colour other than black so you can see the link without having to mouseover. I've tried the below CSS with no luck. Can anyone help?
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4 !important;}
.cn-privacy-policy-link {color: #feb8b4;}
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4;}
Link color can be changed via a:link or under a specific class
.cn-privacy-policy-link a:link
for example:
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
}
a:active {
color: black;
}
a:hover{
color: #bada55;
}
.test a:link{
color: yellow;
}
Example
<div class="test">Yellow link</div>
You can also change the link color on hover by a:hover or the link color after being clicked by a:visited or while being clicked with a:active
The problem is that you have this:
input[type="submit"], button, .button {... color: #000000!important; ...}
And that is the classic reason why !important is a bad practice.
If all other parts work as expected, you need to trigger one of the element's classes. For instance: cn-privacy-policy-link {color: #feb8b4!important;} will work.
First time post, bit of a n00b...
Working on a WordPress site for a client. The following piece of CSS is used to style all hyperlinks within the post_content section of a page a dark blue color (#2a5db0).
section.post_content a {
color: #2a5db0;
}
a:hover {
color: #2a5db0;
text-decoration: underline;
}
However, buttons on the site are also styled to a dark blue color, making any button hyperlinks almost unreadable.
Essentially I want to exclude any hyperlinks enclosed within <button> tags from the above rule. What piece of CSS can I write to ensure that hyperlink text on buttons is displayed in white (#fff) but all other hyperlinks within the post_content section are styled #2a5db0 as per the above rule?
Thanks!
Though slow, this should work:
section.post_content *:not(button) > a {
color: #2a5db0;
}
But your last paragraph seems to suggest that you want this:
section.post_content a {
color: #2a5db0;
}
section.post_content button > a {
color: white;
}
You can target hyperlinks within a button tag like so:
This will target links within a button tag:
section.post_content button > a {
color: #fff;
}
Or
This will target the button text colour:
section.post_content button {
color: #fff;
}
CSS3 offers the new ::selection filter, which lets you change the color of highlighted text.
::selection {
color: #34495E;
}
However, sometimes the selection color contrasts badly with the default link color. I'd like to change the link color for highlighted text. I tried this:
::selection a {
color: #222;
}
However this had no effect on the link color (in Chrome at least)
Is it possible to change the link color of selected text?
Yes, it is possible to change the color of individual elements on selection. The correct syntax is, for example:
// Applied to the entire document
::selection,
::-moz-selection {
background-color: yellow;
color: red;
}
// Applied only to <a> elements
a::selection,
a::-moz-selection
background-color: green;
color: white;
}
Remember to include the vendor specific prefix in your CSS for Mozilla.
I have an aspx page with a Masterpage containing a panel with a CssClass of menutoolbar. Within that panel I am placing objects, in this case a linkbutton with a class of SearchLink.
In my Stylesheet, I am defining
.menutoolbar a:hover { color: red }
.Searchlink a:hover { color: yellow }
When I hover over the Searchlink link it is red! This is not what I expect, the Searchlink specifically is defined as yellow, it looks like the parent container menutoolbar is overriding the color, reverse of what I would expect.
How can I make the hover effect yellow for Searchlink?
a.Searchlink:hover { color: yellow }
try doing:
.Searchlink a:hover { color: yellow!important; }
if the link class is "searchlink" you could try
a.Searchlink:hover { color: yellow; }
Alternatively you can be more specific with the rule, e.g.
a.Searchlink:hover { color: yellow;}
Or something like that.