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, 06:17 AM
paulae's Avatar
paulae
 
1,333 posts · Feb 2009
Wordpress 3.4.1, Atahualpa 3.7.7
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, 03:52 PM
lmilesw's Avatar
lmilesw
 
10,172 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, 04: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, 10: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, 11:41 AM
lmilesw's Avatar
lmilesw
 
10,172 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, 12: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, 01: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, 02:02 PM
lmilesw's Avatar
lmilesw
 
10,172 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, 04: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, 01: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, 08:59 PM
lmilesw's Avatar
lmilesw
 
10,172 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, 03: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, 03: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/
  #14  
Old Mar 23, 2011, 03:27 PM
lmilesw's Avatar
lmilesw
 
10,172 posts · Jul 2009
Central New York State USA
Thanks for that sudipto... Unique approach
__________________
~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.
  #15  
Old Mar 23, 2011, 03:55 PM
KatyDigg's Avatar
KatyDigg
 
319 posts · Jul 2009
Quote:
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

  #16  
Old Mar 24, 2011, 12:14 AM
sudipto's Avatar
sudipto
 
15 posts · Feb 2011
LetusBuzz.com Powered by Wordpress and Atahualpa
Nothing to thank me. Just sharing a small find. Thanks to Flynn for making such a flexible theme.
  #17  
Old Mar 24, 2011, 05:13 AM
juggledad's Avatar
juggledad
 
23,536 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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:
</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
HTML Code:
<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)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #18  
Old Mar 24, 2011, 05:34 AM
sudipto's Avatar
sudipto
 
15 posts · Feb 2011
LetusBuzz.com Powered by Wordpress and Atahualpa
Thanks JD. I forgot to look in that aspect.
  #19  
Old Mar 24, 2011, 06:08 AM
juggledad's Avatar
juggledad
 
23,536 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
One other thing, you can change the CSS to use a % instead of a fixed width, so you can have
HTML Code:
div.wrapbody{
    width: 80% !important;
}
and it will vary with the width of the page.

Nice tip!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #20  
Old Mar 24, 2011, 05:26 PM
KatyDigg's Avatar
KatyDigg
 
319 posts · Jul 2009
Thank you, Juggledad, very much appreciated.
  #21  
Old Mar 31, 2011, 04:33 PM
sudipto's Avatar
sudipto
 
15 posts · Feb 2011
LetusBuzz.com Powered by Wordpress and Atahualpa
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.
  #22  
Old Apr 25, 2011, 02:48 PM
tsheridan
 
94 posts · Mar 2011
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!
  #23  
Old Apr 25, 2011, 03:32 PM
juggledad's Avatar
juggledad
 
23,536 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #24  
Old Apr 25, 2011, 04:53 PM
tsheridan
 
94 posts · Mar 2011
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!
  #25  
Old Apr 25, 2011, 06:38 PM
juggledad's Avatar
juggledad
 
23,536 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Apr 25, 2011 at 06:41 PM.

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 07:51 PM
Can I overlap the header on my main content area? Masselyn Header configuration & styling 1 Feb 2, 2010 04:41 AM
Search box disappeared when I added full width header JakeThePeg Header configuration & styling 5 Jan 26, 2010 03:10 AM
Resize header area width? eggd Header configuration & styling 2 Aug 15, 2009 07:33 AM
Can I make room for more content in the header area DoverTim Header configuration & styling 2 Apr 5, 2009 12:55 PM


All times are GMT -6. The time now is 01:58 PM.


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