Weblink color – changing from black to blue using HTML?

  • Unknown's avatar
    journeyingthroughthebible · Member ·

    Hi How can I make my weblinks blue. Currently (on Twenty Seventeen theme) they appear black and underlined.
    By way of example, this is a real example I have tried:
    <p style="margin-top:-25px;font-size:8px;text-align:right; ">Image adapted from <span style="color: rgb(0,0,255)"><a href="https://en.wikipedia.org/wiki/File:Chateau_Wood_Ypres_1917.jpg">image</span></a> on Wikimedia</p>
    But the span style to make the link blue does not work. What can I do to make the link (but only the link, and not the surrounding text) blue?
    Many thanks, Rob

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    floflo56 · Member ·

    Hi there,

    The best way to change the style of an element on your website is using CSS.
    Here is some information about CSS : https://en.support.wordpress.com/custom-css/

    If you are on a Premium or a Business plan, you can add your own custom CSS.

    Here is how to access the CSS customizer :https://en.support.wordpress.com/custom-design/editing-css/

    Once you find your way through the customizer, you can add this code :

    a {
color:blue;
}

    the “a” will select all the links on your website and the “color:blue” will change them in blue.
    Be aware that with this command, all the links on your website will be blue.

    I hope this will help.

  • Unknown's avatar
    journeyingthroughthebible · Member ·

    Hi Thanks for this, it worked great. However, I noticed that the underline that automatically appears under the link is still in black – is this also changeable to blue?
    Rob

  • Unknown's avatar
    floflo56 · Member ·

    Hi Rob,

    You can change the underline color by changing the previous code to : 

    #main a {
   color:blue;
   box-shadow:none;
   text-decoration: underline;
}

    We don’t want the links in the header to have an underline so we need to be more specific on the element we want to underline, that’s why I used the “#main“, which will just select the links in the main content area.

    As the initial black underline was actually a box shadow, this code will disable the box shadow and the “text-decoration” command will add a proper underline with the same color as the text.

    I hope this will help having the design you want. Let me know if it works as you wished. :)

    Florent

  • Unknown's avatar
    floflo56 · Member ·

    My apologies, after my post, I just realised that it also changes the social media buttons color.
    You can try with this code : 

    #main p a {
   color:blue;
   box-shadow:none;
   text-decoration: underline;
}

    The “p” will just select the paragraph content.

  • Unknown's avatar
    journeyingthroughthebible · Member ·

    Hi floflo56
    This works perfectly – the links stand out better when the underline is also blue. Thank you for this solution, I really appreciate this. Rob

  • The topic ‘Weblink color – changing from black to blue using HTML?’ is closed to new replies.