Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #401628

    Hi guys,

    I am trying to change the top header social icon colours to something that looks like this http://imgur.com/KC0D1R6

    I’ve copied/edited the below code to 1) colour the background of each icon 2) colour the icon shape itself white 3) make the hover transparent (I actually don’t want any hover ability available at all but didn’t want to mess any further with the functions.php sheet).

    Hoping someone could help with fixing this code…the icons haven’t changed at all :(

    Here’s a link to my page and I’ll PM you the passwords

    http://www.openroadtravelperu.com/home2

    Many thanks,
    Sarah

    top .social_bookmarks_vimeo:hover a {
    color: transparent;
    background-color: #dd4390;
    }
    top .social_bookmarks_vimeo a {
    color: #ffffff;
    background-color: #419cca;
    }
    #top .social_bookmarks_twitter:hover a {
    color: transparent;
    background-color: #63b1ed;
    }
    #top .social_bookmarks_twitter a {
    color: white;
    background-color: #63b1ed;
    }
    #top .social_bookmarks_google:hover a {
    color: transparent;
    background-color: #dd3333;
    }
    #top .social_bookmarks_google a {
    color: white;
    background-color: #dd3333;
    }
    #top .social_bookmarks_facebook:hover a {
    color: transparent;
    background-color: #403de5;
    }
    #top .social_bookmarks_facebook a {
    color: white;
    background-color: #403de5;
    }
    #top .social_bookmarks_instagram:hover a {
    color: transparent;
    background-color: #3a84bc;
    }
    #top .social_bookmarks_instagram a {
    color: white;
    background-color: #3a84bc;
    }
    #top .social_bookmarks_skype:hover a {
    color: transparent;
    background-color: #34afed;
    }
    #top .social_bookmarks_skype a {
    color: white;
    background-color: #34afed;
    }

    #402200

    Hi Sarah!

    Change your code to:

    #top .social_bookmarks li a{
    	color: white !important;
    }
    #top .social_bookmarks_vimeo a {
    	background-color: #419cca !important;
    }
    #top .social_bookmarks_twitter a {
    	background-color: #63b1ed !important;
    }
    #top .social_bookmarks_google a {
    	background-color: #dd3333 !important;
    }
    #top .social_bookmarks_facebook a {
    	background-color: #403de5 !important;
    }
    #top .social_bookmarks_instagram a {
    	background-color: #3a84bc !important;
    }
    #top .social_bookmarks_skype a {
    	background-color: #34afed !important;
    }
    #top .social_bookmarks_mail a {
    	background-color: #34afed !important;
    }

    Adjust as needed.

    Best regards,
    Josue

    #402314

    Perfect! Many thanks to you :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Social Icons – changing icon, background and hover colour’ is closed to new replies.