TWENTY FOURTEEN THEME BLANK SPACES

This blog uses the Twenty Fourteen WordPress theme, and until recently, I’d not done anything about the huge amount of unused space that the unadulterated layout gives. I just took it as one of those things, and thought that, “oh well, at least it’s readable, even if the presentation’s a bit off”.  But I needed to set up a WordPress site in a professional capacity, so I decided to investigate further. To illustrate the problem, take a look at the screenshot from just before when I edited the PHP files to make the width 100%. This affects the appearance of the theme on hi-res monitors, which in my experience, is most monitors.

Before

I was able to rectify this by following the steps in the knowledge base at webhostface.com (link).  This help file gives a bit more information on why this theme appears the way that it does, unedited.  You need to read that page to understand what the hell I’m talking about in this post.

For ease of understanding I’ve listed below the relevant line numbers affected by the changes described in that link. Y’see, the file style.css is 4322 lines long and you need to trawl through a lot of code to locate the five specific lines affected. From the WordPress dashboard, go to Appearance -> Editor and then select the Twenty Fourteen theme from the drop down menu.

Then locate the file style.css.Within this file, carry out the steps listed in the help page at webhostface.com, as follows:

In step one, the first bit of code highlighted in bold,

.site { background-color: #fff; max-width: 1260px; position: relative; }

is in Section 3.0 Basic Structure, on lines 820 – 823.

Then in step 2, the second bit of code to alter,

.site-header { background-color: #000; max-width: 1260px; position: relative; width: 100%; z-index: 4; }

is in Section 4.0 Header, on lines 847 – 852.

The third bit of code, relating to the content width,

.site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content { margin: 0 auto; max-width: 474px; }

is in Section 6.0 Content, on lines 1056 – 1062.  I actually adjusted the max-width to 90% instead of the 80% suggested.

The fourth bit of code relates to comments;

.comments-area { margin: 48px auto; max-width: 474px; padding: 0 10px; }

and is in Section 6.14 Comments, on lines 1905 – 1908.  Again, I went for a max-width of 90%.

The fifth, and final bit of code that I altered,

.site-content .entry-meta { background-color: #fff; margin-bottom: 8px; }

is in Section 6.3 Entry Meta, lines 1178 – 1181.  Note that this adds an extra line to the PHP file, so will affect the line number related to the fourth step above if not done before this one.

I didn’t bother editing the appearance of the sidebar buttons, which is the final step in that help file.

Leave a Comment