As I have redesigned/tweaked each site this summer, I’ve tried to make notes of things I’ve done that were behind the scenes in case some of you would like to do it, but don’t know how.  One thing I seem to do to almost all of my sites is adjust the colors of links.  See with entering contests and such, I frequently create posts with lots of links, but I don’t want them all showing up in these pretty colors.  So I always go edit my theme so that links just show up as normal black font and then I manually color the ones that I want to be different.  So how do I do this?

Note: Instructions are for WordPress 3.0 and while I don’t think the process will change, please note an instruction or two might be different in future versions.

The first thing you’ll need to do is login to WordPress and go to “Editor” under Appearance.

This will normally open you right up to the correct sheet, but you need to make sure that you are editing your Stylesheet (typically called style.css).  Your list of files are on the right side of your screen.

The next step is VERY important.  Please copy and paste this entire file into Notepad before you begin editing.  This is so that if anything goes wrong, you can always restore the file back to its original form.

After you have a copy of the original file, you can start editing.  You are going to look for the following code inside your Stylesheet:

a {       Instead of just a{, you may have “a:link{“

text-decoration: none;

color: #FF33FF;

}

The code under a { might be slightly different but the key is that you are looking for “color:”  This is the color of hyperlinks in your posts.  Mine is currently set at a Pink color, but I want it to be black and just blend in with the rest of my posts right?   You can change yours to any color, not just black. Maybe you still want yours to stand out, but just not be the color it is? That’s fine too.

But wait? How does FF33FF mean pink? Ahh…good question. This is called the Hexadecimal code for pink. So how do you find the code for the color you want? Well if you want standard black, I’ll give you that code. It’s 000000.  Yep, just 6 zeroes. But if you are wanting another color, then just google “HTML Color Codes” and you’ll find plenty of sites that will give you lots of choices. So my new code is going to look like this:

a {

text-decoration: none;

color: #000000;

}

If that is all you wanted to do, stop here.  I’m going to include a few other little tidbits in case you want some other tidbits of knowledge.

What does text-decoration mean? That simply means do you want links to be underlined?  My current setting is that I don’t want links to look any different than any other word in my post (My links will have no “decoration” and they will be black), but if you want yours to be underlined, you would just change none; to underline;  As a side note, you can assign links to have a line through them or over them (overline; line-through;).

How about those other sets of code that start with a like a:hover{, and a:visited{? (Actually there are even more in some themes, but these are the most common.)  A: hover refers to how the link will behave when someone holds their mouse over the link (but doesn’t click).  A:visited refers to what color the link will be if someone has already visited that link.

Hope this helps you, and if you have any requests for future WordPress tutorials, just give me a shout.  If they are generic (not theme specific) and I can figure it out, I’d be super glad to write directions.

Look for my other tutorials and How to Insert a “Grab My Button” box or How to Create a Scrolling Text Box.