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.
Pour tous les changements ci-dessous, modifier themes/votre_thème_personnalisé/style.css
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.
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 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.
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 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.
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.
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.
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.
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.
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.
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:
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}.
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" />
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}.
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.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).
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}.
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}.
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}.
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.
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.