Les images nécessaires pour cette personnalisation sont à télécharger ici. Elles sont valables pour la wikibarre de commentaire ainsi que pour la barre de boutons d'écriture de billet.
Les effets :hover seront visibles avec Firefox 1.0.
IE6 ne supporte pas img:hover.
Mise à jour du 22/12/04.
On installera d'abord la wikibarre de Pep pour avoir la barre de boutons pour l'écriture de commentaire.
La feuille de style à modifier pour l'écriture du commentaire est la feuille de style du thème. Pour le thème par défaut :
qui contient la couleur de la zone d'édition :
input[type], textarea[name] {
background: #F1F0ED;
}
L'id à utiliser pour la wikibarre est #dcwikibar.
La feuille de style à modifier pour l'écriture du billet est :
qui contient la couleur de la zone d'édition :
input, textarea, option, select {
background : #eef3f5;
color : #000;
font-family : Verdana,Arial,Helvetica,sans-serif;
font-size : 1em;
}
Les couleurs correspondantes choisies avec Color Schemer.
L'id à utiliser pour l'écriture de billet est #dctoolbar.
Les images pour boutons de l'archive sont à copier soit dans /wikibtns, soit dans /dotclear/ecrire/images.
On mettra dans /dotclear/themes/default/wikibtns les images à utiliser pour les thèmes sans boutons propres.
On mettra dans /dotclear/themes/dotparking/wikibtns les images spécifiques pour le thème DotParking par exemple.
Cette archive contient :
La couleur de la zone d'édition pour le thème Tenue de Soirée figure dans sa feuille de style :
input[type], textarea[name] {
background: #F3EEDC;
}
Un choix de couleurs est fait avec Color Schemer
Le cadre de l'image est mis dans la couleur désirée (prendre une couleur saturée, #BCA349 dans l'exemple); la modification de chaque image est effectuée aisément avec votre éditeur favori ou l'éditeur JDraw spécialisé dans ce type d'image. Partir de /bt-a-ref, convertir la couleur rouge #FF0000 dans la couleur choisie #BCA349; le résultat a été mis dans /bt-a-tds.
Pour convertir avec JDraw :
simple, n'est-ce pas.
Le fond transparent est coloré par background-color
Copier les images de /bt-a-tds dans /wikibtns; par exemple /kozeries/themes/rouge/wikibtns.
Copier le code CSS suivant dans la feuille de style concernée, par exemple /kozeries/themes/rouge/style.css.
#dcwikibar img {
background-color: #F3EEDD;
cursor: pointer;
}
#dcwikibar img:hover {
background-color: #FAF8F0;
}
Un autre effet :
#dcwikibar img {
cursor: pointer;
}
#dcwikibar img:hover {
background-color: #F3EEDD;
}
On utilise les effets suivants :
Prendre les images /bt-b-ref lors de l'utilisation de border, pour donner une impression de relief, ou d'autres effets à votre imagination. Le cadre qui entoure l'image a été mis en retrait pour ne pas coller aux traits générés par border.
Rappel : le cadre des images de /bt-b-ref a été mis à #BCA349 dans /bt-b-tds.
Copier /bt-b-tds dans /wikibtns; ; par exemple /kozeries/themes/rouge/wikibtns.
Copier le code CSS suivant dans la feuille de style concernée, par exemple /kozeries/themes/rouge/style.css.
#dcwikibar {
width: 300px;
height: 24px;
background-color: #F3EEDD;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
padding-top: 3px;
padding-left: 4px;
}
#dcwikibar img {
background-color: #F4EFDC;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
cursor: pointer;
}
#dcwikibar img:hover {
background-color: #FAF8F0;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
Copier les images de /bt-b-gris dans /wikibtns
Copier le code CSS suivant dans la feuille de style concernée.
#dcwikibar {
width: 300px;
height: 24px;
background-color: #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
padding-top: 3px;
padding-left: 4px;
}
#dcwikibar img {
background-color: #aaa;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
cursor: pointer;
}
#dcwikibar img:hover {
background-color: #ddd;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
Pour l'interface d'origine d'écriture de billet, copier les images de /bt-b-def-billet dans /dotclear/ecrire/images
Copier le code CSS suivant dans la feuille de style /dotclear/ecrire/style/default.css.
#dctoolbar {
width: 420px;
height: 24px;
background-color: #EEF3F5;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
padding-top: 3px;
padding-left: 4px;
}
#dctoolbar img {
background-color: #EFF0F6;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
cursor: pointer;
}
#dctoolbar img:hover {
background-color: #F2F2F2;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
Pour le billet, noter que les seuls changements sont l'id et le paramètre width :
#dctoolbar {
width: 420px;
...
On peut ajouter aux effets background et border le changement de la couleur du fond de l'image (en non transparent). Voir /bt-b-gris-eceade dont le fond d'image est #ECEADE.
Ces exemples vous permettrons de faire vos propres boutons, artistiques, fluo, flashant... Vous pouvez combiner les différentes possibilités de background, border et de modification de l'image pour obtenir des effets nouveaux, divers et variés. Kozlika sera ravie de recevoir vos productions ici.
JDraw est un outil fait en Java, donc multi-plateformes, spécialement fait pour traiter ce type d'images.
Color Schemer a été utilisé pour ces exemples. Il est référencé dans Le Petit DotClear illustré rubrique Gestion des couleurs ou l'on trouvera d'autres outils.