Links
On your default WP install, links in your posts appear a green/grey colour and are underlined. They also change colour slightly when hovered. This behaviour applies to most links anywhere in your weblog, and you may well want to change it. Here's how.
Now before you start, think for a moment about how you want your links to look to your visitors. If you have a large site, then the colour of a link that your visitor has already seen is quite important. It can help them to navigate through your site if a visited link looks different to one they have not yet been to. On your average weblog, it's no huge deal, but if your site begins to grow, it can become important. Anyway ....
To do this, we need to create some link classes, and then change our code.
Right at the top of your wp-layout.css is the CSS that curretly has control.
a {
color: #675;
}
a img {
border: none;
}
a:visited {
color: #342;
}
a:hover {
color: #9a8;
}
Ignore the line with the 'img' in (that just stops all images having borders if they are links).
Now don't go getting rid of this part above! If nothing else, it's your backup, and if it's not used, it's not exactly taking up a lot of space.
So let's create a link that will be bright green, and go dark green when hovered.
Copy the above section into a text editor (like Notepad).
Edit out the 'a img {border: none;}' line.
You should be looking at this;
a {
color: #675;
}
a:visited {
color: #342;
}
a:hover {
color: #9a8;
}
Now we add our first 'class'.
Alter the above lines so they look like this;
a.green {
color: #00ff00;
}
a.green:visited {
color: #669933;
}
a.green:hover {
color: #669933;
}
Paste that into your 'wp-layout.css' - it doesn't matter where, but close to the other similar links is good. Now that will colour links bright green, visited links will be a darker green, and hovered links will also be a darker green.....but only if we tell the code the right thing.
A link normally looks like this;
<a href="http://www.wordpress.org">WordPress</a>
but if we want to use our new colours, we need to add the 'class';
<a class="green" href="http://www.wordpress.org">WordPress</a>
You can add as many classes as you want - just change the colours and change the class name (which as you have seen is the word between 'a.' and ':link').
If you have these classes, and you forget to add a class to the href, it will look like a default link. Just edit your post.