Darkoneko's Weblog

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

Personnalisons Wikipédia : les liens

Posted by DarkoNeko sur mercredi 24 juin 2009

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

La personnalisation d’aujourd’hui vous permettra de modifier la manière dont s’affichent les liens (rouges, redirections, ..) à l’aide de quelques lignes de CSS.

Quelques explications

(Je part du principe que vous avez intégré les explications du billet précédent donc si vous vous sentez perdu, n’hésitez pas à le relire).

Wikibooks explique mieux que moi donc je vous y renverrais pour les quelque bases supplémentaires dont nous aurons besoin dans la personnalisation d’aujourd’hui.

HTML

Les liens sont une balise dont le type est « a ». Ils se présentent généralement sous cette forme :

<a href= »lien » (…)>texte qui apparait</a>

Wikibooks :  Le langage HTML/Liens.

CSS

Les différents types de liens

Le CSS permet d’affecter les différents états dans lequel peut être un lien : normal/visité/actif/survolé.

Wikibooks :  Le langage CSS/Les sélecteurs#Pseudo-classes_des_liens.

Pour ma part, je ne m’intéresserais qu’aux états « normal » et « visité »

La définition des couleurs

Les différentes manières de spécifier les couleurs en CSS sont détaillées sur cette page : Le langage CSS/Valeurs et unité#Les couleurs.

Passons au code

Liens normaux

Les liens bleus ne possèdent pas de classes, et il est donc important de les traiter en premier dans le CSS : leur affectation étant la plus large, ils écraseraient sinon les affectations précédentes !

J’ai quelques difficultés à différencier un lien « normal » d’un lien « visité » sur Wikipédia. Or, c’est quand même vachement pratique (notamment en maintenance) de savoir si l’on a déjà cliqué sur tel ou tel truc.

Je lui ajoute donc une couleur de fond et de l’italique pour qu’il ressorte :

a:visited {
 background-color:#E8E8FF;
 font-style:italic;
}

Liens rouges

La définition ci dessus affectant tous les liens visités, on se retrouve par effet de bord avec un fond bleu foncé  sur… les liens rouges visités (beurk).

=> affectons leur une couleur de fond dédié

a.new:visited {
 background-color:#FFE8E8;
}

Et tant qu’a faire, j’en profite pour agrandir légèrement (tous) les liens rouges par rapport au reste.

a.new {
    font-size:110%;
}

Liens en redirections

Depuis relativement récemment, Mediawiki ajoute une classe particulière à tous les  liens pointant sur une redirection (c’était auparavant limité à quelques pages spéciales). On peut donc leur affecter une couleur en particulier.

J’ai choisis vert, et un souligné pointillé.

a.mw-redirect {
   color:green;
   text-decoration:none; /* pas de souligné sinon avec le border ça fait 2 lignes ! */
   border-bottom: 1px dashed green;
}

a.mw-redirect:visited {
   color:green; /* sinon il sera violet, :visited ayant priorité sur la classe */
   background-color:#80FF80;
}

Liens interwikis

Les interwikis possèdent la classe « extiw »

Un fond un peu plus clair, vu qu’ils sont plus clairs que les « liens bleu ».

a.extiw:visited {
   background-color:#EBF0FF;
}

Vous remarquerez probablement que les interwikis de la colonne de gauche ne sont pas affectés par ce code et traités comme des liens normaux (car il n’utilisent pas la classe « extiw »). Pour les affecter aussi, il faut ajouter l’identification suivant :

a.extiw:visited, #p-lang :visited {
   background-color:#EBF0FF;
}

#p-lang :visited (ou encore #p-lang a:visited) signifiant « tous les liens visités situés dans le conteneur d’id p-lang

L’espace entre les 2 termes est important, car #p-lang:visited signifie « le lien visité ayant l’id p-lang » et n’aurait -forcément- pas l’effet voulu.

Liens externes

Les liens externes visités apparaissent en italique (de part notre définition du a:visited) mais par contre, ont un fond transparent (c’est défini comme ça dans le CSS interne du logiciel) : la couleur que nous y avons mis n’apparait donc pas.

On peut bien entendu changer ça, mais l’apparance actuelle me va très bien :) Pour ceux d’entre vous que ça tente, la classe d’un lien externe est « external »

Résultat

couleur_liens

Edit :

  • le fond vert est trop marqué  x_x, je l’eclaircirais à l’occasion, genre #BFB
  • Voir le commentaire de Lucasbfr pour ne pas avoir le logo en haut à gauche sur fond bleu (car c’est un lien aussi mine de rien :)
Publicités

6 Réponses to “Personnalisons Wikipédia : les liens”

  1. Coyau said

    Oui… Et tant que j’y suis, je peux aussi essayer d’écrire une encyclopédie avec mes petits doigts boudinés… ;)

  2. DarkoNeko said

    non, tu peut par contre essayer de fixer une valeur differente par namespace à la main :)

  3. Coyau said

    Pour le vert, j’ai mis du #E5FFE5 (c’est plus dans les clairs comme les autres fonds).

    Après, comme toutes les pages n’ont pas la même couleur de fond, ça marche plus ou moins bien selon les cas. Il n’y a pas moyen de faire un fond qui au lieu d’être fixé sur sa valeur, s’additionne à celle du fond ? Histoire que le contraste soit le même sur les fonds de toutes les couleurs.

  4. Lucasbfr said

    Tres bonne idée, je viens de l’appliquer chez moi.

    Ne pas oublier

    #p-logo a
    {
    background-color:transparent;
    }
    cependant, ou le logo Wikipedia va très vite se chopper un fond transparent :)

    Il faut aussi ne pas oublier de mettre des a. devant les :visited (sinon, c’est overridé par les css du site qui sont parfois plus spécifiques)

    http://en.wikipedia.org/wiki/User:Luk/monobook.css

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s