Twenty Fourteen: Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar.

[iamtakashi]

Currently the theme has some default widgets for the content sidebar so it's always there (Except the full with page template). I think it would be great if the sidebar gets removed when there is no widget specified for the sidebar in the widget admin, and the main content area expands to the right. Similar to how Twenty Twelve does.

I've seen some sites using customised Further that removed the sidebar. For example:

​http://chicandgeek.com/tag/questionnaire/

​http://vfxserbia.com/2013/08/12/test-simulacija-vode-bazuka-ivan/

SInce the theme has another sidebar this could be a good idea.

[eherman24]

If the 'content' widget is not set within the admin dashboard 'widgets' screen then the 'content' widget is not displayed and the post content stretches to full width.

[obenland]

We should strive for a solution that separates HTML and CSS more.

[eherman24]

Maybe this is a better route to take?

Edit: I noticed taht the content was extending full width on the homepage when the content sidebar was not set. From my understanding we only want this to extend full width on single post pages. I re-adjusted my resolution and uploaded a new patch to reflect that.

New Patch: 25031.2.diff​

[eherman24]

new resolution

[eherman24]

new resolution - revised

[eherman24]

Still working on this. New patch coming soon. The previous one supplied does not work as intended.

[eherman24]

Have adjusted the patch to reflect the corrections to the bug or two that I noticed in my own patch.

[eherman24]

revised my previous patch

[iamtakashi]

Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar.

[iamtakashi]

I think archive page should expand if the content sidebar is not active.
So I've also worked on a patch above. Here is what I did.

• Add custom body classes to alter the layout.
• Remove full-width class from full-width page and image attachment templates.
• Bump up the size of featured image.
• Remove the default widgets from the content sidebar template.

This responsive pattern is not perfect but I hope this is a good start.
I'll propose a new responsive pattern in a separate ticket. (Because I'd like adjust the responsive pattern overall.)

[obenland]

I think we should look into reordering the content blocks and try to get rid of as many wrapper divs as possible.

Essentially we're looking at a three column layout with an optional featured content section - something that should be pretty straight forward. I wouldn't mind keeping the .full-width class around for cases where we're not on the front page and the second sidebar is not active.

[RDall]

If were going to always have the sidebar in the front page but also going to have the featured image going from left to right the image will end with white space if the sidebar doesn't flow as long as the content. eg >> ​http://cl.ly/image/0N3w0t2C0315

This is completely normal for most themes which have a sidebar. But if the content is going to stretch across the content area of the site then the featured image should be enlarged to the full width of the content area as well.

eg. My hacked together mockup. ​http://cl.ly/image/3N1x1J1S3t3O

If someone wants to have a sidebar but only has one small widget I don't think we should accommodate for that… In a sense an all or nothing scenario… 

[obenland]

I played with it a bit today and one thing I noticed was that we need to bump the post thumbnail size to a width of 1010px for that to work.

[iamtakashi]

Replying to obenland:

I played with it a bit today and one thing I noticed was that we need to bump the post thumbnail size to a width of 1010px for that to work.

Shouldn't it be 1038px? (1260px-222px)

[obenland]

Per IRC office hours: ​iamtakashi will add a mockup for how to better deal with the added space.

[iamtakashi]

This is what I imagine for the layout without the content sidebar.

​http://f.cl.ly/items/3R06090S2M0D0V3K1N2c/2014-no-sidebar.jpg

I'd keep the text content width the same rather than expanding it because the text sizes and line length are core aspects of the design and the readability will suffer if we expand the size. Also we don't need to worry about varying $content_width. So, there would be extra margins both sides that allow users to move images and quotes with alignleft and alignright classes into them. I think this is better use of space in this context when a user wants to have a striking featured image rather than the sidebar.

[RDall]

I really like what you have done her Takashi.

Aside from the technical requirements to do this I like the style and design you implemented here.

[obenland]

Replying to iamtakashi:

So, there would be extra margins both sides that allow users to move images and quotes with alignleft and alignright classes into them. I think this is better use of space in this context when a user wants to have a striking featured image rather than the sidebar.

Have you tested it with thumbnail images?

[iamtakashi]

Replying to obenland:

Have you tested it with thumbnail images?

That is a good point. What about shifting only images above medium size? What works for large images might not work for small images and I think that's OK. We can address each size differently because we have classes that allows us to do so.

[iamtakashi]

Here is a new patch.

Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar. Additional changes with this patch are the followings.

• Improvement for responsive pattern.
• Minor style adjustments and bug fixes.
• Tone down the color of the diagonal lines.

[RDall]

@iamtakashi I can't get my the Git Repo to apply the patch you crafted. ( Some reason ​Scribu tutorial is not working for when I try to apply a patch)  Is there a dev site I can see your patch?

[iamtakashi]

Replying to RDall:

Is there a dev site I can see your patch?

I'm afraid no. I do changes my local install.
I don't know much about the tutorial and the setup but, if it helps, the patch is made in a checkout of the develop.svn.wordpress.org repo. ​More info

Have you tried with svn? I've just tested to apply the patch and it works just fine with svn.

[RDall]

Replying to iamtakashi:

Have you tried with svn? I've just tested to apply the patch and it works just fine with svn.

I got it to work. I instead downloaded the patch via the browser and then applied.

Tone down the color of the diagonal lines.

The tone down of the diagonal lines in the new design is great. It is much less distracting.

[lancewillett]

As discussed in ​today's office hours, two big issues with .6 patch:

1. Featured images limited to posts -- should be removed, let's allow it on pages also
2. Adding the wider featured image -- let's proceed without adding that image size for now (but adding a patch here to do it if we decide to come back to it)

Takashi is going to split up the changes a bit more so we can get the CSS fixes in sooner.

[iamtakashi]

Replying to lancewillett:

1. Featured images limited to posts -- should be removed, let's allow it on pages also

A separated new ticket, #25325, has been created for this issue.

[iamtakashi]

The new patch above makes the content sidebar optional and alters the layout to full-width if the sidebar is not active but without adding wider featured image (for now) :)

[lancewillett]

In 25624:

Twenty Fourteen: make the content sidebar optional and alter the layout to full-width if the sidebar is not active, but without adding wider featured image (for now). Props iamtakashi, closes #25031.