AgentPress – want full width header and footer

Community Forums Forums Design Tips and Tricks AgentPress – want full width header and footer

This topic is: resolved

This topic contains 14 replies, has 4 voices, and was last updated by  cosmo99 11 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #17378

    cotaylo
    Participant
    Post count: 29

    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

    #17422

    SoZo
    Moderator
    Post count: 1573

    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

    #17739

    cotaylo
    Participant
    Post count: 29

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

    #17742

    SoZo
    Moderator
    Post count: 1573

    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

    #17781

    cotaylo
    Participant
    Post count: 29

    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!

    #17895

    SoZo
    Moderator
    Post count: 1573

    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

    #17919

    cotaylo
    Participant
    Post count: 29

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

    #17926

    cotaylo
    Participant
    Post count: 29

    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?

    #17968

    SoZo
    Moderator
    Post count: 1573

    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

    #18116

    dnf0929
    Participant
    Post count: 3

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

    http://genesistutorials.com/genesis-structural-wraps-creating-a-full-width-genesis-child-theme/

    Good luck!

    #18124

    cotaylo
    Participant
    Post count: 29

    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!!!

    #18125

    cotaylo
    Participant
    Post count: 29

    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.

    #18136

    cotaylo
    Participant
    Post count: 29

    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

    #18138

    cotaylo
    Participant
    Post count: 29

    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)

    #58290

    cosmo99
    Participant
    Post count: 2

    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!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.