Jetpack uses an iframe to display Likes on your blog, mainly for performance reasons. The downside to that is that there isn’t an obvious way to style the content inside the iframe… until now.

Jetpack creates a couple dummy HTML elements outside of the iframe that it can use to detect your theme’s CSS, which it will apply inside the iframe content. If you’d like to modify the automatic decisions that Jetpack makes, you can effectively apply this CSS inside the iframe:

body {
	color: [...];
	font-family: [...];
	font-size [...];
	direction [...];
	font-weight [...];
	font-style [...];
	text-decoration [...];
}

.wpl-count a {
	color: [...];
	font-family: [...];
	font-size [...];
	font-weight [...];
	font-style [...];
	text-decoration [...];
}

by adding this CSS to your theme's stylesheet or custom CSS:

.jetpack-likes-widget-wrapper .sd-text-color {
	color: [...];
	font-family: [...];
	font-size [...];
	direction [...];
	font-weight [...];
	font-style [...];
	text-decoration [...];
}

.jetpack-likes-widget-wrapper .sd-link-color {
	color: [...];
	font-family: [...];
	font-size [...];
	font-weight [...];
	font-style [...];
	text-decoration [...];
}

You are limited to those two selectors and those seven properties.

For example, if you're running Twenty Thirteen, I recommend this CSS to shrink the link font size down to match the rest of the text in the iframe:

.jetpack-likes-widget-wrapper .sd-link-color {
	font-size: 12px;
}

Before:

Before Jetpack-targeted CSS

After:

After Jetpack-targeted CSS

4 thoughts on “How to add custom CSS to the Jetpack Likes iframe

  1. Thank you! I’m embarrassed to say how long I worked on this, trying to target/change .wpl-count a.
    Trial and error…searching…consulting and re-consulting Safari’s web inspector… I bet I clicked “Save Stylesheet” a hundred or more times.

    When I was ready to give up and move on, I decided to try one more search and found your post here. Now, I feel victorious thanks to you.

    It seems like a small thing, but you know how it can be when you’re after something. Whether the actual result is critical or not, it’s hard to give up.

    Again—Thank you!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s