Customising Jetpack social sharing icons

Community Forums Forums Design Tips and Tricks Customising Jetpack social sharing icons

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  marybaum 1 year, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #98982


    I’d like to customise the jetpack social sharing icons so that they look like the ones used by studiopress and copyblogger (I’ve included a screen shot incase your not familiar with them)

    I’ve read various posts on how to customise them but none seem to address the customisation as they’re used on these sites.

    I’d also like to get rid of the “Share this” text and align the icons to the left to line up with the left hand edge of my post.

    Any ideas?


    Oh yeah.

    I would bet it’s easier to start with the Genesis Simple Social Icons plugin, but I’ve yet to do it that way. No – I’ve done it the way you’re proposing to do it – by performing code surgery on the Jetpack sharing module.


    You’re gonna need a local development environment: MAMP, WAMP, XAMPP for the Mac, Windows or Linux/anything, respectively, and a code editor. I like Aptana Studio a whole lot. It’s free, and it has versions for the Mac and Windows. It also has a built-in FTP client.

    With me so far?

    In an ideal world, you already

    a. know what I’m talking about
    b. have this set up for your style changes.

    Once you’ve got this environment set up, get the FTP login from your web host if you don’t have them already, and download your current theme and plugin files. This should look like dragging the files from one window – your host server – to another – your hard drive.

    Make sure you’ve downloaded the Jetpack plugin.

    Now find the sharing module, and inside that folder you should see sharing.css and at least one php file.
    You’ll edit the text in the php file – it will probably either be in some html, or else it will be in red, in quotes, if it’s part of a section of php code.

    Edit the css as you see fit, and if all you want to do is blow away the words ‘Share this:’ you can just do that. Leave the set of empty single quotes there.

    Hope that gets you pointed in the right direction!


    Sharing the good news about the wonders of web typography and the split-step. Either one should get you moving fast. ;-)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.