Personnalisons Wikipédia : introduction

Ce billet est le premier de la série « Personnalisons Wikipédia« .

Cette série de billets visera à détailler (aux débutants comme aux autres) des moyens de personnaliser telle ou telle partie de l’interface de Wikipédia,  à l’aide d’un peu de CSS et de JavaScript (JS). Il est conseillé d’avoir 2/3 notions dans ces matières, mais je fournirais des explications et le code à chaque fois que possible.

Pour commencer

• le logiciel MediaWiki permet de personnaliser son interface/ajouter des fonctionnalités grace à des sous pages permettant d’ajouter du code CSS et JS

• Ces pages sont respectivement special:mypage/monobook.css et special:mypage/monobook.js – Special:mypage est un raccourci logiciel qui renvoie sur la page de l’utilisateur connecté. Ces liens sont universels et vous renverrons donc sur vos sous-pages à vous (et pas celles du voisin). J’utiliserai généralement ce type de liens.

• Tout code entré dans ces sous pages ne sera actif que pour cet utilisateur : il n’affectera pas la manière dont toute autre personne verra l’encyclopédie. De la même manière, il necessite que vous soyez identifiés.

• Le code n’est actif que sur un seul Wiki. Si vous personnalisez sur http://fr.wikipedia.org, cela ne sera pas visible sur http://it.wikipedia.org .

La personnalisation du jour : changer le logo

Le sempiternel logo de Wikipédia, en haut à gauche de toutes les pages, vous sors par les oreilles ? Vous voulez quelquechose de plus original ? rien de plus simple.

1. Ouvrez votre sous page de CSS (special:mypage/monobook.css)
2. Ajoutez y le code suivant :#p-logo a {
   background-image:url(ADRESSE DE VOTRE IMAGE)!important;
   }
3. Sauvegardez et profitez :)

Maintenant, quelques explications et détails.

• « #p-logo » est l’identifiant unique d’un conteneur (ici celui du logo). Dans le code html, il est spécifié sous la forme :

  <div  id="p-logo"> (du code) </div>

• « #p-logo a » indique que vous souhaitez plus précisément affecter les liens situés dans ce conteneur, en l’occurence le lien qui renvoie sur la page d’accueil et dont l’image est le logo.

• L’image ne sera pas redimensionnée automatiquement. Si vous utilisez une image de plus de 150px de large ou de haut, ça débordera.

• Il est possible de lier directement à une miniature d’image importée sur Wikipédia. Plusieurs méthodes existent, mais pour simplifier :
  • editez une page inexistante sur le wiki (peu importe laquelle)
  • Insérez [[image:(votre image)|150px]]
  • cliquez sur « prévisualisez » (ne sauvegardez pas)
  • faite une clic droit sur l’image prévisualisée et sélectionnez « propriété »
  • copiez l’adresse de l’emplacement de l’image (elle sera du type http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Korat.jpg/150px-Korat.jpg) . Vous avez maintenant la miniature qu’il vous faut.
• Après avoir sauvegardé votre monobook.css, vous aurez un avertissement indiquant qu’il faut forcer le rechargement de la page (la méthode est fournie). Si vous ne le faite pas, vos changements ne seront pas visibles.