WordPress.org

Make WordPress Core

#25031 closed enhancement (fixed)

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

Reported by: iamtakashi Owned by: lancewillett
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch 2nd-opinion needs-testing
Focuses: Cc:

Description

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.

Attachments (7)

25031.diff (4.0 KB) - added by eherman24 11 months ago.
new resolution
25031.2.diff (4.0 KB) - added by eherman24 11 months ago.
new resolution - revised
25031.3.diff (5.6 KB) - added by eherman24 11 months ago.
revised my previous patch
25031.4.diff (12.4 KB) - added by iamtakashi 11 months ago.
Make the content sidebar optional and expand the main content area when there is no widget specified for the sidebar.
25031.5.diff (10.5 KB) - added by obenland 11 months ago.
25031.6.diff (40.3 KB) - added by iamtakashi 10 months ago.
25031.7.diff (2.0 KB) - added by iamtakashi 10 months ago.

Download all attachments as: .zip

Change History (32)

comment:1 trishasalas11 months ago

  • Cc trisha@… added

comment:2 eherman2411 months ago

  • Cc evan.m.herman@… added
  • Keywords has-patch needs-testing added; needs-patch removed
  • Version set to 3.6

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.

comment:3 obenland11 months ago

  • Keywords has-patch needs-testing removed
  • Milestone changed from Awaiting Review to 3.8
  • Version changed from 3.6 to trunk

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

comment:4 eherman2411 months ago

  • Keywords has-patch 2nd-opinion needs-testing added

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​

Last edited 11 months ago by eherman24 (previous) (diff)

eherman2411 months ago

new resolution

eherman2411 months ago

new resolution - revised

comment:5 eherman2411 months ago

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

comment:6 eherman2411 months ago

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

eherman2411 months ago

revised my previous patch

iamtakashi11 months ago

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

comment:7 iamtakashi11 months ago

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.)

Last edited 11 months ago by iamtakashi (previous) (diff)

comment:8 obenland11 months ago

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.

comment:9 RDall11 months ago

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… 

comment:10 follow-up: obenland11 months ago

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.

obenland11 months ago

comment:11 in reply to: ↑ 10 iamtakashi11 months ago

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)

comment:12 cainm11 months ago

  • Cc cain@… added

comment:13 obenland11 months ago

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

comment:14 follow-up: iamtakashi11 months ago

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.

Last edited 11 months ago by iamtakashi (previous) (diff)

comment:15 RDall11 months ago

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.

comment:16 in reply to: ↑ 14 ; follow-up: obenland11 months ago

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?

comment:17 in reply to: ↑ 16 iamtakashi11 months ago

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.

iamtakashi10 months ago

comment:18 iamtakashi10 months ago

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.

comment:19 follow-up: RDall10 months ago

@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?

comment:20 in reply to: ↑ 19 ; follow-up: iamtakashi10 months ago

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.

comment:21 in reply to: ↑ 20 RDall10 months ago

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.

comment:22 follow-up: lancewillett10 months ago

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.

comment:23 in reply to: ↑ 22 iamtakashi10 months ago

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.

iamtakashi10 months ago

comment:24 iamtakashi10 months ago

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) :)

comment:25 lancewillett10 months ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.