Archived topic
Read Theme: Want to Change Link Color [But Only Within Blog Posts]
10 replies · Started by Lucas on February 7, 2022
Hello,
My website uses the Read theme.
Here's the link: https://www.greensplatter.com/
On the homepage, I like the link color, as well as the "hover" color.
I'm wanting to change them within blog posts only.
As this is a journalistic site, links are important - I want them to be easily visible.
Right now, they're not ...
Is there any way for me to change the link / hover color but ONLY on blog posts?
Looking to do this simply, as all of this is VERY complex for me.
LMK - thanks!
Warmly,
L.
Hi Lucas,
Go to customizer > colors > content > link, you can set the colors there.
Let me know if that works for you.
Ying,
Thanks!
When I do that, though, I run into the same issues as before ...
ALL links (including those on the homepage) change color.
Only wanting to change the color of links on blog posts - nothing else.
Thoughts?
Warmly,
L.
I see, then try this CSS:
.single-post .entry-content a {
color: var(--accent);
}
.single-post .entry-content a:hover {
color: var(--contrast-2);
}
You can add it to customizer > additional CSS :)
Ying,
Thanks for getting back to me!
This is embarrassing to admit, but I'm not entirely certain where to to include the CSS ...
Or HOW to include the CSS, if that makes sense ...
Again, incredibly new to all of this.
Also, within the CSS you've provided, where do insert the name for the colors I'd like for the links / hover links?
I'm sure this is frustrating, but again - your patience is appreciated :)
Thanks, Ying!
Warmly,
L.
Hi Lucas,
With regards to adding CSS here is an article you may refer to: https://docs.generatepress.com/article/adding-css/
Specifically, you may add Ying’s CSS by going to Appearance > Customize > Additional CSS.
As for the colors in the code Ying provided, var(--accent) and var(--contrast-2), they are Global colors located in Appearance > Customize > Colors.
See this for reference: https://share.getcloudapp.com/E0uoOD6P
If you click on a specific color, you will see the color variable name. You may also add your own Global colors and set the variable name of the ones in Ying’s code to the variable name of the new colors.
See: https://share.getcloudapp.com/wbuYqRyy
Lastly, you may also hardcode the colors by doing something like:
.single-post .entry-content a {
color: #33ff77;
}
.single-post .entry-content a:hover {
color: #009933;
}
Here is a link to an online color picker: https://www.w3schools.com/colors/colors_picker.asp
Hope this helps! :)
Fernando,
Great!
This should help.
What does it mean to "hardcore" the colors?
Warmly,
L.
Fernando said "hard code" and "hardcore".
Hard code means manually coded.
Thanks!
No problem :)
Thanks!
Got it all sorted - this was perfect :)