You can modify the look of ShareProgress buttons to match your organizations branding and theme.

To customize your share buttons, you must first have a page with small share buttons created.

Once your buttons are generated, you can modify your buttons with CSS.

1. First put your buttons in a div container. In the example below, buttons are in a container named .share-buttons.

<div class="share-buttons">
  {Share Buttons Go Here}
</div>

2. Target the class for each share button to set your own size, background or margins. To customize specific buttons, use the following classes, .sp_fb_small for Facebook, .sp_tw_small for Twitter, and .sp_em_smallfor email.

Modified Button Sample CSS

.share-buttons .sp_fb_small a {
  width: 75px;
  height: 28px;
  background: #3b579d url(http://www.shareprogress.org/media/FSS.png) 0px 0px no-repeat;
  float: left;
  margin-right: 5px;
  margin-left: 5px;
}

3. Place this code either in a CSS style block or your stylesheet.

Did this answer your question?