How do I change the look of the ShareProgress buttons?

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_small for 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.