How to add custom CSS to the Jetpack Likes iframe

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