History: CSS

Tiki's CSS has been in transition, and is coming around to being more of a framework. As of Tiki 4, this is how the CSS files are arranged.

Feature- and browser-specific CSS

There are feature-specific stylesheets, in the directory css/. These are:

• admin.css
• calendar.css
• cssmenus.css
• freetags.css
• jscalendar.css

These files are called when the feature is activated, if it is an option, or by default, otherwise.

The css/ directory also contains some browser-specific files, which have global CSS rules for these browsers:

• ie6.css
• ie7.css
• ie8.css

These are served to the appropriate browser by using conditional comments in the HTML head section.

External CSS

Additionally, some external software used by Tiki, such as JQuery and PHP Layers menus, have their own stylesheets, which are called if the feature is activated. These files are in the appropriate subdirectories under lib/.

Theme stylesheets

The theme stylesheets are in the styles/ directory.

Base styles

Beginning in Tiki 3 and effective by default in Tiki 4, there are three files that are imported by theme stylesheets, to provide basic layout and some default design details.

styles/lite/lite.css

This file positions the three columns in the page middle, providing a source-ordered (that is, the main column content is at the top in the page source, above the content of the secondary side columns) liquid layout that can flex to accomodate wide center-column content. Tiki's lite.css method is perhaps unique in its ability to accommodate content in this way, in all browsers, among web layout methods.

styles/layout/layout.css

This file provides rules for layout in a more detailed way, to eliminate the need for theme stylesheets to repeatedly contain rules that normally don't change much from one theme to the next.

styles/layout/design.css

This file (the contents of which were originally in layout.css) provides default properties for design elements that frequently don't change per theme.

Of course, the rules in layout.css and design.css are only provided as a default. It's expected that the theme stylesheet will override any property it needs to, to implement its own appearance. The default files were created to save theme authors time and trouble, and reduce the size and complexity of theme stylesheets.

There are also reference versions of layout.css and design.css - layout-reference.css and design-reference.css. The idea is that the actual production files should be as small as possible, so don't contain comments, while the reference versions are fully commented.

Theme stylesheets proper

The theme stylesheets are in the styles/ directory. All of the themes in the Tiki download package import lite.css, layout.css, and design.css, and in turn they specify their own rules. Rules in the theme stylesheets will override rules in the feature-specific files in css/ and in the global layout and design files in styles/layout/. So, as it should be, the theme stylesheet has the last word on layout and design.

Theme custom CSS files

Each theme has a subdirectory in styles/ that contains its background images. Beginning in Tiki 3, the subdirectory can also contain:

custom.css

If a modified version of a theme is wanted for a site, instead of editing the theme stylesheet itself (edits which would probably be lost when the file is replaced in a subsequent Tiki upgrade), a "custom.css" file can be created and put in the theme's styles subdirectory. Any rules in this custom file will override the rules in the theme stylesheet.

ie6.css, ie7.css, and/or ie8.css

Since these browsers often need special CSS rules (well, maybe not IE8, but it was included for completeness), these files will be included and used if present in the theme's directory. These are theme-specific versions of the css/ie.6.css, etc. files that have global scope. These theme-specific files can be used as an alternative to putting IE-targeting rules in the theme stylesheet itself.

Normally, custom stylesheets are created and edited locally and transferred to the Tiki installation. But Tiki also has a web interface for editing CSS files at the site. This was broken in Tiki 2 versions but the bug has been fixed and so is now usable again. See the documentation at http://doc.tikiwiki.org/Edit+CSS.

Theme options

New as of Tiki 3 are "theme options", which are to provide variations of the theme itself. In the theme's directory there is (or can be) a subdirectory called "options" (for example, styles/thenews/options/) that contains one or more variants of the theme. The file styles/thenews/options/narrow_left_column.css has rules that override the equivalent rules in thenews.css to create a variant that has a narrow left column. If the theme option has its own background images, these go in, for example, the styles/thenews/options/narrow_left_column/ directory.

Everywhere that a theme can be selected, such as on the Look and Feel admin page and the switch-theme module, there is both a theme selector and, if the theme has options, an option selector. (In Tiki 4, there are a few bugs remaining, such as that a theme option can't be applied on an object level in the Theme Manager; this will no doubt be corrected fairly soon. Otherwise, the system works smoothly.)