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
Pour tous les changements ci dessous, ouvrez themes/votre_theme_personnalise/style.css
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.
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;
Trouvez:
.navmenu a {
position: relative;
et remplacez par:
.navmenu a {
Trouvez:
.admin_menu {
et ajoutez juste après:
background-repeat:repeat-x;
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%;
}
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.
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;
}
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;
}
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.
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.
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.
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.
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.
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.
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:
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}).
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" />
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}.
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.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).
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}.
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}.
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}.
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.
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.