All Collections
Share Buttons
How do I change the look of the ShareProgress buttons?
How do I change the look of the ShareProgress buttons?
Anna Schmitz avatar
Written by Anna Schmitz
Updated over a week ago

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

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?