Le fichier style.css existe dans chaque thème. Il contient la feuille de style en cascade (ecs "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 (le contenu textuel principalement) de la manière dont ce contenu est présenté - l'aspect. Ceci dit, la feuille de style contrôle les couleurs et plus précisément tous les aspects du design de l'affichage de la galerie. C'est la raison pour laquelle il est normal d'y jeter un œil: avec seulement quelques modifications mineures, vous pouvez changer l'aspect général de toute votre galerie.
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éé une liste d'outils classés par type, que vous pouvez consulter dans la section: Outils recommandés par l'équipe de développement. S'il vous plaît prêter une attention particulière à l'excellent Web Developer add-on par Chris Pederick pour Mozilla Firefox qui est particulièrement utile.
Vous aurez besoin 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 courant de leurs limites.
| Nom | Fichier | Description | Nécessaire ? | Type |
|---|---|---|---|---|
| textinput |
themes/yourstyle/style.css | Utilisé pour tous les champs de saisie de texte (<input type="text" class="textinput" /> / <input type="password" class="textinput" /> / <textarea class="textinput"></textarea>) | Obligatoire | class |
| listbox |
themes/yourstyle/style.css | Utilisé pour les champs déroulant (<select><option class="listbox"></option></select>) | Obligatoire | class |
| button |
themes/yourstyle/style.css | Utilisé pour les boutons (<button type="button" class="button"></button> / <input type="button" class="button" />) | Obligatoire | class |
| radio |
themes/yourstyle/style.css | Utilisé pour les boutons (<input type="radio" class="radio" />) | Obligatoire | class |
| checkbox |
themes/yourstyle/style.css | Utilisée pour les cases à cocher (<input type="checkbox" class="checkbox" />) | Obligatoire | class |
| bblink |
themes/yourstyle/style.css | Les liens créés par les entrées bbcode | Obligatoire | class |
| maintable |
themes/yourstyle/style.css | Utilisée pour toutes les balises table (<table class="maintable">) | Obligatoire | class |
| tableh1 |
themes/yourstyle/style.css | Utilisée pour les titres de tables (généralement la première ligne des tables) | Obligatoire | class |
| tableh2 |
themes/yourstyle/style.css | Utilisée pour les sous-titres des tables (souvent la deuxième ligne des tables) | Obligatoire | class |
| tableb |
themes/yourstyle/style.css | Cellule de tableau ordinaire | Obligatoire | class |
| tableb_alternate |
themes/yourstyle/style.css | Couleur alternative correspondant à tableb pour permettre une lecture plus facile des tables | Obligatoire | class |
| 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 | class |
| catrow |
themes/yourstyle/style.css | Ligne dans la table des catégories | Obligatoire | class |
| catrow_noalb |
themes/yourstyle/style.css | Ligne dans la table des catégories qui ne contient pas d'albums (catégorie vide). | Obligatoire | class |
| album_stat |
themes/yourstyle/style.css | Obligatoire | class | |
| 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 | class |
| thumb_title |
themes/yourstyle/style.css | Habille le titre de l'image affiché sous la vignette. | Obligatoire | class |
| thumb_caption |
themes/yourstyle/style.css | Habille la légende du fichier (la description) 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 | class |
| 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 | class |
| user_thumb_infobox |
themes/yourstyle/style.css | . | Obligatoire | class |
| sortorder_cell |
themes/yourstyle/style.css | Habille la cellule qui contient les options de tris dans la page des vignettes | Obligatoire | class |
| sortorder_options |
themes/yourstyle/style.css | Habille chaque option de tri individuellement dans la page des vignettes. | Obligatoire | class |
| navmenu |
themes/yourstyle/style.css | Habille chaque élément de menu dans le menu de navigation de la page des images intermédiaires. | Obligatoire | class |
| admin_menu |
themes/yourstyle/style.css | Habille chaque élément du menu administrateur et chaque bouton d'éléments d'administration. | Obligatoire | class |
| admin_float |
themes/yourstyle/style.css | Habille le menu administrateur pour en faire des éléments div alignés horizontalement. | Obligatoire | class |
| admin_menu_wrapper |
themes/yourstyle/style.css | Habillage général du menu administrateur. | Obligatoire | class |
| admin_menu_anim |
themes/yourstyle/style.css | Élément animé du menu administrateur qui indique que l'administrateur doit faire quelque chose. | Obligatoire | object |
| icon |
themes/yourstyle/style.css | Utilisée pour toutes les icônes (<img src="images/icons/some_icon.png" border="0" width="16" height="16" alt="" class="icon" />) | Optionnel | class |
| comment_date |
themes/yourstyle/style.css | Utilisée pour le format de la date des commentaires sur la page displayimage. | Optionnel | class |
| image |
themes/yourstyle/style.css | Habille les images intermédiaires | Obligatoire | class |
| middlethumb |
themes/yourstyle/style.css | Utilisée pour la vignette centrale du négatif de film - celle qui correspond à l'image intermédiaire actuellement affichée. | Obligatoire | class |
| imageborder |
themes/yourstyle/style.css | Habille les images intermédiaires sur la page displayimage. | Obligatoire | class |
| display_media |
themes/yourstyle/style.css | . | Obligatoire | class |
| thumbnails |
themes/yourstyle/style.css | . | Obligatoire | class |
| footer |
themes/yourstyle/style.css | Habille le conteneur "Powered by Coppermine" en pied de page, voyez la section "Affichage des droits d'auteurs et clause de non responsabilité dans le pied de page". | Obligatoire | class |
| statlink |
themes/yourstyle/style.css | . | Obligatoire | class |
| alblink |
themes/yourstyle/style.css | . | Obligatoire | class |
| catlink |
themes/yourstyle/style.css | . | Obligatoire | class |
| topmenu |
themes/yourstyle/style.css | . | Obligatoire | class |
| img_caption_table |
themes/yourstyle/style.css | . | Obligatoire | class |
| debug_text |
themes/yourstyle/style.css | Utilisée pour la sortie de débogage en mode débogage. | Obligatoire | class |
| clickable_option |
themes/yourstyle/style.css | Utilisée pour les étiquettes des boutons radio et des cases à cocher. | Obligatoire | class |
| listbox_lang |
themes/yourstyle/style.css | Utilisée pour les champs des listes déroulantes pour language selector (<select><option class="listbox_lang"></option></select>) | Obligatoire | class |
| pic_title |
themes/yourstyle/style.css | . | Obligatoire | class |
| pic_caption |
themes/yourstyle/style.css | . | Obligatoire | class |
| cpg_main_block |
themes/yourstyle/style.css | Habillage général du bloc galerie dans le thème. | Optionnel | object |
| 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 | class |
| cpgChooseLanguageWrapper |
themes/yourstyle/style.css | Habillage du sélecteur de langue. | Obligatoire | object |
| cpgChooseThemeWrapper |
themes/yourstyle/style.css | Habillage du sélecteur de thème. | Obligatoire | object |
| filmstrip_background |
themes/yourstyle/style.css | Fond pour le négatif de film. | Obligatoire | class |
En plus de votre feuille de style personnalisée, 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. Au lieu de cela, il est recommandé de mettre dans votre feuille de style personnalisée les définitions données dans ce fichier global.