History: Theme Components

• «
• »

            !! 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-top_bar.tpl'' across the top, ''tiki-bot_bar.tpl'' at the bottom, and others in the mid section depending on the site section being displayed.

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

Theme-specific template files (in the ''templates/styles/newtheme/'' directories) 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.

{DIV(float=>right)}(:arrow:) [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)}(:arrow:) [tiki-index.php?page_ref_id=7|CSS Overview]{DIV}