Loading...
 
Skip to main content

History: Theme-related Software Concept and Design

Preview of version: 26

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
- group theme
- theme control
- perspective

User theme

If preference change_theme is enabled than users are allowed to change theme.

Overrides:
- site theme
- perspective

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

Limited by:
- available themes

Group theme

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

Overrides:
- site theme
- user theme
- perspective

Overridden by:
- admin theme
- theme control

Admin theme

Themes and theme options for the settings control panels (tiki-admin.php?page=XXX).

Overrides:
- site theme
- user theme
- group theme

Overridden by:
- perspective setting

Not affected by:
- theme control

Theme Control

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

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

Overridden by:
- none

No effect for:
- admin theme

Perspective

Perspectives are to override a preference, see Documentation

Overrides:
- site theme
- admin theme

Overridden by:
- user theme

How Tiki decides which theme to display


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, then 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: but if the object is assigned to multiple categories and this causes a conflict in the theme choice then they are all skipped and the next logical choice in this hierarchy is chosen
- If not then a theme for the section is used

4) If an admin page (Settings control panel) is displayed, check if there is any admin theme set to override. When in a perspective, check 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) must 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, but 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 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.

If you have a main theme with theme options, you can have a custom.css for the main theme and another custom.css for the theme option, both will be loaded (first the main theme's custom.css, than the theme option's custom.css)

Loading css files

  • 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 main theme's css file (eg: from "themes/jqui/css/tiki.css") than get the theme option's css file ("themes/jqui/options/myoption/css/tiki.css"), and than load the main theme's custom.css (eg: from "themes/jqui/css/custom.css") and finally the theme option's custom.css file containing local customizations if found in the option's folder (eg: "themes/jqui/options/myoption/css/custom.css")

Theme related smarty template files

Basics

  • Tiki uses smarty templates
  • Tiki ships all basic template files in the "templates/" folder.

Customization of templates

If you don't like how for example how a blog post (templates/tiki-view_blog_post.tpl) looks like, you can have your own, redesigned template.
You have the below options:
1) If you want to have a custom template available for all your themes, you should put the template file to "themes/templates/" folder.
2) If you want to have a custom template for a given theme, put the template file to "themes/mytheme/templates" folder
3) If you want to have a custom template for a given theme option, put the template file to "themes/mytheme/options/myoption/templates" folder

How Tiki decides which template to display

