Fix For Pretty Link Pro Social Button Bar Spacing

I’m a big fan of Pretty Link Pro and it’s on all of my sites, each of which has a different theme. On one of them I ran into a problem with the social button bar spacing. Even though Blair fixed the original issue for most users in version 1.4.21, the problem was with my theme so that is where I added the quick and easy fix.

The problem I was having was with my Social Button Bar images. There was no or little (less than 2 pixels) of space between my buttons, even after I changed the space setting in the plugin’s options section. As a result, the buttons were really bunched up! I don’t know about you but I’m very attuned to little things like space, alignment, and position. When something like that is a little off kilter, it just drives me nuts.

Anywho, I used my Firefox addons, Web Developer and Firebug to find a solution to my problem. What I found was that, for whatever reason, the Pretty Link Pro social button bar was using a setting from my theme’s CSS style sheet where the images had no padding (spacing.)  The solution was to add a few lines to my style sheet in the appropriate place. You can see an image of the styling that I added to one site (in the red box) below. Just click the image to see the larger version.

Because all themes are different, this solution may not work for you but if you’re still having a problem with social buttons bar spacing, it’s worth a try. Just make sure you save or have copy of the original CSS before you make these changes. You can copy the code below (mouse over code, view source <> and copy) to add to your CSS and see if it fixes your problem. If it does, let me know by leaving a comment.

*Note: I added the comment or title in /*Pretty Links…*/ to make it easy to find in the style sheet. The first part of the code (#) controls the padding of the whole social buttons bar. The part that is highlighted is code that actually controls the padding between the images.

In this instance, the Pretty Link Pro social buttons bar styling is included but you may not need to add that portion in your CSS. On this site, all I really needed to add was the second highlighted part. As I said before, just test it out to see what is actually needed in your theme. You may or may not need both parts.

/***Pretty Link Social Buttons Padding Fix***/

#prli-social-buttons-bar {
padding:10px 0;
}

.prli-social-buttons-bar img {
padding-right: 10px;
}