Make a wide section in a wiki page

This is a way of having one or more wide sections in a page, such as to have a full-width background color, slider (image rotator), or other wide content. In this demo, the site has a fixed width set, such as 1170px. There are custom CSS rules input on the Look & Feel admin page to override the fixed width, to make the page liquid (100% wide). The page has rows - divs with the class "row" - and each of these has a div class="container". These container divs have whatever width is set by the theme style sheet or the Look and Feel admin page, so the content is kept in the center of the page, the same as on other pages of the site.

For the section's content itself to be full-width, don't use a container-class div in the row.

The page layout code is something like this:

Copy to clipboard

{DIV(class="row top_row")}
{DIV(class="container")}
! Pagetitle
Top section content goes here. (The page title was turned off and replaced by the heading here in the content div.)

{DIV}
{DIV}
{DIV()}

For the section's content itself to be full-width, don't use a container-class div in the row.

{DIV}
{DIV(class="row middle_row")}
{DIV(class="container")}

Middle section content goes here.

{DIV}
{DIV}
{DIV(class="row bottom_row")}
{DIV(class="container")}

Bottom section content goes here.

{DIV}
{DIV}

These rules are added in Look & Feel custom CSS:

Copy to clipboard

#page_356 #col2 { display:none; }
#page_356 #middle.container { width: 100%; }
#page_356 #col1 { width: 100%; left: 0; }
#page_356 .tiki .middle_outer { background: #28292b; }
#page_356 .top_row { background: #28292b; color: #fff; }
#page_356 .middle_row { background: #f2f2f2; color: #333; }
#page_356 .bottom_row { background: #fff; color: #333; }