Famous social network icons.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: , , , , , , , , , ,

3 Comments to “How to increase the spacing on the Sociable WordPress plugin”

  1. [...] More:  How to increase the spacing on the Sociable WordPress plugin [...]

  2. Parag says:

    Please help me !! The actual site on which I am working – http://www.rexnordindia.in is under construction, so I m providing you the link of my another site – http://latestpricelistindia.in.....Sample.jpg I want the content alignment as shown in the link. I have tried P-tag but no avail. Help me !!!!


    mywebmastertips Reply:

    I’ll take a look at it, but it’s still under construction.


Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>