Styling Social Buttons

WPSSO SSB Logo

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.

Continue reading


Styling Social Buttons

NGFB Logo

Social Buttons Style

NGFB 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 NGFB Styles settings page.

The default styles offer a fairly complete example of CSS styling for the NGFB 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 .ngfb-buttons class is included within one of several other classes: .ngfb-content-buttons and .ngfb-excerpt-buttons for buttons enabled on the Social Sharing settings page, .ngfb-widget-buttons for buttons enabled from the widget, and .ngfb-shortcode-buttons for buttons added using the [ngfb] 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 NGFB social buttons enabled on the settings page. For example, the following stylesheet hides all the NGFB 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.

Continue reading


Span File and Vars

woodpress-logo

FYI

  • Plugin: Span File and Vars
  • Version: 1.0
  • Description: Searches for file and variable names within content, and wraps them with a span html tag.
  • License: GPLv2 or later
  • Author: Jean-Sebastien Morisset
  • Requires WordPress: 3.0 or higher
  • Compatible Up To: 3.9.1
  • Last Updated: 1 day ago
  • Downloaded: 222 times
  • Plugin Homepage »

Searches for file names, folder paths, variable and function names within the content and comment text, and wraps them with a span html tag.

.spanfile,
.spanvar {
    font-family:'Vollkorn', Geneva, sans-serif;
    font-size:1.1em;
    letter-spacing:0.5px; 
}

Continue reading


Encode Small Images in Stylesheets

Continuing the earlier theme of Optimizing Images to Save Bandwidth and Speed Page Load, you can also encode small (background) images directly in your stylesheets. For each image / page element encoded within a stylesheet, it means one less HTTP connection for content, which in turn means pages finish loading faster. These images should generally be small and downloadable quickly — what you want to save is the HTTP connection overhead, not the download time (both images and stylesheets are generally cached after downloading). The images should also be encoded within sourced stylesheet files, so the stylesheet files can be cached by the browser. If you encode images within your content (using <style></style> tags for example), the encoded image will have to be downloaded for every page view, so although you’re saving HTTP connections, your page size has increased. By encoding images in sourced stylesheet files instead, the browser (and content delivery services) can cache the whole stylesheet, including the encoded image(s).

Continue reading