Status as of Tiki 3

This layout method has become the default for TikiWiki so, as of this version, themes using this method don't need their own template files - the default .tpl files already support the method.

In the Tiki 3.0 package, all of the included themes use this layout method. The older tiki.tpl that used an html table for layout has been retired.

Tips on updating

Please see Theme Issues when Updating to Tiki3.0

Basic info on "Type 1" themes

These themes use luci's *litecss (cache) method. As far as I know, this is the only liquid, table-free three-column layout method that works with dynamic, variable-width content in all browsers.

(In the text below there are references to version 1.10. This went on to become Tiki 2.0, which has since been superceded by Tiki 3.0.)

Any design that is full-width without special full-height (viewport) column backgrounds or borders can use this layout method. As a source-ordered, table-free liquid layout method, this is recommended for compatible theme designs, especially so since it may be the only layout method with these qualities that can handle content of various widths dynamically in all browsers. That is, I tried as many different "holy grail" liquid three-column table-free layout methods as I could find, and none would work when adapted to Tiki, due to such problems as column content overlapping in IE, etc. *litecss was the first and only. I'd appreciate being informed of other liquid layouts that can handle dynamic-width content without anything breaking.

Stylesheets

The *litecss method itself uses lite/lite.css to contain the basic column layout information, and themes like Simple import this stylesheet into their own. I varied from that method by putting the basic layout information in the main theme stylesheet, and separating the IE and IE7-specific selectors into their own CSS files called from header in conditional comments.

For 1.10, I'm going back to the original lite.css-import method. This will allow the new themes to use the default header.tpl file rather than their own custom file. Using lite.css for the basic layout might also make it safer for people to modify the theme CSS file without the risk of messing up the main layout, as that section of the stylesheet is simplified by this change.

The aim is also for the stylesheets to be comprehensive and contain code that would otherwise be in the transitions stylesheet.

Template files

The template files (.tpl) for these themes vary from the current 1.10 files in a few ways.

header.tpl

This file has one small modification, which I expect to see made in the default file: a conditional statement in the body tag gives the body an id="fullscreen" when in fullscreen mode. This enables special styling when using the fullscreen view, such as background image or color and maybe different padding.

tiki.tpl

Column-flipping - Different from the 1.9 versions, now the column-flipping links are added. Before, I didn't think the column-flipping (shading, or visibility switching) worked very well, so I took the code out of the file. But now it's working well and especially since luci modified the javascriopt

Fullscreen view - This feature, which is new for Tiki 1.10 is added to these themes. This along with the column flipping makes a big difference when the center column is fairly narrow.

tiki-site_header.tpl

This file has changes that I'll suggest adding to the default site header file. My goal was to be able to display the logo and a banner ad in a fairly narrow (top to bottom) space such as the Andreas09 theme uses for the page header. So I put these items in an unordered list with the list items floated to display them in a horizontal row. There are conditional statements reflecting Look & Feel options that change the positions of the logo and the banner ad. The logo can be either left, center or right and the banner ad moves into the empty space.

tiki-top_bar.tpl

In this template method, the "top bar" is below the site header div and holds the horizontal menu and the search form. The code for this space is in tiki-top_bar.tpl.

I'm not sure about the breadcrumbs and page description display yet. I'm not sure these are particularly useful and so am tempted to comment them out, but will probably leave them in just in case someone wants to use them.

tiki-bot_bar.tpl

This contains a new credits.tpl file along with the Tiki copyright info and calendar link that previously was in tiki-top_bar.tpl. The bottom of the page is the more normal location for this kind of info.

credits.tpl

This is a small file that holds designer or author information. Many of the themes that I'm adapting for Tiki can be used only on the condition that each page contains a link to the author's web site, etc. It's also a courtesy to provide this even for authors who didn't request it specifically.

module.tpl

This file was changed to make the module title an h3 heading for better semantic layout, and to replace the module title's table layout with divs, etc.

The change has already been made to use this file as the default module.tpl, along with table-free versions of module templates, so these files are no longer part of the *litecss-based theme packages.

tiki.tpl also has new h2 headings for the side columns, to make the semantic layout of the whole page more complete. These are positioned off the page visually because it isn't necessary to see them, but are in place for screenreaders and other text-type browsers.

These themes relied on either custom template file editing or, more recently, Site Identity custom code for the page header layout, but my goal was to be able to enable use of the Look & Feel options as much as possible. Of course using the custom code input box is still good to do when the options aren't flexible enough.

Type1 is the basic "theme" I use as a starter for *litecss-based themes. Linked from that page are the current "Type1" files.

These have been available for earlier Tiki versions and are being updated for 1.10.
absE
Andreas09
Fluid Index
Mittwoch
Tikipedia Formerly used a table for layout, but for 1.10 is *litecss-based.
Tikinewt Tikineat look but based on *litecss.
Damian Long-time Tiki theme but this implementation imports lite.css and tikinewt.css, and just adds a few theme-specific details. This was a test to see what the maintenance and overhead would be to keep old themes alive by giving them a common modern base.

Tiki 1.10 will be the first version for these themes.
Business From http://eatlon.com/home/templates/eatlon.com:"Feel free to download and use however you want as long as you leave the credit link in the footer."
Darkroom Original theme, also has a variation for current default 1.10CVS templates, but at this site the theme uses *litecss.
Feb12 Original theme.
Flan2
Monkeys Cool dark theme, originally done for WordPress.
Oh Star
Pixelgreen
The News Original theme inspired by various newspaper web sites.
Type1 Not actually a theme, this is actually just the "starter files" I use for themes of this type.
Underground Original Underground theme by Erwin Aligam (www.styleshout.com),
adapted for TikiWiki.

---