Site Layout Templates

Tiki's pages are displayed using combinations of Smarty templates, and the ones handling the entire viewport are the site layout templates. These contain Bootstrap CSS framework-compliant HTML to construct the main sections of the page. The page's grid for content, responsiveness, and styling details are then added with Bootstrap and theme-specific CSS. For variety, the Tiki package has six layout templates to provide different configurations of the page header, middle content area, and footer. These are named Standard Bootstrap; Classic Tiki with shadows; Fixed-top modules; 3 separate header, middle, footer containers; 3 separate header, middle, footer containers with 3-6-3 columns; and Social networking style. At a Tiki site's Look and Feel Admin page, these are selected under "Site layout". If you don't see this option, be sure "Advanced" is activated under "Preference Filters" at the top of the page (click the "filter" symbol).

(Rather than switching site layout templates, the Tiki site layout can also be configured by creating a custom module zone or otherwise by using CSS. This is particularly the case for the page header or navbar. But the focus of this page is the layout templates.)

(Images are coming soon.)
Standard Bootstrap - Classic Tiki with shadows - Fixed-top modules - 3 separate header, middle, footer containers - 3 separate header, middle, footer containers with 3-6-3 columns - Social networking style

What are the differences?

The "standard" Tiki page layout consists of a page header, a middle area with one to three columns, and a footer. All of the site header templates produce this layout, but with variations. All of them have one or more Bootstrap container-class div to hold the page's content. For Tiki site upgraders, this container div is equivalent to the "fixed-width" div used previously in Tiki. There is still a "fixed-width" checkbox on the Look and Feel admin page to activate the container width. Unchecking this box gives the site a fluid layout, i.e., it expands horizontally to fill the browser viewport (in Bootstrap terms, this is the container-fluid option).

The Standard Bootstrap layout has a single container div that contains the header, middle, and footer areas.

The Classic Tiki with shadows layout template is the closest layout to the legacy Tiki design. Like previous Tiki releases, it has extra div tags around the main sections of the page and modules that can be activated (on the Look and Feel admin page) for further styling options.

The Fixed-top modules layout template is preconfigured to place the page header in a fixed position at the top of the viewport. This page header (navbar) is 46px tall. (For custom Tiki themes made with the Less CSS precompiler, there's a variable @fixed-navbar-height that can be defined for whatever height is wanted for the theme. This controls the page header height and also the top margin of the main content to prevent overlap, along with setting the logo image height and margins.)

The 3 separate header, middle, and footer containers layout template is a simplified version of the Classic Tiki template - it doesn't have the shadow divs. The 3 separate header, middle, and footer containers with 3-6-3 columns layout template is similar to the previous two except that the columns in the middle div have widths of 25%, 50%, and 25% of the container width (Bootstrap col-xs-3, col-xs-6, col-xs-3), whereas the previous two templates have default middle column widths of 16.7%, 66.67%, and 16.7% (Bootstrap col-xs-2, col-xs-8, col-xs-2).

The Social networking style layout template is similar to the Standard Bootstrap template, but it also is configured with a fixed navbar at the top of the viewport. The contents of the navbar are partly input via Look and Feel preferences and partly provided by Tiki modules.

Site layout templates and modules

These template files are the framework of the Tiki site and get their content from modules and page data. Modules, in Tiki terminology, are containers that are used to display, typically, content that appears on more than one page, such as the site logo and title, search forms, site activity information, log-in form, and so on. There are several "module zones" to which modules are assigned: top zone, topbar zone, left zone, right zone, page top zone, page bottom zone, and bottom zone. See the illustration for the locations. Generally speaking, the site layout templates display modules the same way, but there are a few differences. The Fixed top modules template, as its name suggests, positions the top modules zone at the top of the viewport, while the Social networking style template uses the topbar zone for its content in the fixed-position navbar.

(Traditionally, Tiki's top module zone has typically contained the site logo and site title, log-in form, and so on. The topbar zone has usually been smaller vertically and held a horizontal menu and search form, for example.)

Keep in mind that the top zone of the Fixed top module layout template has a height of 46px so can't accommodate taller content properly. To use this template with taller content in the top module zone, the height will need to be changed by editing the CSS. This can be done when making a stylesheet, or the necessary rules can be added in the site's CSS customization form.

Similarly, the Social networking style layout template works best when the fixed navbar is no more than 46px tall. If "taller" content is added, the navbar will accept it, growing taller, but it will then overlap the middle content below unless a rule is added to increase the top margin of that overlapped area. This rule can be added to the custom CSS of the site.

(Information as of April 2015 just prior to the release of Tiki 14.)