Personnalisons Wikipédia : liste de suivi, contributions, RC

[
07/10/2011 : Mis à jour pour correspondre à la structure HTML de MediaWiki 1.18

• les classes « minor » et « bot » sont devenues « minoredit » et « botedit »
• le conteneur des indications !NmB est passé de <span> à <abbr>

]

Ce billet fait partie de la série « Personnalisons Wikipédia« .

Les personnalisations d’aujourd’hui visent à faciliter la lecture votre liste de suivi, et par effet de bord celle d’autres pages comme les modifications récentes (RC) et les listes de contributions (du fait qu’elles utilisent de nombreux élements communs). Il nous suffira pour cela de quelques lignes en language CSS.

Quelques explications et étude de la structure

Ci dessous, une version épurée du code HTML de la liste d’article affichée sur special:liste de suivi.

• chaque ligne correspond à un conteneur <li>. les <li> sont toujours stockés soit dans un conteneur <ul> (listes à point) soit dans un conteneur <ol> (listes numérotées)
• Comme vu dans un billet précédent, chaque balise <a> correspond à un lien.
• <span> est, comme <div>, un conteneur standard sans signifiation particulière.

promis, ça ne sera plus court que celle du menu de gauche :)

<ul class="special">
	<li class="mw-line-even (..)">
		(<a href="(..)">diff</a>)
		(<a href="(..)">hist</a>)
		<abbr class="minoredit">m</abbr>
		<a href="(..)" >Nom article</a>
		<span (..) class="mw-plusminus-neg">(-x)</span>
		<a href="(..)" class="mw-userlink">Nom d'utilisateur</a>
		<span class="mw-usertoollinks">
			(
			<a href="(..)">discuter</a>
			 |
			<a href="(..)">contributions</a>
			 )
		</span>
		<span class="comment">(commentaire)</span>
	</li>
	<li class="mw-line-odd (..)">
		(..)
	</li>
	(..)
</ul>

Personnalisations

Alternance de couleurs par ligne

Note : cette personnalisation affecte la liste de suivi et les RC, mais pour une raison qui m’échappe, special:contributions n’utilise pas ces deux classes

Comme le montre le code plus haut, MediaWiki attribue alternativement deux classes aux lignes : mw-line-even et mw-line-odd.Du coup, pour différencier les lignes, il  suffit d’affecter un affichage personnalisé  à l’une ou l’autre de ces classes.

Pour ma part, je vais me contenter de deux petits ajouts sur la classe mw-line-even :

• lui mettre un fond gris très clair
• ajouter une ligne en pointillés longs au dessus et en dessous

J’ajoute donc dans mon monobook.css le code suivant :

.mw-line-even {
  background-color:#F2F2F2; /*fond gris très clair */
  border-top:1px dashed #aaa; /* ligne grise pointillé au dessus */
  border-bottom:1px dashed #aaa; /* idem dessous */
}

Ce qui nous donne ceci :

Vous avez la possibilité d’avoir cette même ligne en pointillés courts en remplaçant « dashed « par « dotted » ; ou en trait plein en remplaçant par « solid« .

Modification mineure/par bot/nouvelle page/non patrouillée

Cette partie s’attache aux petites lettres informatives apparaissant sur certaines lignes :

• m, pour modification mineure (présent dans le code HTML  plus haut). Identifié par la class « minor ».
• N, pour nouvel article. Identifié par la classe « newpage ».
• b, pour modification par bot. Identifié par la classe « bot ».
• !, indiquant une modification non vérifiée (cet indicateur n’est visible que par les admins). Identifié par la classe « unpatrolled ».

Par défaut, les lettres sont en noirs (le ! en gris), de la même taille que le reste, avec à peine un peu de gras pour les faires ressortir. C’est tout triste ! Voici les modifications que j’ai apporté pour les rendre plus visible :

/* Altérations de la couleurs de Nbm! pour les pages de RC, watchlist, contributions */
/* le N pour "nouvelle page" */
.newpage {
   color:#FF0080;
   font-size:140%;
}
 /* le m pour "modification mineure" */
.minoredit {
   color:#4F4;
   font-size:140%;
}
/* le point d'exclamation indiquant une édition non patrouillée */
.unpatrolled {
   font-size:150%;
   color:black ;
}
/* le b pour "modification par bot" */
.botedit {
   font-size:140%;
   text-transform:uppercase; /* mettre en majuscule */
   color:orange;
}
/* fin altération couleur Nbm! */

le résultat :

(je n’ai pas de point d’exclamation sous la main, mais il est tout noir, d’environ la même taille que les NmB et apparait à leur gauche)