Change hyperlink color on blog

Hi there, is there any way to change the hyperlink colors on all my blog posts? right now you can barely distinguish what’s normal text and what’s not.

My goal is to have it such as below.

Default link color: blue - #7CCFFF
On hover: link color: darker blue - #06A4FF

I thought something like that would be available on Theme customization directly on Wordpress.

Seems like I will need some specific CSS code for it and didn’t want to try with what I found it online, there are a lot of outdated topics about it.

the red text underlined is a hyperlink.

hope you guys can help me out with that.

Thanks in advance!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .entry-content a {
      color: #7CCFFF !important;
    }

    .entry-content a:hover {
      color: #06A4FF !important;
    }

Regards,
Kharis
aThemes Support

Thanks for your reply Kharis, it worked partially, I only need to change hyperlink colors inside the body text.

Adding this code also changed the link and text colors inside buttons, I wonder if it’s possible to exclude those from being changed.

Screen Shot 2020-06-29 at 12.16.37 PM

thanks again for your support in advance.

cheers.

Hey Kharis, looking forward to hear from you.

cheers.

Hello there,

Please provide a link to the related page, so I can test and find the correct code to suggest.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis, here’s a link you can take a look in order to find out the custom CSS that should be applied

you will notice that’s pretty hard to distinguish links on the website.

Screen Shot 2021-07-23 at 8.43.45 PM

Hi,

Thank you for sharing the link. Try this code:

    .entry-content a {
      color: #7CCFFF !important;
    }

    .entry-content a:hover {
      color: #06A4FF !important;
    }

    .entry-content .swp_social_panel a,
    .entry-content .swp_social_panel a:hover {
      color: #fff !important;
    }

Regards,
Kharis
aThemes Support

Hey Kharis, now the share buttons are ok, I forgot to mention the buttons on the bottom of the page, they are part of Elementor, the original color is white, after applying the custom css code above the text in the buttons became blue, is there a way of excluding the css code of being applied to these buttons?

the blue text on buttons was applied across all website, we would need something that would be applied only to blog posts.

thanks Kharis

Hi,

Thank you for getting back.

Try this code:

    .blog .entry-content a, .single-post .entry-content a {
    	 color: #7ccfff !important;
    }
     .blog .entry-content a:hover, .single-post .entry-content a:hover {
    	 color: #06a4ff !important;
    }
     .blog .entry-content .swp_social_panel a, .single-post .entry-content .swp_social_panel a, .blog .entry-content .swp_social_panel a:hover, .single-post .entry-content .swp_social_panel a:hover {
    	 color: #fff !important;
    }

Regards,
Kharis
aThemes Support

hey Kharis, thanks for taking the time to check on this, your new code worked to make the button from the home page normal again but I’m still getting the blue color on the text of the buttons on the blog posts.
the content in the box is inserted with a shortcode using AnyWhere Elementor, maybe we should try adding a piece of code excluding it?

Hi,

You’ll need a few lines of separate code for Elementor buttons added into post content. Try adding this CSS code to your site’s Additional CSS.

    .blog .entry-content a.elementor-button-link, .single-post .entry-content a.elementor-button-link {
       color: #fff !important;
    }

    .blog .entry-content a.elementor-button-link:hover, .single-post .entry-content a.elementor-button-link:hover {
       color: #54595F !important;
    }

Regards,
Kharis
aThemes Support

it worked =), thanks for the patience Kharis, have a good one.

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support