History: Theme-related Software Concept and Design

• «
• »

            !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:
- 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 [http://doc.tiki.org/Theme+Control|Documentation]

Overrides:
- user theme
- site theme

Overridden by:
- admin theme

!! Perspective feature
Perspectives are to override a preference, see  [http://doc.tiki.org/Perspectives|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

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

!Customizaton of Tiki themes and options

If you want to slightly modify (change some colors, backgrounds, etc) than it is better for you, if you don't edit the themes shipped with Tiki directly. It is recommended to store your customizations in a custom.css file that you place in the directory where the theme's css file is stored.

Processing order for custom.css:
* 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

{CODE()}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'] - ?
{CODE}