Hover Over a Link Color

[MikeMobley2002]

I can’t seem to find the color setting to change when you “hover over a link.” Right now my link color is a light blue that goes to dark blue when you hover over the link, but I am wanting to change that. Which option is that in the color changer…if it’s even an option?

[cmallon]

I just noticed this as well, Mike. I don’t think they’ve provided that option in the color changer which I find a bit strange since that’s something that every user needs control over. Since that option isn’t available, I think we’re going to have to use css to fix this until they add that in a future update.

I tried to add this css (Which should have worked):

a, .ui-widget-content a:hover {
color: #1f1a56 !important;
}

However, this doesn’t work so I think there’s an issue with the theme. I hope someone on the team can help us with this since it’s a legitimate issue.

Cheers

[MikeMobley2002]

This would be a great option to be able to change. Any help guys?

[Mohammad – SUPPORT]

Hi,
You can do this through color customizer . The color customizer can be accessed by pressing the “Color Customizer” button within the WordPress admin bar, or through the Appearance > Themes menu. From the color customizer you can preview the themes color/skin changes as you make them.

Thanks 🙂
With Best Regards
Swift Ideas

[MikeMobley2002]

Which option within the customizer is it? I’ve tried all of then and can’t find the one specifically for what I am trying to do.

[Melanie – SUPPORT]

Hey, I would like to know what exactly you’d like to change. So can any of you please post up their website URL and let me know which text it is you need to change the color of?

[cmallon]

Hi Guys,

The link hover state is all that we’re trying to change. Mike is correct that there’s no link hover option in the color customizer. I have looked multiple times in hopes that I missed it and it’s just not there. I have also used the Inspect Element tool in Firefox and Chrome to find the code to change it, and for some reason, adding custom css doesn’t change it either even if I use !important:

dencofamily.com

a:hover, .ui-widget-content a:hover {
color: #1f1a56 !important;
}

If you check my site and go to the contact us page, you’ll see the light blue/green links don’t hover bc the theme is setup to make them hover to that light blue/green. I need to be able to customize this in the color customizer and my boy Mike wishes to do so too. 🙂

Thanks for the help Mohammad and Melanie

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Theme Options -> Custom CSS => Here put this code and update options

a:hover {
color: #1f1a56 !important;
}

Thanks 🙂
With Best Regards
Swift Ideas

[MikeMobley2002]

Perfect, worked great! Thank you!

[Mohammad – SUPPORT]

Hi,
You most welcome . I’m glad that issue resolved .
Thanks 🙂
With Best Regards
Swift Ideas

[cmallon]

What in the world? That worked for me too… Thank you but I’m confused.

If this works:

a:hover {
color: #1f1a56 !important;
}

Why doesn’t this work?:

a:hover, .ui-widget-content a:hover {
color: #1f1a56 !important;
}

Thanks again Mohammad

[cmallon]

Actually, before closing this topic as solved, the above suggestion isn’t a good solution for our needs. Hold please and I’ll explain later tonight when I can get to it.

Thank you,
cmallon

[cmallon]

Alright, lets start off with no Custom CSS added under Admin > Theme Options > Custom CSS/JS. If Mike or I wanted to to change the “link color” or the “link hover color” for the whole site, we would default to Admin > Appearance > Customize.

Cool, easy enough… Let’s use these three areas as an example:

1. The Top Bar
2. The Body
3. The Footer

When I go to Admin > Appearance > Customize, we can quickly find these three sections to make our adjustments (Along with others):

“Color – Header”
“Color – Body”
“Color – Footer”

=========================================
Here’s where the problem begins:
=========================================

Under the “Color – Header” section, there are options for (Along with others):

1. Top Bar Text Color
2. Top Bar Link Color
3. Top Bar Link Hover Color

This is perfect and is exactly what needs to be available to the user in all sections. However, if you use the code you provided:

a:hover {
color: #1f1a56 !important;
}

…The options under the “Color – Header” section are overruled and so are all other options under Admin > Appearance > Customize (This is what Swift Ideas needs to consider and I hope you guys agree to fix this over the next update since this is a legitimate issue with the theme… It’s basically broken in this regard).

=========================================
Let’s continue:
=========================================

Under the “Color – Body” section, there are options for (Along with others):

1. Body Text Color
2. Link Text Color

…but there’s not an option for “Link Text Hover Color.” As you suggested, the code above fixes this, but as mentioned, that code overrules all options even though “Link Text Hover Color” is missing within this option completely (Please add this to this section!).

=========================================
Let’s take this a step further:
=========================================

Under the “Color – Footer” section, there’s an option for (Along with others):

1. Footer Text Color
2. Copyright Link Color

…but there’s not an option for “Copyright Link Hover Color.” As you suggested, the code above fixes this, but as mentioned, that code overrules all options even though “Copyright Link Hover Color” is missing within this option completely (Please add this to this section!).

=========================================
Let’s take this one last step further:
=========================================

The only way to truly accomplished site-wide link hover states, today, is to:

1. Go to Admin > Appearance > Customize > Color – Accent => and set your two most used colors.

2. Go to Admin > Appearance > Customize > Color – Header => and make sure the options are the way you want them.

3. Go to Admin > Theme Options > Custom CSS/JS => and add these two custom hover colors (I have defaulted to red just for purpose sake):

a:hover {
color: #ff0000;
}

#copyright a:hover {
color: #ff0000;
}

==================================
Final thoughts
==================================

As you can see, your theme is somewhat broken and these steps are totally unnecessary (Especially for someone new to this). These hover colors need to be added to the theme under Admin > Appearance > Customize within the next update bc none of your users need to search the forum in hopes to find this thread in which I have provided the solution. Once this is fixed, Dante will be a more complete theme and that’s a beautiful thing…since Dante is already a stellar piece of work.

Please let me know your thoughts and as always, we ALL really appreciate you guys for creating such a beautiful theme!

Cheers!

[Swift Ideas – Ed]

Hi @cmallon,

Thanks for pointing that out. Going to sort this out for the update tonight 🙂

– Ed

[cmallon]

Great Ed, thank you!