Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 17, 2019 at 5:20 pm #1119624
    benhasler

    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.

    HOME

    thanks

    July 17, 2019 at 6:59 pm #1119665
    Victoria

    Hey benhasler,

    Please have a look at our docs here

    Social Share Buttons

    Best regards,
    Victoria

    July 17, 2019 at 8:37 pm #1119683
    benhasler

    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?

    July 18, 2019 at 7:50 pm #1119983
    Victoria

    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

    July 18, 2019 at 9:32 pm #1120025
    benhasler

    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.

    July 19, 2019 at 8:14 am #1120092
    Rikard

    Hi,

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

    Best regards,
    Rikard

    July 19, 2019 at 10:49 am #1120131
    benhasler

    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

    July 19, 2019 at 4:49 pm #1120271
    Victoria

    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

    July 23, 2019 at 5:06 pm #1121232
    benhasler

    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

    July 24, 2019 at 1:03 pm #1121527
    Victoria

    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

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.