Coppermine Photo Gallery v1.5.x: Documentation et manuel

Table des matières

Création de votre thème personnalisé

Commencez par renommer votre thème

Pour crée un nouveau thème, la meilleure solution est d'en utiliser un existant comme base en en faisant une copie. Pour faire cela, faites une copie du répertoire du thème que vous voulez utiliser comme base et renommez le nouveau dossier. Puis modifiez les fichiers "template.html", "style.css" et "theme.php" et remplacez toutes les occurrences de "themes/ancien_repertoire_du_theme" par "themes/nouveau_repertoire_du_theme" afin de faire pointer tous les liens vers la bonne place.
Evitez d'utiliser des espaces et des caractères spéciaux dans le nom de votre thème personnalisé - n'utilisez que des caractères alphanumériques et des caractères de soulignements (_).

Gardez en mémoire que même si ces fichiers sont situés dans le répertoire "themes/repertoire_de_votre_theme" ils doivent être codés comme si ils étaient à la racine de votre installation Coppermine. Par exemple, pour afficher une image vous devez utiliser <img src="themes/repertoire_du_theme/images/image.gif" alt=""/> et pas uniquement <img src="images/image.gif" alt=""/>. Le même principe s'applique pour le fichier "theme.php".

Il est fortement recommandé de renommer votre thème personnalisé comme expliqué plus haut, même si vous ne voulez faire que de petites modifications au thème par défaut livré avec Coppermine. La raison en est très simple: lors des mises à jour plus tard, vous n'aurez pas de problèmes (par exemple de remplacement accidentel de votre thème personnalisé avec une mise à jour du thème par défaut).

Trucs & astuces

Si vous n'êtes pas sur de la manière de créer votre propre thème, vous devriez jeter un œil à la section de téléchargement du site de Coppermine: il y a beaucoup de thèmes proposés en contribution par des utilisateurs disponibles au téléchargement et qui peuvent être visualisés sur la page de démonstration de Coppermine.

Pendant le processus de création ou de test d'un nouveau thème, vous ne voudrez peut être pas que celui ci soit disponible pour les visiteurs de votre site, mais vous (en tant qu'administrateur de votre galerie Coppermine) voudrez être en mesure de visualiser votre thème. Pour cela, ajoutez simplement theme=nom_de_votre_theme à l'URL dans votre navigateur.


Utilisation d'éditeurs WYSIWYG

Il est fortement recommandé de ne pas utiliser d'éditeur WYSIWYG pour modifier les fichiers de Coppermine. L'équipe de développement de Coppermine est consciente que cela peut sembler plus facile pour les débutants d'utiliser ce genre d'éditeurs graphiques. Toutefois ils ont de gros inconvénients:

Si vous ne savez par quel éditeur utiliser, jetez un œil à la liste des éditeurs sur la page outils recommandés par les développeurs.

Modifier template.html

Le fichier template.html est le fichier central de chaque thème: il ne peut contenir que du code HTML/CSS/JavaScript code (pas de PHP !) Plus un certain nombre d'appels à des conteneurs qui seront remplacés par un contenu lorsque le thème est interprété (c.à.d. lorsque la sortie HTML des pages de la galerie est générée). Template.html détermine l'aspect général des pages de votre galerie. Utilisez le pour adapter l'aspect de a galerie à celui de votre site.

Favicon

Coppermine est fournis avec un fichier favicon qui se trouve dans le répertoire racine de la galerie. Il y à une référence vers ce fichier dans tous les thèmes qui sont fournis avec Coppermine. Vous pouvez évidemment utiliser un fichier favicon de votre cru et changer la référence dans votre fichier thème personnalisé. Pour ce faire, ouvrez themes/votre_theme/template.html, trouvez <link rel="shortcut icon" href="favicon.ico" /> et modifiez à votre convenance.

Comme alternative, vous pouvez aussi remplacer le fichier favicon du thème que vous utilisez par votre fichier favicon personnalisé.

Changer les couleurs & le design

Pour modifier les couleurs, les polices, la taille des polices etc... Utilisées par le script, vous devrez modifier la feuille de style "style.css" dès que possible. Par exemple, si vous voulez augmenter ou diminuer la taille des polices d'écritures, modifiez simplement la ligne avec : table { font-size: 12px; }. La plupart des tailles des polices utilisées par le script sont définies comme un pourcentage de cette taille.

Étapes avancées

Il y a des étapes plus avancées que vous pouvez suivre - elles sont décrites dans les sections