Welcome Guest. Please Login or Register  


You are here: Index > SitePad Website Builder > General Support > Topic : How to change the mouse hover-over colour



Threaded Mode | Print  

 How to change the mouse hover-over colour (5 Replies, Read 3777 times)
Between-The-Pixels
Group: Member
Post Group: Newbie
Posts: 5
Status:
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
IP: --   

How to change the mouse hover-over colour
Between-The-Pixels
Group: Member
Post Group: Newbie
Posts: 5
Status:
I've attached images to this post for reference

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

How to change the mouse hover-over colour
aakash_softac
Group: Member
Post Group: Super Member
Posts: 544
Status:
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
IP: --   

How to change the mouse hover-over colour
Between-The-Pixels
Group: Member
Post Group: Newbie
Posts: 5
Status:
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
IP: --   

How to change the mouse hover-over colour
aakash_softac
Group: Member
Post Group: Super Member
Posts: 544
Status:
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
IP: --   

How to change the mouse hover-over colour
alpeshd
Group: Member
Post Group: Newbie
Posts: 19
Status:
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.
IP: --   

« Previous    Next »

Threaded Mode | Print  



Jump To :


Users viewing this topic
1 guests, 0 users.


All times are GMT. The time now is March 28, 2024, 8:47 pm.

  Powered By AEF 1.0.8 © 2007-2008 Electron Inc.Queries: 11  |  Page Created In:0.254