Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1119624

    Hi just started using this theme and struggling to sort out the social media icon rollovers. i just want the colour of the icon its self to change and be able to set the rollover colour. at present each one is a different colour (looks like their brand colours). also how do you get rid of the horrible circles that appear.

    you can see what i mean here.

    thanks

    #1119665

    Hey benhasler,

    Please have a look at our docs here

    Best regards,
    Victoria

    #1119683

    i copied that code into the customising Additional CSS section but it hasn’t done anything. i am assuming i have copied it to the right place? i just want to be able to change the icons in both the header menu and the socket area?

    #1119983

    Hi benhasler,

    Here are the rules for the social links:

    
    
    #top #wrap_all .av-social-link-rss:hover	   	 a{color:#fff; background-color:#ffa133; }
    #top #wrap_all .av-social-link-facebook:hover  a{color:#fff; background-color:#37589b; }
    #top #wrap_all .av-social-link-twitter:hover   a{color:#fff; background-color:#46d4fe; }
    #top #wrap_all .av-social-link-mail:hover      a{color:#fff; background-color:#9fae37; }
    #top #wrap_all .av-social-link-dribbble:hover  a{color:#fff; background-color:#e44885; }
    #top #wrap_all .av-social-link-linkedin:hover  a{color:#fff; background-color:#419cca; }
    #top #wrap_all .av-social-link-search:hover    a{color:#fff; background-color:#222222; }
    #top #wrap_all .av-social-link-gplus:hover     a{color:#fff; background-color:#de5a49; }
    #top #wrap_all .av-social-link-behance:hover   a{color:#fff; background-color:#008cfa; }
    #top #wrap_all .av-social-link-flickr:hover    a{color:#fff; background-color:#ff0086; }
    #top #wrap_all .av-social-link-forrst:hover    a{color:#fff; background-color:#234317; }
    #top #wrap_all .av-social-link-myspace:hover   a{color:#fff; background-color:#000000; }
    #top #wrap_all .av-social-link-tumblr:hover    a{color:#fff; background-color:#345574; }
    #top #wrap_all .av-social-link-vimeo:hover     a{color:#fff; background-color:#31baff; }
    #top #wrap_all .av-social-link-youtube:hover   a{color:#fff; background-color:#a72b1d; }
    #top #wrap_all .av-social-link-pinterest:hover a{color:#fff; background-color:#cb2027; }
    #top #wrap_all .av-social-link-skype:hover 	   a{color:#fff; background-color:#12a5f4; }
    #top #wrap_all .av-social-link-instagram:hover a{color:#fff; background-color:#a67658; }
    #top #wrap_all .av-social-link-five_100_px:hover a{color:#fff; background-color:#222222; }
    #top #wrap_all .av-social-link-soundcloud:hover  a{color:#fff; background-color:#F76700; }
    #top #wrap_all .av-social-link-xing:hover 	     a{color:#fff; background-color:#006567; }
    #top #wrap_all .av-social-link-vk:hover 	   	 a{color:#fff; background-color:#597BA5; }
    #top #wrap_all .av-social-link-reddit:hover 	 a{color:#fff; background-color:#FF4500; }
    
    

    You need to change them to the color you want.

    Best regards,
    Victoria

    #1120025

    that perfect! got them working now. thanks. is there a way of adding a bit more space between each icon? when you roll over the circles touch?

    thanks so much.

    #1120092

    Hi,

    Thanks for the update, do you want more space only on hover or in all states?

    Best regards,
    Rikard

    #1120131

    ideally i dont want any circles on roll over. all i want is the actual icon symbol to change colour but i cant seem to figure out how you change the icons style easily?

    in terms of the spacing, if you look as you rollover the circles that appear touch so you need a few pixels more space between each icon.

    but like i say ideally i just want the symbols to change colour with no circles.

    thanks

    #1120271

    Hi benhasler,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #top #wrap_all .social_bookmarks .av-social-link-twitter:hover a {
        color: red;
        background-color: #2635ba;
    }
    #top #wrap_all .social_bookmarks li:hover a {
        color: red;
        background-color: #2635ba;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1121232

    hi there i have just come to build the sister site and now i need to tweak the rollover colours for the top and the bottom. the option you gave makes the rollovers the same.

    basically i want the top icons to rollover blue, and the bottom ones to roll over white?

    thanks

    #1121527

    Hi benhasler,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #top #wrap_all .av-logo-container .social_bookmarks li:hover a {
        color: blue;
    }
    #top #wrap_all #socket .social_bookmarks li:hover a {
        color: #fff;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

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

You must be logged in to reply to this topic.