Mise à jour d'un thème de cpg1.4.x vers cpg1.5.x - Coppermine Photo Gallery - Documentation & manuel

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

# Convertir un thème de cpg1.4.x pour cpg1.5.x

Pour faire votre thème personnalisé à base de travail avec cpg1.4.x cpg1.5.x, vous aurez besoin de faire quelques changements. N'oubliez pas de sauvegarder vos fichiers d'originaux, de sorte que vous puissiez revenir à une version fonctionnant dans les cas où quelque chose se passerait mal avec les modifications.

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

Si vous avez utilisez un paquetage par défaut fourni avec cpg1.4.x mais également celui qui est livré avec cpg1.5.x et si vous n'avez pas modifié vos fichiers de thème, vous n'avez pas à appliquer de changement ainsi, vous pouvez sauter cette page. Toutefois, si vous utilisez un thème personnalisé ou si vous avez une modifier l’un des thèmes par défaut (ce qui en fait donc un thème personnalisé) vous avez besoin de lire cette page et faire comme suggéré sur dedans.

Assurez-vous que le nom du dossier de votre thème personnalisé diffère du nom de thème par défaut sur lequel vous avez fondé votre thème personnalisé, c'est à dire veiller à Commencez par renommer votre thème.

Vous ne pouvez pas utiliser un thème qui a été conçu pour cpg1.4.x avec une galerie cpg1.5.x à moins que vous n’appliquiez les modifications de base indiquée sur cette page. Ceci s'applique à tous les thèmes qui étaient pou cpg1.4.x.

- Modifier style.css
- Modifier template.html
- Modifier theme.php
- Méthode de validation

## Modifier style.css

Pour tous les changements ci-dessous, modifier themes/votre_thème_personnalisé/style.css

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

Avant d'appliquer ce correctif, assurez-vous que votre feuille de style ne contient pas déjà de définitions pour les pseudos classes. Si elle ne contient pas les 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.

### En-têtes 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;

### Modifier la class «`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'images

Trouvez:

    .image {

et ajoutez juste avant (dans une nouvelle ligne):

    /* pseudo-classes for image links */
    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 les attributs bour les faire correspondre à vos besoins. Ceci détermine comment sont affichées les vignettes sur lesquelles on a déjà cliqué. La chose la plus importante étant 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 class «`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 class `maintable` de votre thème.

Les autres styles pour 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 icônes 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 ces lignes de votre feuille de style personnalisée.

### Effacez la class «`comment_button`»

La class "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 class dans votre feuille de style personnalisée, elle n'aura simplement aucun impact. Si vous voulez nettoyer votre feuille de style, effacez toutes les références à cette class.

### Effacez la class «`tableh1_compact`»

La class "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 class 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 class.

### Effacez la class «`tableh2_compact`»

La class "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 class 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 class.

### Effacez la class «`tableb_compact`»

La class "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 class.

## Modifier template.html

Il n'y a eu que quelques petites modifications dans ce fichier afin que cela soit simple à appliquer. Toutefois, si vous échouez pour faire les changements, votre mise à niveau sera incomplète et votre thème personnalisé ne fonctionnera pas pour cpg1.5.x. Il vous suffit de suivre complètement les instructions.
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 détails 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/votretheme/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 cette nouvelle feuille de style dans le fichier template.html de votre thème:

Trouvez:

    <link rel="stylesheet" href="themes/VOTRE_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 être visible dans la partie supérieure de l'écran sans avoir à dérouler la page vers le bas, voyez les détails 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 droits d'auteur pour votre galerie et (idéalement) les clauses de non responsabilité de Coppermine.
Si vous n'insérez pas cette balise, il n'y aura pas de message d'erreur, et c'est le message de crédits par défaut qui sera affiché, voyez les détails pour la balise `{CREDITS}`.

### Enlevez la balise `{VANITY}`

Dans les versions anciennes de Coppermine, tous les thèmes utilisés contenaient la balise `{VANITY}`. Cette balise était utilisée pour faire référence à la validation w3c des pages et à php.net ainsi que à mysql.com uniquement si le thème était conforme aux standards 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.

Par conséquent, si vous utilisez un thème qui a été conçu pour cpg1.4.x, le sélecteur d’icônes de courtoisie se fera après la mise à niveau vers cpg1.5.x même si vous aviez désactivez cette option avant. Si cela vous gêne, enlevez simplement la balise `{VANITY}` (→ détails).

### Enlevez la balise `{LANGUAGE_SELECT_FLAGS}`

Dans les versions anciennes de Coppermine, tous les thèmes utilisés 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.

Par conséquent, si vous utilisez un thème qui a été conçu pour cpg1.4.x, le sélecteur de langue par drapeau se fera après la mise à niveau vers cpg1.5.x même si vous aviez désactivez cette option avant. Si cela vous gêne, enlevez simplement la balise `{LANGUAGE_SELECT_FLAGS}`.

### Enlevez la balise `{LANGUAGE_SELECT_LIST}`

Dans les versions anciennes de Coppermine, tous les thèmes utilisés 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.

Par conséquent, si vous utilisez un thème qui a été conçu pour cpg1.4.x, le sélecteur de langue par liste se fera après la mise à niveau vers cpg1.5.x même si vous aviez désactivez cette option avant. Si cela vous gêne, enlevez simplement la balise `{LANGUAGE_SELECT_LIST}`.

### Enlevez la balise `{THEME_SELECT_LIST}`

Dans les versions anciennes de Coppermine, tous les thèmes utilisés 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.

Par conséquent, si vous utilisez un thème qui a été conçu pour cpg1.4.x, la sélection des thèmes se fera après la mise à niveau vers cpg1.5.x même si vous aviez désactivez cette option avant. Si cela vous gêne, enlevez simplement la balise `{THEME_SELECT_LIST}`.

## Modifier theme.php

Plusieurs choses notables se sont passées qui vont influencer vos modifications dans 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 de nouveau rajoutez 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.

## Méthode de validation

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

- Quelques suggestions pour vous aider à rendre les page HTML de votre thème, valide pour XHTML 1.0 Transitional
  - Tous les esperluettes (&) qui font parties des URL doivent être codée '`&amp;`'. Il y en a plusieurs dans les fonctions de theme.php
  - Toutes les balises images doivent avoir un attribut 'alt', et doivent être fermées '`/>`'.
  - Toutes les balises méta doivent être fermées '`/>`'
  - Toutes les balises `<hr>` et `<br>` doivent être fermées, `<hr>` vous devez écrire `<hr />` et pour fermer `<br>` vous devez utiliser `<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 existantes ou des attributs en majuscules ou en majuscules partielle (par exemple pour `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 méthode suivante pour confirmer 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 cartes électroniques HTML envoyée 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 l'équipe de développement → Développement Web