How to build a theme for Wiclear ?
Composition and location
A theme is composed of 1 file :
- template.php
- optionnaly you can have a prepend.php file (untested so far)
A theme must be placed in
$wiclear/themes/theme_name
For example, the default theme is located into :
$wiclear/themes/default/
Once a theme is installed, it is available in the admin panel. Simply choose it in the combo box and save the configuration. The whole site will switch to it.
What is template.php ?
This is just an html file that contains call to predefined wiclear php functions.
Usually, you will first define your layout, and inserts css id tags around the call to the different boxes available. For example, default/template.php simply contains :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title><?php echo wiki_name;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo $app_path;?>/themes/default/style.css" media="screen"/>
</head>
<body>
<div id="user_links"><?php echo userBox();?></div>
<div id="related">
<div id="sub_content"><p><?php echo tr("Sub nodes");?></p><?php echo subContentBox();?></div>
<div id="search"><?php echo searchBox();?></div>
<div id="change"><?php echo recentChangesBox();?></div>
</div>
<div id="main">
<div id="parent_content"><?php echo parentContentBox();?></div>
<div id="wiki_links"><?php echo wikiBox();?></div>
<div id="content"><?php echo contentBox();?></div>
<div id="comments"><?php echo commentBox();?></div>
</div>
</body>
</html>
The different wiclear functions called : userBox, searchBox, recentChangesBox, wikiBox, contentBox, commentBox, parentContentBox, subContentBox creates xhtml output. In your template.php file, you will tipically identify the locations of thoses boxes via css ids. The html created by wiclear boxes contains only css classes.
You are free to choose the name you want for your css file. Here, it is named style.css. But you can choose to break it in several parts. For example, on the new nosica site, the css is broken into two parts : one for the layout (basically, the ids), and one for the what's left (fonts, relatives positions ...)
Currently, there is no list of css classes used. I guess I'd have to create a page for it.
Basically,
- user links (login, logoff, register, preferences) get a css id.
- wiki links (edit, add, comment, history ...) get a css id.
- other boxes use only classes
More to come ...
