Change colour of Instagram Social Counter Bar

Posted in: Newspaper
Post count: 17

Hi,
I’m wondering if there is a way to change the colour of the social counter bars. The Instagram bar is blue, yet the signature colours of Instagram are more orangy-pink – I’d like the bar to be more representative of that.
Anyone know how to change the colour?

Thanks,
Michelle

Post count: 20685

Hi,

You could change that color with some CSS. Something like this code for example
https://www.screencast.com/t/AgW7PKZGZHmX
This the code used, you may change the color as you want, then enter it in Theme panel->Custom CSS

.td-social-font-icons .td_social_instagram .td-sp:before {
color: #C32AA3;
}

Thanks

Post count: 17

Thanks Simon,

That worked beautifully for the icon, how about the bar? The icons only show that way on the homepage, if you go to any post page, it’s a solid blue bar for Instagram, and it would be nice to have that bar be orange/pink as well.

Thanks,
Michelle

Post count: 1043

Use this code

.td_social_instagram .td-social-box {
    background-color: #C32AA3;
}

or
.td_social_instagram .td-social-box {
background-color: #e4405f;
}

Post count: 17

Thank you @epickenyan – it’s perfect 🙂

Post count: 1043

You’re welcome. Glad I could help.

Post count: 312

Hi,

I try to make change the hover color of social counter but it’s not working as I want..Only the right part of the button is changing.

I use this code

.td_social_facebook .td-social-box :hover { background-color: #cf5665; }

Can someone help me to improve it ?

Thank you

Post count: 35449

Hello,

This custom css will change the text color on hover on Facebook ->
.td_social_facebook .td-social-box :hover { color: #cf5665; }
If you need more help please provide me a link where I can inspect your social counter style and also provide some details about what you want to achieve.

Thank you!

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.