History: How To Add a New Theme
Source of version: 8
Copy to clipboard
{REMARKSBOX(type="info" title="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))''{REMARKSBOX}
! Theme components
A Tiki theme can be made of several components. as there is at least a CSS stylesheet, and possibly one or more theme-specific Smarty templates, as well as background images, fonts and, potentially, icons.
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 tikiroot installation directory.
Every theme has its own directory which contains the components of the theme. The name of this directory represents the name of the theme.
The following is an example of the directory structure:
* {img src=https://themes.tiki.org/show_image.php?id=59} themes
** {img src=https://themes.tiki.org/show_image.php?id=59} mytheme
*** {img src=https://themes.tiki.org/show_image.php?id=59} css
**** tiki.css
**** The .CSS file has to be named "tiki.css" - Tiki names the theme from the containing theme-specific folder (and not anymore from the filename, like it was in the old system).
*** {img src=https://themes.tiki.org/show_image.php?id=59} 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
*** {img src=https://themes.tiki.org/show_image.php?id=59} 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 [https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork| Tiki artwork-list on sourceforge]
*** {img src=https://themes.tiki.org/show_image.php?id=59} images
**** This is the place to store theme-related images for backgrounds and other purposes.
*** {img src=https://themes.tiki.org/show_image.php?id=59} less
**** tiki.less
**** This directory contains the LESS files from which, along with global LESS files, are compiled the theme style sheet.
*** {img src=https://themes.tiki.org/show_image.php?id=59} 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 nested .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 created with less and then would be loaded __instead__ of css/tiki.css . To be updated, please contact the [https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork| Tiki artwork-list on sourceforge]
*** {img src=https://themes.tiki.org/show_image.php?id=59} templates
**** Any customised template stored in this directory overwrites the default template with the same name.
{REMARKSBOX(type="info" title="hint")}In Tiki pre-14 trunk, the old structure ''"styles/mytheme.css - styles/mytheme/*" - "templates/styles/mytheme"'' is still working, but might become deprecated before the release of Tiki14 or Tiki15 ... in case of questions please contact the Tiki artwork-list on sourceforge:
[https://lists.sourceforge.net/mailman/listinfo/tikiwiki-artwork] {REMARKSBOX}
! 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 tiki.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)''.
-=Alias=-
(alias(How To Add a New Bootstrap Theme))