Loading...
 

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

Layout

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

Shoutbox

luci, 14:22 GMT, : @Bsfez: :-D
Bsfez, 09:52 GMT, : This is really a nice Tiki !
chibaguy, 10:32 GMT, : 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, : hidden functionality "; recommitted in trunk, tested and working. Documentation under way on [Link]
chibaguy, 16:45 GMT, : The layout template can now be changed using the "Layout" module above. :-)