Social Media icons in Footer - Support | Kriesi.at

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

Author

Posts

October 28, 2015 at 5:05 am #525885

Hi,
I was hoping to reverse the normal state and the hover state of my social media icons in the footer of my website so that they start off colored and appear grey on hover. Is this possible?

Thanks,

October 28, 2015 at 5:14 am #525887

Dake

Inactive Moderator

Hi divinespace!

Please insert the following css into your custom css section:

top .social_bookmarks_linkedin:hover a {
color: #419cca;
background-color: transparent;
}
top .social_bookmarks_linkedin a {
color: white;
background-color: #419cca;
}
#top .social_bookmarks_facebook:hover a {
color: #37589b;
background-color: transparent;
}
#top .social_bookmarks_facebook a {
color: white;
background-color: #37589b;
}
#top .social_bookmarks_gplus:hover a {
color: #de5a49;
background-color: transparent;
}
#top .social_bookmarks_gplus a {
color: white;
background-color: #de5a49;
}
#top .social_bookmarks_twitter:hover a {
color: #46d4fe;
background-color: transparent;
}
#top .social_bookmarks_twitter a {
color: white;
background-color: #46d4fe;
}
#top .social_bookmarks_youtube a {
color: #fff;
background-color: #a72b1d;
}
#top .social_bookmarks_youtube:hover a {
color: #a72b1d;
background-color: transparent;
}

Cheers!
Dake

October 28, 2015 at 5:40 am #525898

divinespace

Participant

Thanks Dake,
I have pasted your code in but i’m not getting the desired result.
Please see here for desired result (mocked up in Photoshop) and see current result in url listed in private content.
Thanks for your assistance

This reply was modified 9 years, 1 month ago by divinespace.

October 28, 2015 at 6:11 am #525905

Dake

Inactive Moderator

Hi!

Sorry about that, I made some slight adjustments and included missing social icons.

Please replace the previous css with the following:

#top #wrap_all .av-social-link-facebook:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-facebook a {
	color: #ffffff !important;
	background-color: #37589b !important;
}

#top #wrap_all .av-social-link-linkedin:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-linkedin a {
	color: #ffffff !important;
	background-color: #419cca !important;
}

#top #wrap_all .av-social-link-gplus:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-gplus a {
	color: #ffffff !important;
	background-color: #de5a49 !important;
}

#top #wrap_all .av-social-link-twitter:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-twitter a {
	color: #ffffff !important;
	background-color: #46d4fe !important;
}

#top #wrap_all .av-social-link-youtube:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-youtube a {
	color: #ffffff !important;
	background-color: #a72b1d !important;
}

#top #wrap_all .av-social-link-vimeo:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-vimeo a {
	color: #ffffff !important;
	background-color: #46d4fe !important;
}

#top #wrap_all .av-social-link-instagram:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-instagram a {
	color: #ffffff !important;
	background-color: #a67658 !important;
}

#top #wrap_all .av-social-link-pinterest:hover a {
	    background-color: #222222 !important;
}

#top #wrap_all .av-social-link-pinterest a {
	color: #ffffff !important;
	background-color: #a72b1d !important;
}

Regards,
Dake

October 28, 2015 at 6:19 am #525909

divinespace

Participant

Brilliant! Thank you Dake!

October 28, 2015 at 6:22 am #525912

Dake

Inactive Moderator

Hi!

You’re welcome, glad I could help :)

Please let us know if you ever need any help in the future.

Best regards,
Dake