Change Colors of Social Counter Widget – Style 9 Colored Circles

Hi,

1. So you want all the socials to be of the same background, this could be done like this
– https://www.screencast.com/t/cb7T6ZA41Nt
Enter this code in Theme panel->Custom CSS section

.td-social-colored .td-sp {
background-color: #00b0ff!important;
}

2. They have fixed width and height like this
– https://www.screencast.com/t/hZMDHlAPKLd
You could reduce those values if needed, using the same code
– https://www.screencast.com/t/m2HYmIiJG8q
This is the code used in the example, give it a try

.td-social-colored .td-sp {
width: 44px;
height: 44px;
background-position: -14px -222px!important;
}

Thanks

Indeed that is the case, I did not realize that. Each social icon has to be re-positioned after the width change, like this
– https://www.screencast.com/t/E0pGMPi7zM
They all have specific positioning so a code has to be created for each social. In this example I used Google+, Instagram, Twitter and YouTube. This is the code for them, which should be added in addition to this one

.td-social-colored .td-sp {
width: 44px;
height: 44px;
}

.td-social-style9 .td_social_googleplus .td-sp {
background-position: -15px -274px;
}
.td-social-style9 .td_social_instagram .td-sp {
background-position: -14px -222px;
}
.td-social-style9 .td_social_twitter .td-sp {
background-position: -14px -429px;
}
.td-social-style9 .td_social_youtube .td-sp {
background-position: -13px -378px;
}

If you have other socials mention them, or provide a link to your website for a more accurate solution.

This is the code for the Facebook icon
– https://www.screencast.com/t/S4jBHwC4Gg

.td-social-style9 .td_social_facebook .td-sp {
background-position: -15px -15px;
}