History: CSS

Source of version: 3 (current)

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. {maketoc(title="")} !! 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 [http://sourceforge.net/projects/litecss/|lite.css|nocache] 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.)