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

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