Twenty Ten Theme … Would like the header "full width"

If you post a link to your site, it will be easier for people to help you.

Don’t edit the Twenty Ten theme. Instead create a child theme for your changes.

Here is a link to my site (but it is just the basic template).
https://doubledoubleny.com/

I understand the theory of child pages, and why they are important, but will have to read your link to learn how to create one.

Once I do though, I am still wondering how to go about making the header “full width”. Thanks, Buffmin

I’m assuming that you want the header image to extend to cover the white border on the sides of it? It IS possible to do that by editing the CSS and using an image that is the exact width of the new sized space, but tweaking the CSS on layout things like this can be very fussy and difficult unless you really know what you are doing.

One way to do this is to get rid of the padding in the following CSS declaration – change the 20 to zero:

#wrapper {
    background: none repeat scroll 0 0 #FFFFFF;
    margin-top: 20px;
    padding: 0 20px;
}

But as you can see if you try it, that moves the dark grey in closer — and then there is no space between the text and the dark grey — which does not look so great. So then you would have to change the margins or padding on every single element that is on the edge of a page. Not a good way to go because of the many places you would have to change things, and you’d likely still have problems on some pages.

The other way to go is to make the header section wider (both the image and the navigation bar) so it extends to the dark grey — covering the white borders.

To change the nav bar width, you’d change the width in the below CSS to whatever width exactly covers up the white — looks like it is 980.

#access {
    background: none repeat scroll 0 0 #000000;
    display: block;
    float: left;
    margin: 0 auto;
    width: 940px;
}

You’d also have to use a header image that is exactly that new width and change the width attribute in the image tag.

Those changes MIGHT do what you want, but there might be other problems on spacing or layout that you would have to deal with.

Also, if you are using different templates for different layouts, you might have to make these changes in several places — depending on how the theme is coded — if all the headers and overall layouts are the same, then doing it once should work.

But like I said, this kind of thing can be messy and tedious.

You’d really be better off looking for a theme that has a header and page layout that you like as is.

And for very, very sure, do not make any of these changes in the regular code — definitely use a child theme so that you can easily “erase” your changes if you make a mess of it!

Sorry, I missed what you said in your first post about knowing CSS and HTML and that you already figured out the wrapper change — and the resulting problem.

So basically, yes, you can change CSS as in any site — but as you should also know, what I said holds true…change at your own risk of making a bigger mess!

Thanks WPyogi,

I did widen the navbar like you mentioned, but the 20px margin on the left side of the wrapper still holds true (you can see it at my link https://doubledoubleny.com/). It shoves the navbar off to the right.

If were hand coding an html page, I would create a separate wrapper for the header(or not have one for the header at all) and then just have a wrapper for everything below in the header.
I am not sure if this is do-able with WordPress? Or is too difficult in WP, or should I just go with your idea of a new yemplate.

Actually, the reason I had selected the Twenty Ten theme, was because there are so many threads all over google relating to that particular template. I figured it might help me learn WP quicker.
I appreciate you suggestions. Buffmin

You can fix that alignment problem by changing the margin to a negative — which pulls it over the the left — “over” the padding in the wrapper.

Like this:

#access {
    background: none repeat scroll 0 0 #000000;
    display: block;
    float: left;
    margin: 0 -20px;
    width: 980px;
}

If you do the above and use an image that is 980 wide, it’ll probably be okay. But you might have to use the negative margin on the image as well…

And yes, you CAN redo the wrapper — but I think that gets more involved…

Perfect!
Thanks for your help. Playing around like that is helping figure out where things are, which is step one. Thanks again, Buffmin

Can you explain IN PLAIN SIMPLE EASY TO UNDERSTAND LANGUAGE how to make my header the full length of my blog? I am using Duster and my blog is https://www.anempoweredspirit.com – thanks.

Typing in capitals is considered as shouting. If you want people to help, don’t shout at them. You should also create your own thread.