changing link colours throughout copy

I’ve tried using the cusomizer and additional CSS with different things I have found online but so far nothing has made a difference.

That’s because the “selector” (which selects the specific part of your page the style should apply) has to be customized for your specific page!

Kindly put these in Additional CSS box (APPEARANCE => CUSTOMIZE => ADDITIONAL CSS):

/* unvisited link */
.entry-content a:link {
  color: rebeccapurple;
}

/* visited link */
.entry-content a:visited {
  color: red;
}

/* mouse over link */
.entry-content a:hover {
  color: violet;
}

/* selected link */
.entry-content a:active {
  color: green;
}

Of course, you want to customize the colors to your heart’s desire. You may used any valid CSS color (named color, HEX, RGB, etc).

Hi

Thanks so much for this and for replying so quickly! Unfortunately it doesn’t seem to work for me. Links are still blue.. any other ideas?

Thanks!
Faye

The code I gave you should work.

But you have two multiple errors in the custom CSS you previously had in Customizer (before mine), which is why the code I gave you isn’t working.

Let’s sort this out.

1. Please go to APPEARANCE => CUSTOMIZE => ADDITIONAL CSS, copy everything in there, paste it in a blank text file (NotePad on Windows or TextEdit on Mac), and save it safely somewhere, just in case you want to roll back.

2. With all your Custom CSS safely backed up, kindly delete EVERYTHING in the ADDITIONAL CSS box, so the box is totally empty, with not even a dot remaining.

3. Now copy and paste the corrected CSS code below into the ADDITIONAL CSS box and save.

Please note that I’ve merely corrected syntax errors in the code. Other than the code I gave you earlier, I’ve not checked anything else to confirm it’s doing what it’s meant to do. Also, some portions of this code that were not working previously due to the errors may start to work now, possibly introducing effects (desirable or not) that you were not seeing before.

Standing by for feedback.

.title {
	text-shadow: none;
}

#header_main {
    border-bottom: none!important;
}

.header-image {
    position: relative;
    top: -70px;
}

.site-info{display:none;}

/* Footer logos */
@media screen and (max-width:767px) {
div#page-section-5f1a96d2dbd8da3ed1969133 .span-4 {
    width: 33.33% !important;
    float: left !important;
}}

.entry-content table {border: 0px;}
.entry-content table * {
    border: 0px !important;
}

.woocommerce a.button { margin-left: 10px; }
.woocommerce a.button { margin-right: 10px; }

.single-product.woocommerce div.product .summary {
    display: flex;
    flex-direction: column;
}

.single-product.woocommerce div.product .summary .price {order: 1;}

.related.products {
  display: none;
}

.single-product.woocommerce div.product .summary .cart {order: 2;}

.single-product.woocommerce div.product .summary .product_meta {order: 4;}
.postid-4506 .entry-title {display: none; }
		
table, th, td, tr {
    border: none !important;
}
	
ul {
  list-style-position: inside;
  padding-left: 0;
}
	
#page {
padding-top: 0px !important;
}

/* Link Colors */	
.entry-content a:link {color: rebeccapurple;}
.entry-content a:visited {color: red;}
.entry-content a:hover {color: violet;}
.entry-content a:active {color: green;}

That’s amazing, thank you so much! I wish I had an understanding of how this works ??

Is there also a way to remove the underline? And to make the links on the header match too?

Thanks so much!

Is there also a way to remove the underline?

Yes, you can.

But, should you?

Think about usability for the end-user using your website, not just aesthetics. The different text color for links, as well as decorations like underlining, is meant to signal to the user that this is a clickable link.

You’ve set your link color to be the same as the rest color of the rest of the text. As a result, the only thing that signals to the user there’s a link is the underlining. If you remove this as well, then the user has no way of knowing there’s a link.

So I’ll recommend you EITHER keep the underline… or if you really want to remove it, then change the link color to set links apart from the rest of the body text.

To remove the underline, replace this:

.entry-content a:link {color: #444444;}

With

.entry-content a:link {color: #444444; text-decoration: none;}

(Take care not to introduce any errors ?? )

And to make the links on the header match too?

Sure.

Your menu’s link color is currently #333.

If you want to keep this, then only add the second line below to change the hover color only. But if you want to change the link color to be the same as the #444 used for the links in the body text, then you need both lines.

.main-navigation a {color: #444444;}
.main-navigation a:hover {color: #444444;}

Standing by.

Hi George, thanks for this. Sorry for delayed reply, I went away for a week and couldn’t remember my login on my phone! I decided you were right the links need to show up! So I’ve had a play around and got a colour I like now.

Thanks so much for your help ??
Faye