Personnalisons Wikipédia : les liens

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

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 :)