How to change color of hyperlinks in Shoreditch theme

jmaroneytest · Member · Nov 8, 2017 at 9:29 pm
Copy link

Add topic to favorites
There is little contrast between the font color and the color of hyperlinks in the Shoreditch theme. Is there a way to customize those colors or otherwise make that contrast more noticeable?
Thanks,
Joyce Maroney

The blog I need help with is: (visible only to logged in users)
jessestu · Member · Nov 10, 2017 at 9:41 pm
Copy link
Hi Joyce,

I’m happy to see you ask this question. Maximizing the visibility of your links will increase the usability of your site for your readers.

To help answer your request, I’m using your 5 Workplace Trends page as an example of the hard-to-read links. This code will only affect the links in the main article section of the page. You can add the following code to the bottom of your Custom CSS editor (how to get there).
```
article a {
	color: #ed4f33;
	text-decoration: underline;
}

article a:focus,
article a:hover {
	color: #2c313f;
}
```
Feel free to change this however you’d like. I reversed the link colors that were there since the orange pops out a lot more. I also added underlines. Delete the line that says “text-decoration” to remove the underlines, and change the colors however you see fit.

How else can we help you?

Best,
Jesse
jmaroneytest · Member · Nov 11, 2017 at 1:28 am
Copy link
Jesse,
Thanks for the speedy response. I’m a blogger, but not much of a pro on the HTML side of things so I want to make sure I understand. It looks like the change you made is affecting all my posts, not just the most recent one. That’s fine, in that the contrast is much better when you mouse over it.

My question, though, is if there is a way to make the contrast more apparent when somebody isn’t mousing over the content.

Thanks,
Joyce
jessestu · Member · Nov 12, 2017 at 7:05 pm
Copy link
Hi Joyce,

I’m glad you’re a blogger! I’m here to help with the technical things so you can focus on blogging more than learning the background stuff.

When I look at your page, I’m not seeing the code I wrote applied to the page. You’ll need to add the above code to see the clearer links on each page.

First, I made an assumption that might be wrong. To be able to access custom CSS, you have to have a Premium or Business plan. The Personal plan doesn’t support custom CSS.

To get to custom CSS:
1. Launch your site Customizer: https://wordpress.com/customize/
2. Click on the CSS tab
Then, add this to the bottom of the Custom CSS box:
```
article a {
	color: #ed4f33;
	text-decoration: underline;
}

article a:focus,
article a:hover {
	color: #2c313f;
}
```
We have a walkthrough with pictures of editing custom CSS if my instructions didn’t get you there.

Once you add that code and select Save & Publish, your links in the main articles should all look orange and underlined. When you hover over them, they will then turn to the gray-blue they are now.

How did that work for you?

Best,
Jesse

No items found.