History: Layout Templates in Tiki 13 to 18
Preview of version: 13
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.
Table of contents
- Tiki default available choices
- Comparison of layouts
- For reference, a typical simple Bootstrap layout (this is not a Tiki layout)
- Basic Bootstrap
- Classic Tiki (3 containers - header, middle, footer)
- Fixed top navbar 1 (uses "top" module zone)
- Wider side columns (3 containers - header, middle, footer)
- Fixed top navbar 1 (uses "topbar" module zone)
- Fixed top navbar 2 (uses site icon + "top" module zone)
- Make your own layout
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)
Basic Bootstrap
This is a simple diagram of Tiki's "Basic Bootstrap" layout:
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)
Fixed top navbar 1 (uses "top" module zone)
Wider side columns (3 containers - header, middle, footer)
Fixed top navbar 1 (uses "topbar" module zone)
Fixed top navbar 2 (uses site icon + "top" module zone)
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.