Links – no underline and change color

  • Resolved michelbenita

    (@michelbenita)


    8 years, 11 months ago

    Hi, I could find out how to stop links from being underlined (body and sidebar) using custom css, but I’d also like :

    – to change their color to have them more visible.
    – to keep the hover color but that the color doesn’t change when visited

    This is what I have now :

    .entry a {text-decoration:none;
    }
    .sidebar a {text-decoration:none;
    }

    Thanks !

Viewing 7 replies - 1 through 7 (of 7 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for choosing Ignite!

    Check out the following CSS:

    a {
  text-decoration: none;
}
a,
a:link,
a:visited,
.widget a,
.widget a:link,
.widget a:visited  {
  color: #43b3c4;
}
a:hover,
a:active,
a:focus,
.widget a:hover,
.widget a:active,
.widget a:focus  {
  color: red;
}

    The first part is going to remove the underline from the links. The next part will make the links blue by default (and after they have been visited). The last section will make the links red when they are hovered over or given keyboard focus.

    You can swap out the colors for your own using color keywords or hexadecimal codes.

    Thread Starter michelbenita

    (@michelbenita)

    Wow, that was fast ! Thanks a lot I’m gonna try it right away and let you know.

    Thread Starter michelbenita

    (@michelbenita)

    So it all works good except that when I visit a link, it keeps the hover color until I visit another link. I mean It reverts to its “normal” color right after I clicked another one.

    Thread Starter michelbenita

    (@michelbenita)

    website, btw :

    https://www.michelbenita.com

    Thanks !

    Theme Author Ben Sibley

    (@bensibley)

    Okay this can be fixed easily by removing the :focus selector like this:

    a:hover,
a:active,
.widget a:hover,
.widget a:active {
  color: red;
}

    When you click a link, it has the “focus” until the page is clicked anywhere else. With that CSS removed, the color will revert to the normal color right after you stop hovering.

    Thread Starter michelbenita

    (@michelbenita)

    Perfect ! Thanks, works like a charm.

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Links – no underline and change color’ is closed to new replies.