- This topic has 7 replies, 2 voices, and was last updated 5 years, 4 months ago by Andrew Misplon.
- AuthorPosts
- May 27, 2019 at 2:30 pm #12764
DoktorDibbsParticipantHi again! I have a few links in different parts of my website and I would like to change the color when I hover over the links. Can this be done with a CSS snippet? Can this be controlled for the whole site or for individual links? I’m not sure which would be best, yet. Thanks!
May 27, 2019 at 2:42 pm #12765
Andrew MisplonKeymasterHi 🙂
The link color is the accent color set here: https://purothemes.com/documentation/polestar-wordpress-theme/customizer-theme-settings/typography/.
The hover color isn’t available as a setting. You could try something like:
.entry-content a:hover { color: #000000; }
added to Customize > Additional CSS to change the hover color of links in the content. You could also try a plugin like SiteOrigin CSS which has a visual editor to help with editing CSS.
May 28, 2019 at 8:41 am #12772
DoktorDibbsParticipantHi! Thanks for the quick response. This little snippet worked, very good!
I noticed that if I make other changes to the text, for example change the size through HTML, or change the color in the text editor widget, then the hover color goes away.
My technical knowledge of CSS and HTML end here, so maybe you have a further suggestion how I could keep the hover color if I make modifications to the font?
Many thanks!
May 28, 2019 at 5:36 pm #12775
Andrew MisplonKeymasterGlad to hear you’re making some progress. Try
!important
as follows:.entry-content a:hover { color: #000000 !important; }
May 29, 2019 at 12:17 pm #12777
DoktorDibbsParticipantAlmost! So with both your first answer and the !important option, I can get the hover color I want but:
1) the link color goes to black (which is not my default theme color)
2) I can change the size through HTML and maintain the desired hover color
3) if I change the color of the link, then I lose the orange hover.Is that clear? I tried to put in another snippet that was:
.entry-content a:link{
color: #ff8f15;
}but this didn’t work!
May 29, 2019 at 12:22 pm #12778
Andrew MisplonKeymasterHi 🙂
You’d need to change the black value to the value you require. Try:
.entry-content a { color: #ff8f15 !important; } .entry-content a:hover { color: #ff8f15 !important; }
Change the second color to the color you require for hover.
May 29, 2019 at 12:30 pm #12779
DoktorDibbsParticipantIt looks like success! I just tried with the second entry and I now I can get the control I want. If there are any issues I’ll write back but thanks so much Andrew! 🙂
May 29, 2019 at 12:31 pm #12780
Andrew MisplonKeymasterSuper 🙂 Glad that helped.
- AuthorPosts
You must be logged in to reply to this topic.