Recolor Social Icons

7 posts from 3 voices

• Started 11 months ago by kwoodall55
• Latest reply from Ismael
• This topic is not a support question

Tags:

No tags yet.

1. 

   kwoodall55
   Member

   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

   Posted 11 months ago #
2. 

   Ismael
   Moderator

   Hello,

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

   Regards,
   Ismael

   Posted 11 months ago #
3. 

   kwoodall55
   Member

   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

   Posted 11 months ago #
4. 

   kwoodall55
   Member

   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

   Posted 11 months ago #
5. 

   Ismael
   Moderator

   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

   Posted 11 months ago #
6. 

   villumtobe
   Member

   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

   Posted 8 months ago #
7. 

   Ismael
   Moderator

   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-content\themes\sentence\images\layout 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

   Posted 8 months ago #

RSS feed for this topic

Reply

You must log in to post.