Solved

Change Class of Link on Current Wordpress Page

Posted on 2014-02-17
6
550 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
coldfusion grab more the one form field to make an insert 3 29
html input type 3 22
Remove lines by logo 2 23
manage footer size 4 11
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now