Hello,
I have added following code in quick css :
.av-share-box .av-share-link-description {
text-align: center;
}
#top #wrap_all .av-social-link-facebook a {
color: #fff;
background-color: #37589b;
}
#top #wrap_all .av-social-link-twitter a {
color: #fff;
background-color: #46d4fe;
}
#top #wrap_all .av-social-link-gplus a {
color: #fff;
background-color: #de5a49;
}
#top #wrap_all .av-social-link-pinterest a {
color: #fff;
background-color: #cb2027;
}
#top #wrap_all .av-social-link-linkedin a {
color: #fff;
background-color: #419cca;
}
#top #wrap_all .av-social-link-mail a {
color: #fff;
background-color: #9fae37;
}
This code I have found here : https://kriesi.at/support/topic/centre-social-share-buttons-and-re-colour/
It works well but I’d like to know 2 things :
– How can I add a hover color for each button. Because now they are colored and nothng happens when mouse goes over them.
– How can I have bigger icons
Thanks for your advice
Hey zaza26,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.av-share-box ul li a {
font-size: 20px;
}
#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-gplus:hover a {
color: #fff;
background-color: #de5a49;
}
#top #wrap_all .av-social-link-pinterest:hover a {
color: #fff;
background-color: #cb2027;
}
#top #wrap_all .av-social-link-linkedin:hover a {
color: #fff;
background-color: #419cca;
}
#top #wrap_all .av-social-link-mail:hover a {
color: #fff;
background-color: #9fae37;
}
and adjust colors as needed
Best regards,
Yigit