Cette astuce donne la marche à suivre pour remplacer ce bouton de couleur sur le forum :
[Vous devez être inscrit et connecté pour voir cette image]Par un sélecteur de couleur :
[Vous devez être inscrit et connecté pour voir cette image]Il faut d'abord ajouter dans le CSS ( PA > Affichage > Couleurs > Feuille de style CSS ) ceci :
- Code:
-
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}
Puis si vous avez déjà une feuille javascript liée à toutes les pages du forum vous pouvez y ajouter le code javascript
Si vous n'en n'avez pas alors il faut :
1. Créer une page html ( PA > Modules > Gestion des pages HTML > Créer une nouvelle page HTML ).
2. Mettre un titre ( il n'a pas d'importance mais il ne faut pas qu'il soit vide ^^ ), ne pas utiliser le haut ni le bas de page de votre forum, mettre comme code HTML abc et puis cliquer sur le bouton Valider.
3. Remplacer le abc du code html par le code dans le cadre noir sur la page
[Vous devez être inscrit et connecté pour voir ce lien] dans lequel il est possible de modifier la couleur ( hexadécimal ) sélectionnée par défaut à l'ouverture du sélecteur dans le code :
- Code:
-
defaulColor='000000';
# Ensuite cliquer de nouveau sur le bouton Valider pour enregistrer.
# Retourner dans la liste des pages html ( PA > Modules > Gestion des pages HTML ) et retenir l'ID de la page que vous venez de créer qui se trouve dans la colonne Page ID à la ligne de la page créée.
# Ajouter dans la description du forum ( PA > Général > Forum | Configuration > Description du site ) cette balise en remplaçant le 1 par l'ID de votre page :
- Code:
-
<script src="/-h1.htm"></script>
La dernière chose à faire est d'enregistrer la description en cliquant sur le bouton Enregistrer et la mise en place du sélecteur de couleur est terminée
Accueil 
