History: Make a Wide Section in a Wiki Page

• «
• »

            {DIV(class="row top_row")}
{DIV(class="container")}
! 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.



{DIV}
{DIV}
{DIV()}

To have actual full-width content, don't use a container-class div in the row, or give it a custom width setting.

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

The page layout code is something like this:
{CODE()}
{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()}

To have actual full-width content, don't use a container-class div in the row, or give it a custom width setting.

{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}
{CODE}

{DIV}
{DIV}
{DIV(class="row bottom_row")}
{DIV(class="container")}
These rules are added in Look & Feel custom CSS:
{CODE()}
#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; }
{CODE}
{DIV}
{DIV}