Personnaliser Albulle ou comment créer un thème

Objectif : modifier l'apparence d'Albulle
Niveau de difficulté : difficile

Pour créer un thème il vous faut un minimum de connaissances en XHTML/CSS. Certaines modifications peuvent nécessiter de connaître PHP.

Avant d'éditer les fichiers, je vous invite à lire l'avertissement présent à l'accueil de la documentation si ce n'est pas déjà fait !

Tour d'horizon

Commençons par faire un tour de tout ce qu'il y a à savoir avant de pouvoir créer son thème.

Structure d'un thème

Les thèmes se situent dans le dossier albulle/themes/. Un thème = un dossier dont le contenu est le suivant :

Structure d'un thème
Nom	Type	Description
css	dossier	Contient les feuilles de styles utilisées par le thème.
html	dossier	Contient les patrons XHTML qui définissent la structure des pages générées.
images	dossier	Dossier utilisé pour stocker toutes les images du thème.
js	dossier	Les éventuels fichiers de code javascript peuvent être stockés ici (le fichier de lightbox s'y trouve).
html.php	fichier	En créant ce fichier, vous avez la possibilité de surcharger la façon dont les pages sont générées. Il s'agit de code PHP et sa création est réservée à ceux qui ont un niveau avancé en PHP.

Un élément mis en gras est un élément obligatoire.

Le dossier html ne doit ni changer de nom, ni changer de place car c'est un dossier qui est reconnu automatiquement par Albulle. En revanche, vous êtes libres d'organiser le reste à votre convenance.

Le dossier CSS

L'organisation de ce dossier est libre. A vous de choisir, selon vos habitudes de développement, comment vous souhaitez structurer vos feuilles de styles. Pour ceux qui ne sauraient par où commencer, voici ma façon à moi d'organiser mes feuilles de styles.

En général, voici la liste des fichiers que je créé dès lors que je commence un thème :

index.css : c'est le seul fichier qui sera appelé dans l'entête HTML des pages web. Il ne me sert qu'à faire les inclusions des fichiers qui suivents.
layout.css : ce fichier rassemble les class et id uniquement des éléments qui définissent la mise en page (titre + centre + pied ou titre + colonne gauche + colonne droite + pied, …).
structure.css : ici, je mets les informations de tous les éléments qui seront placés dans les différentes zones définies dans le fichier précédent.
color.css : lui ne sert que pour définir les couleurs (de fonds, de textes, de bordures, …) et les images constituantes du thème.
typo.css : est utilisé pour définir les polices de caractères (familles, tailles, styles, espacements, …).
fix-ie.css : et enfin, le spécial, appelé uniquement quand la page est affiché depuis Internet Explorer, qui contient diverses corrections pour que les pages s'affichent correctement dans ce navigateur.

Voici ce que contient le fichier index.css :

@include url(layout.css);
@include url(structure.css);
@include url(color.css);
@include url(typo.css);

Pour le contenu des autres fichiers, c'est à vous de jouer :-D !

Le dossier "html"

Très important, il contient les briques XHTML qui consituent la structure finale des différentes pages générées. Chacun des fichiers doit se terminer par l'extension .thm.php. Le thème par défaut livré avec Albulle est constitué d'un certain nombre de ces fichiers dont voici la liste :

Fichiers XHTML du thème par défaut
Nom	Description
arborescence	Contient les 3 types d'éléments de l'arborescence des dossiers. Ce fichier est un peu particulier et son fonctionnement sera détaillé un peu plus loin.
diapo	Contient le cadre (<div>) qui définit la diapositive courante lorsque le mode diaporama est activé.
dossier_vide	Patron du cadre affiché lorsque le dossier courant est vide.
form_defilement_auto	Il s'agit du formulaire qui permet de lancer le défilement automatique du diaporama.
header	Entête HTML des pages qui seront générées (Ouverture de la balise <html> et définition des métas données (<head>).
index	Squelette principal des pages.
menu_panier	Définit la liste (<ul>) du menu du panier.
metas	Définit les balises <meta> appelées depuis le fichier header.
pagination	Patron du cadre des liens de pagination.
popup	Squelette de l'affichage des photos dans une popup Javascript.
rappel_sous_dossier	Squelette du bloc de rappel des sous-dossiers.
texte	Patron utilisé pour afficher un simple texte de contenu.
vignette	Squelette d'une vignette pour la liste des photos de la page en cours (utilisé en mode galerie ainsi qu'en mode diaporama).