Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 4, 2014 at 5:45 am #232025
    jmikhail

    Hi Guys,

    Let’s say I want all of the social icons background hover effect to be yellow for each icon instead each one having an individual color how would I do this? website: http://bit.ly/1mSFN9W

    Also by default the bird, camera or fb icon turn white on hover. How can I set them to black instead of white?

    Thanks!

    March 4, 2014 at 7:50 am #232041
    Ismael

    Hi jmikhail!

    You can find these codes on css > layout.css. Select the social icons that you’re using then place the modified code on Quick CSS or custom.css:

    #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; }
#top .social_bookmarks_five_100_px:hover a{color:#fff; background-color:#222222; }
#top .social_bookmarks_soundcloud:hover  a{color:#fff; background-color:#F76700; }
#top .social_bookmarks_xing:hover 	     a{color:#fff; background-color:#006567; }

    You can change the background-color to yellow.

    Regards,
    Ismael

    March 4, 2014 at 8:24 am #232056
    jmikhail

    Fantastic, thanks Ismael.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘How to change rollover colors on hover for Social Media Icons with Bottom Nav?’ is closed to new replies.