How to increase the spacing on the Sociable WordPress plugin

I don’t know about you, but I absolutely love the Sociable WordPress plugin. It adds so much to my WordPress blogs by helping others spread the word about my various articles in their favorite social networks.

The only issue I have with the plugin is that I think the line height spacing could be increased just a little bit more on some of my blogs. It kind of depends on which WordPress theme you have. Certain WordPress themes seem to like fine, while others look too bunched up on the line height side of things.

The fix is a very simple css alteration that you can change to your blog’s current needs. All you need to do is find the sociable.css file on your server. Go to your ftp client and open up your wp-content folder on the blog that needs fixing. Then go to your plugins directory, and finally open up your sociable folder and you will find the css file there. Make a copy to your personal computer.

All you need to do from there is to find this line of css code (it should be the very first line of code:

div.sociable { margin: 16px 0; }

Then just add a line height command to it:

div.sociable { margin: 16px 0; line-height: 2em; }

Just a couple things to take notes on here.

• I used 2em for the line height spacing, you can change it to whatever works for your blog’s look and feel.
• Every time the sociable plugin gets a new update, you’ll have to make the change again. Make sure the change is really necessary on your blog, so you’re not wasting too much of your time.
• This example only works well if you only have one row of social network icons, more and it will look like there is too much space between everything.

Tags: Blog, Code, CSS, FTP Client, Line Height, Personal Computer, Sociable Wordpress Plugin, Social Netword Icons, Social Networks, Spacing, Wordpress Blog