Darkoneko's Weblog

Yesterday, today, and no future / time waits for no one

Personnalisons Wikipédia : introduction

Posted by DarkoNeko sur jeudi 18 juin 2009

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.

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.
Advertisements

6 Réponses to “Personnalisons Wikipédia : introduction”

  1. Excellent billet, merci. Si ça reste à ce niveau pour les explications, il y a des chances que je comprenne tout.

    J’ai par ailleurs lancé un arbitrage préventif contre Coyau, au cas où 0_o

  2. Coyau said

    D’accord, je suis un grand Coyau, j’assume et c’est ma joie.

  3. Pymouss said

    J’aime aussi beaucoup (et je ne lancerai pas d’arbitrage contre Coyau, sauf si…).
    Vivement la suite !

  4. Ælfgar said

    Très bonne idée de billets, ça ! (Même si le public risque d’être relativement restreint ^^) J’attends la suite avec impatience :)

  5. Coyau said

    Super, merci.

    La question qui reste, c’est : est-ce qu’on a le droit de faire des blagues (changer l’interface des autres sans les prévenir et attendre les réactions) ?

    • darkoneko said

      a tes risques et périls : s’il décident que c’est un abus d’outils, ils peuvent lancer un arbitrage et demander le retrait de ton status :)

      à utiliser sur des personnes dont tu es a peut près sûr de la réaction, donc.

Sorry, the comment form is closed at this time.