- This topic has 9 replies, 2 voices, and was last updated 3 years, 7 months ago by
.
-
Posts
-
How do you change the hover colour of the icons and their backgrounds in the associate service widget?
Hello @sesemi01,
To change the hover color, please add below-given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.
.service-block-inner > a i:hover { background: #337ab7 none repeat scroll 0 0; border-color: rgba(0, 0, 0, 0); border-radius: 100%; color: #43d29d; }Change the color code as per your requirement.
Thank you.
Hello,
Thank you, that worked. Can you please also provide the CSS code to enable the icon colour itself to change to white (from red) once the mouse hovers over, because the icon is currently red and hard to read when the background turns red.
Also, I need the CSS code to change the hover colour on the top header and menu bar?
Thank you
AimeeHello @sesemi01,
For the icon color, please add below given CSS.
.service-block-item i.fa.fa-industry { color: #e300ff; }As for the header, please provide the screenshot marking the section that you want to change the color for so that we can provide the specific CSS.
Thank you.
Hello,
That has not worked unfortunately. The website link is http://www.sesemi.co.uk. I am having the following issues –
1. Grey top bar (contact details) – I have been unable to change hover the colour from orange to red.
2. Grey menu bar (home, about us section) – I have been unable to change hover the colour from orange to red.
3. The 4 icons showing in the service block on homepage – The icons on the original theme were orange, when hovering over the icons themselves would turn white and the background colour would turn orange.
I am trying to copy this but using red. I have the icon colour correct in red, and the background now also correct when hoveirng as it turns red. But the coding above does not change the icon white when hoveringThank you
AimeeHello,
As for the icon hover color, add below-given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.
.service-block-inner > a i:hover { border-color: rgba(0, 0, 0, 0) !important; border-radius: 100% !important; color: #43d29d !important; }This should work.
As for others, we were unable to open your site so please let us know once the site works fine.
Thank you.
Hello,
Sorry I forgot our site was in maintenance mode, I have removed this now.
The final question is in relation to the hover colour being changed. The areas we need coding for are – the contact details section at the top, the main menu bar and hovering within the slider. We want the hover colour red rather than orange.
Thank you
AimeeHello,
Please add below given CSS to change the color:
#quick-contact li a:hover::after { background-color: #dd3333; } #site-navigation li.current-menu-item > a, #site-navigation li.current_page_item > a { border-bottom: 3px solid #dd3333; }Hope this helps.
Thank you.
Hello,
The main menu section isn’t quite right. Once clicked it is now red, however the hover colour is still showing as orange.
The rest worked great, thank you!
Thank you
Aimee
- You must be logged in to reply to this topic.
