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

# Convertir un theme de cpg1.4.x pour cpg1.5.x

Pour que votre thème personnalisé de cpg1.4.x fonctionne avec cpg1.5.x, vous devrez faire certaines modifications. Pensez à sauvegarder vos fichiers originaus, de manière à revenir vers une version qui fonctionne au cas ou quelque chose ne se passerait pas correctement avec les modifications.

Les fichiers à modifier se trouvent dans le répertoire particulier de ce thème dans le dossier thèmes. Par exemple, les fichiers du thème "classic" se trouvent dans themes/classic

- Modifier style.css
- Modifier template.html
- Modifier theme.php
- Validation

## Modifier style.css

Pour tous les changements ci dessous, ouvrez themes/votre_theme_personnalise/style.css

### Définissez les pseudo classes :link, :visited, :focus, :active

Avant d'appliquer ces modifications, assurez vous que votre feuille de style ne contient pas déjà ces pseudo classes. Si elle ne contient pas ces classes

Trouvez:

    a:hover {

Ajoutez avant (dans une nouvelle ligne):

    a:link {
            color: #0033CC;
            text-decoration: none;
    }

    a:visited {
            color: #0033CC;
            text-decoration: none;
    }

    a:focus {
            color: #0033CC;
            text-decoration: none;
    }

    a:active {
            color: #0033CC;
            text-decoration: none;
    }

et modifiez les couleurs et mises en forme en fonction de vos souhaits.

### Entête de table en gras

Trouvez:

    .tableh1 {

et ajoutez juste après:

            font-weight:bold;

Trouvez:

    .alblink a {

et ajoutez avant (dans une nouvelle ligne):

    .alblink {
            font-weight:bold;
    }

Trouvez:

    .catlink {

et ajoutez juste après:

            font-weight:bold;

### modifiez la classe «navmenu»

Trouvez:

    .navmenu a {
            position: relative;

et remplacez par:

    .navmenu a {

### Fixez la répétition du fond pour «admin_menu»

Trouvez:

    .admin_menu {

et ajoutez juste après:

    background-repeat:repeat-x;

### Ajoutez les classes «admin_float» & «admin_menu_wrapper»

Trouvez:

    #admin_menu_anim {

et ajoutez juste avant (dans une nouvelle ligne):

    .admin_float {
            float:left;
            margin-left: 1px;
            margin-right: 1px;
            margin-top: 1px;
            margin-bottom: 1px;
    }

    .admin_menu_wrapper {
            width:100%;
    }

### Ajoutez les pseudo classes pour les liens d'image

Trouvez:

    .image {

et ajoutez juste avant (dans une nouvelle ligne):

    /* pseudo-classes pour liens d'image */
    a:link .image{
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            margin:2px;
    }

    a:visited .image{
            border-style:solid;
            border-width:1px;
            border-color:#840084;
            margin:2px;
    }

    a:focus .image{
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            margin:2px;
    }

    a:hover .image{
            border-style:solid;
            border-width:1px;
            border-color:#0033CC;
            margin:2px;
    }

    a:active .image{
            border-style:solid;
            border-width:1px;
            border-color:#000000;
            margin:2px;
    }

Modifiez les couleurs et attributs en fonction de vos souhaits. Cela doit indiquer quelles vignettes ont déjà été cliquées, La chose importante est dans les attributs de la pseudo-classe :visited; ils doivent être différents des autres pseudo-classes.

### Ajoutez les classes «pic_title», «pic_caption»

Trouvez:

    #vanity a {

et ajoutez juste avant (dans une nouvelle ligne):

    .pic_title {
            color: #000000;
            font-size: 120%;
            font-family: Arial, Helvetica, sans-serif;
            font-weight:bold;
            text-align : center;
            padding-top:0px;
            padding-bottom:0px;
            margin-top:0px;
            margin-bottom:0px;
            line-height:1.0em;
    }

    .pic_caption {
            color: #000000;
            font-size: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-weight:bold;
            text-align : center;
            padding-top:0px;
            padding-bottom:0px;
            margin-top:0px;
            margin-bottom:0px;
            line-height:1.0em;
    }

### Ajoutez les classes «cpg_message_info», «cpg_message_success», «cpg_message_warning», «cpg_message_error», «cpg_message_validation», «`cpg_summary`»

Trouvez:

    #vanity a {

et ajoutez juste avant (dans une nouvelle ligne):

    .cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {
        border: 1px solid;
        margin: 10px 0px;
        padding:15px 10px 15px 50px;
        background-repeat: no-repeat;
        background-position: 10px center;
    }
    .cpg_message_info {
        color: #00529B;
        background-color: #BDE5F8;
        background-image: url('../../images/message/info.png');
    }
    .cpg_message_success {
        color: #4F8A10;
        background-color: #DFF2BF;
        background-image: url('../../images/message/ok.png');
    }
    .cpg_message_warning {
        color: #9F6000;
        background-color: #FEEFB3;
        background-image: url('../../images/message/warning.png');
    }
    .cpg_message_error {
        color: #D8000C;
        background-color: #FFBABA;
        background-image: url('../../images/message/stop.png');
    }
    .cpg_message_validation {
        color: #D63301;
        background-color: #FFCCBA;
        background-image: url('../../images/message/error.png');
    }
    .cpg_summary {
        font-size:0.9em;
    	border: 1px solid;
        margin: 10px 0px;
    	padding:5px 10px 5px 10px;
        color: #FF2B9C;
        background-color: #FFDEEF;
    	text-align:right;
    	float:right;
    	width:400px;
    }

### Ajoutez la classe «greybox» à votre feuille de style

Dans cpg1.5.x, le plugin Greybox Redux pour jquery est utilisé pour afficher les fenêtres pop-up d'aide inclues dans les pages. Vous devez ajouter les définitions de couleur CSS dans votre feuille de style.

Ajoutez à la fin de votre feuille de style (dans une nouvelle ligne):

    #GB_window {
      background-color: #FFFFFF;
      border: 5px solid #AAAAAA;
    }

Dans la définition pour `#GB_window`, changez l'attribut du fond pour correspondre à la couleur de fond de votre thème. Changez les attributs de la bordure pour correspondre à la couleur des bordures de votre thème.
Si vous n'êtes pas sur de la couleur de fond de votre thème et de la couleur de bordure utilisée, regardez les définitions de couleurs pour la classe `maintable` de votre thème.

Les autres styles pour la "greybox" sont définis dans `css/coppermine.css`. Ces définitions dans ce fichier ne devraient pas être modifiées - ne modifiez ce fichier que si vous savez vraiment ce que vous faites.

### Enlevez les styles pour les courtoisies (vanity)

Les styles pour les icones de courtoisie (vanity) ont été déplacés dans le fichier CSS général (situé dans `css/coppermine.css`).

Trouvez

    #v_php {float:left;background-image:url(../../images/powered-php.gif);}
    #v_php:hover {background-image:url(../../images/h_powered-php.gif);}
    #v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
    #v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
    #v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
    #v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
    #v_css {float:right;background-image:url(../../images/valid-css.gif);}
    #v_css:hover{background-image:url(../../images/h_valid-css.gif);}

et effacez l'ensemble de votre feuille de style.

### Effacez la classe «comment_button»

La classe "comment_button" ne diffère pas de la classe "button" et a été enlevée. Cela ne cause pas de problèmes de laisser la définition de cette classe dans votre feuille de style personnalisée, elle n'aura simplement aucun impact. Si vous voulez nettoyer votre feuille de style, effacez toutes le références à cette classe.

### Effacez la classe «tableh1_compact»

La classe "tableh1_compact" ne diffère pas beaucoup de la classe "tableh1" et a été effacée, comme elle n'a jamais beaucoup été utilisée pour sa destination initiale. Cela ne cause pas de problèmes de laisser la définition de cette classe dans votre feuille de style personnalisée, elle n'aura simplement aucun impact. Si vous voulez nettoyer votre feuille de style, effacez toutes le références à cette classe.

### Effacez la classe «tableh2_compact»

La classe "tableh2_compact" ne diffère pas beaucoup de la classe "tableh2" et a été effacée, comme elle n'a jamais beaucoup été utilisée pour sa destination initiale. Cela ne cause pas de problèmes de laisser la définition de cette classe dans votre feuille de style personnalisée, elle n'aura simplement aucun impact. Si vous voulez nettoyer votre feuille de style, effacez toutes le références à cette classe.

### Effacez la classe «tableb_compact»

La classe "tableb_compact" ne diffère pas beaucoup de la classe "tableb" et a été effacée, comme elle n'a jamais beaucoup été utilisée pour sa destination initiale. Cela ne cause pas de problèmes de laisser la définition de cette classe dans votre feuille de style personnalisée, elle n'aura simplement aucun impact. Si vous voulez nettoyer votre feuille de style, effacez toutes le références à cette classe.

## Modifiez template.html

Il n'y a eu que quelques petites modifications dans ce fichier. Ouvrez `themes/votre_theme/template.html` avec un éditeur de texte et modifiez suivant les indications ci-dessous:

### Remplacez l'appel pour script.js

Trouvez:

    <script type="text/javascript" src="scripts.js"></script>

et remplacez par:

    {JAVASCRIPT}

Oublier d'appliquer cette modification, empêchera le fonctionnement de votre thème (voyez les details pour la balise `{JAVASCRIPT}`).

### Ajoutez l'appel pour la feuille de style générale

Pour réduire le poids d'une feuille de style individuelle, les définitions CSS générales qui sont les mêmes pour tous les thèmes de Coppermine ont été déplacées depuis `themes/votre_theme/style.css` vers un fichier CSS Global situé dans `css/coppermine.css`. La nouvelle feuille de style `css/coppermine.css` ne doit pas être modifiée. Pour mettre à jour votre thème personnalisé réalisé pour cpg1.4.x vers le nouveau cpg1.5.x, vous devez ajouter l'appel de cet nouvelle feuille de style dans le fichier template.html de votre thème:

Trouvez:

    <link rel="stylesheet" href="themes/YOUR_THEME/style.css" type="text/css">

et ajoutez juste avant dans une nouvelle ligne:

    <link rel="stylesheet" href="css/coppermine.css" type="text/css" />

### Ajoutez la balise {MESSAGE_BLOCK}

Insérez

    {MESSAGE_BLOCK}

n'importe ou avant la balise `{GALLERY}`, de préférence juste après la section de menu. cette nouvelle balise affichera les messages aussi bien pour l'administrateur que pour l'utilisateur final. Il devrait êtr evisible dans la partie supérieure de l'écran sans avoir à dérouler la page vers le bas, voyez les details pour la balise `{MESSAGE_BLOCK}`.

### Ajoutez la balise {CREDITS}

Insérez

    {CREDITS}

n'importe ou après la balise `{GALLERY}`, de préférence à la toute fin du fichier, avant la balise `</body>`. cette nouvelle balise peut afficher les indications de copyright pour votre galerie et (idéallement) le copyright de Coppermine.
Si vous n'insérez pas cette balise, il n'y aur apas de message d'erreur, et c'est le message de crédits par défaut qui sera affiché, voyez les détails pour la valise `{CREDITS}`.

### Enlevez la balise {VANITY}

Dans les version anciennes de Coppermine, tous les thèmes utilisés contenaient la balise `{VANITY}`. Cette balise etait utilisée pour faire référence à la validation w3c des pages et à php.net et mysql.com uniquement si le thème était conforme aux standart et que l'option correspondante de la configuration de Coppermine était cochée (par défaut, cette option était décochée). Cela a été changé dans cpg1.5.x: si le fichier template.html de votre thème personnalisé contient la balise `{VANITY}`, l'affichage correspondant sera effectif, l'option ayant été enlevée de la configuration ainsi que sa définition à l'intérieur du thème.

Toutefois, si vous utilisez un thème créer pour cpg1.4.x, l'affichage des icones de courtoisie se fera après la mise à jour vers cpg1.5.x même si vous avez désactivé cette option avant. Si celà vous gène, enlevez simplement la balise `{VANITY}` (→ pour les détails).

### Enlevez la balise {LANGUAGE_SELECT_FLAGS}

Dans les anciennes versions de Coppermine, tous les thèmes contenaient la balise `{LANGUAGE_SELECT_FLAGS}`. Cette balise était remplacée à l'affichage par une liste de drapeaux représentant les langues disponibles uniquement si l'option correspondante de la configuration de Coppermine était sélectionnée (par défaut cette option était décochée). Cela a été changé dans cpg1.5.x: si le fichier template.html de votre thème personnalisé contient la balise `{LANGUAGE_SELECT_FLAGS}`, l'affichage correspondant se fera puisque l'option de la configuration a été enlevée.

Toutefois, si vous utilisez un thème créer pour cpg1.4.x, l'affichage des icones de courtoisie se fera après la mise à jour vers cpg1.5.x même si vous avez désactivé cette option avant. Si celà vous gène, enlevez simplement la balise `{LANGUAGE_SELECT_FLAGS}`.

### Effacez la balise {LANGUAGE_SELECT_LIST}

Dans les anciennes versions de Coppermine, tous les thèmes contenaient la balise `{LANGUAGE_SELECT_LIST}`. Cette balise était remplacée à l'affichage par une liste des langues disponibles uniquement si l'option correspondante de la configuration de Coppermine était sélectionnée (par défaut cette option était décochée). Cela a été changé dans cpg1.5.x: si le fichier template.html de votre thème personnalisé contient la balise `{LANGUAGE_SELECT_LIST}`, l'affichage correspondant se fera puisque l'option de la configuration a été enlevée.

Toutefois, si vous utilisez un thème créer pour cpg1.4.x, l'affichage des icones de courtoisie se fera après la mise à jour vers cpg1.5.x même si vous avez désactivé cette option avant. Si celà vous gène, enlevez simplement la balise `{LANGUAGE_SELECT_LIST}`.

### Enlevez la balise {THEME_SELECT_LIST}

Dans les anciennes versions de Coppermine, tous les thèmes contenaient la balise `{THEME_SELECT_LIST}`. Cette balise était remplacée à l'affichage par une liste des thèmes disponibles uniquement si l'option correspondante de la configuration de Coppermine était sélectionnée (par défaut cette option était décochée). Cela a été changé dans cpg1.5.x: si le fichier template.html de votre thème personnalisé contient la balise `{THEME_SELECT_LIST}`, l'affichage correspondant se fera puisque l'option de la configuration a été enlevée.

Toutefois, si vous utilisez un thème créer pour cpg1.4.x, l'affichage des icones de courtoisie se fera après la mise à jour vers cpg1.5.x même si vous avez désactivé cette option avant. Si celà vous gène, enlevez simplement la balise `{THEME_SELECT_LIST}`.

## Modifiez theme.php

Plusieurs choses notables se sont passées qui vont influencer vos modifications de votre fichier theme.php.

Si vous le pouvez, videz votre copie de theme.php (bien entendu, vous devriez garder une sauvegarde quelque part par précaution) puis ré-ajoutez les changements que vous avez fait comme si vous commenciez un thème du début, en copiant les portions de code dont vous avez besoin depuis le thème sample (comme expliqué dans "Le thème sample - un thème servant de références") puis modifiez vos ajouts à votre convenance.

## Methode de Validation

Maintenant que vous avez de fichiers "style.css", "template.html" et "theme.php" oppérationnels, vous voudrez vérifier qu'ils gérnèrent des sorties valides et conformes aux standards.

- Quelques suggestions pour vous aider à rendre votre thème valide pour XHTML 1.0 Transitional
  - toutes les esperluettes (&) qui font parties des URL doivent être codée '`&amp;`'. Il y en a plusieures dans les fonctions de theme.php.
  - Toutes les balises images doivent avoir un attribut 'alt' attribute, et doivent être fermées '`/>`'.
  - Toutes les méta balises doivent être fermées '`/>`'
  - toutes les balises `<hr>` et `<br>` doivent être fermées `<hr />``<br />`
  - Toutes les images/couleurs de fond doivent être changées en CSS ou attributs de styles. En fonction de votre design.
  - Toutes les balises ou attributs en Majuscules (come onClick) doivent être mises en minuscules.
- Sauvegardez tous les fichiers ouverts et téléchargez les sur votre serveur, testez les aussi bien en tant qu'administrateur qu'utilisateur "normal".
- Utilisez la methode suivante pour confimer que votre thème génère des pages HTML valides XHTML 1.0 Transitional.
  Chacune des pages suivant doit être validée pour les utilisateurs anonymes, enregistrés et en mode administrateur:
  - index.php
  - thumbnails.php
  - displayimage.php
  - search.php
  - les E-cartes HTML envoyées par courriel.
  Pour trouver de l'aide pour la validation de votre thème personnalisé, regardez la section Documentation du développeur → Outils recommandés par les développeurs → Développement Web