Remove Underline Below Text Links

In some templates, the text links are underlined. This distinguishes the hyperlinks from the normal text. If you don't like that, you can remove the underlines. You can also modify the template to have underlines only in the main posts and not in the sidebar or vice-versa. This tutorial will show you how it can be done.





When you are at Template -> Edit HTML, the link styles are found here:-

a:link { }
a:visited { }
a:hover { }
a:active { }

a:link tells the browser how links should appear.


a:visited shows the style for links that have been clicked or visited.


a:hover is the link style you would see when the cursor or mouse moves over the links.


a:active defines the style to an activated element.

Remove Underlines in the entire Blog:

             To have all the underlines removed, scroll to these lines:-

a:link {

text-decoration:underline;

}

a:visited {

text-decoration:underline;

}

a:hover {

text-decoration:underline;

}

Change the text-decoration style to this:-

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



Should you want to keep the underlines for visited links or hover effects, retain the underline attribute under a:visited and a:hover accordingly.

Link Underlines in Blog Posts only:

               The above sets the style for the entire blog. You may prefer to have underlines for the links under the Blog Posts only and not for links in the sidebars. After setting the default text-decoration to “none” as shown above, insert this other style definition just for the links in the Blog Posts:-

.post a:link {

text-decoration:underline;

}

Preview the template and Save if you see the underlines below the Blog Posts links.

Note that the underlines will appear in the Blog Posts section, and that includes the Post Title and Footer links. In case you don't want that, and would like the underlines only in the Post content, you can insert this code instead:-


.post-body a:link {
text-decoration:underline;
}

Link Underlines in Sidebars only:

               Similarly, after setting the default link style to show no underlines, to reinstate the link underlines only for the Sidebars, insert this additional style:-

.sidebar a:link {

text-decoration:underline;

}

Preview and Save the template. Refresh your Blog page to see the underlines below the Sidebar links