Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #14567

    I would like to recolor the social icons to make them stand out more. They’re fine when you hover over them, but they’re too light for my use otherwise. I found the icons are transparent PNGs but I can’t seem to color the background without obscuring the icon.

    Help!

    Kermit Woodall

    http://baynebrain.com

    #84009

    Hello,

    You need to replace the social icon images on images > layout.

    Regards,

    Ismael

    #84010

    There aren’t any social icon image settings anywhere that I can find in this theme. I checked all the settings panels in Sentence.

    Kermit Woodall

    #84011

    I also searched through the themes images and the source icons are transparent PNGs with the background color coming from CSS. However when I change the CSS background color where I _think_ it should be changed the transparent overlay goes away.

    Kermit Woodall

    #84012

    Hello,

    If you want to change the hover state of the social links. Open up css > layout.css and find this code

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

    However, if you want to change the initial state, you need to change the source images on images > layout > folder.

    Regards,

    Ismael

    #84013

    Hi,

    I have kind of the same issue. I want to remove the hoover effect from my social icons (I have sentence theme) but I also want to make the icons bigger. How do I do that?

    Thanks in advance!

    Toby

    #84014

    Hey,

    Just change this code

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

    to this code

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

    You need to edit the actual images on wp-contentthemessentenceimageslayout then place this on your custom.css

    #top .social_bookmarks li a{
    width:42px;
    line-height:30px;
    }

    Change the width and height value.

    Regards,

    Ismael

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

The topic ‘Recolor Social Icons’ is closed to new replies.