Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #12965

    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!



    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. :)




    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;}


    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;}




    This is perfect. Thank you, Mya!


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



Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Social icons always in color’ is closed to new replies.