AgentPress – want full width header and footer

[cotaylo]

Hi There. I'm looking to make the header and nav menu in AgentPress the full width of the screen - similar to this: http://www.luxurysarasotarealestate.com
Same thing for the footer too. I basically just want the color block in the header, nav and footer to run full width with the header and footer content where it normally would be.
I did some research on the subject and found some code... would this work?
<style> .wrap { position:relative; margin:0 auto; /*replace 990px with your width*/ width:990px; }

#CMHeader, #CMFooter { width:100%; background:#243448; } #CMHeader { /*change or remove as necessary*/ height:510px; } #CMFooter { /*change or remove as necessary*/ height:200px; } < /style>

The Header code: < div id=”CMHeader”> <p>Content Here</p> < /div><!– end CMHeader –>

The Footer code: < div id=”CMFooter” > <p>Content Here</p> < /div><!– end CMFooter –></code>

Just started on my site today so it doesn't look like much but it's here: 216.172.181.99/~cchs
Thanks to anyone who has any advice on this! 🙂
Colleen

[SoZo]

You need to remove the width from #wrap and then add widths and auto left/right margins to all the inner elements that you want centered and contained.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[cotaylo]

Thanks SoZo.

I removed the width from wrap and I tried several widths and margins for the #header and I'm not getting anything to budge.  I'm not sure what I am not getting right.

I am just trying to get the logo back to the center area where the body is and I really want the background color for a full width header to show up and I can't get any color to appear.

This might be a better example of what I am trying to achieve: http://www.davidsporleder.com/

I need to get the logo in the same place and I'd like to have a background color full width just above my nav menus.

I appreciate your help very much - I'm still learning. 🙂

[SoZo]

Please include a link to your site with all questions so that people can see what is going on.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[cotaylo]

Sure, no problem - it's starting to get confusing. I guess I forgot the http:// in the first post because I can see now that my link was hard to find.

You can see my website here: http://216.172.181.99/~cchs

Questions:

1. I'd like to have a gradient image behind the the logo that stretches the full width of the screen like the subnav does. Similar to this site:http://www.davidsporleder.com/

2. I'd also like to make the brown color of the footer the full width of the screen also. (footer widgets can stay where they are)

Hope that clears things up and I appreciate anyone's input on my site.

Thank you!

[SoZo]

You would need to add the gradient to either the body or #wrap

If you want the footer widgets to span the viewport you need to remove the width from #footer-widgets then add a width and auto left/right margins to #footer-widgets .wrap.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[cotaylo]

Ok. So how do I know what size gradient to create and the code to set to make it full width?

I did what you recommended for the footer and it didn't change anything. My code looks like this now:

/* Footer Widgets ------------------------------------------------------------ */

#footer-widgets {  -moz-box-shadow: 0 1px 3px #000;  -webkit-box-shadow: 0 1px 3px #000;  background-color: #273549;  box-shadow: 0 1px 3px #000;  margin: 0 auto;  overflow: hidden;   }

#footer-widgets .wrap {  color: #fff;  font-size: 12px;  line-height: 20px;  padding: 20px 20px 0;  margin-left: auto;  margin-right: auto;

 

would you mind looking and helping me see what I am doing wrong? 🙂

[cotaylo]

ok - my bad on the footer thing - my WP editor wasn't updated so I had to log out and back in again.

So I got the footer thing to work for the background color (brown) but I don't really want the widget content itself to span the view port - just the background color.

I left the changes you recommended so you could see...any thoughts?

[SoZo]

You need to add a width to #footer-widgets .wrap and just repeat the gradient image horizontally.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[dnf0929]

I found this post pretty helpful when I was building my first full width Genesis site.

Genesis Structural Wraps & Creating a Full Width Genesis Child Theme

Good luck!

[cotaylo]

Yay! I got the Footer the way I wanted it with your help - thank you!

In case anyone else wants to know what my CSS looks like to achieve it, here it is:

/* Footer Widgets
------------------------------------------------------------ */

#footer-widgets {
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
background-color: #273549;
box-shadow: 0 1px 3px #000;
margin: 0 auto;
overflow: hidden;

}

#footer-widgets .wrap {
color: #fff;
font-size: 12px;
line-height: 20px;
padding: 20px 20px 0;
margin-left: auto;
margin-right: auto;
width: 920px;
}

I didn't change anything else in this area from the AgentPress template just the above code to achieve the look of a full-width footer that seems to be popular now.
Thank You John!!!

[cotaylo]

Cool - I'm going to check out the tutorial above too because, I still can't figure out my header situation...

If I add the gradient to the 'body', it changes the whole background for the page and I really only want to change the top 2 inches like the footer is at the bottom.

I'll go read the tutorial and see if I can figure it out there before I ask more questions. 🙂

Thanks you guys! If I ever get the code right, I'll post it for others to see.

[cotaylo]

Ok. Here's what I've got so far if others are following this and want to have the full-width header.

I created a small file in CorelDraw size 20px wide by 167px high. and colored it how I wanted as a gradient.
I saved the file as gradient2.png (because gradient.png is already used in this theme for the Subnav)
I copied the gradient2.png using Filezilla to: /www/wp-content/themes/agentpress/images
Then, I added this code to the theme CSS:
/* Body
------------------------------------------------------------ */

body {
background: url(images/gradient2.png);
background-repeat:repeat-x;
}

I wanted to change the color of the main background color so I also changed the background color in the CSS here:
/* AgentPress Tan
------------------------------------------------------------ */

body.agentpress-tan {
background-color: #06697B
}

I hope this helps someone who's as new as me to CSS! and if any of the more seasoned developers notice an error - feel free to chime in 🙂

In the meantime, I managed to get my logo.png off kilter so if anyone can help me get it back in the right spot, I'd really appreciate it... I just want it where it normally would be left aligned with the main portion of the webpage. You can see where it's off here: http://216.172.181.99/~cchs/

Thanks in advance!
Colleen

[cotaylo]

I forgot to mention that I also removed the width from the #wrap. (so add that to the steps above - wish I could have edited the post)

[cosmo99]

I new making website . Wondering any one know what kind template http://sarasotasights.com/ is using.

I want make website with the same menu bar Would like help

Thank you guys!

[Author]

Posts