Avant de rentrer dans le vif du sujet, passons par une présentation générale de la structure du script pour vous permettre de mieux appréhender son organisation. Ne vous en faites pas, c'est plutôt simple .

Rootulle est donc structuré de la façon suivante :

1. Texte de licence,
2. Section de configuration,
3. Images utilisées par l'interface,
4. Lecture paramètres URL et lancement des actions,
5. Définition des styles CSS,
6. Fonctions utilisées par le script,
7. Coeur du code,
8. Structure XHTML.

Cette partie qui peut paraître délicate de prime abord, est finalement excessivement simple dès lors que l'on aura compris son fonctionnement.

L'objectif de Rootulle est d'être simple, léger et pratique. Il est donc hors de question de livrer un dossier contenant les différentes images constituantes de l'interface. Celles-ci sont alors directement mises dans le script sous forme de variables.

Pour ce faire, chaque image a été encodée en base 64¹⁾. Cet encodage permet de disposer d'une chaîne de caractères que l'on peut affecter à une variable. Sans lui, il n'est pas possible de manipuler directement la chaîne binaire de l'image du fait des milliers de caractères spéciaux qui empêche l'écriture de cette chaîne dans le code PHP.

Une image est donc visible sous cette forme :

$h3_fond = "
iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAECSURBVHjaYri5u+o/QAAx/WdgYAAIICaG//8ZAAKICYgZAAIIyP3PABBAQC4DA0AAgbkAAQTmAgQQkPWfASCAwFyAAAKzAAIIzAIIIDALIIDABEAAgbkAAcT0D0gCBBCYCxBAYC5A
AIFZAAEEFgMIIDALIIDAYgABBGYBBBDTv3//GQACCMwCCCCwGEAAgVkAAQRWBxBAYBZAAIHFAAIIzAIIILAYQACBuQABBOYCBBCYAAggMBcggMAsgAACswACCMwCCCCw+wACCMwFCCCwmwECCMwFCCAwFyCAwD4CCCAmXQ1pBoAAAnqPYT9AADEBiQsAAcQMJF4ABBADSBtAgAEApsRy4X68yg0AAAAASUVORK5CYII=
";

Pour modifier / créer une image, vous devez obtenir son contenu en code base 64. Pour ce faire, il vous faut un petit script, à placer quelque part sur votre serveur web, et à exécuter ensuite dans votre navigateur préféré.

Voici le code du script que j'ai utilisé pour récupérer toutes les chaînes base 64 de mes images :

<?php
echo chunk_split( base64_encode( file_get_contents('mon_image.png') ), 256 );
?>

Cette ligne de code fait ceci :

1. Récupération du contenu binaire du fichier indiqué,
2. Encodage de la chaîne binaire en base 64,
3. Affichage de la chaîne finale en lignes de 256 caractères.

L'utilisation est des plus simples : pour chaque image à utiliser dans Rootulle, prenez le script d'encodage, placez l'image à encoder au même niveau que le script (ou ailleurs si vous préférez), modifiez le nom / l'adresse de l'image ('mon_image.png' dans l'exemple), enregistrez puis exécutez le script dans votre navigateur. Ceci fait copiez-collez la chaîne affichée dans la variable de l'image. C'est tout !

L'exploitation de ces images au sein de Rootulle est décrite dans la partie suivante.

Pour que la personnalisation soit la plus simple possible, Rootulle utilise les feuilles de styles pour sa présentation graphique.

La section de définition des CSS est construite de la façon suivante :

// ================
// CSS
//
$sCssStructure = "[...]";
$sCssStyle = "[...]";

Cette section comporte deux variables :

• $sCssStructure : contient uniquement les attributs de styles qui concernent la mise en page (marges, dimensions, placements, flux, …),
• $sCssStyle : à contrario, contient uniquement les attributs de styles qui concernent la décoration des différents éléments constituants (couleurs, bordures, images de fond, tailles de textes, styles de textes, …).

Nous l'avons vu précédemment, les images ne sont pas des fichiers externes que l'on appelle mais des variables en code base 64. Pour utiliser ces images dans les feuilles de styles, il suffit simplement de modifier l'URL de ces images pour faire appel à leur variables respectives. Il faut les présenter comme ceci :

$sCssStyle = "
	[...]
	#header, #footer { background: url(".JB_RT_PAGE_NAME."?img=header_fond) repeat-x; }
	[...]
";

• JB_RT_PAGE_NAME est une constante qui est initialisé au lancement du script et qui contient le nom du fichier exécuté (index.php par défaut). Cela permet de garder la validité des URL au cas ou vous changeriez le nom du fichier,
• A cette URL, vous devez ajouter le paramètre img, auquel vous devez affecter le nom de la variable qui contient l'image. Ce nom doit être rigoureusement identique au nom de la variable sans le $.

Cette technique a pour effet, pour chaque URL rencontrée dans le CSS, de rappeler index.php en lui demandant de retourner le contenu de l'image décodé.

A vous maintenant de travailler les CSS selon vos envies !

Dernière partie du fichier : le code XHTML. Si la seule personnalisation de la feuille de styles ne vous suffit pas, vous pouvez bien entendu adapter la structure du document à vos besoins. Tout le code XHTML se trouve à la fin du fichier.

Vous-y trouverez du code PHP imbriqué qui permet de rendre la page dynamique. Lors de vos modifications, veillez à conserver la structure du code PHP pour ne pas casser votre script. Vous devez construire votre code XHTML autour de ce squelette PHP.

Il n'y a pas grand chose de plus à dire sur ce point si ce n'est qu'il vous faut des connaissances en XHTML et quelques notions de PHP pour pouvoir vous en sortir (de la même façon qu'il vous faut un minimum pour modifier les CSS ).

A vous de jouer !