Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 18, 2015 at 8:55 pm #398447
    mikemhn

    Hi,

    Currently, my social media icons are in the header and they are transparent until they are hovered over. However, I have a white background on some pages and it gets in the way. Is there any css I can add to make it stay colored as if it were hovered over?

    Thank you.

    February 18, 2015 at 11:00 pm #398525
    Elliott

    Hey Michael!

    You can find that CSS around line 1115 in /enfold/css/layout.css.

    #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 could remove the :hover part and add an !important; like so.

    #top #wrap_all .av-social-link-reddit 	 a{color:#fff; background-color:#FF4500 !important; }

    If you want it to be a solid color all the time.

    Regards,
    Elliott

    February 24, 2015 at 7:05 pm #401624
    suburbanite

    I am having the same issue. Using the code you provided, I was able to get the icons to change to the color I wanted (white) but when hovered over they still have a circle that pops up in a blue color. I don’t want any hover color or effect, I just want to icons to be white both when they are hovered over and when they aren’t. Here’s the code I’ve used:

    /* Social icons at top color*/
#top #wrap_all .av-social-link-facebook	 a{color:#fff; !important; }
#top #wrap_all .av-social-link-twitter	 a{color:#fff; !important; }
#top #wrap_all .av-social-link-mail	 a{color:#fff; !important; }
#top #wrap_all .av-social-link-instagram	 a{color:#fff; !important; }

/*Social icons hover*/
#top #wrap_all .av-social-link-facebook:hover  a{color:#fff; !important; }

    Here’s my site

    February 25, 2015 at 6:21 pm #402264
    Elliott

    Hi!

    Try adding this to your custom CSS.

    .social_bookmarks *:hover { background: transparent !important; }

    Cheers!
    Elliott

    March 5, 2015 at 4:35 pm #406486
    suburbanite

    Awesome, that helped a lot, thank you!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Permanent social media icon colors’ is closed to new replies.