Hello,
I am using the Activello theme. I was wondering if there is a way to make the social media icons show different colors other than the default. Like #3b5998 code for Facebook, #55acee for Twitter etc.
I know this is possible with the Sparkling theme by adding some codes in the custom css, but I don’t know how to do this with the Activello theme and I don’t really have coding skills
Thank you in advance for your help,
Cristina
movin
April 4, 2016, 8:05am
2
Hi @Cristina ,
I hope you are well today and thank you for your question.
Yes it’s also possible to achieve this with Activello theme by using custom CSS code.
You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.
Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS
#social li a[href*="twitter.com"] .fa:before,
.fa-twitter:before {
color : #55acee;
}
#social li a[href*="facebook.com"] .fa:before,
.fa-facebook-f:before,
.fa-facebook:before {
color : #3b5998;
}
#social li a[href*="github.com"] .fa:before,
.fa-github:before {
color : #696969;
}
#social li a[href*="/feed"] .fa:before,
.fa-rss:before {
content: "\f09e"
}
#social li a[href*="pinterest.com"] .fa:before,
.fa-pinterest:before {
color : #696969;
}
#social li a[href*="plus.google.com"] .fa:before,
.fa-google-plus:before {
content: "\f0d5"
}
#social li a[href*="linkedin.com"] .fa:before,
.fa-linkedin:before {
color : #696969;
}
#social li a[href*="youtube.com"] .fa:before,
.fa-youtube:before {
color : #696969;
}
#social li a[href*="instagram.com"] .fa:before,
.fa-instagram:before {
color : #696969;
}
#social li a[href*="flickr.com"] .fa:before,
.fa-flickr:before {
color : #696969;
}
#social li a[href*="tumblr.com"] .fa:before,
.fa-tumblr:before {
color : #696969;
}
#social li a[href*="dribbble.com"] .fa:before,
.fa-dribbble:before {
color : #696969;
}
#social li a[href*="skype.com"] .fa:before,
.fa-skype:before {
color : #696969;
}
#social li a[href*="foursquare.com"] .fa:before,
.fa-foursquare:before {
color : #696969;
}
#social li a[href*="vimeo.com"] .fa:before,
.fa-vimeo-square:before {
color : #696969;
}
#social li a[href*="weheartit.com"] .fa:before,
.fa-heart:before {
color : #696969;
}
#social li a[href*="spotify.com"] .fa:before,
.fa-spotify:before {
color : #696969;
}
#social li a[href*="soundcloud.com"] .fa:before,
.fa-soundcloud:before {
color : #696969;
}
Please change the color value in the above code to whatever you want to use by referring the following pages.
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp
Best Regards,
Movin
Hello Movin,
Thank you so much for your help. Its working perfectly
Have an awesome week,
Cristina
movin
April 5, 2016, 7:27am
4
You are most welcome here