Creating a Tiki theme

Making a custom theme for Tiki Wiki CMS Groupware is amounts to making a "generic" Bootstrap stylesheet with additional Tiki-specific details included. A standard Bootstrap stylesheet can function as a Tiki theme when its URL is entered on the Look and Feel admin page, but of course won't be applied to Tiki page elements outside of the scope of the default Bootstrap components, etc.

Take advantage of the Tiki layout options

While a generic Bootstrap stylesheet without further modification produce a standard Bootstrap appearance, Tiki also provides its 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 beyond those of a standard Bootstrap-based website.

Easily extend styling beyond the standard Bootstrap scope

The Bootstrap CSS classes are a subset of the total available in Tiki, and these can be targeted by the stylesheet. There are global Tiki SCSS variables that are accessed by the theme's SCSS 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 typically have a "tiki-selectors.scss" file that its variables are applied to.

Increasingly, Bootstrap and Tiki are using CSS custom properties, aka CSS variables, to apply styles in a way that enables easy customization and implementation of user color mode choices. This is an area that the theme author should take advantage of.

Next step: Three Ways to Make a New Theme

Page last modified on Sunday 02 of April, 2023 09:58:59 GMT-0000


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