Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    #77310

    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

    #77311

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

    #77312

    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

    #77313

    This is perfect. Thank you, Mya!

    #77314

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

    Regards,

    Devin

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

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