How To Add a New Theme

 Revamped theme organization from Tiki14

In Tiki13, the Twitter Bootstrap CSS framework was integrated as base for Tiki's layout and design.
From Tiki14 (trunk pre-14 as of Sept 12, 2014) there is a new directory structure for themes, as described on this page.

For Tiki12 LTS please visit How To Add a New Theme - until Tiki12

Theme components

A Tiki theme can be made of several components. as there is at least a CSS style sheet, as well as background images, fonts and, in the future, icons, and possibly one or more theme-specific Smarty templates although having customized templates is not encouraged due to potential compatibility problems.

As Tiki contains a full set of default templates, the minimum requirement to create a custom theme is a custom CSS stylesheet.

As of Tiki 14, themes are deployed in the directory "themes," which is a subdirectory of the Tiki root installation directory.

Every theme has its own directory that contains the components of the theme. The name of the theme's directory is the same as the name of the theme.

The following is an example of the directory structure:

  • Image themes
    • Image mytheme
      • Image css
        • mytheme.css
          • The .CSS file has to be named the same as the theme's directory, eg: "mytheme.css" - Tiki names the theme from the containing theme-specific folder.
          • The mytheme.css is usually compiled from the less files which are in the less directory.
        • custom.css
          • The custom.css file contents override and complete mytheme.css. This is the place for hand-made CSS changes.
      • Image fonts
        • This is the place to store your fonts which have to be provided for webmasters who do not want to use a font-API
      • Image icons
        • This is not in use yet, but will likely be the place for .SVG icon sets, if no glyphs will be used. Alternative glyphs might be stored here or in fonts, which is not desided yet. To be updated, please contact the Tiki artwork-list on sourceforge
      • Image images
        • This is the place to store theme-related images for backgrounds and other purposes.
      • Image js
        • custom.js
          • The custom.js file is the place for hand-made Javascript changes (without surrounding your code with <script> html tag).
      • Image less
        • tiki.less
        • This directory contains the Less files from which, along with global Less files, are compiled the theme style sheet.
      • Image options
        • Themes can have options by adding a css file (eg: myoption.css) in the option folder which could easily be created with less and then would be loaded additionally to the main theme's css file. To be updated, please contact the Tiki artwork-list on sourceforge
      • Image templates
        • Any customised template stored in this directory overwrites the default template with the same name.

In Tiki pre-14 trunk, the old structure "styles/mytheme.css - styles/mytheme/*" - "templates/styles/mytheme" is not working anymore, it became deprecated for the release of Tiki14. "templates/styles/mytheme" files should be moved manually to "themes/mytheme/templates" folder. In case of questions please contact the Tiki artwork-list on sourceforge: https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork

Activating your new theme

Once you create a directory structure and add it to the Tiki file structure in the location described above, which contains at least a style sheet file named as the theme's folder (eg: mytheme.css) in the folder themes/mytheme/css, you will find the theme in the "Theme selection" selector in Admin -> Look&Feel -> Theme.
Please mind to reload the page after you add the theme to the server and to clear the Tiki caches each time you apply a different theme (/tiki-admin_system.php?do=all).


How To Add a New Bootstrap Theme

Page last modified on Monday 11 of February, 2019 12:43:00 GMT

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