Sparkling 2.0 - editing social icons

Hello,

Since the last Sparkling update, I have some little problems regarding how to edit the social icons.

I was using some CSS codes so that I can have my social icons in different colors. It worked perfectly until I had to update the theme. Now even if I have those codes in Theme Options – Other – Custom CSS, my social icons colors appear with the default color (that light grey).

What can I do to change again the colors for my social media icons?

Thank you in advance for your help.

All the best,
Cristina

Hi Cristina,

I hope you are well today and thank you for your question.

Yes the social icons functionality is changed in the latest version of Sparkling theme.

Could you please share your old CSS code that you were using and also share your site URL so that i can help you to achieve it?

Kind Regards,
Movin

Hello Movin,

Thank you for your reply and hope you are having a great day.

This is the CSS code that I had (still have) in Sparkling Options – Other – Custom CSS:

#secondary .widget .social-icons a.facebook {
  background: #3b5998;
}
#secondary .widget .social-icons a.twitter {
  background: #55acee;
}
#secondary .widget .social-icons a.googleplus {
  background: #dc4e41;
}
#secondary .widget .social-icons a.pinterest {
  background: #cb2027;
}

And here is my site URL:

http://getyouronlinebusiness.com/

I have my social icons both in the side bar (using the Sparkling social widget) and within the footer.

Hope we can fix this. Thank you in advance for your help.

Best Regards,
Cristina

Hi Cristina,

If you want to only change the color of social icons displayed in the sidebar then you can try using the following CSS code.

#secondary .widget .social-icons li:nth-child(1) a{
  background: #3b5998;
}
#secondary .widget .social-icons li:nth-child(2) a{
  background: #55acee;
}
#secondary .widget .social-icons li:nth-child(3) a{
  background: #dc4e41;
}
#secondary .widget .social-icons li:nth-child(4) a{
  background: #cb2027;
}

Along with sidebar icons if you want to also change the social icons color displayed in the footer then you can try using the following CSS code.

.social-icons li:nth-child(1) a{
  background: #3b5998 !important;
}
.social-icons li:nth-child(2) a{
  background: #55acee !important;
}
.social-icons li:nth-child(3) a{
  background: #dc4e41 !important;
}
.social-icons li:nth-child(4) a{
  background: #cb2027 !important;
}

Best Regards,
Movin

Hello Movin,

It worked!!! Thank you so much for the support offered.

Best Regards,
Cristina

You are most welcome here :slight_smile: