Will removing the width: 960px from #container and adding #content { width: 960px; margin: 0 auto; } work for you?
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!
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
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.
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.
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.
