Solved

Change Class of Link on Current Wordpress Page

Posted on 2014-02-17
6
557 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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)

737 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