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