News!! Take Away Underlining From Menu-Bar As Well As Post-Title Links

If y'all underline the links on your blog, too thus the page-links too post-titles are normally underlined too. But y'all tin dismiss plough underlining OFF for these items, too suit the spacing to brand them stand upward out.

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

I also fix them to live on underlined because ProBlogger underlines his links, too I gauge that he's done the inquiry too knows it's a expert matter to do.

 Also, I'm aware that colour-blind people sometimes abide by colour-only links hard to distinguish.


Changing the links was easy: I but added to a greater extent than or less CSS rules to my theme:

a:link {
text-decoration:underline;
}
a:visited {
text-decoration:underline;
}
a:hover {
text-decoration:underline;
}

The outset dominion underlines links that the reader hasn't visited yet.

The minute does links that they have visited.

And the 3rd says to decease along the underlining showing fifty-fifty when individual hovers their mouse over it.

But adding these rules had one ugly side effect: underlinig the links also underlined post-titles, too the things inward the menubar. This made the weblog await "clunky", thus I had to plough underlining off for for sure links.

How to take away underlining from to a greater extent than or less hyperlinks

Horizontal Tab / Menu bar

To plough off the underlining for the items inward the horizontal card bar (where people normally set a Pages or Labels gadget), add this CSS style:

.tabs-inner .widget li a
{
text-decoration: none !important;
}

Notice the !important inward that statement: roughly speaking, it says that fifty-fifty if a dominion elsewhere inward the weblog says to underline links, this dominion is to a greater extent than of import than that i too thus this dominion should live on followed.

Post titles

To plough off the underlining for the postal service titles, add this CSS rule:

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

Note that this fourth dimension I combined the didactics for both visited too un-visited links into the i CSS fashion rule. I didn't bother adding the !important (eg to arrive "text-decoration:none !important);" - but I would accept done if I'd constitute that the weblog wasn't displaying correctly.

Using spacing to brand postal service championship stand upward out

Looking at the postal service titles, I realised that they were a chip cramped. So I added a chip of blank infinite to them past times changing i slice 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 but adding a novel rule, I made the alter inward the subject myself. To produce this, I:

• Went to Theme > Edit HTML > 
• Downloaded a backup re-create of the theme,
• Used the search-tool inward my browser to find the code I wanted to change.

This wasn't quite equally tardily equally adding CSS through the Theme Designer > Advanced tool, but it way that the rules volition live on kept together too thus easer to alter inward future.

This was but a few small-scale alter to the margin - but it made a big divergence to the "look" of my posts.

---

Related Articles

Adding a new, or updated, CSS dominion to your blog

Centering the postal service championship inward your blog

Removing "Powered past times Blogger" from Designer-theme blogs

Planning changes to your weblog - inward private

Tweet

Subscribe to receive free email updates: