Ce billet fait partie de la série « Personnalisons Wikipédia« . La personnalisation du jour vous permettra de rendre toutes ces pages trop sérieuses un poil plus rigolotes (ou pas) en modifiant la tronche de leur sommaire à l’aide de quelques lignes de CSS.
Comme d’habitude, le code est à insérer dans votre sous page /monobook.css, ou /vector.css selon le skin MediaWiki que vous utilisez.
Partie HTML
Le code d’un sommaire ressemble à ça (l’exemple est pris sur la page du bulletin des admins, pour les titres de section) :
<table id="toc" class="toc">
[...]
<ul>
<li class="toclevel-1 tocsection-1">
<a href="#(semaine)"><span class="tocnumber">(numérotation)</span> <span class="toctext">(semaine)</span></a>
<ul>
<li class="toclevel-2 tocsection-2">
[..lien section jour, identique a celui des semaines ci dessus..]
<ul>
<li class="toclevel-3 tocsection-3">[..lien section titre..]</li>
<li class="toclevel-3 tocsection-4 ">[..lien section titre..]</li>
<li class="toclevel-3 tocsection-5">[..lien section titre..]</li>
</ul>
</li>
<li class="toclevel-2 tocsection-6">
[..lien section jour..]
<ul>
<li class="toclevel-3 tocsection-7">[..lien section titre..]</li>
<li class="toclevel-3 tocsection-8">[..lien section titre..]</li>
</ul>
</li>
[...]
</ul>
</li>
</ul>
</table>
Les deux choses importantes à retenir sont :
- Chaque niveau du sommaire à une classe dédiée (toclevel-X ). C’est là dessus que se basera notre code CSS.
- Les niveaux sont imbriqués (niveau 2 contenu dans le 1, 3 dans le 2, etc), ce qui signifie que si on ne précise pas le contraire, un code affecté au niveau 2 affectera par défaut tous les niveaux 3 à 6 qu’il contient
Le code CSS
Vous connaissez déjà le gros de la syntaxe utilisée car elle a déjà été expliquée dans mes précédents billets (si vous ne les avez pas lu, c’est le moment :). Les quelques éléments nouveaux seront détaillés en /* commentaires */ dans le code.
Le bout de code ci dessous donnera un style « météo » à l’ensemble des sommaires. J’expliquerais plus bas comment limiter son action à seulement certains d’entre eux (par exemple, uniquement le bistro, ou uniquement l’espace wikipédia: )
Initialement, je comptais faire un style plus ensoleillé… mais pas moyen de trouver une icone potable de chapeaux mexicains. Donc tant pis, les icones météo feront l’affaire. De toute manière, ça n’est qu’un exemple, le but étant que vous ayez la curiosité de modifier/adapter le code à votre sauce ensuite (soyons fous et optimistes…)
/* sommaires, "météo mode"
les modifications sont faites sur le lien (a) plutôt que sur la ligne (li) afin que l'icône soit cliquable.
*/
/* effacer la numérotation du sommaire, car elle va m'embêter pour la suite */
.tocnumber {
display:none;
}
/* grande font, bleu foncé, avec un soleil à gauche */
.toclevel-1 a {
color:#007;
font-size:160%;
background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Crystal_sun.png/25px-Crystal_sun.png') no-repeat scroll left bottom;
padding-left:29px; /* décaler le texte sur la droite pour laisser de la place a l'icône */
}
/* font un peu moins grande, bleu standard, icône nuageuse à sa gauche */
.toclevel-2 a {
font-size:130%;
color:#00F;
background:transparent url('http://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Cloudy01.svg/20px-Cloudy01.svg.png') no-repeat scroll left bottom;
padding-left:24px;
}
/* font taille normal, bleu plus clair, icône orage */
.toclevel-3 a {
font-size:100%;
color:#55F;
background:transparent url('http://upload.wikimedia.org/wikipedia/commons/c/cf/Weather_lightning.png') no-repeat scroll left bottom;
padding-left:19px;
}
/* font plus petite, bleu encore un peu plus clair, pas d'icône (car serait trop petite pour être reconnaissable) */
.toclevel-4 a {
font-size:80%;
color:#99F;
background:none; /* pas d'image de fond (l'icône sur la gauche), il faut le spécifier sinon celle du niveau 3 s'affichera */
/* je laisse le padding-left hérité du niveau supérieur pour que le décalage soit cohérent avec les niveaux d'au dessus */}
Le résultat
Pour vous donner une meilleure idée de l’impact, j’ai aussi fait une capture des sommaires du BA et du bistro avec ce thème, c’est cliquable et c’est ci dessous. Moins lugubre tout de suite, non ?
Limiter la portée du code
Maintenant, vous n’avez probablement pas envie que ce code soit actif sur absolument toutes les pages, et souhaitez le limiter a un/des namespace(s) ou des pages en particuliers.
Je veux dire, ce style rend bien pour les pages qui ont une arborescence sur plusieurs niveaux, mais pour une page ou ça n’est pas le cas, ça ressemble plutôt à ça, que je trouve moche :
Pour ce faire, nous allons nous servir d’une série de classes que MediaWiki affecte à chaque page. Par exemple, le Bulletin des administrateurs (avec ma config) possède celles ci :
<body class="mediawiki ltr ns-4 ns-subject page-Wikipédia_Bulletin_des_administrateurs skin-monobook">
(je saute celles que je ne connais/comprend pas)
- « ltr » indique que nous sommes dans un mode « left to right » (en opposition, par exemple, à l’arabe qui se lis en rtl, de droite à gauche)
- « ns-4 » est l’identifiant du namespace de la page (ici wikipédia: )
- « page-Wikipédia_Bulletin_des_administrateurs » est un identifiant unique (ou presque) de la page
- « skin-monobook« , comme son nom l’indique, spécifie que j’utilise le skin « monobook » pour visualiser la page. Les utilisateurs d’Açai/Babaco verront à la place « skin-vector« .
Les deux qui nous intéressent sont celui qui indique le namespace et celui qui est unique à la page.
Mettons que je veuille limiter la portée du code au namespace wikipédia: . Au lieu de
.toclevel-1 a {
il suffit de mettre
.ns-4 .toclevel-1 a {
Et si je veux limiter sa portée au BA et au bistro, le code devient
.page-Wikipédia_Bulletin_des_administrateurs .toclevel-1 a, .page-Wikipédia_Le_Bistro .toclevel-1 a {
Et voila le travail !
Darkoneko's Weblog 
