Styling Social Buttons

Social Buttons Style

WPSSO SSB uses several layers of classes to describe all its social buttons, and each button has its own individual class name and id as well. You may add styling for social buttons to an existing stylesheet (from your theme, for example), or use the built-in stylesheet editor found on the Sharing Styles settings page.

The default styles offer a fairly complete example of CSS styling for the social sharing buttons. In the default All Buttons style tab, I’ve specified the width (and height) for each button’s <div>. This takes a little more work to get right, but pre-defining the height and width of each button helps the page rendering speed significantly. The .wpsso-buttons class is included within one of several other classes: .wpsso-content-buttons and .wpsso-excerpt-buttons for buttons enabled on the Social Sharing settings page, .wpsso-widget-buttons for buttons enabled from the widget, and .wpsso-shortcode-buttons for buttons added using the [ssb] shortcode, etc. Additional styling tabs will also be available for users of bbPress and/or BuddyPress.

Hide Social Buttons

You can also hide the social buttons (or pretty much any container) within a webpage by using display:none in your stylesheet. As an example, if you use the “Inspect Element” feature of Firefox (right-click on the object to inspect) — or use “View Source” to see the webpage’s HTML — you should find your content wrapped in a <div> HTML tag similar to this one:

You can use any of these class names to hide one or more social buttons enabled on the Sharing Buttons settings page. For example, the following stylesheet hides all social buttons on Post 123, any page in category Test, and posts using the Aside and Status formats:

The Pro version also includes a checkbox to enable/disable social buttons for each Post and Page without the use of CSS.

Muted Social Buttons

Here’s an example that grey’s-out the social buttons until the mouse hovers over a button. You can add the following CCS to the existing stylesheet under the All Buttons style tab.