Overview

Tiki uses the Smarty template engine, so pages generally have a PHP file (.php) and a Smarty template (.tpl) associated with them. These produce the XHTML for the page, which is then given visual styles with CSS. The CSS is provided by a combination of some feature-specific stylesheets, default layout and design stylesheets, and theme stylesheets.

Concept (Tiki14)

There are several features that determine which theme is displayed for a given screen. See also http://doc.tiki.org/Themes

Site theme

Site theme setting can be made at the Look and Feel settings panel. Themes can have options.

Overrides:
- none

Overridden by:
- user theme
- theme control
- perspective
- group theme

User theme

If preference change_theme is enabled than users are allowed to change theme. It is possible to limit the themes users can pick from using the available_themes preference.

Overrides:
- site theme
- perspective

Overridden by:
- group theme
- admin theme
- theme control

Limited by:
- available themes

Admin themes

Themes for the settings control panels. (tiki-admin.php?page=XXX) . Can have options too.

Overrides:
- site theme

Overridden by:
- user theme
- perspective setting

Not affected by:
- theme control

Theme Control feature

Allows to have a specific theme for objects, categories and sections, see Documentation

Overrides:
- user theme
- site theme
- perspective
- group theme

Overridden by:
- none

No effect for:
- admin theme

Perspective feature

Perspectives are to override a preference, see Documentation

Overrides:
- site theme
- admin theme

Overridden by:
- user theme

Group theme feature

Define a theme for a group (tiki-admingroups.php)

Overrides:
- site theme
- user theme

Overridden by:
- admin theme
- theme control

How does Tiki determine which theme setting should be applied when displaying a given screen?

1) Check for user's theme preference

2) If there is a group theme defined, override user's theme

3) If Theme Control feature is enabled, than override the above like this:
- If a theme is assigned to the individual object that theme is used
- If not then if a theme is assigned to the object's category that theme is used
- If not then a theme for the section is used

4) If an admin page (Settings control panel) is displayed, see if there is any admin theme set to override. When in a perspective, see if there is a perspective specific setting and override if available.

5) If none of the above applies, use the site theme. When in a perspective, see if there is a perspective specific setting and override if available.

Theme related CSS files

Basics

1) Tiki always loads themes/base_files/css/tiki_base.css, no matter which theme is selected. This file contains rules specific to Tiki that Bootstrap doesn't have awareness of.

2) The css file of a theme (or theme option) always have to be named like this: tiki.css. So they will no more match the name of the theme, This isn't necessary if the theme is selected by specifying the Custom theme URL. If it's selected as a theme in the "themes" directory, then it needs to follow that naming scheme.

Create a new theme or theme option

New theme

If you want to create a new theme for Tiki, you have place a tiki.css file under the css folder in the theme (eg: themes/mytheme/css/tiki.css).

New theme option

If you want to create a simple new option called myoption (eg: for the jqui theme), than proceed like this:

• step1) create a new subfolder under the "themes/jqui/options" folder called "myoption/css" (so path is: "themes/jqui/options/myoption/css/")
• step2) place in the new folder a file called tiki.css that contains the css for your new option (eg: "themes/jqui/options/myoption/css/tiki.css")
• step3) optionally place in the new folder a custom.css file that contains your specific local customizations for that one Tiki instance (eg: "themes/jqui/options/myoption/css/custom.css")

For more complex options you can also have the same folder structure as for a normal theme (fonts, icons, images, templates, etc).

Customizaton of Tiki themes and options

If you want to slightly modify (change some colors, backgrounds, etc) a theme or a theme option shipped with Tiki than it is better for you, if you don't edit the theme files directly, but create a custom.css file in the same directory of the theme or theme option and store your customizations there.
Your customizations will override the rules of the theme like this:

• For a main theme Tiki gets first the theme's main css file (eg: from themes/mytheme/css/tiki.css), than a custom.css file containing local customizations if found in the theme's css folder (eg: /themes/mytheme/css/custom.css)
• If a theme option is enabled, than Tiki gets first the theme's main css file (eg: from "themes/jqui/css/tiki.css") than get the option's css file ("themes/jqui/options/myoption/css/tiki.css"), than finally the custom.css file containing local customizations if found in the option's folder (eg: "themes/jqui/options/myoption/css/custom.css")

Developer info

The different theme settings are stored in preferences and can be accessed smarty variable

Theme related preferences:
$prefs['theme_active'] - this is the theme that will be displayed
$prefs['theme_active_option'] - the option to be displayed
$prefs['theme_admin'] - the theme to be displayed for admin pages
$prefs['theme_admin_option'] - the option to be displayed for admin pages
$prefs['theme_site'] - the theme setting for the site stored in tiki_preferences table
$prefs['theme_site_option'] -  the theme option setting for the site stored in tiki_preferences table
$prefs['available_themes'] -  list of themes available for users to pick their preferred theme for the site stored in tiki_preferences table
$prefs['user_theme'] - the user's theme preference stored in tiki_user_preferences table
$prefs['user_theme_option'] - the user's theme preference stored in tiki_user_preferences table
$prefs['tc_theme'] - ?