Customizing the Jetpack Sharing Buttons

Ed Sanders Tutorials, Website Support Leave a Comment

Just add the following CSS code to your Custom CSS file in Jetpack and make the changes to colors and such that you like.
/*
Jetpack Sharing
—————————————————- */
.content div.sharedaddy div.sd-block {
border: none;
padding: 0;
}

.content div.sharedaddy .sd-content {
float: left;
margin-bottom: 32px;
}

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

.content .sd-social-icon-text a.sd-button > span, a.sd-button > span {
opacity: 1;
padding: 6px 12px;
}

.content a.sd-button > span {
background-image: none !important;
background: #E68080;
border-radius: 25px;
color: #000;
font-size: 12px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}

.content a.sd-button:hover > span {
background: #B2B2FF;
}

.sd-content .sd-button span.share-count {
color: blue !important;
font-size: 100% !important;
}

Last updated on

About Ed Sanders

Ed Sanders

I have been a WebMaster since 1998, when I learned to code HTML pages for our local church congregation. I have been WebMastering ever since those days. Now I have moved on to installing CMS (Content Management Systems) websites like WordPress, Joomlah, E107, etc. I maintain a number of websites currently, see my Portfolio page. I believe in doing the best job possible when I work on my sites.

Leave a Reply