History: Theme Components

Source of version: 6 (current)

{syntax type="markdown"  editor="wysiwyg"} ## Setting up the studio

Roughly speaking, Tiki pages are created with three kinds of files — .php files for page presentation logic, template (.tpl) files for page structure layout, and cascading style sheet (.css) files for visual and other style details. The .php files generally don't need to be touched. The theme designer needs to be concerned only with a CSS file and maybe one or more template files.

## Stretching the canvas

The template files create the frame on which the style canvas is stretched. The perimeter of this frame is *tiki.tpl*, which calls page-region-specific template files as needed — *tiki-site_header.tpl* across the top, *tiki-bot_bar.tpl* at the bottom, and others in the mid section depending on the site section being displayed.

{BOX()}In Tiki discussions and descriptions, the terms *style* and *theme* are used interchangeably, though there are places where one word is always used, such as *styles* in the file directory.{BOX}

Theme-specific template files (in the *themes/mytheme/templates/* directory) have priority over the default template files (in the *templates/* directory). If a particular theme is intended to be a two-column design, for example, with the right column modules stacked under the left column modules, then a modified version of *tiki.tpl* is put in that theme's templates directory, and Tiki uses it rather than the default version. For ease of installation updating, custom templates are not encouraged. 
The theme option-specific template files obey the same logic and are located in the *themes/mytheme/options/myoption/templates/* directory

Note: Before Tiki13, the theme-specific template file were located in the *templates/styles/mytheme/* directory and option-specific template files in *templates/styles/mytheme/options/myoption/*.


{DIV(float=>right)}➡️ [tiki-index.php?page_ref_id=5|Templates Overview]{DIV}


## Applying the paint

The template files contain CSS selectors to enable styling of page details. (A few selectors are found in non-template files as well.)

It is possible to create a new Tiki theme using only a new style sheet and no new template files if the default page layout is compatible. The mozilla, lesjetesdelencre, fmsc, tikineat and other bundled themes don't use custom templates, for example.

Of course a theme may need graphic files for backgrounds, etc. These are stored in a *styles/newtheme/* directory.


{DIV(float=>right)}➡️ [tiki-index.php?page_ref_id=7|CSS Overview]{DIV}

History: Theme Components

Source of version: 6 (current)

Switch Theme

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: Theme Components

Source of version: 6 (current)