History: Modifying an Existing Style Sheet
Preview of version: 8
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 for more details.
Places to start
Full-width liquid designs
In 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. Tikinewt is the only theme in Tiki 3.0 that imports layout.css, which is the way of the future. The other bundled themes still have all the layout properties in their stylesheets.
"Fixed-width" designs
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.
Otherwise, a traditional table can be used for layout. None of the bundled themes use this method, to facilitate theme maintenance in the core code. But a number of "aftermarket" themes at mods.tikiwiki.org do; these include Andreas08, Dark Shine, Eatlon, Kubrick, and so on. Using these Tiki3.0-compatible themes as a model is encouraged.
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. It's best to avoid basing a custom theme on an older theme.