I agree here, I was surprised when my colorful buttons became gray and flat. I’m sure this looks great on some pages but on mine it’s too boring to catch people’s eyes. Can you please add the last set of buttons in as a new option?
If you enjoyed the colourful buttons, you could switch to the “Icon” button style, which offers colourful sharing buttons. That should offer a nice alternative.
Since you liked the old buttons, you could also customize the current buttons with CSS, to make them look like the old buttons. You can start from the old stylesheet, available here:
https://github.com/Automattic/jetpack/blob/2.9.3/modules/sharedaddy/sharing.css
You can add that CSS to your theme stylesheet, or to your custom CSS editor available under Appearance > Edit CSS in your dashboard.
Thread Starter
WisTex
(@wistex)
Thanks for the CSS, I will try that. But it would still be nice to have the old one as an option. Here’s why:
- Subdued Theme: Great for certain web designs where most of the design is subtle.
- Icons: Great for bold websites where these bold icons fit with the theme.
- Old Theme: Great for websites between subdued and bold, where you want some color, but you don’t want to be bold about it.
If you bring back the old theme as an additional choice, you cover all types of websites, not just subdued and bold.
By the way, my primary reason for installing JetPack was because I wanted the sharing buttons theme. I liked the way it looked. So I am sad to see it go.
If you’re looking for something with some colors, but not too much, while keeping all the performance enhancements of the new buttons, you could try to add a touch a color to each icon with a bit of CSS. Try adding the following to your custom CSS editor, for example:
.sd-social-icon .sd-content ul li.share-facebook a:before, .sd-social-text .sd-content ul li.share-facebook a:before, .sd-content ul li.share-facebook div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-facebook a:before {
color: #3b5998;
}
.sd-social-icon .sd-content ul li.share-twitter a:before, .sd-social-text .sd-content ul li.share-twitter a:before, .sd-content ul li.share-twitter div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-twitter a:before {
color: #00acee;
}
Here’s what I came up with. They’re not the OLD style buttons but they do look pretty great. Just enough color to look professional but catch the eye.
This adds color to the Facebook, Twitter, Pinterest, Google+, Print, and Email buttons.
You might want to change your colors, especially for email and print.
Anyways, copy/paste this whole thing into your style sheet [Appearance->Edit CSS] and see how that works for you.
If this is helpful I’m always looking for subscribers for my articles as well as likes on my facebook. Thanks! <3
.sd-social-icon .sd-content ul li.share-facebook a:before, .sd-social-text .sd-content ul li.share-facebook a:before, .sd-content ul li.share-facebook div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-facebook a:before {
color: #6786bf;
}
.sd-social-icon .sd-content ul li.share-twitter a:before, .sd-social-text .sd-content ul li.share-twitter a:before, .sd-content ul li.share-twitter div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-twitter a:before {
color: #00acee;
}
.sd-social-icon .sd-content ul li.share-email a:before, .sd-social-text .sd-content ul li.share-email a:before, .sd-content ul li.share-email div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-email a:before {
color: #67d672;
}
.sd-social-icon .sd-content ul li.share-print a:before, .sd-social-text .sd-content ul li.share-print a:before, .sd-content ul li.share-print div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-print a:before {
color: #429ac9;
}
.sd-social-icon .sd-content ul li.share-pinterest a:before, .sd-social-text .sd-content ul li.share-pinterest a:before, .sd-content ul li.share-pinterest div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-pinterest a:before {
color: #c40606;
}
.sd-social-icon .sd-content ul li.share-google-plus-1 a:before, .sd-social-text .sd-content ul li.share-google-plus-1 a:before, .sd-content ul li.share-google-plus-1 div.option.option-smart-off a:before, .sd-social-icon-text .sd-content li.share-google-plus-1 a:before {
color: #cf6034;
}
