[Plugin: Sociable] Adjusting Spacing

Have you tried setting the sociable settings to use the Sociable stylesheet? It might help your issue. Or look for “img” properties in the Sliding Door theme stylesheet and look for large margins and/or paddings.

~Anthony

I tried playing around with the sociable style sheet but was unable to find the area that gets it to do what I wanted.

I’m unfamiliar with coding in general, so its very possible the sociable stylesheet has the capability – I just don’t know how to do it =/

Do you know what parameters in the sociable stylesheet account for the spacing?

Thank you for you help, btw!

Your theme’s primary stylesheet is overriding sociable’s stylesheet. Open up style.css in your theme folder and find this code, which is the culprit:

#content p,
	#content .post ul li {
		font: normal 13px/20px Verdana, Helvetica, Sans-serif;
		margin-bottom: 10px;
		margin-top: 10px;
	color: #eaeaea;
	margin-right: 140px;
	text-align: justify;
}

This piece of code affects how unordered lists are displayed, and Sociable uses an unordered list to display the social media icons. Notice how it says margin-right: 140px. This is automatically adding a 140 pixel right margin to each list item (icon) in your post content.

Simply commenting out that line of code fixed the icon spacing problem, but I’m not sure if it would affect other parts of your site. You can give it a try (back up style.css if you’re worried) and see if it adversely affects any other parts of your site.

An aside:

Just glancing at the code, it appears to me that Sociable’s stylesheet *should* take precedence. Yoast uses the !important tag to attempt to do this, but for some reason that doesn’t work in this case.

Ok, I’ve figured it out, and in doing so found the best solution. Open sociable.css and find this code:

.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}

Change this line: margin: 0;

To this: margin: 0 !important;

This should fix your problem. Let me know if it doesn’t work.

Asechrest you are my hero.

Hi Asechrest,

I also have a spacing problem with my icons. I believe it is because of a div defined for my theme.

So if the sociable code is inserted inside that div, it might result in a spacing problem. How do I fix that?

Where is the sociable code inserted automatically?

The sociable code is automatically inserted after the content of your post. So it will be within whatever divs hold your post content.

Post a link to your site for further assistance.

hey I’m trying to fix this on our site too- monetize * media dot com/blog. please advise on what to do…

i tried going to this sociable.css but wasn’t sure how to get there… any other ways? i think the theme I’m using is Inove

hey I’m trying to fix this on our site too- monetize * media dot com/blog. please advise on what to do…

i tried going to this sociable.css but wasn’t sure how to get there… any other ways? i think the theme I’m using is Inove

Using your FTP program, your WordPress file editor (if using WP2.8), or your server’s filesystem (e.g. cPanel, etc.), navigate to /wp-content/plugins/sociable/sociable.css and open or download this file for editing.

Change this code:

.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}

to this:

.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0 !important;
	padding: 1px !important;
}

thank you sir!!!
that worked brilliantly : )

Asechrest.. you made my day, and probably the days of many others.. Thanks ?? !!

Oscar,
INVEVE

Awesome, this just made my day too. I had the same problem and was looking for a solution and came across this. Thanks asechrest!

DebT