Social icons always in color « Support Forum | Kriesi.at

Support Forum » Angular

Social icons always in color

6 posts from 4 voices

Started 11 months ago by smighty
Latest reply from Devin
This topic is not a support question

Tags:

smighty
Member

Hi there-
I'd like to remove the pre-hover effect on the social icons at the top. Instead of having the white background and a color background on hover, I'd like to see the color background all the time.

Thank you for your help!

Posted 11 months ago #
Ismael
Moderator

Hello,

Go to your CSS folder and open layout.css. Look for social_bookmarks .rss. Notice that the background position for each social media icon is 0 center. Just change those to -42px center.

Hope this helps. :)

Regards,
Ismael

Posted 11 months ago #

smighty
Member

Hi Ismael-
When I changed the 0 to 42px, the icons disappear unless I hover. Here's the block of code that I changed (with the changes) and below it is the block of code following it, for context.

.social_bookmarks .rss{background: transparent url(../images/layout/icon-rss.png) -42px center  no-repeat;}
.social_bookmarks .facebook{background: transparent url(../images/layout/icon-facebook.png) -42px center  no-repeat;}
.social_bookmarks .twitter{background: transparent url(../images/layout/icon-twitter.png) -42px center  no-repeat;}
.social_bookmarks .mail{background: transparent url(../images/layout/icon-mail.png) -42px center  no-repeat;}
.social_bookmarks .dribbble{background: transparent url(../images/layout/icon-dribbble.png) -42px center  no-repeat;}
.social_bookmarks .linkedin{background: transparent url(../images/layout/icon-linkedin.png) -42px center  no-repeat;}
.social_bookmarks .search{background: transparent url(../images/layout/icon-search-top.png) -42px center  no-repeat;}
.social_bookmarks .gplus{background: transparent url(../images/layout/icon-gplus.png) -42px center  no-repeat;}

.social_bookmarks .rss:hover	 {background-position: -42px center; background-color:#ffa133;}
.social_bookmarks .facebook:hover{background-position: -42px center; background-color:#37589b;}
.social_bookmarks .twitter:hover {background-position: -42px center; background-color:#46d4fe;}
.social_bookmarks .mail:hover    {background-position: -42px center; background-color:#9fae37;}
.social_bookmarks .dribbble:hover{background-position: -42px center; background-color:#e44885;}
.social_bookmarks .linkedin:hover{background-position: -42px center; background-color:#419cca;}
.social_bookmarks .search:hover  {background-position: -42px center; background-color:#222222;}
.social_bookmarks .gplus:hover   {background-position: -42px center; background-color:#de5a49;}

Posted 11 months ago #

Mya

Hi smighty,

What's happening is the white icon is displaying against the white background which essentially causes the icon to disappear. What you'll need to do is change "transparent" to the background-color listed on the hover state.

I've done the RSS icon for you here:

.social_bookmarks .rss{background: #ffa133 url(/wp-content/themes/angular/images/layout/icon-rss.png) -42px center no-repeat !important;}

Regards,
Mya

Posted 11 months ago #
smighty
Member

This is perfect. Thank you, Mya!

Posted 11 months ago #
Devin
Moderator

Glad that worked for you! Let us know if you have any other issues :)

Regards,

Devin

Posted 11 months ago #