Loading...
 
Skip to main content

History: Full-width backgrounds and fixed-width content

Preview of version: 2

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

Copy to clipboard
/* 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; }

History

Advanced
Information Version
Wed 04 of Apr, 2018 07:55 GMT-0000 Gary Cunningham-Lee Added the relevant CSS, for documentation purposes. 8
Tue 27 of Mar, 2018 14:50 GMT-0000 Gary Cunningham-Lee Fixed details. 7
Tue 27 of Mar, 2018 14:41 GMT-0000 Gary Cunningham-Lee "+" to indent a line doesn't seem to be working. 6
Tue 27 of Mar, 2018 14:39 GMT-0000 Gary Cunningham-Lee Updated with new method info. 5
Wed 11 of Apr, 2012 01:32 GMT-0000 Gary Cunningham-Lee Temporarily deleting code to test page view in mobile. 4
Wed 11 of Apr, 2012 01:32 GMT-0000 Gary Cunningham-Lee Temporarily deleting code to test page view in mobile. 3
Wed 11 of Apr, 2012 01:30 GMT-0000 Gary Cunningham-Lee Replacing pp with code plugin to try to resolve blank page in mobile view. 2
Sun 11 of Mar, 2012 02:01 GMT-0000 Gary Cunningham-Lee Page created. 1

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config