Support/Polestar Theme/Change Link Hover Color

[Resolved] Change Link Hover Color

  • Author
    Posts
  • May 27, 2019 at 2:30 pm #12764

    DoktorDibbs
    Participant

    Hi 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 Misplon
    Keymaster

    Hi 🙂

    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

    DoktorDibbs
    Participant

    Hi! 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 Misplon
    Keymaster

    Glad 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

    DoktorDibbs
    Participant

    Almost! 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 Misplon
    Keymaster

    Hi 🙂

    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

    DoktorDibbs
    Participant

    It 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 Misplon
    Keymaster

    Super 🙂 Glad that helped.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Scroll to top