Softaculous


Topic : How to change the mouse hover-over colour


Posted By: Between-The-Pixels on July 17, 2018, 3:19 pm
Hi!

I have the Flip Turn theme enabled in Sitepad.
On the footer of my webpage, I have some icons linking to social media sites.

Currently, when I mouse over the icons, they become a light blue colour - rgb(167,221,255) or #a7ddff

I'm wanting to make it so each social media icon turns its own colour. I've tried adding the text below to to the Custom HTML section from the drop down menu on the footer page, but it has no effect. The icons still turn the light blue colour.

<style>
.fa:hover{
color:red
}
</style>

Where must I go/what must I do, to stop the mouse hover from turning icons blue, so I can add my own colours?

Thanks in advance


-----------------------
Tumblr: https://between-the-pix.tumblr.com/
Twitter: https://twitter.com/between_the_pix

Posted By: Between-The-Pixels on July 17, 2018, 4:14 pm | Post: 1
I've attached images to this post for reference

-----------------------
Tumblr: https://between-the-pix.tumblr.com/
Twitter: https://twitter.com/between_the_pix

Posted By: aakash_softac on July 18, 2018, 11:26 am | Post: 2
Hi,

You can add the following in the in Custom HTML:
<style>
.social_icons .smue-ce-icon-bg:hover .fa{
color: red !important;
}
</style>

This should change the hover color on the Icon.

Do let us know if you need any other information.

-----------------------
Aakash Gupta
SitePad Developer

Follow us for faster updates
Twitter: https://twitter.com/sitepad_editor
Facebook: https://facebook.com/SitePad

Posted By: Between-The-Pixels on July 18, 2018, 7:26 pm | Post: 3
Good day

I have tried adding the code you provided to the Custom HTML section of my footer page. I then updated and previewed the page. It did not change the colour of the icons. They remained the same light blue.

Do you have any other ideas I could try?

An additional question: how do you target specific icons with the html code? For example, if I wanted to give each social icon it's own colour?

Thank you for the help

-----------------------
Tumblr: https://between-the-pix.tumblr.com/
Twitter: https://twitter.com/between_the_pix

Posted By: aakash_softac on July 19, 2018, 11:24 am | Post: 4
Hi,

Can you provide us with the domain name so we can debug the issue?

Do let us know.

-----------------------
Aakash Gupta
SitePad Developer

Follow us for faster updates
Twitter: https://twitter.com/sitepad_editor
Facebook: https://facebook.com/SitePad

Posted By: alpeshd on July 20, 2018, 10:47 am | Post: 5
Hi,

Please replace your added css with the given below css.

<style>
#social_icons .smue-ce-icon-bg:hover .fa {
    color: red !important;
}
</style>

To target the particular icon you will need to add the unique class for every icon. To do that please click on the icon it will open up a pop up window. In this window click on style section and add unique class in Predefined Styles area just like i have added "tumblr_icon" class for the tumblr icon. And follow the given below css to add different color for different icons. Make sure to change the unique class in below css for all icons with class added by you.

#social_icons .tumblr_icon .smue-ce-icon-bg:hover fa-tumblr {
    color: your-color !important;
}

Please do let us know if you need any further information.

Powered By AEF 1.0.8 © 2007-2008 Electron Inc.