Recently, I made all the links on Blogger-Hints-and-Tisp blue, because "everybody" knows that existent hyperlinks are "always" blue.
I also create them to alive on underlined because ProBlogger underlines his links, also I guess that he's done the question also knows it's a skillful affair to do.
Also, I'm aware that colour-blind people sometimes abide past times colour-only links difficult 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 kickoff govern underlines links that the reader hasn't visited yet.
The infinitesimal does links that they have visited.
And the third says to death along the underlining showing level when private hovers their mouse over it.
But adding these rules had one ugly side effect: underlinig the links also underlined post-titles, also the things inward the menubar. This made the weblog await "clunky", hence I had to plow underlining off for sure enough links.
How to bring away underlining from to a greater extent than or less hyperlinks
Horizontal Tab / Menu bar
To plow off the underlining for the items inward the horizontal card bar (where people usually fix 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 level if a govern elsewhere inward the weblog says to underline links, this govern is to a greater extent than of import than that i also hence this govern should alive on followed.
Post titles
To plow off the underlining for the post service titles, add this CSS rule:Note that this 4th dimension I combined the pedagogy for both visited also un-visited links into the i CSS fashion rule. I didn't bother adding the !important (eg to construct it "text-decoration:none !important);" - but I would bring done if I'd found that the weblog wasn't displaying correctly.h3.post-title a,
h3.post-title a:visited
{
text-decoration:none;
}
Using spacing to construct post service entitle stand upwardly upward out
Looking at the post service titles, I realised that they were a fight cramped. So I added a fight of blank interplanetary space to them past times times changing i while 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 but adding a novel rule, I made the alter inward the dependent area myself. To hit this, I:
- Went to Theme > Edit HTML >
- Downloaded a backup simulate of the theme,
- Used the search-tool inward my browser to find the code I wanted to change.
This wasn't quite as tardily as adding CSS through the Theme Designer > Advanced tool, but it agency that the rules testament alive on kept together also hence easer to alter inward future.
This was but a few small-scale alter to the margin - but it made a big departure to the "look" of my posts.
Related Articles
Adding a new, or updated, CSS govern to your blogCentering the post service entitle inward your blog
Removing "Powered past times times Blogger" from Designer-theme blogs
Planning changes to your weblog - inward private