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:
- theme control
- group theme
- admin theme

Limited by:
- available themes

Admin themes

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

Overrides:
- site theme
- theme control

Overridden by:
- user theme
- perspective setting

Available themes

Limit the list of the themes users can pick from when changing theme is allowed. All theme options of the allowed themes are available for selection.

Overrides:
- none

Overridden by:
- none

Theme Control feature

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

Overrides:
- user theme
- site theme

Overridden by:
- 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:
- ?

Overridden by:
- ?

How does Tiki determine which theme should be displayed?

If Theme Control feature is enabled:
- 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
- If none of the above was selected the user theme is used
- Finally if the user didn't select a theme the default theme is used

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

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).

• The themes/base_files/tiki_base.css has rules for Tiki-specific things (similar to the old layout.css and design.css). It doesn't have anything related to Bootstrap, though, such as the grid, form classes, and so on. These have to be provided by the theme stylesheet.

It isn't necessary to use Less to make the theme stylesheet, as long as the end product is essentially a bootstrap.css equivalent. That is, the theme stylesheet needs to contain the grid layout classes, rules for responsive behavior, and so on in addition to the color and typography rules, etc. for the theme. Anyway, this is what we might think of as the "standard" way, with the fewest separate CSS files.

• If you just want a few simple changes to the default Bootstrap theme, than create a new option under themes/default/options/

This way the new theme doesn't have to have the bootstrap rules. The new theme can just override or add to the bootstrap rules, essentially being a Bootstrap 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).

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'] - ?