Loading...
 

History: Modifying an Existing Style Sheet

Preview of version: 8

Style sheet file

  1. 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)
  2. 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.
  3. Edit newtheme.css to give your theme its style.
  4. 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/
  5. 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.

Since you can change the CSS file and you can override any template your themes can make your Tiki site look like anything you want. The only limit is your imagination.

History

Advanced
Information Version
Wed 30 of Jun, 2010 07:27 GMT-0000 Gary Cunningham-Lee Updated. 9
View
Sat 23 of May, 2009 05:57 GMT-0000 Gary Cunningham-Lee Some updating for Tiki3.0. 8
View
Wed 08 of Oct, 2008 05:36 GMT-0000 Gary Cunningham-Lee 7
View
Wed 08 of Oct, 2008 05:35 GMT-0000 Gary Cunningham-Lee Some updating. 6
View
Thu 23 of Feb, 2006 04:37 GMT-0000 System Administrator Planetfall.css note added. 5
View
Mon 20 of Feb, 2006 03:57 GMT-0000 Gary Cunningham-Lee Copied improved. 4
View
Mon 20 of Feb, 2006 02:08 GMT-0000 Gary Cunningham-Lee Small edits. 3
View
Mon 20 of Feb, 2006 02:01 GMT-0000 Gary Cunningham-Lee Content transferred. 2
View
Fri 17 of Feb, 2006 02:41 GMT-0000 system created from structure 1
View

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config