Configuring Modules in Horizontal Module Zones

Tiki has five horizontal module zones that can be used to place things like the site logo, log-in form, menu, search form, banner ads and so on. These zones are: the "top" and "topbar" zones that span the top of the page, the "pagetop" zone located above the center or main column of the page, the "pagebottom" zone at the bottom of the center or main column, and the "pagebottom" zone that spans the page in the page footer.

Modules are assigned to these zones on the Admin Modules page (tiki-admin_modules.php). But, because these are horizontal areas, in order to have the modules display as desired, there are extra configuration steps compared to the vertical left and right column zones where modules simply stack one below the other.

Use Bootstrap

Since Tiki 13, these horizontal module zones have a Bootstrap "row" class, and modules can be given Bootstrap grid classes to specify their width and visibility. (This description holds for Tiki 13 through Tiki 18, which all use Bootstrap 3. Beginning with Tiki 19, Bootstrap 4 is used, so Flexbox and CSS grid will be the best ways to lay out modules in horizontal zones. Documentation on that will be added soon.)

Assign the modules in order

On tiki-admin_modules.php, the modules for the top zone and other horizontal module zones should be ordered 1 to 3, etc. in the order that they should appear, left to right, in the zone. The screenshots on this page are of the top zone module configuration at themes.tiki.org.

Specify the "containing class"

For each module that you want to configure, go to its "Appearance" tab, and go down to the "Containing class" input and enter a grid class name, such as "col-xs-3". If you don't want the module to display in a particular screen size, you can also add a visibility class like "hidden-sm". Multiple classes can be entered, separated by a space. Follow the docs and examples on https://getbootstrap.com/docs/3.3/css/#grid to see what's possible. Basically, using "col-xs- " along with a number from 1 to 12 is the pattern. It's a 12-column grid so "col-xs-3" means a div (module) that's 3/12 the width of the module zone.

For a custom module, the parameters are input as a string like this:

Here is a view of themes.tiki.org showing the modules on the page and the underlying HTML and CSS: