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

Table des Matières

Modifier style.css

Le fichier style.css existe dans chaque thème. Il contient la feuille de style en cascade (aka "CSS") pour le thème. Il n'entre pas dans le champ de ce document d'expliquer les aspects du CSS pour les débutants complets. Le principe du CSS est de séparer le contenu (les contenu textuel principalement) de la manière dont ce contenu est présenté - l'aspect. Ceci dit, la feuille de style controle les couleurs et et plus précisément tous les aspects du design de l'affichage de la galerie. C'est la raison pourlaquelle il est normal d'y jetter un oeil: avec seulement quelques modifications mineures, vous pouvez changer l'aspect général de toute votre galerie.

Outils

Vous aurez besoin de certains outils pour modifier la feuille de style, mais ne vous affolez pas - la plupart d'entre eux sont libres et gratuits. Nous avons créer une liste d'outils classés par type, que vous pouvez consulter dans la section: Outils recommandés par l'équipe de développement.

Vous aurezbesoin d'un éditeur de texte (notepad.exe suffit, mais il est recommandé d'utiliser un éditeur plus puissant listé dans la page des outils mentionnée ci-dessus. Vous ne devez pas utiliser d'éditeur graphique WYSIWYG- sauf si vous êtes au courrant de leurs limites.

Web Developer Toolbar usage

Among the many cool things that the Web Developer toolbar can do, you can use it to determine what section of the style sheet is controlling which section of the screen: after having installed the browser add-on you visit the page you want to change the looks of. Then click on "CSS" → "View style information". Your mouse cursor will then turn into a crosshair. Hover over the section of your page that you want to figure details out about. Notice the red frame that determines the borders of an element. Observe the status bar of the web developer toolbar that will display a breadcrumb trail of style classes if applicable. Click on the section you want to know details about: a window will open at the bottom of the screen that will show which class of which stylesheet file applies.

Editor

