Changez l’aspect d’un site : exemple de Wikipédia

Article publié le 17 février 2019 par Vincent Poulailleau - 2 minutes de lecture - 400 mots

J’ai la chance d’avoir un grand écran de PC avec beaucoup de pixels. Mais quand je vois Wikipédia, cela donne :

Comme vous pouvez le constater, les lignes de texte sont interminables. À la fin d’une ligne, l’œil cherche avec difficulté où est le début de la ligne suivante. Et les titres sont difficiles à voir.

Mon idée n’est pas de rendre Wikipédia jolie, je ne suis pas graphiste. Mais je veux au moins la rendre lisible facilement.

Dans Firefox (un des rares navigateurs qui respecte notre vie privée), il est possible de configurer l’affichage de chaque site web. Voici Wikipédia avec mon navigateur :

Comment arriver à ce résultat ? Il faut modifier un fichier de notre profil Firefox, ce fichier s’appelant userContent.css. Pour savoir où est votre profil, soit vous cherchez ce fichier dans votre ordinateur, soit vous allez sur http://kb.mozillazine.org/Profile_folder. Chez moi, sous Linux, il est ici : /home/vincent/.mozilla/firefox/eaylrieu.default/chrome/userContent.css.

J’ai ajouté dans ce fichier :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


@-moz-document domain(wikipedia.org) {
  #content {
    max-width: 50rem !important;
    margin: auto !important;
  }

  #content p,
  #content li,
  #content dd {
    line-height: 30px !important;
    margin-bottom: 2rem !important;
    font-size: 0.95rem !important;
    font-family: « Palatino Linotype », « Book Antiqua », Palatino, serif !important;
  }

  #content li {
    margin-bottom: 0.5rem !important;
  }

  #toc li {
    margin-bottom: 0rem !important;
  }

  #content h1,
  #content h2,
  #content h3 {
    background-color: lightskyblue !important;
    margin-top: 4rem !important;
    margin-bottom: 1rem !important;
    box-shadow: 1rem !important;
    text-align: center !important;
    border: 1px solid #bfbfbf !important;
    box-shadow: 10px 10px 5px #aaaaaa !important;
  }

  #content h1 {
    font-size: 4rem !important;
  }

  #content h2 {
    font-size: 3rem !important;
  }

  #content h3 {
    background-color: lightgreen !important;
    font-size: 2rem !important;
  }

  #content .mw-editsection {
    display: none !important;
  }
}

Je vous laisse utiliser ce code comme point de départ, je publie ce code sous licence CC0, en gros vous faites ce que vous voulez avec. Notez qu’en France on ne peut pas facilement mettre du code dans le domaine public (il faut être mort depuis plus de 70 ans, ce qui n’est pas mon cas 😉).

Ce qui nous donne au final :

Tags :