Remove underlining from menu-bar and post-title links

If you underline the links on your blog, then the page-links and post-titles are usually underlined too. But you can turn underlining OFF for these items, and adjust the spacing to make them stand out.

Underlining links

Recently, I made all the links on Blogger-Hints-and-Tisp blue, because "everybody" knows that real hyperlinks are "always" blue.

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:

h3.post-title a,
h3.post-title a:visited
{
text-decoration:none;
}

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.

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{
font: $(post.title.font);
margin: 0 0 0;
text-align: left;
text-decoration: none;
}

to

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