Solved

Change Class of Link on Current Wordpress Page

Posted on 2014-02-17
6
558 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

632 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