[Plugin: Sociable] Remove bullets and do horizontal

That changed it from vertical to horizontal, but they still have titles instead of icons.

Any ideas on how to get the icons back?

P.S. In another theme with the same exact settings, it still displays the icons horizontally with no change to the code.

well, pasting the code at the bottom of the theme’s style.css totally worked. thank you so much, because i really love the plugin.
??

Not having problems with vertical vs. Horizontal, but still cannot get rid of the bullets between icons. Any suggestions.

Code below:

/* Sociable
--------------------------- */
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;
	list-style: none;
        padding: 0;
}
.sociable ul li {
	background: none;
	display: inline;
	list-style: none;
	margin: 0;
	padding: 1px;
}
.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);
}

Not using sociable CSS, this is added to my theme’s stylesheet.

Page in question:

cyclezine.net

what i did was to change this line:

.sociable img {
	float: left; <-- change to LEFT
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0 3px 0 0; <-- changed to 0 3px 0 0 to include some space
	padding: 0;
}

to get it into a horizontal line.

I’m set with the horizontal line, I just want to get rid of the bullets.

found the issue. It was a background image in my theme that was adding the bullet. Thanks to Pat Diven for the help.

I found that sociable is using a class=sociable in the div, and my id CSS was overwriting it (which has the bullet in my #content defs).

So I changed the class=sociable in sociable.php to a id=sociable and put the set of #sociable settings in my style.css…

#sociable span {
	# display: block;
}
#sociable ul {
	display: inline;
	margin: 0;
	padding: 0;
}
#sociable ul li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
#sociable ul li:before { content: ""; }
#sociable img {
	display: inline;
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

That’s a rather odd way around it, as you’d have to change the plugin each time. I’d suggest doing #content .sociable or something to that extend, that would work just as well. The issue you have is called CSS Specificity, which you can find more about here:

https://www.htmldog.com/guides/cssadvanced/specificity/

Yes, that did it. I wasn’t aware of the specificity. Learn something new every day.

So, I’m back to the vanilla Sociable with the following CSS:

#content .sociable span {
	# display: block;
}
#content .sociable ul {
	display: inline;
	margin: 0;
	padding: 0;
}
#content .sociable ul li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
#content .sociable ul li:before { content: ""; }
#content .sociable img {
	display: inline;
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

I am having the same problem.
Everything was just fine until I updated the plug in tonight.
Then it went vertical and with bullets in Firefox. still looks ok in Safari.

Seems to me to be a bug in the update, rather than a bug in all the users that did the update.

I deactivated the plug in. Not sure if to reactivate and do the fixes above or just use another plug in that does not require time and frustration just from doing a update.