Customizing Jetpack’s Sharing Buttons

05/22/2014
Back to Blogs

I wasn’t a fan of the style presets for Jetpack’s Sharing buttons for WordPress. I tweaked the CSS and Sharing buttons settings to get the following look.

jetpack sharing buttons

Jetpack Settings

  1. First, you need to have Jetpack installed and Sharing enabled.
  2. Go to Settings>Sharing.
  3. Add the social sites you prefer.
  4. Set Button Style to Text only.
  5. Save changes.

CSS

Now, that your settings correct, add the following CSS to your theme’s style.css.

/*
* JetPack Social Buttons
*/div.sharedaddy div.sd-block {
border-top: 1px solid rgba(0,0,0,0.13);
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgba(0,0,0,0.13);
padding: 0;
}.single-format-quote div.sharedaddy div.sd-block {
display: none;
}div.sharedaddy .sd-content {
text-align: center;
margin-top: 10px;
margin-top: 1rem;
}

div.sharedaddy a.sd-button {
border: none !important;
box-shadow: none;
}

.sd-social-icon-text a.sd-button > span, a.sd-button > span {
opacity: 1;
padding: 4px 10px;
padding: .4rem 1rem;
}
li.share-linkedin a.sd-button > span,
li.share-email a.sd-button > span,
li.share-facebook a.sd-button > span,
li.share-google-plus-1 a.sd-button > span,
li.share-tumblr a.sd-button > span,
li.share-pinterest a.sd-button > span,
li.share-twitter a.sd-button > span,
li.share-pocket a.sd-button > span {
border: none;
color: #fff;
font-family: ‘verdana’, arial;
font-size: 11px;
font-weight: 300;
letter-spacing: 0;
text-transform: uppercase;
}
li.share-email a.sd-button > span {
background: #000;
}
li.share-email a.sd-button:hover > span {
background: #999999;
}
li.share-linkedin a.sd-button > span {
background: #007bb6;
}
li.share-linkedin a.sd-button:hover > span {
background: #003b57;
}
li.share-facebook a.sd-button > span {
background: #4965a0;
}

li.share-facebook a.sd-button:hover > span {
background: #1e73be;
}

li.share-twitter a.sd-button > span {
background: #55ACEE;
}

li.share-twitter a.sd-button:hover > span {
background: #1e73be;
}

li.share-google-plus-1 a.sd-button > span {
background: #dd4b39;
}

li.share-google-plus-1 a.sd-button:hover > span {
background: #a30000;
}

li.share-tumblr a.sd-button > span {
background: #35465D;
}

li.share-tumblr a.sd-button:hover > span {
background: #1e73be;
}

li.share-pocket a.sd-button > span {
background: #F15367;
}

li.share-pocket a.sd-button:hover > span {
background: #a21b2e;
}

li.share-pinterest a.sd-button > span {
background: #D5222A;
}

li.share-pinterest a.sd-button:hover > span {
background: #1e73be;
}

.sd-button span.share-count {
display: none;
}

div.sharedaddy h3 {
font-size: 20px !important;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
text-transform: none;
letter-spacing: 0;
line-height: 1;
font-weight: bold;
}

.social-text .sd-content ul li a.sd-button:active,
.sd-social-text .sd-content ul li a.sd-button, .sd-content ul li a.sd-button,{
box-shadow: none;
background: none !important;
}
.sd-social-text .sd-content ul li a.sd-button, .sd-content ul li a.sd-button, .sd-content ul li a.sd-button:hover, .sd-social-text .sd-content ul li a.sd-button:hover{
background: none;
box-shadow: none;
border-radius: 0;
padding: 0;
}