Underlining links
I also set them to be underlined because ProBlogger underlines his links, and I guess that he's done the research and knows it's a good thing to do.
Also, I'm aware that colour-blind people sometimes find colour-only links difficult to distinguish.
Changing the links was easy: I just added some CSS rules to my template:
a:link {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
}
a:hover {
text-decoration:underline;
}
The first rule underlines links that the reader hasn't visited yet.
The second does links that they have visited.
And the third says to keep the underlining showing even when someone hovers their mouse over it.
But adding these rules had one ugly side effect: underlinig the links also underlined post-titles, and the things in the menubar. This made the blog look "clunky", so I had to turn underlining off for certain links.
How to remove underlining from some hyperlinks
Horizontal Tab / Menu bar
To turn off the underlining for the items in the horizontal menu bar (where people usually put a Pages or Labels gadget), add this CSS style:.tabs-inner .widget li a
{
text-decoration: none !important;
}
Notice the !important in that statement: roughly speaking, it says that even if a rule elsewhere in the blog says to underline links, this rule is more important than that one and so this rule should be followed.
Post titles
To turn off the underlining for the post titles, add this CSS rule:Note that this time I combined the instruction for both visited and un-visited links into the one CSS style rule. I didn't bother adding the !important (eg to make it "text-decoration:none !important);" - but I would have done if I'd found that the blog wasn't displaying correctly.h3.post-title a,
h3.post-title a:visited
{
text-decoration:none;
}
Using spacing to make post title stand out
Looking at the post titles, I realised that they were a bit cramped. So I added a bit of blank space to them by changing one piece of code, from:
h3.post-title{to
font: $(post.title.font);
margin: 0 0 0;
text-align: left;
text-decoration: none;
}
h3.post-title{
font: $(post.title.font);
margin: 0 0 10px 0;
text-align: left;
text-decoration: none;
}
This time, instead of just adding a new rule, I made the change in the template myself. To do this, I:
- Went to Template > Edit HTML > Proceed
- Downloaded a backup copy of the template,
- Used the search-tool in my browser to find the code I wanted to change.
This wasn't quite as easy as adding CSS through the Template Designer > Advanced tool, but it means that the rules will be kept together and so easer to change in future.
This was just a few small change to the margin - but it made a big difference to the "look" of my posts.
Related Articles
Adding a new, or updated, CSS rule to your blog
Centering the post title in your blog
Removing "Powered by Blogger" from Designer-template blogs
Planning changes to your blog - in private
