Twenty Fourteen Theme Default Look

WordPress upgraded the other day and with 4.1 came upgrades to the themes. …And like a dummy I forgot I hadn’t made my changes in a childtheme, so I upgraded without making a backup of Stylesheet (style.css) and lost all my tweaks.

So I had to go back and hunt down the changes I made, saved here for posterity (and if anyone else needed them).

• How to Resize the Content
• How to Fix the Image Alignment Issues after Resizing the Content
• How to Reduce the Whitespace in the Content

How to Resize the Post Content

There is a LOT of whitespace in the Twenty Fourteen Theme. I liked the overall layout of it, but I do a lot of wordy posts so it needed some tweaking to make it less image-centric. Being mobile friendly is one thing, being unable to read stories is quite another!

The first step (for me) was to widen the content section to get rid of all that ugly looking expanse of whitespace to the left of the articles.

To do this you will need to change the .page-content max-width in the * 6.0 – Content section of the Stylesheet (style.css). It takes some playing around to get right the right size, but it was worth the hassle of the change-refresh-change to get things just so.

I changed mine from 474 (see below) to 950, but that’s all personal choice. Any increase in the size will widen the content area so it can use more of the available space.

.page-content {
margin: 0 auto;
max-width: 474px;
}

Twenty Fourteen Theme Image Alignment

So now my content fills up the whitespace, but the images have been thrown off the edge of the page…

Amusingly this is seems to be a common complaint for folks trying to tweak the theme. I did a lot of Googling before I dove into the code myself in the hopes someone had found an easier way. I wish the WordPress theme designers had thought to include sliders or other simple settings to control this.

How to Fix the Image Alignment Issues after Resizing the Content

Now that I’ve got the content where I want, it’s time to wrangle the images back into place. I may not be the most visual of posters, but I do wander that way sometimes.

As you can see from the photo, the images will wander off both the right and left-hand sides of the posts. In order to stop this we will need to add a section to the end of the 11.0 Media Queries.

@media screen and (min-width: 810px) {

	.full-width .site-content blockquote.alignleft,
	.full-width .site-content img.size-full.alignleft,
	.full-width .site-content img.size-large.alignleft,
	.full-width .site-content img.size-medium.alignleft,
	.full-width .site-content .wp-caption.alignleft {
		margin-left: 0px;
	}

	.full-width .site-content .alignleft {
		clear: left;
	}

	.full-width .site-content blockquote.alignright,
	.full-width .site-content img.size-full.alignright,
	.full-width .site-content img.size-large.alignright,
	.full-width .site-content img.size-medium.alignright,
	.full-width .site-content .wp-caption.alignright {
		margin-right: 0px;
	}

	.full-width .site-content .alignright {
		clear: right;
	}
}

Twenty Fourteen Theme Image Alignment WIN!

I could just change the @media screen and (min-width: 810px) itself, but I figured it was easier to simple make the tweaks I wanted in a whole new section.  Since CSS holds the last thing it sees as gospel, it’s an easy way to override the old bits without messing up anything new the designers tossed in.

And voilà!

How to Reduce the Whitespace in the Content

The last bit of tweaking I’ve done with the theme was to reduce the amount of whitespace inside the content blocks themselves. Once again we head into 6.2 Entry Header to muck about…

The first thing I changed was the padding around the header of the articles by cutting the margins and padding in half for both of these:

.entry-title {
	font-size: 33px;
	font-weight: 300;
	line-height: 1.0909090909;
	margin-bottom: 12px;
	margin: 0 0 12px 0;
	text-transform: uppercase;
}

.site-content .entry-header {
	background-color: #fff;
	padding: 0 10px 12px;

Then heading into 6.4 Entry Content…

.site-content .entry-content,
.site-content .entry-summary,
.page-content {
	background-color: #fff;
	padding: 12px 10px 0;

After some fiddling around with various settings, I finally just did a find and replace on margin-bottom: 24px and changed it to 16px. I initially tried 12px, but it was too narrow and hard to read on my own monitors. I’m much more prone to text-heavy posts than images at the moment, so I figured readability it my key stat.

And that last tweak pretty much cleared things up! 🙂 (I didn’t take a final screenshot since you are looking at the end result, but you get the idea.)