Solved

Change Class of Link on Current Wordpress Page

Posted on 2014-02-17
6
554 Views
Last Modified: 2014-02-17
I am trying to make the page link a different color for the current page in Wordpress. I changed the CSS as follows:
#palinks .current_page_item a, #palinks .current_page_item a:link, #palinks .current_page_item a:hover { color: #333333; text-decoration: none; }

Open in new window

.

This works for the hover state but not the active link. You can view http://irawaynehenry.com/plymaledingus/injury-law/brain-injuries/ as an example. If you hover over the Brain Injury Attorneys Link on the left side of the page you will see that one follows the style as assigned above, but the active link is no different than the rest.

The HTML for the link is as follows.
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-56 current_page_item menu-item-69"><a href="http://irawaynehenry.com/plymaledingus/injury-law/brain-injuries/">Brain Injury Attorneys</a></li>

Open in new window


Thanks in advance for the help.
0
Comment
Question by:wayne_henry
  • 3
  • 3
6 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39866288
Your CSS for #palinks is on line 89 of your style.css but it's being overridden by the rule on line 107:

#conentWrapper a:link, #conentWrapper a:visited {
    color: #BC6700;
    text-decoration: none;
}

You can either move your CSS around, or force your #palinks colour to take effect with the !important keyword:

#palinks .current_page_item a, #palinks .current_page_item a:link, #palinks .current_page_item a:hover {
    color: #333333 !important;
    text-decoration: none;
}
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39866315
Actually, scratch that previous comment. It's because the visited pseudo link is taking precedence. Add that to your new css and it'll be fine:

#palinks .current_page_item a, #palinks .current_page_item a:link, #palinks .current_page_item a:hover, #palinks .current_page_item a:visited {
   ...
}

Open in new window

0
 

Author Comment

by:wayne_henry
ID: 39866317
Worked perfectly. So that I understand why this must be, what determines which style takes precedent or why !important must be used in some cases and not others?
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Closing Comment

by:wayne_henry
ID: 39866322
Thank you very much! It's amazing how long you can stare at something for so long and not be able to figure it out.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39866353
CSS takes a few things into account when deciding which styles are important. Normally, it works from the top, down, so rules that appear later in a file are applied last, so here:

a { color: green; }
a { color: red; }

Your links would be red. This only applies if the selectors have the same specificity!

Basically it goes like this. An HTML element carries a certain specificity value, a class carries a higher value and an ID carries an even higher value. For ease of explanation lets assume values of 1, 10 and 100 respectfully (they're made up, by the way).

Look at this example:

a#myLink { color: green; }
a.someLink { color: red; }
a { color: blue; }

<a href='#' id="myLink" class="someLink">A Link</a>

Now obviously, all three styles could apply, but apply the rules of specificity and you'll see that the first one has a value of 101 (element + ID), the second one as a value of 11 (element + class) and the last one has a value of 1 (an element), so the link would be Green :)

You can override this by adding the !important keyword to a style, which will push it to the top of the specificity

a#myLink { color: green; }
a.someLink { color: red !important; }
a { color: blue; }

Now the link will be Red!

It's not a good idea to start throwing the !important keyword around because it get's very difficult to override styles further down your CSS, which defeats the whole point of the Cascading.

In the posts I made earlier, you should go with the second option (the visited link pseudo) rather than the !important keyword.

Takes some getting used to so you might want to Google it to find out more.
0
 

Author Comment

by:wayne_henry
ID: 39866432
Thank you very much for the detailed response. That is very helpful.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question