Loading...
 

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-md-3, col-md-6, col-md-3), whereas the previous two templates have default middle column widths of 16.7%, 66.67%, and 16.7% (Bootstrap col-md-2, col-md-8, col-md-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.)


Page last modified on Friday 03 April, 2015 15:23:28 GMT-0000

doc.tiki.org

Get Started

Admin Guide User Guide Bootstrap in Tiki

Keywords

Keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):

Accessibility (WAI and 508)
Accounting
Articles and Submissions
Backlinks
Banners
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Link Cache
Calendar
Category
Chat
Clean URLs
Comments
Communication Center
Compression (gzip)
Contacts (Address Book)
Contact us
Content Templates
Contribution
Cookie
Copyright
Credit
Custom Home and Group Home Page
Date and Time
Debugger Console
Directory of hyperlinks
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
Draw
Dynamic Content
Dynamic Variable
External Authentication
FAQ
Featured links
File Gallery
Forum
Friendship Network (Community)
Gmap Google maps
Groups
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
Kaltura video management
Karma
Live Support
Login
Logs (system & action)
Look and Feel
Mail-in
Map with Mapserver
Menu
Meta Tags
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
Payment
Performance Speed / Load
Permissions
Platform independence (Linux-Apache, Windows/IIS, Mac, BSD)
Polls
Profiles
Profile Manager
Report
Toolbar
Quiz
Rating
Feeds
Score
Search engine optimization
Search
Search and Replace
Security
Semantic links
Shadowbox
Shadow Layers
Share
Shopping cart
Shoutbox
Slideshow
Smiley
Social Networks
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Stats
Surveys
Tags
Task
Tell a Friend, alert + Social Bookmarking
TikiTests
Theme CSS & Smarty
Trackers
Transitions
TRIM
User Administration including registration and banning
User Files
User Menu
Watch
WebDAV
Webmail
Web Services
Wiki History, page rename, etc
Wiki Syntax
Wiki structure (book and table of content)
Workspace
WSOD
WYSIWYCA
WYSIWYG
XMLRPC

Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki