Styling Changes to Sociable for Display on Hover
Chris Pirillo posted about some WordPress Plugin Ideas a few days ago. One of his requests seemed relatively easy and was already 99% available. We figured we could finish that 1% pretty quickly, so that’s what we did.
Here is the original request.
“…WP plugin for Bookmarking the post in the multitude of social engines (on hover, add to del.icio.us, Digg, Reddit, etc.). I don’t wanna clutter my posts with hundreds of icons…”
Now for the solution… The ability to display icons for various Bookmarking engines is already available in the WP plugin Sociable. Sociable provides a handful of setting and 25 Bookmarking engines. After looking at the code, we only had to make a few changes to provide the specific functionality that Chris wanted.
First, we need to edit the output of the HTML a bit from the plugin.
On line 235 of sociable.php change
$html .= '<span>These icons link to social bookmarking sites where readers can share and discover new web pages.</span></span><ul>' . "\n";
To
$html .= '<span><ul>' . "\n";
And on line 255 change
$html .= "</ul></div>\n";
To
$html .= "</ul></span></span></div>\n";
Now that is done, you just need some basic styles to enable the hover/mouseover. Replace the original sociable.css file with the following CSS. Of course, you would/could edit the style to your liking so it fits in with your own design.
New CSS
div .sociable { margin: 1em 0; }
/* width of mouseover hot zone */
span.sociable_tagline {
position: relative;
width: 10em;
}
/* position and style of hidden block containing icons */
span.sociable_tagline span {
position: absolute;
display: none;
width: 0;
top: -4em;
left: 0em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
padding: .25em;
}
/* display hidden block on hover and set desired block width */
span.sociable_tagline:hover span {
display: block;
width: 12em;
}
.sociable span { display: block; }
.sociable ul {
display: inline;
margin: 0;
padding: 0;
}
.sociable li {
background: none;
display: inline;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img { border: 0; }
Finally, if you want to enable the feature for Internet Explorer, you will have to make the following change.
On line 233 of sociable.php change
$html .= '<div class="sociable"><span class="sociable_tagline">';
To
Note: you will want to change 12em below to define your hot zone width
$html .= '<div class="sociable"><span class="sociable_tagline" onmouseover="this.childNodes[1].style.display =' . "'block';this.childNodes[1].style.width =" . "'12em'" . ';" onmouseout="this.childNodes[1].style.display =' . "'none';this.childNodes[1].style.width =" . "'0'" . ';">';
Upload, activate and configure the plugin as normal.
You can see an example on this post.
