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. There is just one Bootstrap div class="container" that holds all of the content. In contrast to many Bootstrap site implementations, this layout isn't configured to use a fixed navbar at the page top.

At first there might seem 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.

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

!!! Classic Tiki (3 containers - header, middle, footer)
This layout is a modernization of Tiki's "legacy" layout ideas. In addition to the divs show here, a feature called "Shadow divs" will activate additional divs in the template. Originally made to add drop shadow graphics, these can be used for additional borders or other graphic enhancements or content.

This and some of the other layouts use more "container" divs mainly for styling purposes. To have full-page-width graphics behind the header and footer, and to allow the header and footer to flex vertically depending on the site content, and for the header and footer to have a fixed content width, it works well to give each of these page sections its own container div. Of course these all have the same, responsive width. 

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

!!! Wider side columns (3 containers - header, middle, footer)
This layout maintains wider side columns even when there are both left and right columns (in the other layouts, the side columns change from 3/12 to 2/12 of the container width when both side columns are used).

To have other width variations for these columns that are part of the basic layout file, either the column widths would have to be changed via CSS, or the  HTML would have to be changed, probably by copying and modifying this (or other) layout_view.tpl file.

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

!!! Fixed top navbar 1 (uses "top"  module zone)
This layout keeps the navbar fixed at the viewport top. All of its content is assigned via the admin-modules page, using the "top" module zone. The "topbar" module zone is also available, displaying at the top of the scrolling middle area.

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

!!! Fixed top navbar 2 (uses site icon + "top"  module zone)
This is another layout with the navbar fixed at the top of the viewport. But in this case the site logo is set using the "site icon" preference on the Look and Feel admin page, and the log-in form is placed on the right side of the navbar, while additional content can be assigned on the admin-modules page using the "top" module zone.

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

See also: ((How to change the side column widths)).

!! Make your own layout
A custom or site-specific layout template can be made and used if desired. It's best not to modify the original layout template files, as the modification would probably be lost in a site upgrade. The best path would be to make a new directory in ''templates/layouts/'' and be sure to have both a layout_edit.tpl and layout_view.tpl in the directory. The layout_edit.tpl file doesn't need to be modified, and the layout_view.tpl file can be edited to implement the layout changes.

If you create a new layout template, keep in mind that there are some CSS rules that are layout template-specific. For each layout template,  a CSS class is added to the body tag. When you copy and modify a layout template, you should check the CSS files for rules specific to the copied layout template and, if necessary, recreate them for the new layout template, with the new CSS body tag.

For example, this website currently has a class="layout_fixed_top_modules" assigned to the body tag because of the layout that is being used. If this layout template were cloned and renamed, the new style sheet would probably have to have new rules reflecting the new body class name.