FIXME //Cette page est en construction.//


====== Personnaliser Albulle ou comment créer un thème ======

<note>
  * **Objectif** : modifier l'apparence d'Albulle
  * **Niveau de difficulté** : difficile
</note>

<note important>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.</note>
<note warning>Avant d'éditer les fichiers, je vous invite à lire l'[[:accueil|avertissement]] présent à l'accueil de la documentation si ce n'est pas déjà fait !</note>

===== 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.//

<note warning>
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.
</note>


=== 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** :

<code css>
@include url(layout.css);
@include url(structure.css);
@include url(color.css);
@include url(typo.css);
</code>

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). |