Nous allons aborder ici la création de modèles de mises en page pour un thème. Ils constituent les squelettes du site dans lesquels vont s’intégrer les widgets. Chaque page du site à son modèle c’est pourquoi il faut s’occuper d’y intégrer toutes les ressources dont la page à besoin : les feuilles de styles, les codes javascripts, les entêtes HTML mais également la position de chaque zone où vont se placer les widgets.
Une fois connecté à votre espace FTP, allez dans le répertoire "theme" puis "fr" puis "template". Les fichiers qui nous intéressent sont ici et, suivant le thème que vous avez copié, il y a plusieurs sous répertoires. Chacun de ces sous répertoires est un modèle de mise en page. Un modèle contient les fichiers suivants :
Découvrez Kiubi pas à pas
Les modèles de mise en page
desc.xml
Ce fichier contient des informations descriptives du modèle de mise en page. Il indique à Kiubi ce que le modèle contient. Voici un exemple :
<?xml version="1.0" encoding="iso-8859-1"?>Ce fichier contient une seule balise principale <modele> qui possède 2 attributs :
<modele img="illustration_2col.gif" intitule="Modèle par défaut">
<zones>
<zone id="entete" colmax="1" intitule="Entete" defaut="1"/>
<zone id="menu" colmax="1" intitule="Menu" defaut="1"/>
<zone id="sidebar" colmax="1" intitule="Barre latérale" defaut="1"/>
<zone id="contenu" colmax="3" intitule="Contenu" defaut="1" />
<zone id="piedepage" colmax="3" intitule="Pied de page" defaut="1"/>
</zones>
</modele>
img: nom du fichier image qui est utilisé dans la console d'administration pour représenter ce modèleintitule: intitule du modèle de mise en page qui est utilisé dans la console d'administration
id: code alphanumérique qui sera réutilisé pour identifié la zone dans les fichiers index.html et structure.xhtmlcolmax: nombre maximum de colonnes qui peuvent être insérés dans cette zone (de 1 à 3)intitule: intitulé de la zone qui va être repris dans la console d'administration lors de la construction d'une mise en page.defaut: nombre de colonnes insérées par défaut dans la zone.
structure.xhml
Ce fichier est une représentation schématique de la disposition des zones dans le modèle (les zones déclarées dans le fichier "desc.xml"). Il est utilisé pour générer la page d'édition du modèle de mise en page dans la console d'administration. Voici un exemple :
<table>Les zones sont appelées directement en mettant leurs ids entre accolade.
<tr>
<td colspan="2">{entete}</td>
</tr>
<tr>
<td colspan="2">{menu}</td>
</tr>
<tr>
<td width="30%">{sidebar}</td>
<td>{contenu}</td>
</tr>
<tr>
<td colspan="2">{piedepage}</td>
</tr>
</table>
Il est obligatoire d'utiliser un pseudo code HTML simple, sans scripts ni styles. Seules les balises TABLE, TD et TR sont autorisées.
index.html et feuilles de styles
Alors que le fichier structure.xhtml est une vue abstraite de la page, le fichier "index.html" contient le code HTML concret du modèle de mise en page. Il est souvent accompagné dans les thèmes de Kiubi par des feuilles de styles ("styles.css" pour la décoration de la page, "layout.css" pour la position des éléments HTML et print.css pour l'impression des pages). Voici un exemple :
<html>Les balises {ZONE} servent à indiquer où injecter les widgets. Les noms des zones sont déclarés dans le fichier "desc.xml". De nombreuses balises sont utilisables spécifiquement dans ce contexte, vous les trouverez dans la partie dédiée aux balises des modèles.
<head>
<!-- Charge les feuilles de styles des Widgets et des modules -->
{Stylesheet}
<!-- Charge les js des Widgets et des modules -->
{Javascripts}
<!-- Charges les scripts des Options avancées du Back-office -->
{js_head}
</head>
<body>
<div id="header">{ZONE.entete}</div>
<div id="menu">{ZONE.menu}</div>
<div id="sidebar">{ZONE.sidebar}</div>
<div id="contenu">{ZONE.contenu}</div>
<div id="piedpage">{ZONE.piedepage}</div>
</body>
</html>
