Customizing Colors of Social Warfare Share Buttons
How can I customize my Social Warfare share buttons to match my site colors?
If you have been blogging for any amount of time, you have probably heard by now how important blog share buttons are for every blog in the blogosphere. And although social share buttons are most often found in their default colors. Having the ability for customizing colors of Social Warfare share buttons makes some of us a little bit happier. 😜
What are the social share buttons?
Why are social share buttons so important?
Well, because social media sharing buttons help us drive free traffic to our sites. Just think of the many times that you yourself have read a great article or blog post and decided to share it on Facebook or Twitter. Or you have seen a delicious looking recipe on your favorite blog that you want to try, so you pin it on Pinterest. As a blogger, this sharing is totally free advertising and the potential for more traffic to your site.
As a blogger, I spend a good amount of my time (probably too much, really!) checking out other people’s blogs, researching different topics and just seeing how other people do things. One thing that I always notice is the blog share buttons.
One, because if I like what I am reading I want to share it on my own social media. But also, because if you are a blogger who has gone to a lot of trouble to brand your site with custom colors yet you haven’t used your brand colors for your share buttons, they end up sticking out like a sore thumb in their default colors.
**This post may contain affiliate links. Which means if you purchase something through one of my links, I may receive a small commission with no extra cost to you. For more information, see my disclosures here.
What is Social Warfare?
There are, of course, many social share buttons to choose from but Social Warfare is a powerful WordPress social sharing plugin that is commonly used by many WordPress blogging sites.
A lot of social sharing plugins for WordPress slow down your site, are not very attractive, and don’t work the way you would hope. Social Warfare has good looking social share buttons that look great no matter what screen size or resolution.
Social Warfare has a free version and a pro version. Social Warfare Pro version is only $29/year and includes lots of cool features. And considering what other social media share plugins go for $89 – $240/year, Social Warfare is a great deal. But as a new blogger, the free version is a good place to start when you are still just kicking the tires.
Customizing the colors of the free version of Social Warfare share buttons
With the free version of Social Warfare you do not get the additional options of choosing styles and colors of your share buttons but if you know a little bit of code, anything is possible!
For those of you who don’t have my delicate sensibilities when it comes to social share buttons, do not fear! The social share buttons work perfectly fine in their default colors 😜
But if you share my need to color coordinate your blog’s social share buttons, then the following code snippet will allow you to do just that.
In order to add this code to your site, you will do the following:
- Copy and Paste the following code under Appearance > Customize > Additional CSS
- Once you paste this code in, you can edit the HEX color code to be whatever color you’d like your icons to appear
- Publish the changes and you’re all set!
And just like that, you have made your little corner of the internet so much more beautiful!! 😜
Give it a try and let me know how it goes in the comments below.
Thank you so much! I just tried this out and LOVE it!!!
So I copied the code and changed the hex color. However the button is still grey and the color I added only shows upon hovering. How do I change the button color itself? THanks!
So for this style of button you need to do it a little differently.
Try removing the code from the post and adding this instead:
.swp_social_panel.swp_default_medium_gray .nc_tweetContainer {
background-color: #B5D572;
border: 1px solid #999;
}
.swp_social_panel.swp_default_medium_gray .nc_tweetContainer:hover {
background-color: #8d8187;
border: 1px solid #999;
}
If that doesn’t work, try adding !important to the background-color lines…so that line would like this:
background-color: #B5D572 !important;
I’m not sure if those are the exact colors you want…feel free to edit the hex color code to what you want. Let me know if that works or not 🙂
Just what I was looking for, worked perfectly. Thank you 🙂
Hey, this solution is amazing. It worked. Thanks a lot. Initially, the vibrant colors of the icons are disrupting the entire vibe of my post but I have added the hex color depending on the design of my site into your CSS code and it’s pretty cool. Thanks a lot.