Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Full-width header, narrower content area?


  #1  
Old Mar 30, 2010, 07:17 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
Unhappy 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?
  #2  
Old Mar 30, 2010, 04:52 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Mar 30, 2010, 05:00 PM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
Very sneaky! I'll try that. Thank you!
  #4  
Old Mar 31, 2010, 11:12 AM
Samantha409
 
3 posts · Mar 2010
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.
  #5  
Old Mar 31, 2010, 12:41 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Nov 5, 2010, 01:33 AM
blogmom
 
24 posts · Jun 2009
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.
  #7  
Old Nov 6, 2010, 02:09 PM
netrdx
 
8 posts · Nov 2010
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
  #8  
Old Nov 6, 2010, 03:02 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Nov 6, 2010, 05:38 PM
blogmom
 
24 posts · Jun 2009
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
  #10  
Old Nov 7, 2010, 02:34 PM
netrdx
 
8 posts · Nov 2010
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?
  #11  
Old Nov 7, 2010, 09:59 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Nov 12, 2010, 04:05 PM
netrdx
 
8 posts · Nov 2010
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 .
  #13  
Old Mar 23, 2011, 04:02 PM
sudipto's Avatar
sudipto
 
15 posts · Feb 2011
LetusBuzz.com Powered by Wordpress and Atahualpa
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/

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Full browser width footer kdawes01 Post-Kicker, -Byline & -Footer 5 Apr 11, 2010 08:51 PM
Can I overlap the header on my main content area? Masselyn Header configuration & styling 1 Feb 2, 2010 05:41 AM
Search box disappeared when I added full width header JakeThePeg Header configuration & styling 5 Jan 26, 2010 04:10 AM
Resize header area width? eggd Header configuration & styling 2 Aug 15, 2009 08:33 AM
Can I make room for more content in the header area DoverTim Header configuration & styling 2 Apr 5, 2009 01:55 PM


All times are GMT -6. The time now is 10:22 AM.


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