Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

How to make header image & menu bars stretch full width of the container?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Oct 23, 2010, 03:10 PM
Shan_LSOS
 
60 posts · Jun 2010
I want the header to absolutely fit the container of the blog with no left or right borders and the top border very minimal. How do I do this? I have searched the forum and only found how to make the header go full width of the entire browser page. This is not what I want.

I have tried extended the width of the header area and all that does is give me more on the right hand side falling off the container of the whole blog.

Is there a solution to this?

Last edited by Shan_LSOS; Oct 23, 2010 at 04:30 PM.
  #2  
Old Oct 23, 2010, 03:52 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
You could set the right and left padding of div#container to 0 and then add padding to the posts etc. to compensate so that text in them isn't flush left or right.
__________________
~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 Oct 23, 2010, 04:29 PM
Shan_LSOS
 
60 posts · Jun 2010
Ok, that still left about a 15-20px margin on the right side and then the nav bars were all off and the sidebars dropped below the content.

I was hoping for a quick fix. LOL Guess not.
  #4  
Old Oct 24, 2010, 12:34 AM
Shan_LSOS
 
60 posts · Jun 2010
I didn't leave the link because the site is still under construction and since it was a header issue with margins/padding, etc. I didn't think it was necessary.

In any case, the link is: http://shopwithmemomma.com/

As you can see it is all FUBARED.
  #5  
Old Oct 24, 2010, 11:30 AM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
You don't have a header image in you header...however you do have a LOGO image...
so...what does the logo have surrounding it?
http://shopwithmemomma.com/wp-conten...mages/logo.gif
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Oct 24, 2010, 02:03 PM
Shan_LSOS
 
60 posts · Jun 2010
In photoshop, when I was designing the header, I simply added a stroke outline to the header. I added nothing in the CSS for it.

And whenever designing Atahualpa, I have always added the header as a logo.gif. It's how I was taught to design for this theme. Should I be doing it differently?
  #7  
Old Oct 24, 2010, 02:37 PM
Shan_LSOS
 
60 posts · Jun 2010
Now I have another issue...

My client had another designer (without my knowledge) go in and mess with the coding. Now it is all kinds of FUBARED.

No text widgets will show up in the sidebars. She had another designer go in and mess with something (before I was even completely done with my part) to make the text widgets show up in the sidebars. That made all of the padding/margins around the whole of the content area go away, the top menu bar is wider than the header, the footer disappeared and the post area is almost falling off the left edge of the blog even though I have CSS inserts in there adding 10px of padding to everything.

Does anyone know why this would happen? I have no idea what this other designer did, nor do I know why it made a perfectly lovely design go all weird.
  #8  
Old Oct 24, 2010, 02:49 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
You should find out where this other designer made the changes. I they are not familiar with Atahualpa they may have made changed to the theme files which will make "fixing" the issues problematic.
__________________
~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 Oct 24, 2010, 04:17 PM
Shan_LSOS
 
60 posts · Jun 2010
I asked for that information and was told I could figure it out myself. Nice, eh?

Anyway, I uninstalled and re-installed the theme twice and had the same issues. I installed a default theme and had the same issues with the sidebar text widgets not showing up. I am in the process now of uninstalling wordpress and then re-installing it to see what happens. The MySQL database is loading as we speak.

But now I am a little worried about uploading the ata-settings file back into a new installation. I just don't know what happened to begin with.
  #10  
Old Oct 24, 2010, 05:34 PM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
I asked for that information and was told I could figure it out myself. Nice, eh?
that's not an issue, tell the client that you'll be happy to, but the terms of any contract have changed and now you have to bill by the hour because there is no way to determine quickly what was done.

And be prepared to walk.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Oct 24, 2010, 06:13 PM
Shan_LSOS
 
60 posts · Jun 2010
Thanks, guys. You are both right, but it seems to all be fixed now except for the top nav bar being wider than the container. I will not have this happen again. I have updated my TOU to state what should have been obvious already ~ Don't call in anyone else until I say I am completely done with your design even if I have loaded it on to your site. OY.

I had to uninstall and re-install WP in order to fix everything. Hopefully it sticks after I add all the plugins back.

Now the only issue seems to be the top nav bar.
  #12  
Old Oct 24, 2010, 10:10 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
Well I see your footer is back. Are there any other issues still?
__________________
~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.
  #13  
Old Oct 24, 2010, 11:20 PM
Shan_LSOS
 
