Creating a Tiki theme

Making a custom theme for Tiki Wiki CMS Groupware is no more difficult than making a “generic” Bootstrap 3 stylesheet. Bootstrap class names have been added to Tiki’s page elements, and some page elements have been rewritten for compatibility with Bootstrap HTML. So a standard Bootstrap stylesheet functions as a Tiki theme as soon as its URL is entered on the Look and Feel admin page.

Take advantage of the Tiki layout options

A Bootstrap 3 stylesheet without further modification will, of course, reliably produce a standard Bootstrap appearance, but Tiki provides its usual display and appearance options such as alternative layouts (similar to Drupal panels); use of one, two, or three middle columns; placement of menus; theme control choices; and so on to enhance the site appearance and user experience.

Easily extend styling beyond the standard Bootstrap scope

The Bootstrap CSS classes are a subset of the total available in Tiki (its “legacy” classes have been retained where needed or useful), and these can be targeted by the stylesheet. There are global “tiki variables” that are accessed by the theme’s Less files; this automatically extends the Bootstrap values defined by the theme to Tiki-specific page elements. The theme can also define styling beyond what Bootstrap CSS provides. For example, to use background images or gradients and so on, the stylesheet can have a “tiki-selectors.less” file that its variables are applied to or, for authors not using Less, the CSS selectors can be written directly in the theme stylesheet.

Next step: Three Ways to Make a New Theme

Switch Theme


Subscribe to Tiki Newsletters!

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

Site Config


luci, 14:22 GMT, Tue 17 of Jan, 2017: @Bsfez: :-D
Bsfez, 09:52 GMT, Wed 11 of Jan, 2017: This is really a nice Tiki !
chibaguy, 10:32 GMT, Mon 27 of Apr, 2015: Site admins: Be careful about editing the topbar menu, which is in a small space. I had to fix an option that should be a menuSection, to prevent overflow.
Torsten, 19:44 GMT, Fri 12 of Sep, 2014: hidden functionality "; recommitted in trunk, tested and working. Documentation under way on [Link]
chibaguy, 16:45 GMT, Thu 04 of Sep, 2014: The layout template can now be changed using the "Layout" module above. :-)