I’ve written before on my blog about ShareThis — I do love their WordPress plugin and their analytics provide some interesting insights into my blog traffic. There is however a niggly little thing which has been bugging me for a while — and it’s all to do with the way their “chicklets” look. (If you’re not familiar with the ShareThis lingo, chicklets are those bubbles with numbers in them which show you how many times a certain piece of content has been shared per channel — e.g. Twitter, Facebook etc.)

If you are like me, always in a rush to produce the content rather than customize it (in other words, don’t want to spend too much time setting up your blog and want to dedicate most of the time to actually writing “stuff”), then you probably took the same steps to install the ShareThis plugin, accepted the defaults and then enable it. Trouble is if you do that, the chicklets by default don’t have a uniform/standard look, and you probably spotted different colors and styles being used — which gives the content a bit of a messy and disorganized look.

I’ve included below a screenshot of the default look and feel of these, to exemplify what I mean (this is actually taken ironically from the ShareThis blog):

This as I said has been rubbing the wrong way against my OCD nature so I had to finally look into how to eliminate as much as possible of this annoyance. While I couldn’t figure out the Google+ button (due to its native code), I figured out I think all of the others. The trick relies on a simple piece of CSS you need to include in your theme CSS (I’ve added it at the bottom to make it easier to find and revisit at any point, however I’m sure it will work if you place it anywhere else since as far as I can tell it’s unlikely it will conflict with any other themes naming/ID’s/classes):

.st_facebook_vcount .stBubble_count, .st_fb_like_vcount .stBubble_count,
.st_twitter_vcount .stBubble_count, .st_twitter_vcount .stBubble_count {
   background: -moz-linear-gradient(center top , #D5D5D5 0px, #EFEFEF 48%, #FFFFFF 94%) repeat scroll 0 0 transparent !important;
   border: 1px solid #CCCCCC !important;
   border-radius: 4px 4px 4px 4px !important;
}

And the result as you can see is much neater:

Enjoy!