History: Make a Wide Section in a Wiki Page

Source of version: 9 (current)

{syntax type="markdown"  editor="wysiwyg"} 
{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 &amp; 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(class="row bottom_row")} 
{DIV(class="col-sm-12")} 
For the section's content itself to be full-width, don't use a container-class div in the row. 
{DIV}
 

{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()}

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

{DIV}
 

{DIV} 
{DIV(class="row bottom_row")} 
{DIV(class="container")} 
These rules are added in Look &amp; 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}

History: Make a Wide Section in a Wiki Page

Source of version: 9 (current)

Switch Theme

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: Make a Wide Section in a Wiki Page

Source of version: 9 (current)