Use More Screen Real Estate by Making Twenty Fourteen Wider

We spent yesterday figuring out how to get rid of all the green in 2014 and set up a new colour. I like the looks of that, but there is still one more thing bugging me. I’ve had several posts over the years about the same thing. I don’t like how narrow things are in the theme! Well, here’s a quick fix to change that!

I only just set this up and haven’t thoroughly tested every little detail. Everything looks good to me right now, but as always, if you find I missed something feel free to leave me a comment and I’ll get adjust my code on here!

There’s just a little thinking to do here, we need to come up with our numbers. I’ll give you the defaults along with my changes and you can make your own decisions. Now a bit of a disclaimer again, I’m almost certain there is some ratios and formulas that were used in the development of the original theme – I didn’t use any. I just set things where I wanted them and guessed at the rest. That 786px for hentry is the width I needed to make sure my featured images touched up against the left sidebar – I found this number through trial and error to be honest (I had started at 752, but th eimage had a gap, so I increased until it was perfect). It looks good right now, but there might be slight adjustments needed to my numbers.

• The overall default maximum width is 1260px, I increased this to 1420px
• The content area (hentry) column is 672px, I increased this to 786px
• The actual content is 474px, I increased this to 654px

So now I just cruised through the CSS looknig for any of the default entries and changing them to mine. Here’s what I came up with:

.site {
	max-width: 1420px;
}

.site-header {
	max-width: 1420px;
}

.hentry {
	max-width: 786px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 654px;
}

.post-navigation,
.image-navigation {
	max-width: 654px;
}

.archive-header,
.page-header {
	max-width: 654px;
}

.contributor-info {
	max-width: 654px;
}

.comments-area {
	max-width: 654px;
}

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
	max-width: 654px;
}

That goes into your child theme’s style.css file under the @import line (if you are unfamiliar with child themes, see my writeup here). You can save that and refresh your page to check it out. It looks pretty good, but we have one more thing to take care of.

In your child theme’s functions.php file you will need to add this

$content_width = 654;

// CHANGE DEFAULT THUMBNAIL SIZE
function voodoo_twentytwelve_setup() {
	set_post_thumbnail_size( 786, 410, true );
}
add_action( 'after_setup_theme', 'voodoo_twentytwelve_setup', 11 );

somewhere after the opening php tag. This takes care of adjusting the thumbnail/featured image as well as any embeds. Feel free to tweak that image height of 410 to suit your needs.

There we go with another quick tweak. Everything looks good on my end so far! So, do you plan on adjusting anything with the 2014 theme? Did I miss something? Feel free to let me know in the comments!