I can't figure out how to accomplish a layout like this: http://wcbstv.com/ with Atahualpa.

I tried setting the layout to 100% to get the header to span the full width of the browser window. OK, that worked. Then I thought I could set the left and right sidebars to be 100px wide, and the inner left and right sidebars to be 200px wide. I'd leave the right and left sidebars empty, essentially creating blank space, so the inner 2 sidebars would contain the widgets and the center column would contain the content.

I think this could work, but what happens is that the page and category menus span the full width, along with the header image. I want them to stay just spanning the 2 inner sidebars and center column. Could that be done with CSS margin values?

Can you think of some other way to produce this effect?

I just tried a background image and color like on my "ugly site". Take a look soon as it will get changed shortly. The code I used in the ATO>Body, Text & Links>Body Style box is

background: url(/wp-content/themes/atahualpa/images/grad.png) repeat-x top left #555555;

The grad.phg is just a 1px wide gradient.

Very sneaky! I'll try that. Thank you!

I clicked on your "uglysite" and that's what I am trying to do to my webpage. I have Atahualpa version 3.4.1 and I want to make the header and content area smaller when the webpage is maximized. I want to put a gold border around the whole page similiar to: http://mosaic-consulting.com/ but I have no idea how to do it. Right now, my header and content take up the whole page. Any ideas? Hope that makes sense.

Here are a couple of videos I just made. This one shows how to make a static width and set a background color. I couldn't get to the stop button end so the video rambles for a bit. This video shows how to put padding at the top and/or bottom to replicate the site you sent a link to. Hope these help.

paulae: did you figure out how to do this?
I want to either reduce the "padding" that surrounds my body area on left/right and top/bottom, or eliminate it completely to have a full screen website. But I can't figure it out. I tried setting all padding to 0px in both Body and Layout sections, but it had no effect. I did find where the option is to toggle the "shadow" surrounding the body area on and off, but I just can't find how to reduce the "padding" surrounding my page. I love how the CBS website has only a small padding area around the content, they managed to push it up and sideways. I want to do that too.

I too have the same problem but instead of header I want to have a full width footer like this website which is also designed with atahaulpa http://letusbuzz.com

There are some instruction in the FAQ thread on using two background images that could be used for the purpose of have full length header and footer. The width of the layout is fixed but there is a background image that matches the color of the header and footer to give it the appearance of being full width.

thanks guys. Actually I'll try lmilesw's screencast tonight because his sample site seems to stretch across the screen. I'm just trying to maximize the pixels available for content, leaving only a thin "padding" like the CBS site that paulae posted. And you know what netrdx, that site you referenced has a Search box in the page menu! That is so cool. I guess maybe that entire bar is a custom widget area?? One more mystery to unravel

Hi Blogmon, I think the search box is by default placed in the menu bar in Atahaulpa 3.5.3. So I don't think he changed anything in that. I just want to make a footer like the website http://letusbuzz.com. In another thread relating to the same problem Juggledad (Moderator) commented that the website has modified the theme code to achieve a full width footer. I want to know how and where to change?

The full width headers and footers are a combination of background images and styling in the theme options. If you go to the site mentioned in the last thread and right click on the background near the top left or right or background near the bottom left or right and either select view background image or download background image you can see what they are doind. they have image they repeat horizontally and style the layout to match.

I mailed the author of the site http://letusbuzz.com and finally he reveled his secret of full width footer in his article http://letusbuzz.com/2010/11/full-wi...-in-atahualpa/. The solution is simpler than i ever expected .

This is how to get a full width header (not just background image but actual full with header area) and narrower content area just using theme options, without changing any of the theme files. Just have a look at the below article link.

http://letusbuzz.com/2011/03/full-wi...-in-atahualpa/

Thanks for that sudipto... Unique approach

Originally Posted by sudipto

This is how to get a full width header (not just background image but actual full with header area) and narrower content area just using theme options, without changing any of the theme files. Just have a look at the below article link.

http://letusbuzz.com/2011/03/full-wi...-in-atahualpa/

Thank you, Sudipto

