Personnalisons Wikipédia : retirons l’inutile

Ce billet est le deuxième de la série “Personnalisons Wikipédia“.

La personnalisation d’aujourd’hui vous aidera à retirer les parties de l’interface de Wikipédia que vous trouvez inutile à l’aide de quelques lignes en CSS. Je me limiterais ici au menu de gauche de l’interface, mais c’est applicable partout.

Quelques explications

Je vais détailler si dessous quelques bases nécessaire. Ceux qui les connaissent déjà peuvent passer directement à la partie suivante.

HTML

le HTML, language des pages web, est en gros, une série de <balises> imbriquées  les unes dans les autres. J’utiliserais parfois le terme de conteneurs.

Vous trouverez le squelette de base d’une page ici, et si vous cherchez des élements non détaillé dans ce billet, je vous renvoi vers les explications dans les sections correspondantes de wikibooks et wikiversity (autant ne pas réinventer la roue).

Il existe 3 principaux moyens d’identifier un élément en CSS :

• le type de sa balise
• son id
• sa ou ses classes

Ce sera plus simple à expliquer par l’exemple, donc voici :

<div id=”monDiv” class=”classe1 classe2“> (contenu de l’élement, textes et possiblement d’autres élements) </div>

• Le type de cet élement est “div“

• l’id de cet élement est “mondiv“.  Cet identifiant est unique, plusieurs élements d’une page ne peuvent pas avoir le même.

• les classes de cet éléments sont “classe1” et “classe2” (les noms sont séparés par un espace). Il est possible d’affecter une même classe a n’importe quel nombre d’élements de type quelquonque (titres, liens, etc.)

Le logiciel MediaWiki se prète à la personnalisation dans le sens que beaucoup de ses élements comportent un id ou une classe.

CSS

Le CSS se base sur les identifiants vu plus haut (type, id et classes) et permet entre-autre d’affecter à des elements une nouvelle forme (couleurs, souligner, taille) ou position.

Il est écrit sous la forme suivante :

identification1, identification2, ... {
      (code)
} 

pour distinguer que l’identification se fasse sur un type de balise, un id ou une classe :

• les types sont appelés tels quels

div {
      (code)
} 

• Les id sont précédées d’un #

#monDiv {
      (code)
} 

• Les  classes sont précédées d’un .

.classe2 {
      (code)
} 

Dans ce qui nous concerne aujourd’hui, nous voulons juste faire disparaitre des élements. Le code pour le faire est le suivant :

 display:none;

Structure du menu de gauche

Note1 : je fournie ici les identifiants dont vous aurez besoin, mais à titre général, sous Firefox, pour voir l’identifiant d’un élement, il suffit de sélectionner la zone ou il se trouve, et de faire (clic droit) > “code source de la sélection” (prévoyez un peu plus large pour être certain d’avoir la balise et pas juste une partie de son contenu).

Note2 : certains boutons sont spéficiques à un type de pages (comme “contributions de cet utilisateur”) donc il est possible qu’ils ne soient pas dans la structure ci dessous. Pour avoir leur identifiant, voir note1.

le code du menu de gauche possède la forme décrite ci dessous. J’ai indenté le code (pour montrer ce qui est contenu dans quoi), mis de la couleur pour reperer texte/id/class, et viré ce dont on n’a pas besoin. Nous nous servirons ensuite de ces informations pour  masquer certaines parties de cette architecture.

<div id="p-search" class="portlet">
	<h5>Rechercher</h5>
	<div id="searchBody" class="pBody">
		<form (...)>
 			<div>
				<input id="searchInput" type="text" (...) />
				<input type='submit' class="searchButton" id="searchGoButton" (...) />
				<input type='submit' class="searchButton" id="mw-searchButton" (...) />
			</div>
		</form>
	</div>
</div>

<div class='generated-sidebar portlet' id='p-navigation'>
	<h5>Navigation</h5>
	<div class='pBody'>
		<ul>
			<li id="n-mainpage"><a (...) >Accueil</a></li>
			<li id="n-thema"><a (...) >Portails thématiques</a></li>
			<li id="n-alphindex"><a (...) >Index alphabétique</a></li>
			<li id="n-randompage"><a  (...) >Un article au hasard</a></li>
			<li id="n-contact"><a (...) >Contacter Wikipédia</a></li>
		</ul>
	</div>
