help with sociable plugin please

can you post the css for the class “sociable”?

I am not sure as I can’t see it, but there seems to be a padding-left or a margin-left to the list items there…

first try changing the class for an id like…

<div id="sociable">

then to the css add this:

#sociable ul li {
margin-left: 0px;
padding-left: 0px;
}

hope it helps

thanks… follow up question..

im a newbie

the <div id=”sociable”> where does this go? what file?

and the add to css that to the sociable.css?

here is the sociable.css
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;
display: inline;
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);
}

Ok. As I thought you have a hierarchy problem here, the code with sociable is well done. It’s just another code superior to it that makes your buttons distend like that.

There are some ways to apply CSS inside tags:

CLASS way (which you are using)

in the HTML file: <div class="sociable">
in the CSS file: .sociable

ID way (which is superior in CSS heriarchy to CLASS)

in the HTML file: <div id="sociable">
in the CSS file: #sociable

Take a look at your source code, or where you pasted the HTML code for your plugin, I found this:

<div class="sociable">
<div class="sociable_tagline">
<strong>Share and Enjoy:</strong>
</div>
<ul>
	<li><a rel="nofollow" target="_blank" href="https://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;title=Mesa%20surplus%20sale" title="Digg"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://del.icio.us/post?url=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;title=Mesa%20surplus%20sale" title="del.icio.us"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>

	<li><a rel="nofollow" target="_blank" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;t=Mesa%20surplus%20sale" title="Facebook"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;title=Mesa%20surplus%20sale" title="Google"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="mailto:?subject=Mesa%20surplus%20sale&amp;body=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F" title="E-mail this story to a friend!"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/email_link.png" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;title=Mesa%20surplus%20sale&amp;source=Dean+Ouellette+--+Mesa+and+East+Valley+Real+Estate+&amp;summary=Looking%20to%20pick%20up%20some%20used%20items%20at%20a%20good%20price%3F%20Mesa%20may%20be%20able%20to%20help.%20The%20City%20of%20Mesa%20holds%20surplus%20sales%20at%20their%20warehouse%20locations%20on%20Tuesdays%20and%20Thursdays.%20The%20items%20for%20sale%20are%20surplus%20items%20from%20the%20city%20and%20items%20picked%20up%20in%20polic" title="LinkedIn"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/linkedin.png" title="LinkedIn" alt="LinkedIn" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://www.myspace.com/Modules/PostTo/Pages/?u=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;t=Mesa%20surplus%20sale" title="MySpace"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/myspace.png" title="MySpace" alt="MySpace" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://pownce.com/send/link/?url=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;note_body=Mesa%20surplus%20sale&amp;note_to=all" title="Pownce"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/pownce.gif" title="Pownce" alt="Pownce" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/printer.png" title="Print this article!" alt="Print this article!" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://reddit.com/submit?url=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;title=Mesa%20surplus%20sale" title="Reddit"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/reddit.png" title="Reddit" alt="Reddit" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://www.stumbleupon.com/submit?url=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;title=Mesa%20surplus%20sale" title="StumbleUpon"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a></li>

	<li><a rel="nofollow" target="_blank" href="https://technorati.com/faves?add=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F" title="Technorati"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/technorati.png" title="Technorati" alt="Technorati" class="sociable-hovers" /></a></li>
	<li><a rel="nofollow" target="_blank" href="https://buzz.yahoo.com/submit/?submitUrl=http%3A%2F%2Fdeansellsaz.com%2F2008%2F11%2F10%2Fmesa-surplus-sale%2F&amp;submitHeadline=Mesa%20surplus%20sale&amp;submitSummary=Looking%20to%20pick%20up%20some%20used%20items%20at%20a%20good%20price%3F%20Mesa%20may%20be%20able%20to%20help.%20The%20City%20of%20Mesa%20holds%20surplus%20sales%20at%20their%20warehouse%20locations%20on%20Tuesdays%20and%20Thursdays.%20The%20items%20for%20sale%20are%20surplus%20items%20from%20the%20city%20and%20items%20picked%20up%20in%20polic&amp;submitCategory=science&amp;submitAssetType=text" title="Yahoo! Buzz"><img src="https://deansellsaz.com/wp-content/plugins/sociable/images/yahoobuzz.gif" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers" /></a></li>
</ul>
</div>

change the first line in your theme to:
<div id="sociable">

then change your css to:

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;
	display: inline;
	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 make it. At least worked fine here… Regards!

any ideas?

Hi ShirouJune

I’m having same problem. I think I understand what you are saying, but how do I edit the HTML source code in wordpress? I see where I can edit the CSS style sheet.

Thanks,
Stephen Pickering

https://stephenpickering.com

I mean is it in a certain wordpress php file or the social.php file?

Thanks