Personnalisons Wikipédia : changer l’apparence du « vous avez un nouveau message » (2)

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

La personnalisation d’aujourd’hui vous permettra de changer l’apparence  du sempiternel « vous avez un nouveau message » (voire le cacher) à l’aide d’un peu de CSS  – à ne pas confondre avec mon billet d’hier qui indiquait comment en changer le texte (et qui explique pourquoi j’ai un truc louche dans mes captures d’écran ci dessous :)

Les codes d’aujourd’hui utilisent des notions CSS déjà vues dans les précédents billets, elles ne seront donc pas détaillées ici.

Le div sur lequel nous travaillons possède la classe « usermessage ». Faites vous faire un édit sur votre page de discussion, et il vous suffira de prévisualiser votre code (le bandeau apparaissant sur la page de monobook que vous serez en train d’éditer) jusqu’à être satisfait des couleurs.

En rouge

.usermessage {
  background-color:#FAA;
  border-color:red;
}

En bleu

.usermessage {
  background-color:lightblue;
  border-color:blue;
}

En vert

.usermessage {
  background-color:lightgreen;
  border-color:green;
}

En jaune

(celui là me pique un peu les yeux)

.usermessage {
  background-color:lightyellow;
  border-color:yellow;
}

ou en un peu plus foncé,

.usermessage {
  background-color:yellow;
  border-color:#0AA;
}

Voire transparent

J’ai laissé la bordure, mais c’est retirable aussi (border:0px; ou mettez la couleur en transparent)

.usermessage {
  background-color:transparent;
  border-color:#CCC;
}

Divers

Réduire la taille du bouzin et masquer l’image par défaut

.usermessage {
  font-size:x-small;
  padding:1px 10px; /* marge interne du div : 1px en hauteur, 10px en largeur */
  width:250px;
  /* ici les couleurs que vous voulez ; perso j'ai choisi bleu */
}

.usermessage img {
  display:none;
}

Faire clignoter le texte (pour les plus masochistes d’entre vous) :

   text-decoration:blink;

En dernier recours, si vous n’en pouvez plus, vous pouvez aussi faire totalement disparaitre le bandeau

.usermessage {
  display:none;
}

Et voili le travail