You will need a plain-text editor (notepad.exe will do, but it's recommended to use one of the more powerfull editors from the above mentioned tools page. You should not use a graphical WYSIWYG-editor though unless you know you are aware of the limitations of such editors.

Liste des Classes dans style.css

Nom Fichier Déscription Nécéssaire? Type
textinput themes/yourstyle/style.css Utilisée pour tous les champs texte (<input type="text" class="textinput" /> / <input type="password" class="textinput" /> / <textarea class="textinput"></textarea>) obligatoire class
listbox themes/yourstyle/style.css Used for dropdown fields (<select><option class="listbox"></option></select>) obligatoire class
button themes/yourstyle/style.css Used for buttons (<button type="button" class="button"></button> / <input type="button" class="button" />) obligatoire classe
radio themes/yourstyle/style.css Utilisée pour les boutons radio (<input type="radio" class="radio" />) obligatoire classe
checkbox themes/yourstyle/style.css Utilisée pour les cases à cocher (<input type="checkbox" class="checkbox" />) obligatoire classe
bblink themes/yourstyle/style.css Liens crées par les entrées bbcode. obligatoire classe
maintable themes/yourstyle/style.css Utilisée pour toutes les balises table (<table class="maintable">) obligatoire classe
tableh1 themes/yourstyle/style.css Utilisée pour les titres de tables (généralement la première ligne des tables) obligatoire classe
tableh2 themes/yourstyle/style.css Utilisée pour les sous-titres des tables (souvent la deuxième ligne des tables) obligatoire classe
tableb themes/yourstyle/style.css Céllules normales des tables obligatoire classe
tableb_alternate themes/yourstyle/style.css Couleur alternative correspondant à tableb pour permettre une lecture plus facile des tables obligatoire classe
tablef themes/yourstyle/style.css Ligne de pied des tables, généralement utilisée pour contenir les boutons de soumission des formulaires ou les onglets de pagination. obligatoire classe
catrow themes/yourstyle/style.css ligne dans la table des catégories obligatoire classe
catrow_noalb themes/yourstyle/style.css Ligne dans la table des catégories qui ne contient pas d'albums (catégorie vide). obligatoire classe
album_stat themes/yourstyle/style.css obligatoire classe
thumb_filename themes/yourstyle/style.css Habille les noms de fichiers affichés en dessous des vignettes si l'option correspondante "Affiche les noms de fichiers sous les vignettes" a été activée dans la configuration. obligatoire classe
thumb_title themes/yourstyle/style.css Habille le titre de l'image affiché sous la vignette. obligatoire classe
thumb_caption themes/yourstyle/style.css Habille la légende du fichier (la déscription) affichée sous la vignette si l'option correspondante "Afficher la légende du fichier (en plus du titre) sous les vignettes" a été activé dans la configuration. obligatoire classe
thumb_num_comments themes/yourstyle/style.css Habille l'affichage du nombre de commentaires affiché sous les vignettes si l'option correspondante "Affiche le nombre de commentaires sous les vignettes" a été activée dans la configuration. obligatoire classe
user_thumb_infobox themes/yourstyle/style.css . obligatoire classe
sortorder_cell themes/yourstyle/style.css Habille la cellule qui contient les otpions de tri dans la page des vignettes. obligatoire classe
sortorder_options themes/yourstyle/style.css Habille chaque option de tri individuellement dans la page des vignettes. obligatoire classe
navmenu themes/yourstyle/style.css Habille chaque élément de menu dans le menu de navigation de la page des images intermédiaires. obligatoire classe
admin_menu themes/yourstyle/style.css Habille chaque élément du menu administrateur et chaque bouton d'éléments d'administration. obligatoire classe
admin_float themes/yourstyle/style.css Habille le menu administrateur pour en faire des éléments div alignés horizontalement. obligatoire classe
admin_menu_wrapper themes/yourstyle/style.css Habillage général du menu administrateur. obligatoire classe
admin_menu_anim themes/yourstyle/style.css Elément animé du menu administrateur qui indique que l'administrateur doit faire quelque chose. obligatoire objet
icon themes/yourstyle/style.css Utilisée pour toutes les icones (<img src="images/icons/une_icone.png" border="0" width="16" height="16" alt="" class="icon" />) optionel classe
comment_date themes/yourstyle/style.css Utilisée pour le format de la date des commentaires sur la page displayimage. optionel classe
image themes/yourstyle/style.css Habille les images intermédiares. obligatoire classe
middlethumb themes/yourstyle/style.css Utilisée pour la vignette centrale du négatif de film - celle qui correspnd à l'image intermédiaire actuellement affichée. obligatoire classe
imageborder themes/yourstyle/style.css Habille les images intermédiaires sur la page displayimage. obligatoire classe
display_media themes/yourstyle/style.css . obligatoire classe
thumbnails themes/yourstyle/style.css . obligatoire classe
footer themes/yourstyle/style.css Habille le conteneur "Powered by Coppermine" en pied de page, voyez la section "Copyright dans le pied de page". obligatoire classe
statlink themes/yourstyle/style.css . obligatoire classe
alblink themes/yourstyle/style.css . obligatoire classe
catlink themes/yourstyle/style.css . obligatoire classe
topmenu themes/yourstyle/style.css . obligatoire classe
img_caption_table themes/yourstyle/style.css . obligatoire classe
debug_text themes/yourstyle/style.css Utilisée poure la sortie de débbogage en mode debug. obligatoire classe
clickable_option themes/yourstyle/style.css Utilisée pour les étiquettes des boutons radio et des cases à cocher. obligatoire classe
listbox_lang themes/yourstyle/style.css Utilisée pour les champs des listes déroulantes pour le sélecteur de langue (<select><option class="listbox_lang"></option></select>) obligatoire classe
pic_title themes/yourstyle/style.css . obligatoire classe
pic_caption themes/yourstyle/style.css . obligatoire classe
cpg_main_block themes/yourstyle/style.css Habillage général du bloc galerie dans le thème. optionel objet
important themes/yourstyle/style.css Texte d'Alerte qui doit être visible. Généralement une couleur de texte rouge devrait suffire, sauf si le fond de votre thème est rouge. obligatoire classe
cpgChooseLanguageWrapper themes/yourstyle/style.css Habillage du sélecteur de langue. obligatoire objet
cpgChooseThemeWrapper themes/yourstyle/style.css Habillage du sélecteur de thème. obligatoire objet
filmstrip_background themes/yourstyle/style.css Fond pour le négatif de film. obligatoire classe
bookmarkIt themes/yourstyle/style.css . obligatoire objet
...tbc...

Feuille de style additionnelle

En plus de votre feuille de style individuelle, Coppermine contient les références à une feuille de styles générale qui contient toutes les définitions CSS indépendantes du thème. Ces styles généraux se trouvent dans css/coppermine.css et ne doivent pas être modifiés si vous ne savez pas réellement ce que vous faites. A la place, il est recommandé de forcer l'élément de la feuille de style générale,dans votre feuille de style personnalisée.