Loading...
 

History: Make a Wide Section in a Wiki Page

View page Collapse Into Edit Sessions

Preview of version: 5

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.



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


The page layout code is something like this: 

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

These rules are added in Look & Feel custom CSS: 

#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; }

History

Advanced
Information Version
Mon 15 of Feb, 2016 14:01 GMT chibaguy 8
Mon 15 of Feb, 2016 13:59 GMT chibaguy 7
Mon 15 of Feb, 2016 13:57 GMT chibaguy 6
Mon 15 of Feb, 2016 13:55 GMT chibaguy Added wide-content row. 5
Mon 15 of Feb, 2016 13:46 GMT chibaguy Page title "moved". 4
Mon 15 of Feb, 2016 13:42 GMT chibaguy Explanation added. 3
Mon 15 of Feb, 2016 13:26 GMT chibaguy 2
Mon 15 of Feb, 2016 13:11 GMT chibaguy Page created. 1

Switch Theme

Layout

Latest Changes

No records to display ...more

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