This should be moved to themes.tiki.org
Note: This info seems out of date for Tiki 15. Check themes.tiki.org for up to date info.
Table of contents
- Customizing Themes
- How to create a custom theme
- Theme file locations
- How to modify template (.tpl) files
- The layout of Tiki
- Overriding templates
- Multiple themes with a common custom template set
- Overriding global special-purpose CSS files
- Theme Options
- Overriding icons
For an overview of existing themes, see themes.
- The application layout (basic structure)
- The presentation of elements in the layout (style)
- Pick a name for the theme. Check the styles directory to make sure there's not an existing theme with the same name.
- For this example, we're going to create a theme called screensite.
- Using the theme name you chose in the first step, create a .css file in the styles directory. If you are using an existing theme as the base for the new theme, copy that theme's CSS file and rename it. Alternatively, you can start with the CSS file at http://themes.tiki.org/tiki-index.php?page=Tikiwiki2_CSS_selectors, which contains (hopefully all, but at least) most of the current CSS selectors along with placeholder properties.
- If your theme needs more radical changes than can be accomplished with CSS alone, then custom templates may be necessary. In this case, using your new theme name, create a sub-directory in the templates/styles directory.
- For example, create templates/styles/screensite. Having custom, theme-specific template files is not encouraged, because this makes updating your Tiki installation more difficult, as the files will probably need to be updated to stay in sync with the default versions.
- Copy the default or other theme's template file(s) needing to be modified to your new theme directory.
- See http://themes.tiki.org for more information.
At this point, your new theme has been created! If you go to User Preferences and check the drop-down menu for Theme, you'll find your theme listed (e.g., screensite.css). Of course, if existing-theme files were used as the base and no editing was done yet, your new theme will look just the same as the theme you based it on.
See also Theme layout schema.
The specific template files will differ based on which pre-existing theme you choose, but some of the commonly used files are:
- tiki.tpl: the main template defining the layout of the whole application
- tiki-show_page.tpl: this displays wiki content in the center of the page (replaces $mid_data in tiki.tpl). Similarly, there are other templates with names reflecting their purpose, such as tiki-view_blog_post.tpl. These generally match the names of the PHP file in the URL when the section is being viewed.
- error.tpl: used to display errors in Tiki versions prior to 2.0.
- header.tpl: contains the HTML head section.
- tiki-site_header.tpl: "Look and Feel" page heading
- tiki-top_bar.tpl: varies according to theme, but may contain top navigation bar, etc.
- tiki-bot_bar.tpl: bottom icons, credits, etc.
- the template files with names like tiki-print.tpl are used for printable representation of objects so you usually don't want to change them.
As you can see, it easy easy to modify the layout of the whole tiki application by just changing the stylesheet or possibly a template file or two.
As we saw above, the template files for a custom theme live in a directory named something like templates/styles/screensite. Theme-specific versions of default template subdirectory files live just one directory below there, in templates and its subdirectories, notably:
This technique works on files in the subdirectories, too. E.g., to change the application menu in your theme, copy the file mod-application_menu.tpl from
When creating a theme you can override any template file. You just need to put a modified template file in the directory templates/styles/screensite or its subdirectory, as appropriate.
(A theme name with one of these characters .- has special behavior. See below 'To have multiple .css with only one templates set'.)
For example, if we wanted to modify the forum listing in our screensite theme, and wanted to modify it more extremely than can be done with CSS, we'd copy the file tiki-forums.tpl from
Then we'd edit then new, moved copy of the file.
Tiki will substitute whatever is in your custom theme directory for the same template files in the default directories.
W3C provides tutorials and other tools for learning CSS principles: http://www.w3.org/Style/CSS.
- Start with the stylesheet shown at http://themes.tiki.org/Tikiwiki2_CSS_selectors for a theme that uses the *litecss layout method (common in Tiki 2 and default in Tiki 3), or choose an existing theme and find its CSS file in the styles directory. Please note that the CSS files are not in the templates directory tree. In a default Tiki installation, there are two directories named styles under the Tiki root:
- styles (for CSS files)
- templates/styles (for the custom-theme sub-directories, into which you put template files--as we just did above)
- Copy the CSS file, rename it as your new theme name, and keep it in the styles directory with all the other CSS files. For example, screensite.css.
- Edit it to produce a style for your theme--selecting things like fonts, background colors and the behavior of hypertext links.
- If you wish to add images to your CSS style, it's best to create a subdirectory for them beneath the styles directory--giving it your theme's name.
- For example, styles/screensite
Theme options provide for variations of a theme, for example, changing colors, column widths or other details. A theme's option CSS files, if it has them, are in the styles/themename/options folder. These files can be named anything, but only one (or none) is active at any given moment, and will override the main CSS rules.
The icon file must be in styles/your_style directory
For instance if you want to overwrite pics/icons/module.png and pics/icons/omodule.png(the two icons used for module flipping), put the images to be used in styles/your_domain/your_style/pics/icons.
- your_domain is only to be used if you are in a multitiki setting.
- your_style is a substring of your current style - if you current style is my_look-2009.css, your_style must be my_look (the part after the hyphen is considered a variant).
- The new icon images must be the same pixel size as the ones specified by the template (les icons doivent avoir la meme taille que celle specifiee dans le template) (default: 16x16).
Since you can change the CSS file and you can override any template your themes can make your Tiki site look like anything you want. The only limit is your imagination.