Homepage Hover Color

Tagged: button hover color, homepage icons hover color, hover color

This topic has 8 replies, 2 voices, and was last updated 4 years, 2 months ago by Skandha.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
September 29, 2020 at 12:19 am #260722

meshellefae
Participant

I’m having a hard time changing my hover colors. I tried one code:

”a:hover {
color: #43E095 !important;
}”

which helped with most of my links. However, the little squares above my blog post titles, the search icon (and background of the search icon when you click to search), menu icon, and down page arrow are still orange. Also, the “Continue Reading” links on my page that go to my services posts and blog posts are also still orange.

Here’s my site so you can see what I mean: http://www.meshellewrites.com

September 29, 2020 at 12:37 am #260775

Skandha
Participant

@meshellefae: Hello there,
Your site doesn’t seem to be accessible. Can you please if the URL you provided is correct?

Kind Regards,
Skandha

September 29, 2020 at 8:51 am #260807

meshellefae
Participant

I think the SSL certificate is still loading or something. Try meshellewrites.com or http://www.meshellewrites.com instead. Thank you.

September 29, 2020 at 8:53 am #260814

Skandha
Participant

@meshellefae: Hello there,
I am still not able to access your site. Can you please check this with your web server?

Kind Regards,
Skandha

September 29, 2020 at 10:58 pm #260816

meshellefae
Participant

Did you try meshellewrites.com? It works for me.

September 30, 2020 at 1:49 am #260895
Skandha
Participant
@meshellefae: Hello there,
Finally it is working.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
/* To change color of the icon above blog post */
.sticky-post:hover {
    background-color: #f23456;
}

/* To change search icon color */
#primary-search-wrapper button {
    color: #f23456 !important;
}

/* To change search icon color when clicked */
#social-search-toggle:focus svg,#primary-search-wrapper button:focus {
    color: #f23456;
}

/* To change menu icon color */
#menu-toggle {
    color: #f23456;
}

/* To change color of continue reading link */
.more-link a:hover, .readmore:hover svg {
    color: #f23456 !important;
}
```
You can change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha
September 30, 2020 at 2:28 am #260886

meshellefae
Participant

Following up.

October 1, 2020 at 11:18 pm #261100

meshellefae
Participant

Thank you! That helps. However, the square icons above my blog posts are still orange. They just change to the correct color when you hover over them. I don’t want them to change color when you hover, I want them to not be orange.

The down arrow on the right-hand side is still orange.

The menu and search icons are now the correct color, but when you hover over them they turn orange instead of staying the correct color.

Some of the “continue reading” buttons still turn orange when you hover over them for some reason.

Thanks for your help!

October 2, 2020 at 5:47 am #261142
Skandha
Participant
@meshellefae: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
/* To change of the icon above blog post */
.sticky-post {
    background-color: #f23456 !important;
}

/* To change scroll down color */
.scroll-down {
    background: #f23456 !important;
}

/* To change search icon hover color */
#primary-search-wrapper:hover button:hover svg {
    color: #f23456;
}
```
You can change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha
Author

Posts