L'apparence de w.c.s. est contrôlée par deux aspects : le squelette et le thème. Le squelette est la structure (« l'ossature ») des pages, le thème en est la présentation. Ils correspondent au couple HTML / CSS. h2. Squelette Le squelette du site peut être modifié dans « administration / paramètres / squelette », un bouton « restaurer le squelette par défaut » existe à tout moment pour revenir au squelette de base. Le squelette est une simple page HTML pouvant, en plus du balisage HTML, contenir un certain nombre de variables, écrites entre crochet. Les différentes variables, qui seront remplacées lors du rendu de la page par leurs valeurs respectives, sont les suivantes : * title : titre de la page affiché en haut de celle-ci ; * site_name : nom du site ; * page_title : le titre reprenant nom du site et titre de la page, a vocation à être affiché dans la barre de titre, via une balise </code> ; * <code>css</code> : le nom du fichier contenant la feuille de style ; * <code>script</code> : javascripts utilisés pour certaines fonctionnalités comme le tri des listes ; * <code>onload</code> : instructions en javascript déclenchées lors d'un évènement. Cette variable a vocation à être placée comme valeur de l'attribut onload dans la balise <code><body></code> ; * <code>breadcrumb</code> : fil d'Ariane ; * <code>body</code> : contenu principal de la page, habituellement situé entre le titre et le pied de page ; * <code>lang</code> : langue (code deux lettres) du site ; * <code>user</code> : nom de l'utilisateur (quand identifié) ; * <code>root_url</code> : adresse de la racine du site. Il est possible de tester qu'une variable est remplie en utilisant la syntaxe suivante : <code>[if-any nom-de-la-variable]...[end]</code>. Exemple : <code>[if-any title][title][else][site_name][end]</code> affichera le titre de la page s'il existe, le nom du site sinon. h2. Thème Le thème du site peut être modifié dans « administration / paramètres / thème », les thèmes se basent pour la plupart sur la structure du squelette par défaut. Il est facile, les compétences en HTML et CSS acquises, de créer son propre thème; un thème est un répertoire se composant au minimum de deux fichiers : <code>desc.xml</code> et un fichier CSS. Le fichier <code>desc.xml</code> est un fichier XML comprenant quelques informations de bases sur le thème : son nom, sa version, sa description, son auteur. <code><?xml version="1.0"?> <theme name="alto" version="1.0"> <label>Foobar</label> <desc>Thème Foobar</desc> <author>Moi</author> </theme></code></pre> Le fichier CSS (qui pour le squelette par défaut doit s'appeler <code>wcs.css</code>) est une feuille de style standard. Pour illustrer le thème dans la page de sélection, un thème peut également contenir un fichier <code>icon.png</code>, cette image doit avoir une hauteur et une largeur de 30 pixels. Un thème peut également venir avec son propre squelette par défaut, dans un fichier appelé <code>template.ezt</code>, celui-ci a la structure d'un squelette vue plus haut. L'installation du thème au niveau système se fait en plaçant le répertoire sous <code>/usr/share/wcs/themes/</code>, il est aussi possible d'installer le thème au niveau d'un site particulier, en plaçant le répertoire sous <code>/var/lib/wcs/**site**/themes/</code>. Le répertoire du thème peut aussi être placé dans un fichier zip et uploadé depuis la page de sélection de thème. h2. Annexe sur Au quotidien Au quotidien ajoute deux variables aux squelettes : * <code>gauche</code> : liens utiles, étapes du formulaire, autre chose, cette variable contient ce qui se trouve dans la colonne de gauche dans le thème par défaut d'Au quotidien ; * <code>bigdiv</code> : qualificateur pour le type de page, les valeurs possibles sont <code>profile</code>, <code>new_member</code>, <code>member</code>, <code>info</code>, <code>accessibility</code>, <code>contact</code>, <code>help</code>, <code>rub_service</code>, <code>rub_consultation</code>, <code>rub_annonce</code> et <code>rub_agenda</code>.