BulletProof Security Blog

The orginal question was regarding changing the CSS link colors in WordPress and specifically about the Active link state color with CSS.

First off this is a common thing that throws people off. The a in a:active stands for anchor – links are categorized under the Anchor Pseudo-classes in CSS.

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

ADDITIONAL INFO ADDED:
whoops you were asking about the top navigational links. I went sidebar nav happy with my explanation.

Same principle applies, but just to different CSS code in your Theme’s style.css file.

#top_menu ul li a, #top_menu ul li a:visited{color:#010DA3;text-decoration:…

>>> this is CSS code for a hover image with opacity instead of just changing to a different font color on link hover.

#top_menu ul li a:hover{background-image:url(images/top_… #333333;Filter: Alpha(Opacity=100, FinishOpacity=60, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);text-decoration:none;margin:0… 6px 0px 6px;padding:15px 3px 14px 3px;border:ridge 1px #1f4676;}

PERTAINS TO SIDEBAR NAV LINKS NOT TOP NAV MENU LINKS:

Now most likely your nav links are going to be ul li which stands for unordered list and list item respectively.

So the CSS you are going to be modifying will look something like this as an example.

#sidebar ul li a, #sidebar2 ul li a{ /* controls the sidebar link active font color, etc.*/
list-style-type: none;
list-style-image: none;
color:#526e10;
font-size:13px; /* controls the size of the sidebar font individually - hover is line 437 */
font-weight:bold;
margin-bottom: 30px;
}

Line 437 of my CSS style sheet - just for reference
#sidebar ul li a:hover{text-decoration:underline;color:…

Anyway for anyone who was looking for the answer on the easiest way to find what CSS code you will be looking for in your WordPress Theme’s style.css file, then open your particular WordPress Theme’s style.css file and also open another browser window, launch your website, right mouse click on your website’s page anywhere (well just about anywhere 😉 ), click View Source from the shortcut menu that pops up so you can look at the source code of your WordPress website. You will be able to see the CSS div and class names that you will be looking for in your Theme’s style.css file.

When I right mouse click to view my source code what I will be looking to modify my nav links CSS properties is “Products & Services” because that is the beginning of the section of my website that is the start of the nav sidebar. My sidebar nav links just happen to have the div name of sidebar. Your sidebar nav links could be named something else. Also you have a search feature when you are viewing your source code to make finding the section of code you want to look at quicker. In Internet Explorer you click on the Edit menu and then click Find. Type in the name of the text that comes at the beginning of the start of your sidebar nav links to find the section of source code you want to look at to get your CSS div and class names quicker.

<div id="main">
<div id="main_left">
<div id="block_sidebar">
<div id="sidebar" >
<ul><li id="categories-3"><h2>Products & Services</h2>

Hope that helps. Good Luck!

Tags: WordPress CSS Link Colors, WordPress CSS Links

Categories: Wordpress Tips - Tricks - Fixes