hjustice

Hi Absar
I’m using Twenty Eleven too.
As you noted, the Twenty Eleven theme displays the Default page template…too narrow.

There is a Showcase page template that uses the full width, as you discovered however the Showcase page template is designed to show the posts. Our site is like a website, so that Showcase page template works well on the Home page.

If you don’t like that, then that means you can use the Default Page Template and Sidebar Page Template for other pages. Default is too narrow as you noted; Sidebar looks fine.

Default Page Template is nice because you don’t have the sidebars, but why we asked – why so skinny?

Here is the fix for your child theme’s css style sheet to widen the Default Page Template in Twenty Eleven. This fix also corrects the same narrow width problem on a single post page.

Originally the width was set to 68.9%. At 100% everything looks right.

It is a lot of css – I placed the entire section in my css because I may need the other elements later. I only changed the width in the last section.
`
* Singular */
.singular #primary {
margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
margin: 0 7.6%;
position: relative;
width: auto;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
margin: 0 auto;
width: 100%;
}
‘
Just in case, I wanted to add – maybe you want to check and be sure to select your child theme instead of Twenty Eleven through the Admin panel as part of placing it into action? That’s what points the system to use your child theme’s css. I’ve got the import trick at the top of mine to bring in all of Twenty Eleven, then this css sits below that to customize my site.

The page templates were a partial solution for us:
When we installed the Twenty Eleven theme, all pages went to the Default page template, much too narrow for our taste.

We’re making a website so put the Showcase page template on the Home page – perfect width and design. That’s the one shown on the sample.

We put the Sidebar page template on most of the other pages – good too as we’re using widgets in our sidebars.

If you have alot of pages, it’s easy to edit the page template for many under All pages, selecting the pages, then Edit.

Now I only have to edit the Default page template in my child theme css so it comes close to the other pages. Thanks for providing the CSS here!

I noticed this was not resolved, although I’m sure the Plug In works fine.

Here’s my solution without using a Plug In:

After locating where the default pictures were stored, I found the images and the thumbnails:
../wp-content/themes/twentyeleven/images/headers/

I created my new header as a JPEG, sizing it to be 1000 wide and the smaller custom height. I also created a thumbnail, the same size as the ones I found in the directory.

I named the header thumbnail “willow-thumbnail” and the header “willow”.

I copied my new JPEGS into the directory, replacing the default “willow” photos.

Using the Dashboard, Appearance, Header menu, I picked my new short header. It worked great!

The only downside was on upgrade I expect I’ll have to copy the picture in again. Today when I made my child theme and switched to it, I did have to choose the header photo again.

My fix is done for now, however, I did notice the Plug In listed here which would good to try as well.

ChristiNi – thank you. I have been trying to change this today with little success. Luckily I searched for help again and found this posting. I already had a child theme with my own css file so your solution was super simple and effective. Plus easy to show others! Thanks again!