• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Style Jetpacks Social Sharing Buttons

StudioPress themes have already published a tutorial for members which includes CSS code that enables you to style your sharing buttons if using Jetpack or Slim Jetpack.

In this post, i’ll provide the CSS code which enables you to style the background & hover colors so they’re the same as each social provider uses.

Default Button Style

default style

Custom Button Style

custom style

All CSS code should be pasted near the end of your child themes style.css file before the start of the Media Queries if included in that file.

.content div.sharedaddy div.sd-block {
	border: none;
	margin-bottom: 10px;
	margin-bottom: 1rem;
	padding: 0;
}

.single-format-quote .content div.sharedaddy div.sd-block {
	display: none;
}

.content div.sharedaddy .sd-content {
	float: left;
	margin-bottom: 10px;
	margin-bottom: 1rem;
}

.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: 8px 15px;
	padding: 0.8rem 1.5rem;
}

.content li.share-facebook a.sd-button > span,
.content li.share-google-plus-1 a.sd-button > span,
.content li.share-linkedin a.sd-button > span,
.content li.share-pinterest a.sd-button > span,
.content li.share-twitter a.sd-button > span {
	border: none;
	color: #fff;
	font-family: 'verdana', arial;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 300;
	letter-spacing: 2px;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

.content li.share-facebook a.sd-button > span {
background: #4965a0;
}
.content li.share-google-plus-1 a.sd-button > span {
background: #dd4b39;
}
.content li.share-linkedin a.sd-button > span {
background: #1b86bc;
}
.content li.share-twitter a.sd-button > span {
background: #00abf0;
}

.content li.share-facebook a.sd-button:hover > span,
.content li.share-google-plus-1 a.sd-button:hover > span,
.content li.share-linkedin a.sd-button:hover > span,
.content li.share-twitter a.sd-button:hover > span {
	background: #000;
}

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

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;
}

Style More Providers

To style other social providers, simply add this code to the existing block above and change the background color to match your new providers colors:

.content li.share-add-provider-name-here a.sd-button > span {
background: #000000;
}

You also need to replace add-provider-name-here with the name of the provider. You can choose from a list of providers included in Jetpacks sharedaddy module once you install the Jetpack plugin.

Sharing Settings

Use in Other Themes

This code only works in themes using .content as the content class.

You can also use this code in other themes simply by changing all instances of .content to whatever class your themes uses for the content.

Twenty Eleven – Change from .content to #content
Twenty Twelve – Change from .content to .entry-content

Notepad++ enables you to search find and replace classes with new classes.

Note: You can reduce the size of the buttons simply by reducing the size of the font.

More On Customizing Jetpacks Social Buttons

  • Center Sharedaddy Social Sharing Buttons in WordPress
  • How To Add Sharedaddy Social Media Buttons Above Your Posts
  • How To Add New Sharing Service URL’s to Jetpacks Social Sharedaddy Plugin

Reader Interactions

Comments

  1. steve says

    April 15, 2014 at 12:36 pm

    I’ve just added this code and whilst it did work, it doesn’t include the social share icons i.e. the ‘twitter bird’ and facebook ‘f’ it just converts the jetpack styles into rectangles with the words TWITTER, FACEBOOK etc

    Is there anyway to use this code but include the social media icons. So instead of saying FACEBOOK TWITTER etc it just has the graphic icon and then says either like share etc and then shows the number of shares?

    So what we end up with are nice flat rectangles of each of the social networks colours with their respective icons inside them with their words share or like (depending upon network)

    Log in to Reply
    • Brad Dalton says

      April 15, 2014 at 1:18 pm

      Yes you could use icons and code that into your solution.

      Log in to Reply
  2. Murray says

    March 31, 2014 at 6:14 am

    Hey Brad, great css and easy to use. Are you able to update the css to reflect your website, with the more button squares on click.

    Thanks, Murray

    Log in to Reply
    • Brad Dalton says

      March 31, 2014 at 6:25 am

      Hello Murray

      You mean you want to make the read more link a button? Not sure i understand your question. Please clarify.

      Log in to Reply
  3. Steve says

    March 21, 2014 at 10:54 pm

    Can you style these as you have them as flat rectangles of colour but also include the social icons and sharing counter?

    Log in to Reply
    • Brad Dalton says

      March 21, 2014 at 10:59 pm

      Thats exactly how this code styles them.

      It only changes the background color so the icons and counter are unaffected and still display.

      Log in to Reply
  4. Sharon says

    March 18, 2014 at 1:29 pm

    Hi there! I would like these buttons to be centered with no text (aka “Share This:). I check float: left; to float: middle; and it did push it over but it isn’t centered. It appears there is padding in there somewhere but I can’t find it. Any ideas?

    Log in to Reply
    • Brad Dalton says

      March 18, 2014 at 2:15 pm

      Hello Sharon

      I did link to related articles which includes http://wpsites.net/web-design/center-sharedaddy-social-sharing-buttons-in-wordpress/

      Log in to Reply
  5. varma says

    March 7, 2014 at 5:52 am

    That really styled the dull common share buttons.
    It’s working flawlessly on my site with slight modification 🙂

    Thanks for sharing it..

    Log in to Reply
  6. scot says

    December 28, 2013 at 9:31 pm

    Thanks, I found the page..
    Great job Brad.
    -Scot

    Log in to Reply
  7. Deprito says

    December 10, 2013 at 1:04 pm

    The default options is Logo + Text, how if i want to show text only with this style?
    The css class without logo is : class=”share-facebook sd-button no-icon”

    So, what must i do to style “Text Only Options”?

    Log in to Reply
    • Brad Dalton says

      December 10, 2013 at 9:03 pm

      I would inspect the text using Firebug to find the right classes to use in your rules.

      Log in to Reply
  8. Naim says

    November 19, 2013 at 6:26 pm

    Hi Brad, I’m very enjoy to explore around your blog. Very useful and nice of tutorials. But I wonder if you can put some search box? All of your tutorials is superb but it’s hard to find specific topic when I need them.. 🙂

    Log in to Reply
    • Brad Dalton says

      November 19, 2013 at 6:29 pm

      Hello Naim

      Yes i want to do that but i also want people to make a donation to use it so i need to work out the best way to go about it.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.