History: How To Add a New Theme
Preview of version: 4
In Tiki13 we integrated the 'Twitter Bootstrap' framework as base of Tiki's design.
From Tiki14 (trunk pre-14 as of 12th of Sept 2014) the new directory structure described on this page applies for themes.
Theme components
A Tiki theme generally contains out of several components. as there are a .CSS stylesheet, a set of .TPL Smarty templates, icons, fonts, images etc..
As Tiki contains a full set of default templates, the minimum requirement to create a custom theme is a custom .CSS stylesheet.
Themes are deployed in the directory "themes" which is a subdirectory of the tikiroot installation directory.
Every theme has it's own directory which contains the components of the theme. The name of this directory represents the name of the theme.
Following an example of the directory structure:
-
} themes
-
mytheme
-
css
- tiki.css
-
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
-
icons
- This is not in use yet, but will likely 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
-
images
- This would be the place to deploy images for your theme for backgrounds and other purposes.
-
less
- tiki.less
- Maybe further .LESS files if necessary.
-
options
- At the time of creating this wikipage (12th Sept. 2014) the old way of using options is depricated for the new system. This is to avoid loading several neste .CSS files and to avoid server side minifying on the fly. There has been a discussion to anyway allow options by adding complete tiki.css files (name optionname.css) in this options folder which could easily be create with less and then would be loaded instead of css/tiki.css . To be updated, please contact the Tiki artwork-list on sourceforge
-
templates
- Any customised template store in this directory overwrites the default template with the same name.
-
css
-
mytheme