Link Colour

  • andy29023

    (@andy29023)


    9 years, 1 month ago

    Hi

    Probably quite a straight forward one but I’ve created a link on my home page which is http://www.clientshark.com…

    “Take a look at OUR WORK or we would love to hear from you below…:)”

    The linke being “OUR WORK” and when the link is inactive i want it to be white as the rest of the text is, then blue when the user hovers. After googling i found some custome CSS…

    a:link {color:#FFFFFF;} /* unvisited link */
    a:visited {color:#FFFFFF;} /* visited link */

    This has worked for desktop but when i view on tablet/smartphone the hover colour is blue but the link is grey. Ive tried every typography colour setting in the theme options but none seem to relate to the inactive link

    Any help appreciated

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 1 month ago

    Hover isn’t at thing on phones. You can try the pseudo-selectors :focus and :active

    Thread Starter andy29023

    (@andy29023)

    9 years, 1 month ago

    Thanks, how would that look in code?

    Sorry my HTML is limited…

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    9 years, 1 month ago

    I think this will do it:

    span.s1 a, span.s1 a:visited {
   color: #fff;
}
span.s1 a:hover, span.s1 a:focus, span.s1 a:active {
   color: #5ac2db;
}

    To add CSS:

    • If you are using WordPress 4.7, use the “Additional CSS” option in the customizer.
    • If your theme has a custom CSS option, use that to add the CSS shown above.
    • If not, install the plugin Simple Custom CSS.

    Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Link Colour’ is closed to new replies.