Nothing to thank me. Just sharing a small find. Thanks to Flynn for making such a flexible theme.

Only one slight problem with this. It only works as currently described if using the 'left' and 'right' sidebars. In the hint you say to use

</tr></tbody></table></div></div>
<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<col class="colone">
<col class="coltwo">
<col class="colthree">
</colgroup>
<tbody><tr><td colspan="3"></td>

but if you are using one of the 'inner' sidebars you have to be aware of the name and position

coltwo => the center area where the posts go
colone => left sidebar
colone-inner => left inner sidebar
colthree-inner => right inner sidebar
coltthree => right sidebar

If I have shut off the left sidebar and added the right-inner sidebar, I'd need to use

<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<colgroup>
<col class="coltwo">
<col class="colthree-inner">
<col class="colthree">
</colgroup>
<tbody><tr><td colspan="3"></td>

So make sure you put the 'correct' columns in the 'right' order and be aware that if you have a page that excludes a sidebar, the width of this area will be smaller (since it is not dynamically checking the sidebars being used)

Thanks JD. I forgot to look in that aspect.

One other thing, you can change the CSS to use a % instead of a fixed width, so you can have

div.wrapbody{
    width: 80% !important;
}

and it will vary with the width of the page.

Nice tip!

Thank you, Juggledad, very much appreciated.

Thanks JD. In that way we can keep the width of both the header and the content area fixed by keeping the width of the header to be fixed say 1100px and content area 980px.
Not only that we can even have a narrower header area and wider content area. Just in case someone needs that kind of design.

I tried the suggestion on Let Us Buzz, but it didn't work for me as I'm only using center column and right sidebar.
What I tried to do was create a background that would mimic the header and then put padding at the top of the main container, to allow the background image to show through as a header. It works great, except for that, when viewed on different size monitors, the "background" header image is not centered on the page.
How can I center a full width background image?
I have done this on custom sites I have built myself, I just position the background image at top center, however this doesn't seem to work in this blog platform.
Any ideas on how I can accomplish this so my "header" will be centered all the time?
URL is www.kerncattlewomen.org, if you want to look.
Thanks!

I tried the suggestion on Let Us Buzz

Umm, what suggestion? can you explain what it said to do?
why not have a left and right sidebar with a text widget in each with a ' ' (a space) in the text widget?

Hmm, okay now that I re-read it, I can see I interpreted it wrong.

It was from this post http://letusbuzz.com/2011/03/full-wi...-in-atahualpa/.

I tried this and it didn't work for me. My main content area disappeared somehow. I'm sure I did something wrong, but I went over it several times and couldn't find my mistake.

My question had to do with creating a full width header, not a sidebar issue, so I apologize for not being clear.

Basically I've created a full width header image, but I've used it as the background image for the body, and then padded the main content area with 375px to allow space for the background to show through. My problem is that the background image is not centering on the page, when viewed on some smaller monitors with less resolution.
In a custom site I built (not a Wordpress site), I used a full width image for the background, and I
used the code

background-position: fixed top center;

and it remains centered regardless of the resolution of the monitor. When I tried using this code in Atahualpa, it's not affecting the positioning of the background image, so perhaps I used it in the wrong place (I put it in the Body Style portion, where I put the background image).

Is there other code I can use, or should I put it somewhere else maybe?
Or is this not a very good solution at all?
URL www.kerncattlewomen.org.

Thanks!

Here is my suggestion.
1) put your header image in the 'atahualpa/images/header' folder
2) set the header image to a height of 375 and 'Header Image: Alignment' to 'top center'
3) in ato->Style & edit HEADER AREA->Configure Header Area use ' %image %pages'
4) in ato->Style & configure SIDEBARS turn on the LEFT and RIGHT sidebars - set their size to the amount of indent you want
5) in dashboard->appearances->widgets add a text widget to the LEFT and RIGHT sidebar
go look at the site.

You should see your header spanning the page and a center area indented. You will have to position your menu with a negative margin-top but this should give you what you want.

The only thing is your menu won't 'float' with the image