60 posts · Jun 2010
Quote:
Originally Posted by lmilesw
Well I see your footer is back. Are there any other issues still?
Yes, but just two. The page bar is still wider than the header (at least that's how it looks) and the post thumbnails aren't showing up. And is there a way to make the top border of the footer not go all the way across? I would like about a 15px padding on the right & left sides so it kind of looks centered.

And for some strange reason, even though I have the grab my button code in a table so that the button & grab box are side by side, it is showing up on top of each other. I even set the grab box to have 5 columns & 5 rows, but it's still really wide. I have no clue why. I think the theme hates me today.

But other than that, I think we're good. LOL

Last edited by Shan_LSOS; Oct 24, 2010 at 11:36 PM.
  #14  
Old Oct 25, 2010, 06:05 AM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
Yes, but just two.
hmm...I count 4 questons
Quote:
The page bar is still wider than the header (at least that's how it looks)
First lets clear up some terminology. You are using a LOGO image, not a HEADER image (you use %logo in the 'Configure Header Area' option, not %image - this can be determined by looking at the generated source). The menubars, header images, logo, category menu etc, are all part of the header and the width of the header is defined by the width of the container.

Your PAGE menu bar looks wider than the LOGO image because of the border that is PART OF THE IMAGE and is the same color of the page menubar background. Go to ATO->Body, Text & Links->Body Style and get rid of the background image (just put a 'x' somewhere in the name) and then take a look at the page.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Oct 25, 2010, 01:23 PM
Shan_LSOS
 
60 posts · Jun 2010
Sorry about the 4 questions. LOL

How would I put the "header" image in the right place that is no the LOGO image so that the container and everything looks even? (If I do put the header in the proper place, will it )

I'm usually not this dumb, but my mind is friend from having to redo the entire thing 4 times yesterday.
  #16  
Old Oct 25, 2010, 02:13 PM
Shan_LSOS
 
60 posts · Jun 2010
Ok, I put the image in the header folder but it showed up for a bout a minute only. Now the default images are rotating with each page refresh even though I deleted them all from the header folder.

OY.

But I've fixed it now.

My question is, why can I not keep the header image with the outline and just increase the layout width by 3 or 4 pixels and have it still all line up? I tried it, it did not work. The only thing that works is the header image with no outline/border.

http://shopwithmemomma.com/

Last edited by Shan_LSOS; Oct 25, 2010 at 03:11 PM.
  #17  
Old Oct 25, 2010, 03:29 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
"...why can I not keep the header image with the outline and just increase the layout width by 3 or 4 pixels and have it still all line up?"

Because the border is part of the image
__________________
~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.
  #18  
Old Oct 25, 2010, 05:49 PM
Shan_LSOS
 
60 posts · Jun 2010
Quote:
Originally Posted by lmilesw
"...why can I not keep the header image with the outline and just increase the layout width by 3 or 4 pixels and have it still all line up?"

Because the border is part of the image
So if I add the border in the CSS it will line up?
  #19  
Old Oct 25, 2010, 08:04 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
I am not sure what you want to line up with what. Actually a border as part of the image or as a CSS border will cause the image area to be narrower that what is over and under it so the menus will be wider than the image.

It looks like the site is as you want it now though.
__________________
~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.
  #20  
Old Oct 25, 2010, 11:51 PM
Shan_LSOS
 
60 posts · Jun 2010
I just wanted to have the header span the full width of the container of the blog and be able to keep the border on the header image without the upper & lower nav bars not looking like they arre wider than the image. But I guess that isn't a viable option. Uggh.

Bookmarks

Tags
extend header, header

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to make header image not span full width of the page zachmorton Header configuration & styling 1 Sep 29, 2010 04:16 PM
[SOLVED] page & category menu bars longer than header image Vickie Header configuration & styling 4 Jul 23, 2010 09:28 AM
[SOLVED] Page menu bar gif image full width rcarbaugh Page & Category Menu Bars 4 Jan 13, 2010 12:43 PM
Image too small at 770 px for Atahualpa theme - any way to make it stretch to 100%? houston777 Header configuration & styling 1 Jul 5, 2009 04:25 PM
how to extend the added image to your layout width in menu bars? and some other Q's ppat2 Page & Category Menu Bars 1 May 5, 2009 05:28 PM


All times are GMT -6. The time now is 12:59 AM.


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