[Plugin: Sociable] Stylesheet broken…stacks icons vertically!

I just installed the plugin on my blog and my icons stack vertically as well. https://www.blackballonline.com/wordpress/ Please fill me in asap

Edit your style.css and add the following

code `div.sociable ul, li {
display: inline;
}`

that will hopefully work…

dimitris

Thanks a bunch

Just to correct that bit of code from dimmdesign… it doesn’t need the comma after div.sociable ul otherwise the rest of your navigation code gets borked.

div.sociable ul li {
	display: inline;
}

Thanks websnail for the fix… i wonder in there is a way to show the icon without that

• button in front.
  i guess it s a basic Css editing.. but still ??

In my case looks like the css file isn’t loaded at all.
Any idea?
Check it here: https://andrea.sciamanna.eu/about/

cmon people, what happened to reading the documentation that comes with plugins???

this plugin has an options page. On that options page is a checkbox to use the sociable.css stylesheet.

Actually, I’m sure people have read the documentation and know about the options page checkbox to use the sociable.css stylesheet. I still have the same vertical stack issue regardless of that fact.

I use the sociable.css (checkmarked in options) on this page – https://www.launchwide.com/2009/07/is-google-your-new-wireless-carrier/ – Here’s the code in sociable css which looks right to me:

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

If anyone has a more progressive response, please share. As a note, I even tried to uncheck the option to use sociable.css and apply the snippet mentioned by websnail but that did not work either. Please help. Thank you.

boylogik I second that…

I’ve tried a couple different css changes to both style.css and sociable.css…nothing seems to work.

Ok guys, I toyed around with the css, and also read up on how I fixed this problem the previous time, and here’s the solution:

1) Make a copy of your current sociable.css file (just in case)
2) Now, delete everything in your sociable.css file
3) Replace with the following code:

div.sociable { margin: 16px 0; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}
.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.sociable ul li {
        background: none;
        float:left; /* IE FIX */
        display: inline !important;
        list-style-type: none;
        margin: 0;
        padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}

That should do the trick. Of course, you’ll now have to update the css to style elements if you had modified them before, but that should be straight-forward since they were your own mods. Thx and credit goes to the forum members as this was not my own solution. Thx.

Cheers!

@whooami before commenting, please takes for granted that most of the people here reads the documentation.

My case is very odd. I’ve this issue only with FF. Opera, and Chrome, for isntance, works properly.
With FF, checking with FireBug, I see a bunch of code missing, including sociable.css.

By now I’m thinking that the issue is caused somehow by WordPress 2.8 ??

I agree. It worked fine until I upgraded to WordPress 2.8.1. Since then, boooooooo. It works within the posts, but the sociable plugin has a nasty vertical mess that appears on every page too, as shown on https://www.greengrounded.com . It wasn’t like this, and there seems no way to correct it without just deactivating the plugin, which I am about to do. I tried the fixes above, got creative with my own css coding, followed documentation, everything…

I hope Yoast fixes this. ASAP.

Thanks guys.

Thanks for this code it helped me figure out my issues on my blog with my stylesheet.

eGift Cards
Instant Gift Cards

How about the sociable stylesheet at the Mailpress? It works fine at the web site but it shows as a vertical line when a newsletter is sent.

So I had the vertical problem as well which was fixed by WebSnail’s line of CSS code up top in this thread. However I still had a gap to the left of my horizontal icons and I couldn’t figure out how to fix it……

Until I looked back into the plugin settings where you can edit the “Share and Enjoy” field. I re-read above that field and it hit me:

For complete customization, copy the contents of sociable.css in the Sociable plugin directory to your theme’s style.css and disable the use of the sociable stylesheet below.

Once I did that the gap problem was fixed, the transparent rollover effect was implemented, and life became better. So I guess what I’m sharing is if anyone is having random conflicts with the styling of this plugin, it’s probably because your CSS file is butting heads with the Sociable.css file. Hope this helps!