History: Layout Templates in Tiki 13 to 18
Preview of version: 10
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 (TODO)
- Fixed top navbar (uses "top" module zone) (TODO)
- Wider side columns (3 containers - header, middle, footer)
- Fixed top navbar (uses site icon + "topbar" module zone) (TODO)
- 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 (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 (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 (TODO)
Diagrams of the other layout templates will be posted here soon. They are similar to these diagrams but with fixed page-header navbars or other variations.
Fixed top navbar (uses "top" module zone) (TODO)
Diagrams of the other layout templates will be posted here soon. They are similar to these diagrams but with fixed page-header navbars or other variations.
Wider side columns (3 containers - header, middle, footer)
This is the same as above, except the middle columns span 3-6-3 instead of 2-8-2. So, there is more room on the side modules columns and less in the middle.
Fixed top navbar (uses site icon + "topbar" module zone) (TODO)
Diagrams of the other layout templates will be posted here soon. They are similar to these diagrams but with fixed page-header navbars or other variations.
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.