History: Layout Templates in Tiki 13 to 18

• «
• »

            As of Tiki 13 (and further developed in subsequent releases) Tiki offers a "layout template" choice. Configured on the Look and Feel admin page, this option switches the overall page layout template to enable a page-top fixed navbar or standard scrolling navbar, classic Tiki div arrangement, different default widths for side columns, and so on.

{maketoc}

!! Tiki default available choices
|| Layout template name | Directory name* | Description
Basic Bootstrap | basic | This layout is a simple one with everything in one container div.
Classic Tiki (3 containers - header, middle, footer) | classic | This is an implementation of the legacy Tiki layout, including "shadow divs" which are optional div wrappers around major parts of the page.
Wider side columns (3 containers - header, middle, footer) | header_middle_footer_containers_3-6-3 | This layout has wider side columns by default. The other layouts have main content columns with 2-8-2 grid widths, but switch to 3-9 or 9-3 if the right or left column has no content.
Fixed top navbar 1 (uses "top" module zone) | fixed_top_modules | This layout has a page header fixed at the top of the page, and uses the ''top'' module zone for content (there is no hard-coded content in the page header/navbar). 
Fixed top navbar 2 (uses site icon + "topbar"  module zone) | social | This layout is the closest to a generic Bootstrap fixed-navbar design. The logo, site title, and search form are hard-coded in the navbar, and the ''topbar'' module zone can be used for additional content. This layout may be the easiest to produce a good small-screen page-header/navbar.  ||
 *These directories are in ''tikiroot/templates/layouts/''.

!! Comparison of layouts

!!! For reference, a typical simple Bootstrap layout (this is not a Tiki layout)

{img fileId="159"}

!!! Basic Bootstrap
This is a simple diagram of Tiki's "Basic Bootstrap" layout:

{img src=display163 height=100% width=100%}

There appears to be some redundancy with the "top modules" zone and "topbar modules" zone, but having two areas for page header content reflects a Tiki legacy design preference. Site admins can use either of these or both (or neither) in various ways. A typical approach is to put the site logo and/or title in the "top" zone, along with a banner or other content, and use the "topbar" zone for a navbar (horizontal menu) and search form, for example.

!!! Classic Tiki (3 containers - header, middle, footer)

{img fileId="165" height=100% width=100% }

!!! Fixed top navbar 1 (uses "top" module zone)

{img fileId="166" height=100% width=100% }

!!! Wider side columns (3 containers - header, middle, footer)

{img fileId="167" height=100% width=100% }

!!! Fixed top navbar 1 (uses "topbar"  module zone)

{img fileId="168" height=100% width=100%}

!!! Fixed top navbar 2 (uses site icon + "top"  module zone)

{img fileId="169" height=100% width=100%}

!! Make your own layout
A custom or site-specific layout template can be made and used if desired. In this case, make a new directory in ''templates/layouts/'' and be sure to have both a layout_edit.tpl and layout_view.tpl in the directory.