Accueil - Blog
Ubuntu
Windows
Tutoriels
Pokemon
Divers
Sommaire
On vient de voir le fichier userChrome.css : il permettait de modifier l'interface de Firefox. Il existe encore un autre fichier : c'est le fichier userContent.css. Ce fichier gère tout ce qui se trouve dans la zone d'affichage de Firefox :
Ce que vous mettrez dans ce fichier se répercutera donc directement sur l'affichage des pages web. Pour les connaisseurs, il agit comme du CSS normal, sauf que là, le CSS n'est plus propre au site web visité, mais au navigateur.
Un petit exemple ?
Mettez ceci dans le fichier et tous les sites auront une police blanche sur fond noir :
html * {
color: white !important;
background: black !important;
}
Voici ce que donne cette méthode bourrin sur la page de Google :
Bien évidement, on peut aussi changer la police, sa taille ou tout autre chose.
Si par exemple vous voulez systématiquement mettre la police des pages en plus grand, on peut mettre ça :
html {
font-size: 120% !important;
}
Quand je dis « en fond de Firefox » je parle du fond de la page blanche, quand on ouvre un nouvel onglet. C'est totalement inutile, donc indispensable. Effectivement, on peut mettre une image ou une couleur en fond. Il suffit de mettre votre image dans le dossier chrome et d'utiliser ce code :
@-moz-document url("about:blank") {
html body {
background: url(image.jpg) !important;
}
html {
width: 100% !important;
height: 100% !important;
}
}
L'image sera repété.
Si vous voulez mettre un logo centré verticalement et horizontalement, mettez :
@-moz-document url("about:blank") {
html body {
background: url(image.jpg) center no-repeat !important;
}
html {
width: 100% !important;
height: 100% !important;
}
}
Voici ce que j'obtiens en ajoutant ma touche perso : 
Mettre du CSS directement dans le fichier aura pour effet d'appliquer ce code à tout ce qui se trouve dans la fenêtre du navigateur : tous les sites web donc. Ainsi le code que j'ai donné obtenir la page de Google en noir mettra aussi les autres sites en noir.
Heureusement, Firefox peut appliquer des CSS ou même un fichier CSS à n'importe quel site, je veux dire, des CSS ciblés.
Un exemple serait de mettre la page google.fr en bleu, mais le page google.nl en orange, etc.
Voici la syntaxe, que j'ai trouvé sur geckozone (où tout ce qui est expliqué sur ma page est détaillé d'ailleurs, mais pas aussi simplement :-).
@-moz-document
domain(nom_de_domaine du site 1),
domain(nom_de_domaine du site 2),
domain(nom_de_domaine du site n) {
code CSS habituel
}
Par exemple, pour mettre un fond noir + liens en rouge sur toutes les pages de ce site, ainsi que du site commentcamarche.net :
@-moz-document /* syntaxe de firefox */ domain(lehollandaisvolant.net), /* site 1 (+ virgule à la fin) */ domain(commentçamarche.net) { /* site 2 (+ accolade) */ body, body * { /* les éléments, classes… */ background-color: black !important; /* propriétés */ } /* on ferme le css de l'élément */ a { color: red !important; } } /* on ferme les CSS des domaine */
Voilà pour affecter du CSS à un domaine entier, mais on peut aussi mettre une adresse partielle :
@-moz-document url-prefix(adresse_http_partielle) {
mes css
}
Une adresse partielle, c'est par exemple, http://lehollandaisvolant.net/tuto/. Le code n'affectera que les pages dans mon dossier "tuto" et non les tutos sur Ubuntu ou Pokémon.
Et enfin, voici pour le CSS page par page :
@-moz-document url(adresse_http_précise) {
mes css
}
ici, il faut mettre l'adresse exacte de la page.
Bon ! Maintenant, vous avez ce qu'il faut pour faire ce que vous voulez ! Il ne me reste plus qu'à vous donner quelques exemples !
Sur CCM, les discutions en cours, les discutions résolues, et les discutions sans réponses ont des classes css différentes. J'en ai profité pour mettre en évidence les questions non résolues :
@-moz-document
domain(commentcamarche.net) {
/* discutions en cours */
.disc_reg {
color: black !important;
}
/* discutions sans réponses */
.disc_wait {
color: blue !important;
font-weight: bold !important;
}
/* discutions résolues */
.disc_ok {
color: black !important;
}
}
Voilà ce que ça donne ici :
Sur ce site là, j'ai eu envi de changer le fond. L'image par défaut n'est pas super belle… Si on change le fond par notre propre image, on peut mettre l'image dans le même dossier que le fichier userContent.css. À moins d'indiquer l'url exacte de l'image, mais le mettre en local ne prendra pas de bande passante !
@-moz-document
url-prefix(http://forum.ubuntu-fr.org/) {
body {
background-image: url(ubuntu-body.jpg) !important;
background-attachment: fixed !important;
}
Je vous fais grâce de la capture (j'ai pris cette image en fond)
En revanche, je me suis légèrement amusé et j'ai modifié deux ou trois bricoles. Je vous donne le fichier .css, ainsi que toutes les images. Décompressez l'archive dans votre dossier chrome puis ajoutez ceci au début du fichier userContent.css :
@import url(ubuntu_forum/ubuntu_forum.css);
Et ça donne ceci :
Voici mon fichier .zip, à décompresser dans le dossier chrome de Firefox. Le design ne prendra effet que sur les forums, pas dans la documentation d'ubuntu-fr.org. J'ai utilisé des CSS3, qui devraient marcher avec firefox 3 et plus.
Ouf…
Si vous avez suivi ce tuto, vous pourrez modifier les sites comme vous le voulez. Mais faites gaffe : rajouter votre touche perso sur chaque site est bien joli, mais en ce qui me concerne, je n'aime pas trop dénaturer l'œuvre des autres. L'exemple du style personnalisé du forum d'Ubuntu.org est tout de même assez poussé.
Personnellement, j'utilise ce fichier que pour m'aider, par exemple en mettant en gras certains liens sur CCM :-)
La dernière page contiendra quelques petites surprises, déjà connues de tous (ou pas) que recèle Firefox. Vous trouverez aussi quelques astuces personnelles pour ce navigateur
| index | page 1 | page 2 | page 3 | page 4 |
