Tagged: header, social icons
Hi,
is there any easy way to get displaying colored background of social icons (circles) as they appear on hover?
Thanks.
Hey,
For example, you can use this:
#top .social_bookmarks_facebook a {
color: #fff;
background-color: #37589b;
}
Or you can edit layout.css, find this code:
#top .social_bookmarks_rss:hover a{color:#fff; background-color:#ffa133; }
#top .social_bookmarks_facebook:hover a{color:#fff; background-color:#37589b; }
#top .social_bookmarks_twitter:hover a{color:#fff; background-color:#46d4fe; }
#top .social_bookmarks_mail:hover a{color:#fff; background-color:#9fae37; }
#top .social_bookmarks_dribbble:hover a{color:#fff; background-color:#e44885; }
#top .social_bookmarks_linkedin:hover a{color:#fff; background-color:#419cca; }
#top .social_bookmarks_search:hover a{color:#fff; background-color:#222222; }
#top .social_bookmarks_gplus:hover a{color:#fff; background-color:#de5a49; }
#top .social_bookmarks_behance:hover a{color:#fff; background-color:#008cfa; }
#top .social_bookmarks_flickr:hover a{color:#fff; background-color:#ff0086; }
#top .social_bookmarks_forrst:hover a{color:#fff; background-color:#234317; }
#top .social_bookmarks_myspace:hover a{color:#fff; background-color:#000000; }
#top .social_bookmarks_tumblr:hover a{color:#fff; background-color:#345574; }
#top .social_bookmarks_vimeo:hover a{color:#fff; background-color:#31baff; }
#top .social_bookmarks_youtube:hover a{color:#fff; background-color:#a72b1d; }
#top .social_bookmarks_pinterest:hover a{color:#fff; background-color:#cb2027; }
#top .social_bookmarks_skype:hover a{color:#fff; background-color:#12a5f4; }
#top .social_bookmarks_instagram:hover a{color:#fff; background-color:#a67658; }
Remove the :hover just before the social media name.
Regards,
Ismael
Hi Ismael
It works. Thaks.
Tomaz