full-width header and footer

  • I know this has been covered before but I can’t seem to find a solution that works for me. I’m using the “Redline” theme which has the header and footer enclosed within a 960px wide container. I would like to have both the header and footer extend the full width of the page while keeping the main content area of the page the same.

Viewing 15 replies - 1 through 15 (of 22 total)

  • Will removing the width: 960px from #container and adding #content { width: 960px; margin: 0 auto; } work for you?

    Thread Starter jrcollins

    (@jrcollins)

    If I widen the container I need to be able to center the content and I’m not sure how to do that.

    When you put a fixed width on the #content and put margin: 0 auto on it, that will center it.

    margin-right:auto
margin-left:auto

    this will keep the content in center…

    ^ margin: 0 auto; is the same as writing that out orpatech

    Sorry, didn’t viewed replies ??
    My Bad!

    Thread Starter jrcollins

    (@jrcollins)

    So I just delete the “width=960px” line in “container”? Actually, the content is made up of a “primary” content div and a “secondary” content div, do I add, “margin: 0 auto;” to each of these?

    Phil

    (@owendevelopment)

    You have to change/add a few widths here (BACKUP style.css first!):

    #container {
width: 100%;
}

#primary {
width: 535px;
}

#content {
margin-left: auto;
margin-right: auto;
width: 960px;
}

#logo {
width: 100%;
}

    This will pretty much get you where you want (full width header and footer, rest of site in container). You may need to tweak it (eg, #feedarea dl width etc, Logo image is currently 960px etc), but hopefully this helps you out.

    Phil

    ?? I’m the author of RedLine

    The layout is structured like so: 

    container
 -header
 -content
  --primary
  --secondary
 -footer

    So as Fill suggests above, make #container width 100% and put width 960px to #content, along with margin: 0 auto; also there

    Thread Starter jrcollins

    (@jrcollins)

    ok, thanks. I’m getting there. I now have a full-width header and footer but the problem is the logo image formatting in style.css is overidden by the header settings in the wordpress dashboard. This automatically crops the image to the former width of the container, ie., 960px.

    Phil

    (@owendevelopment)

    Did you change:

    #logo {
    width: 100%;
    }

    as this is the container holding the logo image. By default, it is 960px so you need to change this as well.

    Thread Starter jrcollins

    (@jrcollins)

    Yes, I did but the logo image is still the same width. The formatting is controlled via the dashboard header settings.

    Phil

    (@owendevelopment)

    The image in there will be 960px wide because that’s how big the image is. What you’ve done today is made the width flexible, so a background image isn’t going to look good now as the header will alter based on the size of the screen, but the image won’t.

    If you change the image to a colour, it should look better.

    Thread Starter jrcollins

    (@jrcollins)

    I uploaded a new image which is full-width and then changed the image url here:

    #logo {
    background: url("") no-repeat scroll center bottom #FFFFFF;
    height: 85px;
    width: 960px;
}

    but it seems it can only be changed in header settings via the dashboard which automatically crops the image.

    Default settings for the logo are in functions.php

    // The height and width of your custom header
define( 'HEADER_IMAGE_HEIGHT', 85 );
define( 'HEADER_IMAGE_WIDTH', 960 );
define( 'HEADER_TEXTCOLOR', 'FFFFFF' );
define( 'HEADER_IMAGE', '%s/library/media/images/header.jpg' );

    Take in mind that the values are in pixels, you cannot make the logo flexible (like width:100%) because it’s intended to be an image file.

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘full-width header and footer’ is closed to new replies.