[Support request] Different Colors For Links

Home Forums Support [Support request] Different Colors For Links

Home Forums Support Different Colors For Links

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2449699
    Jodie

    Hi,

    I’d like to have some of the links on my site (the important ones) a different color to the rest of the links.

    What’s the best way to do this please?

    Thanks for your help!

    Cheers Jodie

    #2449753
    Fernando
    Customer Support

    Hi Jodie,

    For reference, can you give a couple of examples of “important” links you wish to alter the color of?

    The best way I’m thinking right now is through custom CSS targeting a specific custom class.

    #2449794
    Jodie

    Hi Fernando
    Thank you.
    Sure thing. I’ve attached some examples.

    #2449820
    Fernando
    Customer Support

    I see. If that’s the case, can you try using the Highlight feature of WordPress? Example: https://share.getcloudapp.com/p9uLzqRj

    #2449829
    Jodie

    Thanks so much Fernando

    I’ve had a go at using that feature but the underline color of green and hover color of purple are the same as our current link styles.
    Is there any way to change the underline color and hover color of the underline for the links we choose to be another color?
    I’ve attached a screenshot
    As always I appreciate your help.

    #2449853
    Fernando
    Customer Support

    I see. There’s a way.

    We can you the “highlight” feature as a determinant of “important” links.

    Then, you can add this CSS through Appearance > Customize > Additional CSS:

    .entry-content p a:not(:empty) {
        color: #ff0000;
    }
    
    .entry-content p a:not(:empty):hover mark {
        color: #ff00ff !important;
    }

    You can alter the color values to your preference.

    #2449933
    Jodie

    Thanks very much Fernando

    Is there a way to do this using a CSS Class? I am just thinking that sometimes I use the highlight feature to change links to white text as it is hard to see the green text on a purple background.
    Would using the above CSS change all the links that I already have highlighted on the site?

    #2450137
    David
    Staff
    Customer Support

    Hi there,

    if you want to style a specific link in your content using an additonal CSS class then:

    1. Add this CSS:

    
    .entry-content .my-custom-link a {
        color: #ff0000 !important;
    }
    .entry-content .my-custom-link a:hover {
        color: #00ffff !important;
    }
    

    2. Select the block in the editor and give it an Advanced > Addtional CSS Class of my-custom-link

    Change the my-custom-link class to whatever you require.

    #2451004
    Jodie

    Thanks so much David.

    I will try what you’ve recommended above.

    Cheers Jodie

    #2451306
    David
    Staff
    Customer Support

    You’re welcome

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.