History: Theme Layout Schema

            ^ This is deprecated. Please see http://themes.tiki.org ^



! Theme Layout Schema
---

This page provides a few diagrams that are useful for developers and/or theme designers.

-=For more information on Themes see ~~#00F:[http://themes.tiki.org]~~=-
 
!! Lite CSS
Tiki >=3.0 uses a table-less layout templates (XHTML + PHP Smarty syntax) and has a CSS base called __lite CSS__ which is used to create a basic column layout to render the columns properly across all browsers. This CSS uses a nice trick to ensure the main column floats nicely alongside the left column even in IE6 etc. You will see in the diagram below that though column1 (the main content area) appears first in the code, it will always render between columns 2 and 3.

!!! Lite CSS rendering diagram
The dashed lines indicate the position in the code, and the solid lines the rendered position of the columns. 
{img src="img/wiki_up/lite.gif" }

!! Smarty Templates
The __tiki.tpl__ file in the templates/ folder is the master template and includes other templates.

!!Schema for CSS
The main schema that Tiki >= 3 uses for layout is shown here, which also shows a "shadow" layer of extra divs used for design purposes like adding drop shadows.

{DIV(width=550px)}{img src="http://dev.tiki.org/img/wiki_up/tiki3-layout.png"}{DIV}

!!Tiki 7 Schema with module zones

The following diagram shows the major divs and module zones, while omitting divs that can be ignored for design purposes (this is somewhat arbitrary). Check out existing themes using a DOM inspector (like Firebug, the Firefox add-on) to see how these divs can be used to apply styling graphics, etc.

{DIV(width=550px)}{img fileId=564 thumb=y rel=box[g]}{DIV} 

download file:
[dl564|tiki 7 theme schema.svg]