Loading...
 
Skip to main content

History: Layout Templates in Tiki 13 to 18

Preview of version: 8

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.

Tiki default available choices

Layout template name Directory name* Description
Standard Bootstrap basic This layout is a simple one with everything in one container div.
Classic Tiki with shadows classic This is an implementation of the legacy Tiki layout, including "shadow divs" which are optional div wrappers around major parts of the page.
Fixed_top_modules 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).
3 separate header, middle, footer containers header_middle_footer_containers This is similar to the "Classic" layout but is somewhat simplified and doesn't have the shadow divs.
3 separate header, middle, footer containers with 3-6-3 columns 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.
Social networking style 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)


Bootstrap Typical Layout

Standard Bootstrap

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

Tiki Basic Layout With Three Content Columns

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 with shadows 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_modules 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.


Here is the "3 separate header, middle, footer containers" layout:

Tiki Header Middle Footer Containers Layout.fw

The complexity of this layout originated with the FiveAlive theme, which has liquid, full-width page-header and footer backgrounds, but fixed-width (Bootstrap .container div width) content areas in the page header, middle, and footer.

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.

History

Advanced
Information Version
Fri 04 of Nov, 2016 07:22 GMT-0000 Gary Cunningham-Lee 18
Thu 14 of Apr, 2016 04:47 GMT-0000 Gary Cunningham-Lee Added link. 17
Mon 21 of Mar, 2016 11:19 GMT-0000 Gary Cunningham-Lee Text content added. 16
Mon 21 of Mar, 2016 10:46 GMT-0000 Gary Cunningham-Lee Removed duplicate copy. 15
Mon 21 of Mar, 2016 10:44 GMT-0000 Gary Cunningham-Lee Corrected syntax (need to use src=display123, etc.) 14
Mon 21 of Mar, 2016 10:41 GMT-0000 Gary Cunningham-Lee Uploaded SVG images. 13
Sun 20 of Mar, 2016 11:01 GMT-0000 Gary Cunningham-Lee SVG version of Basic Bootstrap layout added. 12
Sun 20 of Mar, 2016 10:39 GMT-0000 Gary Cunningham-Lee 11
Tue 08 of Mar, 2016 12:01 GMT-0000 Gary Cunningham-Lee Updated information. Commented out some old info/image until it's replaced. 10
Mon 15 of Feb, 2016 18:04 GMT-0000 Jean-Marc Libs 9
Mon 15 of Feb, 2016 14:53 GMT-0000 Jean-Marc Libs 8
Mon 15 of Feb, 2016 14:52 GMT-0000 Jean-Marc Libs 7
Mon 15 of Feb, 2016 14:51 GMT-0000 Jean-Marc Libs 6
Mon 15 of Feb, 2016 14:49 GMT-0000 Jean-Marc Libs 5
Mon 15 of Feb, 2016 14:48 GMT-0000 Jean-Marc Libs 4
Tue 26 of Jan, 2016 08:44 GMT-0000 Gary Cunningham-Lee Added tag. 3
Mon 25 of Jan, 2016 11:58 GMT-0000 Gary Cunningham-Lee 2
Mon 25 of Jan, 2016 10:46 GMT-0000 Gary Cunningham-Lee Page created. 1