HowTo – WordPress Change links color throughout site

Filed under: CSS,Wordpress Tips

Question
I want to make sure all my links within the site are all the same color but I don’t know how to do that except by going page by page. I believe there must be an easier way.
Any help will be appreciated!
Thanks

Answer
This is a very common question but the answer can be complex.
To change the links in your website you must first realize that there are a variety of locations that are styled differently and must be accounted for within your theme.

The simple answer is to modify your styles.css file by finding every A anchor element and modifying the color.

The fastest way to do this is to override your colors throughout your website but you will probably find this is not what you want.

To override all your link colors place the following code at the top of your styles.css file


a {color:#123456 !important}
a.hover {color:#654321 !important}
a.visited {color:#abcdef !important}
a.active {color:#fedcba !important}

!important will override all A anchor settings throughout the site.

You will need to clear your browser cache and possibly your server cache to see the results.

Now that you know what links to look for in your styles.css file you can work through your css and find all of the A anchors and their appropriate settings and change them individually.

This can take a little time

look for settings like

#topmenu A {color:#123456}

Tools like Firefox Firebug can help in tracking down CSS settings you want to change.