Widget Visibility and You

Reblogged from WordPress.com News:

• 

Since the dawn of time, humankind has yearned for control. While we can't give you more control over most of your life, we can give you more control over your widgets. And today, with the new widget visibility tool, you can configure your widgets to be shown or hidden only on certain pages.

Widgets are a way to add new content (like your Twitter stream, a tag cloud, or a link to your blog archives) in the sidebar, header, or footer of your site.

Read more… 237 more words

We officially launched the Widget Visibility tool on WordPress.com today. It was a meetup project built by me and http://takashiirie.com/

Idea a WordPress plugin that lets you easily…

Idea: a WordPress plugin that lets you easily generate a Chat-formatted post from any comment thread on your site. Perfect for those times when you want to promote the interesting content that arises in the discussion following a post.

Fun fact I named the theme that we…

Fun fact: I named the theme that we launched on WordPress.com today.

Not as fun fact: That was the most notable contribution I made to it. Much respect to theme artist Michael Cain.

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:

After:

iPhoto Lookalike WordPress Theme

Here are some screenshots of a side project I’ve been kicking around for a while. It’s an iPhoto lookalike WordPress theme that treats uploaded photos like full-fledged posts.

Still very much under construction.

CSS for a more readable header in the Twenty Thirteen theme

I’ve enabled Twenty Thirteen on my personal blog and done a little bit of customization. Here’s a CSS snippet for adding some contrast to the header text in Twenty Thirteen — helpful if you use one of the colorful default backgrounds:

.site-title a {
	color: #EDEDE8!important;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.site-description {
	display: inline-block;
	padding: 5px;
	background-color: rgba(255,255,255,0.5);
}

.navbar-fixed .site-title a {
	text-shadow: none;
}

It turns this:

into this:

I contributed a patch to the Remove…

I contributed a patch to the “Remove extract() from WordPress” mega-ticket. The subtle overwriting of the $blog_id global caused me hours of pain on wp.com earlier today.