How to fix JetPack 3.0 Sharing Icons in P2

JetPack 3.0 was released yesterday and it had quite a facelift: a new menu structure, dozens of graphical tweaks and a new set of Social Icons for sharing your posts. Those work well out of the box in TwentyThirteen and TwentyFourteen – but not in P2. Here’s how we can fix the problem.

First let me show you what we’re actually fixing here. In JetPack 2.9.3 and before the social sharing icons at the bottom of a post looked like this:

Screen Shot 2014-05-21 at 18.04.23

After you upgrade to JetPack 3.0, and if you’re running P2, then those icons are stacked up like this:

Screen Shot 2014-05-21 at 18.06.49

Not what we want, and not how it’s meant to be. What we really want is something like this – new icons, but in the same row as before:

Screen Shot 2014-05-21 at 18.09.06

And here’s how we can make this happen – with a hint of CSS:

/* fix JetPack 3.0 Sharing Icons */
.sd-content ul li {
    float: left;
}

I’ve only noticed this with P2 1.5.3 – but if you’re using a theme that causes the same problem, just add the above to the bottom of your theme’s style.css file, or add it to the “Edit CSS” box (under Appearance).

It’s not a perfect solution, but certainly a compromise for the interim.

Hope this helps 😉





Jay is the CEO and founder of WP Hosting, a boutique style managed WordPress hosting and support service. He has been working with Plesk since version 9 and is a qualified Parallels Automation Professional. In his spare time he likes to develop iOS apps and WordPress plugins, or draw on tablet devices. He blogs about his coding journey at http://wpguru.co.uk and http://pinkstone.co.uk.