Twenty Eleven (copy) – make content wider for one col layout

(I’m assuming by “copy” you mean you’re working within a child theme. Good on ya. :))

Try adding this to your child theme’s stylesheet:

.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
    width: 100%;
}

You may need to adjust the margins within the surrounding divs to suit your taste, but right now the entry header and content are set to display at only 68.9% of the entire column width.

sixhours – well I’m not working with a child theme, I’m working on a renamed twenty eleven.

Based on what you posted, I went back and looked at the code generated for the page I posted the link to:

<div id="main">
		<div id="primary">
			<div id="content" role="main">
<article id="post-109" class="post-109 page type-page status-publish hentry">
<header class="entry-header">
  <h1 class="entry-title">A Test Page</h1>
	</header><!-- .entry-header -->
	<div class="entry-content">
		<p>Full text here. This is just to test the full width of the page here.  This is just a test and will be deleleted soon.  This is only a test.</p>

In any of that I don’t see reference to .singular anywhere in the code.

I’m going to post what I just replied on someone else post that I read before I started this thread (someone replied to me there as well).

https://www.ads-software.com/support/topic/make-twentyeleven-nosidebar-wider?replies=6#post-2251035

—————————

alchymyth – (thanks for the reply)

“It has a two column, right sidebar setting static page.”

I’m fairly familiar with Twenty Ten, this is my first gander at Twenty Eleven. What has changed as far as creating new pages and their default settings?

I’m looking at the page in question in the admin and it is set to ‘default’ – but does not show any of the active widgets. The default in Twenty Ten was a two-col lay out with any active widgets showing in side bar. To get a one-col lay out with out the side bar you had to select it in the page template selector.

I guess I need to first understand what has changed in Twenty Eleven (instead of just being handed a ‘fix’). ??

CAME BACK TO SAY: I’m reading this https://theme.wordpress.com/themes/twentyeleven/ now.

CAME BACK AGAIN: I just found the theme options in the admin – where it has choices for content on left, content on right, and one col no side bar. It is selected to content on left.

So compared to Twenty Ten – how do I select a “One Col No Sidebar” option? (now I’m really confused)

Ok, so I did the change you suggested:

.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
    width: 100%;
}

But now when I am logged in the EDIT button is right smack on top of the page title (“A Test Page”). So… can this really be the correct fix?

The singular class is called in the body tag.

There are many ways to “fix” something like this, depending on what you’re looking to achieve–I’ve only looked at the CSS modifying the page you linked to. I can’t tell you what your ideal solution would be for your circumstances, just what I would do.

This is the style for the Edit link:

.singular .entry-meta .edit-link a {
    bottom: auto;
    left: 50px;
    position: absolute;
    right: auto;
    top: 80px;
}

You can remove position: absolute and it will move to the bottom of the page under the entry. Or you can leave it positioned absolutely and move it elsewhere (above the title, for instance.)

I’m not familiar with Twenty Ten so I can’t tell you how it compares to Twenty Eleven.

‘one column / no sidebar’

if this refers to the ‘theme options’ setting, then there will be no css class .singular in the body tag;
there definitively will be no sidebar, not even with a ‘sidebar-page’ page template.

to generally widen this ‘one-column’ theme option, you will need to find this style in style.css:

/* One column */
.one-column #page {
	max-width: 690px;
}

and change it, for instance, to:

/* One column */
.one-column #page {
	max-width: 1060px;
}

the layout will then be fluid, starting with this wider layout.

Thanks for the code …just what i needed
this is how i used it

.singular.page .hentry {padding:1em;}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
    width: 90%;
}

.singular .entry-meta .edit-link a {
    bottom: auto;
    left: 0px;
    right: auto;
    top: 30px;
}

Thank you, too.
I just added greenfuture’s code at the end of styles.css

Brilliant! I used it here and it looks sooo much better.

Thanks.

Thanks all. Greenfuture’s code was exactly what I was looking for. A little tweak to the width percentage and I was in business.

This was also exactly what I was looking for, but, now the little comment callout icon has been squished into a weird little grey box on my posts page. I imagine this is because the new width is messing with the sidebar template?

I’m completely new at this, so forgive me for not knowing what I’m doing.

@sixhours that was very useful, thank you!

Now, instead of changing ALL my pages to a wider content, I would only want to change ONE page to allow for a wider content area. (I want to present some tables on that page rather than text, and those tables look too cramped in the default content width).

Can I achieve this just with CSS, or should I create a special page template? If I created a special page template, how would I make the content area wider for just the pages created with that template?

Many thanks.

Can I achieve this just with CSS,

yes, as each page has its unique css body_class of .page-id-123 with 123 being the page ID

example:

.page-id-123.singular .entry-header,
.page-id-123.singular .entry-content,
.page-id-123.singular footer.entry-meta,
.page-id-123.singular #comments-title {
    width: 100%;
}

would I make the content area wider for just the pages created with that template?

the body_class has a page template dependant css class:

.page-template-templatefilename-php

https://codex.www.ads-software.com/Function_Reference/body_class

greenfuture and all who contributed to what s/he shared: thank you!

@alchymyth Thanks so much, that’s brilliant! Simple and elegant.

Thanks so much for this!! I have been trawling through the forums and finally this suggestion worked!