Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Full-width header, narrower content area? (http://forum.bytesforall.com/showthread.php?t=6525)

paulae Mar 30, 2010 07:17 AM

Full-width header, narrower content area?
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?

lmilesw Mar 30, 2010 04:52 PM

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
HTML Code:

background: url(/wp-content/themes/atahualpa/images/grad.png) repeat-x top left #555555;
The grad.phg is just a 1px wide gradient.

paulae Mar 30, 2010 05:00 PM

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

Samantha409 Mar 31, 2010 11:12 AM

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.

lmilesw Mar 31, 2010 12:41 PM

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.

blogmom Nov 5, 2010 01:33 AM

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.

netrdx Nov 6, 2010 02:09 PM

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

lmilesw Nov 6, 2010 03:02 PM

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.

blogmom Nov 6, 2010 05:38 PM

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

netrdx Nov 7, 2010 02:34 PM

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?

lmilesw Nov 7, 2010 09:59 PM

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.

netrdx Nov 12, 2010 04:05 PM

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

sudipto Mar 23, 2011 04:02 PM

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.


lmilesw Mar 23, 2011 04:27 PM

Thanks for that sudipto... Unique approach

KatyDigg Mar 23, 2011 04:55 PM


Originally Posted by sudipto (Post 61382)
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.


Thank you, Sudipto


sudipto Mar 24, 2011 01:14 AM

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

juggledad Mar 24, 2011 06:13 AM

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
HTML Code:

<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<col class="colone">
<col class="coltwo">
<col class="colthree">
<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
HTML Code:

<div id="wrapper" class="wrapbody"><div id="container">
<table cellspacing="0" cellpadding="0" border="0" id="layout">
<col class="coltwo">
<col class="colthree-inner">
<col class="colthree">
<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)

sudipto Mar 24, 2011 06:34 AM

Thanks JD. I forgot to look in that aspect. :)

juggledad Mar 24, 2011 07:08 AM

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

    width: 80% !important;

and it will vary with the width of the page.

Nice tip!

KatyDigg Mar 24, 2011 06:26 PM

Thank you, Juggledad, very much appreciated.

sudipto Mar 31, 2011 05:33 PM

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.

tsheridan Apr 25, 2011 03:48 PM

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.

juggledad Apr 25, 2011 04:32 PM


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 '&nbsp;' (a space) in the text widget?

tsheridan Apr 25, 2011 05:53 PM

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.


juggledad Apr 25, 2011 07:38 PM

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

All times are GMT -6. The time now is 08:26 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.