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'm trying to highlight this menu item so the user can see the page they are currently on. It can be bold or underlined, whatever really. If it can be done only using CSS that would be ideal.
here's what my inspect element looks like for the page :
Any help is much appreciated. Thanks!
It's just an example:
li.current-menu-item {
// Your style Below */
text-decoration: underline;
}
or
li.current-menu-item a {
/* Your style Below */
border-bottom: 1px solid #dd614a;
}
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
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 am trying to make a menu working as tabs. The tabs themselves are working fine and the menu links are great aswell.. But I'd like to remove the buttom border of the active tab, to make it look like you're on that actual page. I've tried using #id a:active but it seems to work only as long as I press the link. I've had the though about doing it by javascript aswell, but I can't seem to figure out a way to do it. Here's my css for active.
CSS: (please let me know if you'll need more of my css)
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Thanks,
/Pyracell
Add and remove a class when you select a tab link..
#navigation .active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
and use the script (jQuery version)
$(function(){
$('#navigation a').click(function(){
$('#navigation .active').removeClass('active'); // remove the class from the currently selected
$(this).addClass('active'); // add the class to the newly clicked link
});
});
From your demo link in the comments on another answer, JavaScript will not be of any help, it should be done in your PHP code.
Something in the lines of:
<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
TAB_NAME
</a>
Mentioning that changing tabs is redirecting to another page could have helped with better responses from the start xD
Depending on your code and how you are creating the tabs, you need to change the this_tab_is_selected to a code that returns true for the selected tab.
P.S. You still need to make the modification mentioned in the other answer in your CSS. (Which is to change #navigation a:active to #navigation a.active)
A crude way to do this with JavaScript (jQuery)
$('a[href]').each(function() {
if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
$(this).addClass('active');
});
How are you implementing the tabs; as multiple different HTML pages? The :active pseudo-class does indeed only apply when a link is 'active', which generally means 'being clicked on'. If you're implementing the tabs as multiple HTML pages, you'll probably want to assign a CSS class like "CurrentTab" to the tab representing the page the user is currently on, and apply your border-bottom-width:0px to that class.
the practice which is usually followed is to apply a class to your currently selected tab,e.g. class="selected" and then modify your css to target that class
#navigation a.selected
This is not how it works. The :active selector matches (as you noticed) a link that is currently getting clicked (= is active/working). What you want, is a selector for the active page. You will need to use a normal css class there, like this:
#navigation a:active, #navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Things like this need to be done with an if statement using code such as PHP.
For example if you click a link you get your new page, set a page variable, something like:
$page = "Home";
Then use an if statement to add or remove extra CSS classes/ids to chnage the style e.g.
if ($page == "home")
{
Home
About
}
else if ($page == "About")
{
Home
About
}
I'm a little late to the party, but I have a simple answer using css only. Give each page a unique id, give each menu item a unique id (or class in this case), style your links as you like for when you are not on the page, then style them as you want them if you are on the page. The css matches when you click on the menu item and it loads the page. So whatever page you are on, the menu item appears "active". Below I have it to where the current page menu button text changes color but you can use the visible property to show and hide images or use any css to style it. (Also in this example is css to change things on hover too.) In addition, this method allows you to write separate css for each menu button, so each menu button can do something different than the others if you wish.
#menu {
padding-top: .5em;
text-align: center;
font-family: 'Merriweather Sans';
font-size: 1.25em;
letter-spacing: 0;
font-weight: 300;
color: #003300;
}
#menu a {
text-decoration: none;
color: #003300;
}
#menu a:visited {
color: #003300;
}
#menu a:hover {
font-style: italic;
}
#home a.home,
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
font-weight: 800;
color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
font-style: normal;
}