How to fix JetPack 3.0 Sharing Icons in P2

- by

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 😉



If you enjoy my content, please consider supporting me on Ko-fi. In return you can browse this whole site without any pesky ads! More details here.

3 thoughts on “How to fix JetPack 3.0 Sharing Icons in P2”

  1. The Social Icons are meant to be displayed next to the “Share This” text of course – but I didn’t manage to make this happen yet in P2. Any improvements suggestions are welcome of course.

Leave a Comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.