History: Layout Templates in Tiki 13 to 18

Source of version: 16

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%} !! 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.

History

Enable pagination rows per page

HTML diff Side-by-side diff Side-by-side diff by characters Inline diff Inline diff by characters Full side-by-side diff Full side-by-side diff by characters Full inline diff Full inline diff by characters Unified diff Side-by-side view HTML diff Side-by-side diff Advanced

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

Select action to perform with checked... Remove OK