History: Modifying an Existing Style Sheet
Preview of version: 10 (current)
Style sheet file
- For the theme that you want to base a new theme on, find its CSS file in the (Tiki root)/styles directory. Please note that the CSS files are not in the (Tiki root)/templates/styles directory. In a default Tiki installation, there are two directories named styles under the Tiki root:
- (Tiki root)/styles (for CSS files)
- (Tiki root)/templates/styles (for theme-specific sub-directories that contain .tpl files)
- Copy the CSS file, rename it to match your new theme name, and put it in the (Tiki root)/styles directory with all the other CSS files — for example, (Tiki root)/styles/newtheme.css.
- Edit newtheme.css to give your theme its style.
- If your theme is to use background and other images, it's best to create a subdirectory for them within the styles directory--giving it your theme's name.
- For example, (Tiki root)/styles/newtheme/
- Alternatively, you can make a "theme option", which is another way of having a variation of an existing theme; with a theme option, adding a new small stylesheet creates the variant by overriding some properties of the base theme. See Theme Options aka Child Themes for more details.
As of Tiki 5, there is a "Skeleton" theme that has a simplified tiki.tpl file (so the file itself is easier to understand) and an empty skeleton.css stylesheet (which only imports the default layout CSS files but doesn't add any styling), which might be useful in new theme creation.
Places to start
Full-width liquid designs
Since Tiki 3.0, all of the bundled themes are full-width, liquid layouts that use the *litecss method of floating divs for the page's content columns. Of these themes, Strasa and Coelesce are a little more complex due to their unique site header and blog and forum post treatments. Darkroom, Feb12, TheNews, and Tikinewt and somewhat simpler so are probably easier starting points.
"Fixed-width" designs
As of Tiki 4, the default lite.css-based method also supports fixed-width layouts. In Tiki 5 this is even easier to use, simply by activating a check box on the Look and Feel Admin page.
If your design isn't full-width, but rather the content is in a "fixed-width" area in the page center with margins on the sides (and maybe on top and bottom), it may be possible to achieve this using the state-of-the-art *litecss method modified with a few lines in the CSS file. See Fixed-width layout without a table for more information.
Table for one
For designs that have a graphic border around the fixed-width content, it may be necessary to use an HTML table, retro-web style, for layout. In Tiki 5, the Dark Shine theme uses this method, but isn't the simplest example due to the way its page tops are made. A number of "aftermarket" themes at mods.tikiwiki.org also use a table for layout; these include Andreas08 and Faulkner. These themes and their files can be used as a model.
Historical background
In TikiWiki 2, theme-related files were in a transition period, moving away from old-school table-based layout and toward liquid layout method based on divs. Themes using the new method include, in the Tiki 2 package, Darkroom, Feb12, The News, and Tikinewt, and the themes on Themes_for_TW2 (the "fixed-width" themes of which use a table for layout due to IE7's lack of support for the display:table CSS property). The focus of these themes has been on more modern and economical use of CSS, so any would be a good model for a custom theme. Older, table-based themes are no longer compatible with newer versions of Tiki so, needless to say, they shouldn't be used as a model for a new theme.