History: Full-width backgrounds and fixed-width content

• «
• »

            This is extracted out of the FiveAlive theme stylesheet (fivealive.css), for appearance and behavior as in that theme: header and footer backgrounds go full-width, but header content, page middle content, and footer content are fixed-width. I did a quick check but there could be issues but anyway it's a starting point. Yellow is used as a temporary background color to check the performance and to be replaced by the actual background color/image. (Please make additions or changes as you like.)

If the full-width treatment is needed for just one of the header or footer, then don't use the rules for the area that should be full-width.

(If the theme is for a particular website, then there's not so much complexity regarding the fixed-width size, as the width can set it in the stylesheet and/or in Look and Feel admin. When making a theme for distribution, it can be a little tricky to set a default theme fixed-width size rule that works but isn't so strong that it prevents the Look and Feel setting from being respected.)

~pp~/* Rules from fivealive.css, to have full-width header and footer backgrounds but fixed-width content. */

.fixedwidth {
     margin: 0;
}

body.fixed_width .fixedwidth {
     width: 100%;
     margin: 0;
}

.fixed_width .fixedwidth .fixedwidth {
     width: 990px;
     margin: 0 auto;
}

.header_outer {
     background-color: yellow;
}

/* keep header content in page center (override layout.css)*/
.header_container .fixedwidth {
     margin-left: auto;
}

#middle {
     display: table;
     margin: 0 auto;
}

#main[id] {
     margin-top: 0;
}

#footer {
     background: yellow;
     padding: 1px 0 2px 0;
     text-align: center;
     width: 100%;
}

#custom_site_footer,
#power,
#rss,
#credits_svnrev,
#loadstats small {
     text-align: left !important;
     margin: auto;
     width: 90%;
     display: block;
}~/pp~