How do I get an underline for links when I hover over them?

[darkaphasia]

I just upgraded to V5 and while I'm getting used to it, I'd like to know how I can get an underline for links when I hover over them?

[CheatAreZee]

Hi darkaphasia,

Visit your admin panel, then navigate to Themes > Advanced Styles & CSS. On the next page, click the "Style Sheet" tab and around line 106 look for the following:

@link_hover_decoration: @link_decoration;

Change this to:

@link_hover_decoration: underline;

Save the changes, and from that point forward links should be underlined when you mouse over them

[musicadmin]

What if I want to change the default appearance of links ONLY IN POSTS to blue and underlined?

Right now I've managed to make all links underlined, but this applies to links everywhere, not only in the text of posts.

[Brian]

musicadmin, you can add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet to underline links only in posts and PMs.

.posts .post .message a,
.messages .item .message a { text-decoration: underline; }

[musicadmin]

Great! I also figured out how to make then blue using:

.posts .post .message a,
.messages .item .message a { text-decoration: underline;
color: #0000FF;}



Now, how can I change the rollover color and previously clicked link color?

[Brian]

A simply modification to the original CSS: adding the :hover pseudo-class as a new CSS declaration.

.posts .post .message a,
.messages .item .message a { text-decoration: underline;
color: #0000FF; }
.posts .post .message a:hover,
.messages .item .message a:hover { text-decoration: underline;
color: #0000FF; }

[musicadmin]

Just in case someone else is curious about this stuff, here's what I ended up with. 


.posts .post .message a,
.messages .item .message a { text-decoration: underline; color: #000080;}

.posts .post .message a:hover,
.messages .item .message a:hover { text-decoration: underline;
color: #0000FF; }

.posts .post .message a:visited,
.messages .item .message a:visited { text-decoration: underline;
color: #800080; }

.posts .post .message a:visited:hover,
.messages .item .message a:visited:hover { text-decoration: underline;
color: #0000FF; }
Using this, in posts/PMs links appear navy and underlined, visited links are underlined and purple, and both unvisited and visited links turn blue when hovered over. 

I also applied what the original poster asked about, so links everywhere else but posts/PMs appear as normal text, but are underline when hovered over.



Thanks for the help!    

[Shrike]

Apr 16, 2013 11:56:39 GMT -8 musicadmin said:

Just in case someone else is curious about this stuff, here's what I ended up with. 


.posts .post .message a,
.messages .item .message a { text-decoration: underline; color: #000080;}

.posts .post .message a:hover,
.messages .item .message a:hover { text-decoration: underline;
color: #0000FF; }

.posts .post .message a:visited,
.messages .item .message a:visited { text-decoration: underline;
color: #800080; }

.posts .post .message a:visited:hover,
.messages .item .message a:visited:hover { text-decoration: underline;
color: #0000FF; }
Using this, in posts/PMs links appear navy and underlined, visited links are underlined and purple, and both unvisited and visited links turn blue when hovered over. 

I also applied what the original poster asked about, so links everywhere else but posts/PMs appear as normal text, but are underline when hovered over.



Thanks for the help!    

One quick hint: if you move the a:hover block of code to be after the a:visited one, you can remove the redundant a:visited:hover as :hover will take precedence when they are in that order.