1) first try to use the theme option's template folder (eg: "themes/fivealive-lite/options/watermelon/templates/tiki-view_blog_post.tpl)
2) than try to use the theme's template folder (eg: "themes/fivealive-lite/templates/tiki-view_blog_post.tpl)
3) than try to use "themes/templates" folder (eg: "themes/templates/tiki-view_blog_post.tpl)
4) finally use "templates/" folder ( (eg: "templates/tiki-view_blog_post.tpl))

Developer info

The different theme settings are stored as preferences and can be accessed as smarty variables.

Preferences

Copy to clipboard
Theme related preferences: $prefs['theme_active'] - The theme that is actually displayed. This is a dynamic preference, so it is not stored in the database. $prefs['theme_option_active'] - The theme option that is actually displayed. This is a dynamic preference, so it is not stored in the database. Empty if no option is set. $prefs['theme_admin'] - The theme to be displayed for admin pages. Stored in tiki_preferences table. $prefs['theme_option_admin'] - The theme option to be displayed for admin pages. Stored in tiki_preferences table. $prefs['theme_site'] - The theme setting for the site. Stored in tiki_preferences table. $prefs['theme_option_site'] - The theme option setting for the site. Stored in tiki_preferences table. $prefs['available_themes'] - List of themes and theme options 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 option preference. Stored in tiki_user_preferences table. $prefs['tc_theme'] - The current theme control setting for theme. This is a dynamic preference, so it is not stored in the database. $prefs['tc_theme_option'] - The current theme control setting for theme option. This is a dynamic preference, so it is not stored in the database. $prefs['theme_path'] - The path of the currently displayed theme (knows about multidomain if set). This is a dynamic preference, so it is not stored in the database.

Theme selection logics

Theme selection is primarly done at lib/setup/theme.php. If you enable Theme Control, than after lib/setup/theme.php has finished tiki-tc.php kicks in and makes sure that Theme Control settings are applied.

Template selection logic

Template selection is done using lib/init/smarty.php.

Upgrade to Tiki14

The structure of themes changed singificantly for Tiki14, so please note the below points:
- your old themes wont work, you will see the Default Bootstrap theme after an upgrade. See How To Add a New Theme
- you have to set themes manually after an upgrade for group theme, site theme, theme control and user theme
- the only change in the database is the renaming of user theme preference (table name: tiki_user_preferences). Only the prefName column is overwritten. Still the value has to be changed for each user. (Could this be managed using a wizard??)

History

Information Version
Wed 08 of Jul, 2015 06:42 UTC Gary Cunningham-Lee Minor editing. 42
Sun 25 of Jan, 2015 15:31 UTC Jonny Bradley 41
Sun 25 of Jan, 2015 13:12 UTC gezza 40
Sun 25 of Jan, 2015 13:10 UTC gezza update and unify examples 39
Mon 19 of Jan, 2015 16:30 UTC Jonny Bradley 38
Thu 15 of Jan, 2015 18:57 UTC gezza some updates 37
Mon 05 of Jan, 2015 21:42 UTC Geoff Brickell 36
Mon 05 of Jan, 2015 18:38 UTC Geoff Brickell 35
Mon 05 of Jan, 2015 18:28 UTC Geoff Brickell 34
Mon 05 of Jan, 2015 18:27 UTC Geoff Brickell 33
Mon 05 of Jan, 2015 18:27 UTC Geoff Brickell 32
Mon 05 of Jan, 2015 18:25 UTC Geoff Brickell 31
Mon 05 of Jan, 2015 18:19 UTC Geoff Brickell Remarks Box Plugin modified by editor. 30
Mon 05 of Jan, 2015 18:12 UTC Geoff Brickell 29
Mon 05 of Jan, 2015 18:10 UTC Geoff Brickell 28
Mon 05 of Jan, 2015 18:03 UTC Geoff Brickell 27
Mon 05 of Jan, 2015 17:57 UTC Geoff Brickell 26
Mon 05 of Jan, 2015 17:56 UTC Geoff Brickell 25
Mon 05 of Jan, 2015 11:29 UTC gezza updates 24
Sat 03 of Jan, 2015 09:53 UTC gezza some updates 23
Sun 21 of Dec, 2014 18:14 UTC gezza some description 22
Wed 17 of Dec, 2014 20:30 UTC gezza 21
Tue 16 of Dec, 2014 20:40 UTC gezza 20
Tue 16 of Dec, 2014 20:39 UTC gezza 19
Tue 16 of Dec, 2014 20:36 UTC gezza 18
Tue 16 of Dec, 2014 20:35 UTC gezza developer notes 17
Tue 16 of Dec, 2014 20:18 UTC gezza 16
Tue 16 of Dec, 2014 20:16 UTC gezza theme templates 15
Mon 08 of Dec, 2014 16:13 UTC gezza 14
Mon 08 of Dec, 2014 16:11 UTC gezza 13
Mon 08 of Dec, 2014 16:01 UTC gezza 12
Mon 08 of Dec, 2014 16:00 UTC gezza updates 11
Mon 08 of Dec, 2014 13:36 UTC Torsten Fabricius Added a Remarksbox with the note, that the mentioned features are not YET working in pre-14 due to changed concept and that we are working on it. 10
Sun 07 of Dec, 2014 11:51 UTC gezza 9
Sun 07 of Dec, 2014 11:48 UTC gezza 8
Sun 07 of Dec, 2014 11:39 UTC gezza 7
Sun 07 of Dec, 2014 11:38 UTC gezza 6
Tue 25 of Nov, 2014 11:54 UTC gezza 5
Tue 25 of Nov, 2014 11:52 UTC gezza 4
Tue 25 of Nov, 2014 11:10 UTC gezza 3
Tue 25 of Nov, 2014 11:05 UTC gezza 2
Sun 10 of Apr, 2011 10:46 UTC Gary Cunningham-Lee Content shoveled from "Content & Design" which was causing a loop. 1
Collapse/expand modules below