0byt3m1n1
Path:
/
data
/
applications
/
aps.bak
/
coppermine
/
1.5.12-0
/
standard
/
htdocs
/
docs
/
fr
/
[
Home
]
File: theme_create.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head> <title>Création de votre thème personnalisé - Coppermine Photo Gallery - Documentation & manuel</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="fr" /> <meta name="copyright" content="Coppermine dev team" /> <meta name="description" content="Coppermine inclue un moteur de thème très puissant qui vous permet de créer votre propre thème, donnant à votre galerie un aspect unique correspondant à l'ensemble de votre site. Pour être sûr que votre thème personnalisé ne soit pas remplacé lors des mises à jour, vous devrez commencer avec un nom de thème personnalisé." /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta http-equiv="imagetoolbar" content="no" /> <!-- SVN version info: Coppermine version: 1.5.12 $HeadURL: https://coppermine.svn.sourceforge.net/svnroot/coppermine/trunk/cpg1.5.x/docs/fr/theme_create.htm $ $Revision: 8154 $ --> <link rel="stylesheet" type="text/css" href="../style/style.css" media="all" /> <link rel="stylesheet" type="text/css" href="../style/screen.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" /> <link rel="shortcut icon" href="../favicon.ico" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.treeview.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> </head> <body> <h1 id="docheader">Coppermine Photo Gallery v1.5.x: Documentation et manuel</h1> <div id="toc"> <a href="toc.htm">Table des matières</a> </div> <a name="theme_create"></a><h1>Création de votre thème personnalisé<a href="#theme_create" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h1> <a name="theme_create_rename"></a><h2>Commencez par renommer votre thème<a href="#theme_create_rename" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>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 "<strong>template.html</strong>", "style.css" et "<strong>theme.php</strong>" et remplacez toutes les occurrences de "<strong>themes/ancien_repertoire_du_theme</strong>" par "<strong>themes/nouveau_repertoire_du_theme</strong>" afin de faire pointer tous les liens vers la bonne place.<br /> 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 (_).</p> <p>Gardez en mémoire que même si ces fichiers sont situés dans le répertoire "<strong>themes/repertoire_de_votre_theme</strong>" ils doivent être codés comme si ils étaient à la racine de votre installation Coppermine. Par exemple, pour afficher une image vous devez utiliser <tt class="code"><img src="<strong>themes</strong>/repertoire_du_theme/images/image.gif" alt=""/></tt> et pas uniquement <tt class="code"><img src="images/image.gif" alt=""/>.</tt> Le même principe s'applique pour le fichier "<strong>theme.php</strong>".</p> <div class="cpg_example"> <ul> <li><strong>Créez une copie</strong><br /> Allez dans le répertoire de votre galerie Coppermine sur votre serveur et naviguez vers le répertoire des thèmes (<tt class="code">votre_repertoire_coppermine/themes/</tt>), faites un clic droit sur le nom du répertoire du thème que vous voulez utiliser comme base de votre thème personnalisé (dans cet exemple, nous utiliserons le thème classic, nous utiliserons donc <tt class="code">votre_repertoire_coppermine/themes/classic/</tt>), sélectionnez "copier" sélectionnez "copier" du menu contextuel. Puis collez le contenu du presse papier dans le répertoire theme; un répertoire (nommé "Copie de classic" ou similaire) sera créer.</li> <li><strong>Renommez le répertoire</strong><br /> Faites un clic droit sur le répertoire nouvellement crée (<tt class="code">votre_repertoire_coppermine/themes/Copie de classic/</tt>) et sélectionnez "renommer" dans le menu contextuel. Choisissez un nom de thème unique - dans cet exemple nous utiliserons "mon_theme" (le résultat sera le renommage du répertoire en <tt class="code">votre_repertoire_coppermine/themes/mon_theme/</tt>).<br /> Gardez en mémoire que nous téléchargerons le thème sur votre serveur web plus tard - Vous devais vous assurer d'utiliser les capitales correctement: sur un client piloté par Windows, les capitales n'ont pas d'effet, il n'y a donc pas de différence entre "<tt class="code">mon_theme</tt>" et "<tt class="code">Mon_theme</tt>". La plupart des serveurs sont pilotés par Linux, ou les capitales <em>ont</em> une importance (il <em>y</em> a une différence entre "<tt class="code">mon_theme</tt>" et "<tt class="code">Mon_theme</tt>"). Par sécurité, nous vous recommandons de n'utiliser que des minuscules pour être sur de ne pas avoir de problèmes par la suite.</li> <li><strong>Modifiez les fichiers pour refléter le nom du thème</strong><br /> Utilisez un éditeur de texte (pour cet exemple nous utiliserons notepad.exe), ouvrez <tt class="code">votre_repertoire_coppermine/themes/mon_theme/template.html</tt>. Trouvez "<tt class="code">themes/classic</tt>" et remplacez par "<tt class="code">themes/mon_theme</tt>" (Il est possible de trouver la référence au nom de fichier plusieurs fois, assurez-vous donc que <em>toutes</em> les occurrences de "<tt class="code">themes/classic</tt>" ont été remplacées par "<tt class="code">themes/mon_theme</tt>"). Sauvegardez vos changements. Puis faites la même chose avec les fichiers <tt class="code">theme.php</tt> et <tt class="code">style.css</tt>. </li> </ul> </div> <p class="cpg_message_validation">Il est <strong>fortement recommandé</strong> 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).</p> <a name="theme_create_tipps"></a><h2>Trucs & astuces<a href="#theme_create_tipps" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>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 <a href="theme_user-contributions.htm#theme_user-contributions">thèmes proposés en contribution par des utilisateurs</a> disponibles au téléchargement et qui peuvent être visualisés sur la <a href="http://coppermine-gallery.net/demo/">page de démonstration de Coppermine</a>.</p> <p>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 <tt class="code">theme=nom_de_votre_theme</tt> à l'URL dans votre navigateur.</p> <br /> <div class="cpg_example"> <ul> <li><tt class="code">http://votresite.com/coppermine/index.php?theme=nom_de_votre_theme</tt> will show the coppermine index page, using your theme</li> <li><tt class="code">http://votresite.com/coppermine/thumbnails.php?album=1&theme=nom_de_votre_theme</tt> will show the thumbnail view of album 1, using your theme</li> <li><tt class="code">http://votresite.com/coppermine/?theme=xxx</tt> reviendra à l'affichage du thème que vous avez défini comme <a href="configuration.htm#admin_theme_theme">thème par default</a> dans la configuration de Coppermine</li> </ul> </div> <a name="theme_create_wysiwyg"></a><h2>Utilisation d'éditeurs WYSIWYG<a href="#theme_create_wysiwyg" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Il est fortement recommandé de <strong>ne pas</strong> utiliser d'éditeur <acronym title="What You See Is What You Get">WYSIWYG</acronym> 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:</p> <ul> <li>Certains éditeurs (en particulier MS Frontpage) sont connus pour "améliorer" la présentation du code de sorte à rendre le code PHP inclus invalide. En conséquence, si vous utilisez un éditeur WYSIWYG pour modifier le fichier theme.php, le fichier peut être corrompu (c.à.d. inutilisable).</li> <li>Les éditeurs graphiques ont tendance à créer du code HTML propriétaire, déprécié et invalide. Vous aurez plus de contrôle si vous utilisez un simple éditeur de texte à la place.</li> <li>Vous n'apprendrez rien. Tôt ou tard, vous voudrez faire quelque chose que votre précieux éditeur WYSIWYG sera incapable de faire. Et alors ? Vous avez toujours utilisé cet éditeur pour faire votre travail - et vous ne comprenez rien au langage HTML. En utilisant un éditeur de texte, la courbe d'apprentissage sera raide, mais beaucoup plus intéressante.</li> </ul> <p class="cpg_message_info">Si vous ne savez par quel éditeur utiliser, jetez un œil à la liste des éditeurs sur la page <a href="dev_tools.htm">outils recommandés par les développeurs</a>.</p> <a name="theme_create_template_html"></a><h2>Modifier template.html<a href="#theme_create_template_html" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Le fichier <a href="theme_template.htm">template.html</a> 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.</p> <a name="theme_create_template_favicon"></a><h3>Favicon<a href="#theme_create_template_favicon" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h3> <p>Coppermine est fournis avec un fichier <a href="http://en.wikipedia.org/wiki/Favicon" rel="external" class="external">favicon</a> 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 <tt class="code"><link rel="shortcut icon" href="favicon.ico" /></tt> et modifiez à votre convenance.</p> <p>Comme alternative, vous pouvez aussi remplacer le fichier favicon du thème que vous utilisez par votre fichier favicon personnalisé.</p> <a name="theme_create_colors"></a><h2>Changer les couleurs & le design<a href="#theme_create_colors" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Pour modifier les couleurs, les polices, la taille des polices etc... Utilisées par le script, vous devrez modifier la feuille de style "<strong><a href="theme_style_css.htm">style.css</a></strong>" dès que possible. Par exemple, si vous voulez augmenter ou diminuer la taille des polices d'écritures, modifiez simplement la ligne avec : <tt class="code">table { font-size: 12px; }</tt>. La plupart des tailles des polices utilisées par le script sont définies comme un pourcentage de cette taille.</p> <a name="theme_create_advanced"></a><h2>Étapes avancées<a href="#theme_create_advanced" title="Lien vers cette section"><img src="images/anchor.gif" width="15" height="9" border="0" alt="" /></a></h2> <p>Il y a des étapes plus avancées que vous pouvez suivre - elles sont décrites dans les sections <ul> <li><a href="theme_create_matching_page_tutorial.htm#theme_matching">Créer un thème pour Coppermine qui reprend l'aspect de l'ensemble de votre site</a></li> <li><a href="theme_theme_php.htm#theme_php">Modifier theme.php</a></li> </ul> <a name="theme_create_end"></a> <div id="doc_footer"> <div class="doc_info_wrapper"> <span id="doc_last_changed">$LastChangedDate: 2011-01-02 20:44:22 +0100 (So, 02 Jan 2011) $</span> <span id="doc_revision">$Revision: 8154 $</span> </div> </div> </body> </html>