</div>

<div class='generated-sidebar portlet' id='p-Contribuer'>
	<h5>Contribuer</h5>
	<div class='pBody'>
		<ul>
			<li id="n-help"><a (...) >Aide</a></li>
			<li id="n-portal"><a (...) >Communauté</a></li>
			<li id="n-recentchanges"><a (...) >Modifications récentes</a></li>
			<li id="n-aboutwp"><a (...) >Accueil des nouveaux arrivants</a></li>
			<li id="n-sitesupport"><a (...) >Faire un don</a></li>
		</ul>
	</div>
</div>

<div class='generated-sidebar portlet' id='p-coll-create_a_book'>
	<h5>Créer un livre</h5>
	<div class='pBody'>
		<ul id="collectionPortletList">
			<li id="coll-add_page"><a (...) >Ajouter cet article au livre</a></li>
			<li id="coll-help_collections"><a (...) >Aide sur les livres</a></li>
		</ul>
	</div>
</div>

<div class="portlet" id="p-tb">
	<h5>Boîte à outils</h5>
	<div class="pBody">
		<ul>
			<li id="t-whatlinkshere"><a (...) >Pages liées</a></li>
			<li id="t-recentchangeslinked"><a (...) >Suivi des pages liées</a></li>
			<li id="t-upload"><a ...) >Importer un fichier</a></li>
			<li id="t-specialpages"><a (...) >Pages spéciales</a></li>
			<li id="t-print"><a (...) >Version imprimable</a></li>
			<li id="t-permalink"><a (...) >Adresse de cette version</a></li>
			<li id="t-download-as-pdf"><a (...) >Version PDF</a></li>
		</ul>
	</div>
</div>
<div id="p-lang">
	<h5>Autres langues</h5>
	<div class="pBody">
		<ul>
			<li class="interwiki-xx"><a href="http://xx.wikipedia...">texte langue</a></li>
			<li class="interwiki-yy"><a href="http://yy.wikipedia...">texte langue</a></li>
		</ul>
	</div>
</div>

Passons au code

Vous avez presque tous les élements en main pour vous en sortir tout seul, aussi je me contenterais d’indiquer quelques exemples que vous aurez loisir d’adapter à vos besoins.

Vous n’aurez besoin de sauvegarder qu’une fois satisfait du résultat (sous réserve que les boutons apparaissent dans la page du monobook). En effet, pour voir ce que donne le code de chaque exemple, il  suffit, après avoir copié le code dans votre  monobook.css ,  d’appuyer sur “previsualiser” pour voir le résultat.

Exemple 1 : effacer une boite entièrement

masquer la boite “Créer un livre” et tout ce qu’elle contient :

#p-coll-create_a_book {
      display:none;
}

simple non ?

Exemple 2 : effacer un titre

Masquer le “contribuer” au haut de la boite :

#p-Contribuer h5 {
     display:none;
}

Ici, il s’agit non pas de masquer l’élement possèdant l’Id mais un de ses “élement fils”.

La syntaxe d’identification signifie “affecter toutes les balises h5 situées dans l’élement d’id “p-Contribuer”, l’unique h5 contenant le titre que l’on veux masquer.

Exemple 3 : effacer quelques liens

masquer les liens  “Accueil des nouveaux arrivants” et “Version imprimable” (ainsi que la ligne qui les contient) ;  les interwikis allemands (attention, c’est une classe et pas un id), ;  et tant qu’on y est, le bouton “go” de la boite de recherche :

/* masquer : "nouveaux arrivants", "imprimer", les interwikis vers de:, bouton "go" du formulaire de recherche */
#n-aboutwp, #t-print, .interwiki-de, #searchGoButton {
   display:none;
}

La syntaxe est la même que pour l’exemple 1, à un petit détail près : nous specifions ici plusieurs identifications pour un même code, en les séparant par des virugles.

La partie entre /*  … */ est un commentaire. Tout ce qui est à l’interieur n’est pas traité comme du code. Comme son nom l’indique, ça vous permet de commenter un peu ce que vous avez voulu faire (c’est terriblement pratique lorsque l’on relis un code quelques mois plus tard :)

Voila, à vous de jouer.