Loading...
 

History: How To Add a New Theme

Preview of version: 13

 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:

  • themes
    • mytheme
      • 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.
      • fonts
        • This is the place to store fonts to be used by the theme in cases when web fonts aren't used.
      • icons
        • This is the place for a specific icon font set to be used by the theme.
      • images
        • This is the place to store theme-related images for backgrounds and other purposes.
      • js
        • custom.js
          • The custom.js file is the place for hand-made Javascript changes (without surrounding your code with <script> html tag).
      • scss
        • mytheme.scss
        • _variables.scss
        • _tiki-selectors.scss
        • etc.
        • This directory contains the SCSS files from which, along with global SCSS files, are compiled the theme style sheet.
      • options
        • Themes can have one or more options or child themes. (The themes used at this site, https://doc.tiki.org, https://dev.tiki.org and https://tiki.org are all theme options or child themes.) This is a way to provide color alternatives, for example, such as a dark mode for the website. The parent theme is loaded and then the child theme overrides any styles that it has defined.
      • templates
        • Any customized Smarty template stored in this directory overwrites the default template with the same name, if CSS isn't sufficient to make layout changes, for example. But having custom versions of template files is not encouraged because they can become out of date and cause errors when the site is updated to a new Tiki version.

Activating your new theme

After you create the directories as described above for your new theme and add it to the Tiki file structure, and at least a stylesheet file with the same name as the theme's folder (such as 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. Clearing the Tiki caches may also be necessary when you add a theme (/tiki-admin_system.php?do=all).

Alias

How To Add a New Bootstrap Theme

History

Advanced
Information Version
Mon 24 of Jan, 2022 11:53 GMT chibaguy Small corrections. 16
Mon 24 of Jan, 2022 11:45 GMT chibaguy 15
Mon 24 of Jan, 2022 11:44 GMT chibaguy Removed ancient info and adjusted heading sizes. 14
Mon 24 of Jan, 2022 11:43 GMT chibaguy Replaced missing images with icon plugin. Updated text. 13
Mon 11 of Feb, 2019 12:43 GMT Kishiko Add the js folder in the default theme layout and the explanation of its purpose 12
Thu 28 of Jan, 2016 10:28 GMT chibaguy Gave the folder images the responsive=n parameter so they will be inline. Minor text clarifications. The page seems to have some duplicate information compared to at least one other page. 11
Thu 28 of Jan, 2016 00:18 GMT Jyhem 10
Sun 25 of Jan, 2015 13:23 GMT gezza update to recent changes in the theme concept 9
Sat 13 of Sep, 2014 13:01 GMT chibaguy Corrected info about LESS files and minor editing. 8
Fri 12 of Sep, 2014 20:55 GMT Torsten Apllying your new theme 7
Fri 12 of Sep, 2014 20:36 GMT Torsten found more typos ... sorry 6
Fri 12 of Sep, 2014 20:32 GMT Torsten typo 5
Fri 12 of Sep, 2014 20:31 GMT Torsten typos and added minor hints 4
Fri 12 of Sep, 2014 20:29 GMT Torsten adde basic information about the themes directory structure 3
Fri 12 of Sep, 2014 19:40 GMT Torsten closing tag of remarksbox was missing 2
Fri 12 of Sep, 2014 19:39 GMT Torsten created page with remarksbox and alias 1

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