Docs

[tiv1]

Hi! Thanks for the great theme.

Have checked through various posts in this forum but can’t find a way to remove the circle backgrounds behind the social sharing icons (RENEW stack – both in topbar and footer) BUT still maintain the color change of the icons themselves when hovered.

I have gotten rid of the circles by choosing background:transparent, but then that is also disabling the color hover on the icon itself.

So, I basically want gray social icons without circles, and when hovering on them, the icons change to the corresponding color (blue for FB…etc) without the circles appearing behind them.

Can you help? Thanks in advance.

[Nico]

Hi There,

Thanks for writing in.

This code below will remove the background color of facebook both hover and none hovered. Add the code below in your customizer > Custom > CSS

.x-social-global a:hover.facebook, .x-social-global .facebook{
background-color: transparent;
}

Do the code above for other icons.

Hope it helps.

Let us know how it goes.

Thanks.

[tiv1]

Thanks for your quick reply and the code, but it’s not what I need.

I WANT the hover color BUT only to show on the icon itself (not the background circles).

Attaching a screen shot to explain. The logos on the left are the standard, and the color ones on the right for hover.

Possible?

Thanks again.

[Rue Nel]

Hello There,

Thank you for the clarifications! To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-social-global a,
.site .x-social-global a:hover {
  background-color: transparent;
}

.site .x-social-global a:hover.facebook i {
    color: #3b5998
}
.site .x-social-global a:hover.twitter i {
    color: #00abf0
}
.site .x-social-global a:hover.google-plus i {
    color: #d84b35
}
.site .x-social-global a:hover.linkedin i {
    color: #1a81ad
}
.site .x-social-global a:hover.xing i {
    color: #006567
}
.site .x-social-global a:hover.foursquare i {
    color: #0f6bb6
}
.site .x-social-global a:hover.youtube i {
    color: #cc181e
}
.site .x-social-global a:hover.vimeo i {
    color: #44bbff
}
.site .x-social-global a:hover.instagram i {
    color: #3f729b
}
.site .x-social-global a:hover.pinterest i {
    color: #cd1f28
}
.site .x-social-global a:hover.dribbble i {
    color: #ea4b8b
}
.site .x-social-global a:hover.flickr i {
    color: #ff0084
}
.site .x-social-global a:hover.behance i {
    color: #1769ff
}
.site .x-social-global a:hover.tumblr i {
    color: #36465d
}
.site .x-social-global a:hover.soundcloud i {
    color: #ff5500
}
.site .x-social-global a:hover.rss i {
    color: #fe6e00
}

This code will remove the background circles. As soon as you hover on the icon, it will change the icon color.

We would loved to know if this has work for you. Thank you.

[tiv1]

Yes, this works perfectly. Thanks very very much!

[Lely]

You’re welcome!

Cheers!

[Author]

Posts