Firefox

firefox logo

Attention : ce tutoriel est vieux et certaines explications ne fonctionnent plus avec les versions actuelles de Firefox.

Ce tutoriel est en cours de réécriture pour être compatible avec Firefox v57 « Quantum » et les versions supérieurs à venir.

On ne présente plus Firefox : le navigateur libre de Mozilla.

Pour commencer, Si ce n’est pas déjà fait, téléchargez Firefox et installez-le à partir de cette adresse : mozilla.org/firefox.

Ce navigateur, en plus d’être disponible sur tous les systèmes et libre, présente l'énorme avantage d'être personnalisable à souhait et cela, bien plus que vous ne pouvez le penser !
L'ambition de ces pages est de vous faire découvrir Firefox si vous ne le connaissez pas (partie 1) et/ou de vous montrer comment modifier Firefox comme vous le voulez.
Croyez le ou non, le petit « panda-roux » réserve pas mal de surprises !

Sommaire de cette page :

Options basiques de Firefox

main windows of Firefox

Commençons doucement la découverte de Firefox avec les fonctions basiques, tels que les raccourcis claviers usuels et les options.

Raccourcis clavier usuels

Sommaire

Options de Firefox

Laissez-moi vous présenter les principales options de Firefox. On accède aux préférences de Firefox via :

Onglet « Général »

On peut par exemple y changer l'adresse de la page d'accueil : firefox : change homepage

Personellement je préfère laisser l’adresse vide : ça affichera la page « normale » de Firefox avec les liens de vos sites les plus visités : ça rend la vie plus facile quand on visite souvent les mêmes sites. Cette page peut elle-même être personnalisée en ajoutant des liens spécifiques, par exemple.

Par ailleurs, je vous conseille également de cocher (juste au dessus) la case Afficher les derniers onglets de fenêtres utilisés. Ainsi, vous restaurerez les pages que vous aviez si vous devez relancer Firefox.

Onglet Recherche »

Vous permet de modifier le moteur de recherche par défaut. Si vous ne voulez pas utiliser Google, vous pouvez ainsi prendre DuckDuckGo, qui est moteur de rechercher qui respecte la vie privée.

Onglet « Vie privée et sécurité »

Options relatives au respect de la vie privée de l'utilisateur : on y règle comment Firefox gère l'historique de navigation, les fichiers en cache ou les cookies.

La sécurité : permet de définir les règles que Firefox applique lorsque vous êtes sur un site contrefait ou un site d'attaque. On peut aussi gérer les mots de passe enregistrés. Je conseille de désactiver l'enregistrement des mots de passes : ils sont stockés sur le disque dur et si Firefox les retient, vous ne vous en souviendrez pas mentalement.

Si vous débutez, vous pouvez tout laisser comme c’est ici.

Onglet « Compte Firefox »

Un compte Firefox vous permet d’avoir une sauvegarde en ligne de vos paramètres, marques-pages, historique… Ceci est pratique si vous disposez de plusieurs ordinateurs ou d’un ordinateur et d’un téléphone où vous utilisez également Firefox : les données sont alors synchronisées sur les différents appareils.
Cela vous permet également d’envoyer un onglet d’un appareil à un autre d’un simple clic.

Sommaire

Ajouter des fonctionnalités avec les extensions

Les extensions, sur un programme, sont comme des accessoires que l’ont peut ajouter pour avoir des fonctions supplémentaires. Firefox dispose d’un large catalogue d’extensions, disponible à cette adresse : addons.mozilla.org.

Le système d’extensions a totalement été refait depuis la version 57 de Firefox (novembre 2017) donc beaucoup d’extensions anciennes ne fonctionnent plus. Heureusement, beaucoup d’extensions ont été mises à jour et fonctionnent très bien dans cette version.

Ci dessous, la liste des quelques extensions que j’utilise :

uBlock Origin

Cette extension bloque les publicités dans les pages web. À force d’abus, la pub est devenue pénible et naviguer sans un bloqueur de pub est devenu difficile. Cette extension est donc assez pratique et en plus votre navigation sera largement accélérée.

TextArea Cache

Parfois, un site, un onglet (ou même Firefox ou Windows, ça arrive) plante. Si vous aviez tapé un long commentaire, vous perdez ce que vous avez tapé. Cette extension vous permet de ne plus perdre ce que vous tapez : elle sauvegarde périodiquement le contenu des champs de saisie et vous permet de retrouver ce qui aurait été perdu autrement.

GreaseMonkey

GreaseMonkey est plutôt destiné aux « power-users » (utilisateurs avancés). Il permet de modifier le comportement des pages web en y ajoutant ses propres modifications ou ses propres scripts.

Personnaliser l'interface

Les thèmes

Parmi les extensions de Firefox, il existe une catégorie qui sont les thèmes, pour changer l'apparence du navigateur. Les thèmes prêt à l'emploi sont sur le page officielle

Personnellement j’aime bien l’interface par défaut. Je n’en ai pas installé de particulier. Vous pouvez installer le thème que vous voulez, néanmoins, la suite de ce tutoriel est prévu pour ne fonctionner qu’avec le thème normal de Firefox.

Personnaliser l'interface

Les thèmes, c'est bien, mais pouvoir modifier l’interface du navigateur, c'est mieux ! Ça tombe bien, c'est possible sous Firefox !

Cliquez sur le menu de Firefox, puis personnaliser. Vous entrez alors dans le mode personnalisation de Firefox et vous pouvez glisser-déplacer des éléments comme bon vous semble.

firefox : personalize window

Lorsque vous avez modifié l’interface à votre convenance, en glissant et les icônes pour les mettre où vous voulez, cliquez sur le bouton Terminé en bas.

Bon, personnaliser Firefox avec les thèmes et le choix des icônes n'est plus un secret désormais… Mais on peut aller encore plus loin… Beaucoup plus loin même… Il suffit de vois ci-dessus.

Sommaire

Modifier l’interface en profondeur avec userChrome.css

Firefox dispose de deux fichiers .css : userChrome.css et userContent.css. Ces fichiers sont très puissants et permettent de changer absolument tout ce que l’on veut à l’écran. Vous voulez que les menus s’affichent en rouge ? C’est possible. Vous préférez que les onglets soient un peu plus larges ou plus haut ? C’est possible également. On va voir tout ça dans ce qui suit.

Déjà, le fichier userChrome.css se trouve dans le dossier chrome du dossier du profil (voir ici pour trouver le dossier). Il permet, à l'aide des CSS (langage de mise en page de fichiers HTML) de modifier la taille, couleur, positions de tout l'interface de Firefox. Ce navigateur utilise les feuilles de styles CSS pour l'interface, c'est pratique !

Modifier ce fichier n'est absolument pas dangereux pour Firefox. Si vous voyez que Firefox affiche quelque chose de travers, il suffit de faire annuler, voire de supprimer le fichier userChrome.css.

Cependant, comme tous les langages de programmations et de mise en page, la moindre virgule a son importance, sinon cela ne marchera pas !

Le fonctionnement du langage CSS est tel qu’on cible un élément de l’interface avec son nom et qu’on modifie ensuite des propriétés. De cette façon :

#nomElement {
	propriété_1: valeur1;
	propriété_2: valeur2;
	…
}

Dans Firefox, chaque élément de l'interface possède un nom. Il suffit donc d'appliquer les CSS que l'on veut à chaque éléments. Je commence donc par vous donner les éléments de l'interface et ensuite quelques exemples (trouvés sur le net, et de moi même) :

Sommaire

Éléments de l'interface

Chaque élément possède un nom (id ou class en CSS) et on peut affecter des styles à chacun d'entre eux.
Mon intention première était de faire une liste de tout ça, mais ce serait trop long et pas facile pour vous de vous y retrouver. Voici donc directement les principaux éléments : (je dis « principaux » car ils sont loin d'y être tous)

#toolbar-menubar
#menubar-items
#file-menu
#edit-menu
#view-menu
#history-menu
#bookmarksMenu
#tools-menu
#helpMenu
#nav-bar
#unified-back-forward-button
#back-button
#forward-button
#back-forward-dropmarker
#reload-button
#stop-button
#home-button
#wot-button
#urlbar-container
#urlbar
#identity-box
.textbox-input-box
#urlbar-icons
.autocomplete-history-dropmarker
#search-container
.searchbar-engine-button
#searchbar
.search-go-button
#abp-toolbarbutton
.box-inherit toolbarbutton-menubutton-button
.toolbarbutton-menubutton-dropmarker
#PersonalToolbar
#personal-bookmarks
.bookmark-item
.toolbarbutton-icon
.toolbarbutton-text
.tabbrowser-tabs
.tabs-stack
tabbrowser-tab
.tab-icon-image
.tab-text
.tabs-newtab-button
.tabs-alltabs-button
#browser-bottombox
main windows of Firefox

On peut faire une liste de tous les éléments que l'on veut personnaliser. Voici le code :

<liste des éléments> {
	mon code css;
	}

Les éléments sont à séparer par des virgules.

Pour voir exactement tous les éléments de Firefox, je vous conseil d'installer le module "dom inspector". Il peut analyser les pages, mais aussi la page particulière : chrome://browser/content/browser.xul. C'est la page responsable de l'interface de Firefox.

main windows of Firefox


Dans la partie suivante, vous trouverez quelques exemple…

Sommaire


Sommaire

Masquer les icônes dans les marques pages, ne garder que les noms

Les icônes dans la barre des marques pages prennent de la place. Les retirer permet de gagner de la place mais aussi d'épurer le thème de Firefox (un peu comme sous Safari, le navigateur de Mac OS X).

Ouvrez le fichier chrome avec le bloc note ou un autre éditeur de texte, et entrez-y :

/* masquer les icônes des marques pages */
.bookmark-item > .toolbarbutton-icon {
	display: none !important;
	}

Voici le résultat des marques pages sans les icônes : firefox : nav bar without icons Si vous trouvez que les marques pages sont trop serrés, et pas assez distinguables, ajoutez ceci :

/* espacer les marques pages de 8 pixels */
.bookmark-item > .toolbarbutton-text {
	padding-left: 8px !important;
	}

firefox : nav bar without icons separated


Sommaire

L'inverse : ne garder que les icônes, masquer les noms

Bien sûr, si on veut masquer le texte et n'afficher que l'icône, il faut bien retirer le code précédent : sinon le texte et les icônes seraient masqués.

C'est un moyen très simple d'en afficher un grand nombre à la fois. Pour n'avoir que les icônes, on peut bien sûr éditer chaque marque page de la barre et y mettre un nom « vide », mais ce n'est pas très pratique quand on veut les remettre, c'est pourquoi je préfère utiliser le fichier CSS :

/* masquer le texte des marques pages */
.bookmark-item .toolbarbutton-text {
	display: none !important;
	}

Voici le résultat : firefox : nav bar without the labels


Sommaire

La barre de chargement, en bas à droite

Une astuce de ma part vraiment sans intérêt…
Par défaut, cette barre est verte sous Windows :firefox : default progress-bar Il est possible de l'agrandir, de changer sa couleur, d'y mettre une image de fond… Voyons tout ça !

  • Agrandissement
    Il suffit de mettre dans le fichier userChrome.css les lignes suivantes : (la taille sera 300px de large)
    /* barre de chargement agrandis */
    .progress-bar {
    	width: 300px !important;
    	}

    Cela donne ça :firefox : long progress-bar

  • Changer la couleur et mettre une image de fond
    Voici le code à mettre (remplacez le #ff0000 par une couleur au format hexadécimal de votre choix, celui que j'ai mis est rouge) :
    /* barre de chargement en rouge */
    .progress-bar {
    	-moz-appearance: none !important;
    	background: url(mon_image.png) #ff0000 50% repeat !important;
    	}
    Cela donne ça (image à placer dans le dossier chrome disponible ici) :firefox : red progress bar
  • Exemple de barre arc-en ciel :
    rien de bien sorcier, j'ai juste utilisé cette imagefirefox : rainbow progress bar

Sommaire

Changer le fond dans l'interface

  • Le code suivant mettre la même image de fond derrière la barre des menus, toute les barres d'outils, la barre personnelle, la barre des onglets, et les onglets.
    /* la même image en fond de chaque élément de l'interface */
    menubar, toolbox, toolbar, vbox, tab {
    	background-image: url("mon_image.png") !important;
    	background-color: none !important;
    	}
    Par exemple : un fond métal brossé : (voici l'image utilisée)firefox : brushed bg
  • Ceci permet de mettre une couleur en fond, et une ombre sous le texte de la barre des menus et des onglets :

    /* l'interface en bleu clair et ombre sur le texte */
    menubar, toolbar, vbox, tab {
    	background-color: #b9d1e8 !important;
    	text-shadow: white 1px 1px 2px, white -1px -1px 10px !important;
    	}
    firefox : shadowed bg
  • Mais moi, je suis sous Linux Ubuntu ! J'utilise l'interface Showtime des thèmes bisigi. J'ai remplacé le gris très clair du thème par un gris légèrement plus sombre (#dadada) pour que ça fasse moins mal aux yeux et j'ai décoré Firefox en circonstances :firefox : my ubuntu desing J'ai mis le fond tout en gris (l'arrière barre des onglets aussi) et le texte en gris (pas en noir). Je suis sur qu'avec ce que je vous ait donné ci dessus, vous pouvez y arriver, donc je vous donne le code ici :
    /* tout le texte de l'interface en gris */
    menubar > menu,
    #PersonalToolbar,
    #appcontent,.tab-text,
    .bookmark-item,
    .textbox-input-box {
    	color: #797979 !important;
    /* la barre d'onglet en gris */
    	}
    .tabs-stack {
    	background-color: #dadada !important;
    	}
    /* les éléments du menu sont remis en noir */
    menu .bookmark-item {
    	color: black !important;
    	}
    

Sommaire

La barre d'adresse

La barre d'adresse aussi peut-être un bon élément à personnaliser.
Par exemple, on peut afficher un fond vert quand le site est un site sécurisé (https) :

/* la barre d'adresse devient verte si le site est en https */
#urlbar[level] .autocomplete-textbox-container {
	background-color: #d0f0c0 !important
	}

Site http (normal) : firefox : https white url barSite https : firefox : https green url bar

On peut aussi mettre un fond rouge s'il n'y a aucune suggestion dans l'historique (pas de suggestions de l'awesome-bar):

#urlbar[nomatch] .autocomplete-textbox-container {
	background-color: #d0f0c0 !important
	}

firefox : nomatch red url bar


Sommaire

Changer les menus

Pour le moment, c'est pas mal hein ? Pour peu que l'on s'y connaisse en CSS, et on fait ce que l'on veut !
Continuons et voyons que même les menus peuvent être modifiés : vous voyez la barre des menus, avec Fichier, Édition, Affichage, etc. ? Et bien on va masquer quelques menus ! Comme chacun d'entre eux a un nom, on peut choisir ceux à cacher. Les revoici :

  • Fichier : #file-menu
  • Édition : #edit-menu
  • Affichage : #view-menu
  • Historique : #history-menu
  • Marques-pages : #bookmarksMenu
  • Outils : #tools-menu
  • Aide : #helpMenu
  • Pour ceux qui ont le menu de Scrapbook : #ScrapBookMenu

Pour en cacher un, mettez ce code dans votre fichier userChrome.css

<list de mes menus> {
	display: none !important;
	}

Évidement, remplacez la <#list de mes menus> par vos menus, en les séparant par des virgules. Par exemple, pour masquer les deux premiers, vous mettrez #file-menu, #edit-menu.
Voici ce que ça donne si je supprime les menus Fichier, Édition et le menu aide  :firefox : menu barre transformations

…Mais les CSS permettent bien plus : on peut changer la couleur de chaque menu, le fond, la police, la taille… Voyez donc :firefox : menu personalisationBon, j'avoue que c'est moche, mais j'avais pas d'inspiration… Je vous passe le code pour reproduire cette horreur chez vous :

menubar {
	-moz-border-radius: 5px !important;
	border: 1px solid #00ff00 !important;
	background-color: black!important;
	}
#helpMenu { 
	font-family: 'arial black'!important;
	color: red !important;
	}
#edit-menu , #tools-menu{
	font-family: 'times new roman' !important;
	color: orange!important;
	}
#file-menu, #view-menu {
	font-family: 'comic sans ms' !important;
	color: blue !important;
	font-size: 130% !important;
	}
#history-menu {
	font-weight: bold !important;
	color: purple !important;
	}
#bookmarksMenu {
	font-family: symbol !important;
	color: white !important;
	}

Comme si ça ne suffisait pas, on peut aussi appliquer du style aux menus, lorsqu'ils sont survolés uniquement…

#view-menu[_moz-menuactive="true"] {
	font-family: 'comic sans ms' !important;
	color: blue !important;
	font-size: 130% !important;
	}
#history-menu[_moz-menuactive="true"] {
	font-weight: bold !important;
	color: purple !important;
	}

firefox : menu personalisationfirefox : menu personalisation

… ou alors uniquement quand ils sont ouverts : (ce code met le menu ouvert en rouge et en gras)

menubar > menu[open] {
	color: red !important;
	font-weight: bold !important;
	}

Sommaire

Les icônes de la barre d'outils

Évidement, on peut cacher ceux qui l'on veut, mettre un fond à toute la barre etc., mais je voudrais juste vous montrer cette astuce, que j'ai découvert sur geckozone mais dont la version originale me semblait ne pas marcher. Il s'agit en fait de “combiner” les boutons "actualiser" et "stop" étant donné que l'on ne se sert du premier que si la page est chargé (pas pendant le chargement) et le second uniquement pendant le chargement. On peut ainsi gagner un peu de place.

Pour que cela fonctionne, il faut que vous inversiez les deux icônes, via le menu de personnalisation de l'interface :
clic droit sur un espace vide de l'interface > personnaliser. Les éléments de l'interface devenant amovibles, on peut les inverser.firefox's default context menu Ensuite, il ne reste plus qu'à faire jouer les CSS :

#stop-button[disabled] {
	display:none;
	}
#stop-button:not([disabled]) {
	display:auto;
	}
#stop-button:not([disabled]) + #reload-button {
	display:none;
	}

Voilà ! Redémarrez Firefox et les boutons seront fusionnés. Si l'un des boutons vous manque, la touche Échap équivaut au bouton Stop et la combinaison Ctrl + R à réactualiser.


Sommaire

Les onglets

On peut là aussi inventer ce que l'on veut. On peut supprimer l'icône du site, ou contraire réduire l'onglet de façon à ce que seule l'icône ne reste (et avoir un très grand nombre d'onglets soient visibles).

Je vous passe le code pour faire que l'onglet sélectionné sera plus grande que les autres quand on en ouvre un grand nombre :

/* l'onglet courant fera 200px minimum */
#content tab[selected="true"] {
	min-width: 200px !important;
	}

firefox's large tab


Sommaire

Le menu contextuel

Tout comme la barre de menu, on peut personnaliser les éléments du menu contextuel (le menu du clic droit). Ce menu change en fonction de la page, mais il affiche par exemple les éléments Précédent, Suivant ou Actualiser qui me sont totalement inutile. Voici toute la liste des éléments du menu contextuel (en noir ceux que je juge intéressant à masquer) :

firefox's default context menu
Avant ↑
↓ Après
firefox's default context menu
  • #context-openlink : Ouvrir le lien dans uns nouvelle fenêtre
  • #context-openlinkintab : Ouvrir le lien dans un nouvel onglet
  • #context-sep-open : <séparateur>
  • #context-bookmarklink : Marque ce lien
  • #context-savelink : Enregistrer le lien sous…
  • #context-sendlink : Envoyer un lien vers cette page…
  • #context-copyemail : Copier l'adresse e-mail
  • #context-copylink : Copier l'adresse de la page
  • #context-sep-copylink : <séparateur>
  • #context-viewimage : Afficher l'image
  • #context-copyimage-contents : Copier l'image
  • #context-copyimage : Copier l'adresse de l'image
  • #context-sep-copyimage : <séparateur>
  • #context-saveimage : Enregistrer l'image sous…
  • #context-sendimage : Envoyer l'image…
  • #context-setWallpaper : Choisir l'image comme fond d'écran
  • #context-blockimage : Bloquer les images provenant de…
  • #context-back : Précédent
  • #context-forward : Suivant
  • #context-reload : Actualiser
  • #context-stop : Arrêter le chargement de la page
  • #context-sep-stop : <séparateur>
  • #context-bookmarkpage : Marquer cette page…
  • #context-savepage : Enregistrer la page sous…
  • #context-sendpage : Envoyer la page
  • #context-sep-viewbgimage : <séparateur>
  • #context-viewbgimage : Voir l'image de fond
  • #context-undo : Annuler
  • #context-sep-undo : <séparateur>
  • #context-cut : Couper
  • #context-copy : Copier
  • #context-paste : Coller
  • #context-delete : Supprimer
  • #context-sep-paste : <séparateur>
  • #context-selectall : Sélectionner tout
  • #context-sep-selectall : <séparateur>
  • #context-keywordfield : Ajouter un mot clé pour cette recherche
  • #context-searchselect : Recherche <moteur de recherche> pour « <selection> »
  • #frame-sep : <séparateur>
  • #frame : Ce cadre
  • #context-sep-properties : <séparateur>
  • #context-viewpartialsource-selection : Code source de la sélection
  • #context-viewpartialsource-mathml : Code source le l'élément MathML
  • #context-viewsource : Code source de la page
  • #context-viewinfo : Informations sur la page
  • #context-metadata : Propriétés
  • #context-sep-bidi : <séparateur>
  • #context-bidi-text-direction-toggle : Changer la direction du texte
  • #context-bidi-page-direction-toggle : Changer la direction de la page
Note : les séparateurs sont des séparateurs spécifiques. Il n'y a pas de séparateurs génériques.

Ci dessus, je vous ai seulement montré comment cacher les éléments pour réduire la taille du menu contextuel. On peut aussi mettre de la couleur dans tout ça :firefox crazy context menuLe code de cette horreur est là :

#context-back {
	font-family: 'arial black'!important;
	color: red !important;
	}
#context-forward , #context-sendlind{
	font-family: 'times new roman' !important;
	color: orange!important;
	}
#context-reload {
	font-family: 'comic sans ms' !important;
	color: blue !important;
	font-size: 130% !important;
	background-color: skyblue !important;
	}
#context-bookmarkpage {
	font-weight: bold !important;
	color: purple !important;
	}
#context-stop {
	font-family: wingdings !important;
	color: white !important;
	text-shadow: black 1px 1px 2px,
	             red -1px -1px 10px !important;
	}
#context-savepage {
	font-family: Arial !important;
	color: black !important;
	text-shadow: 0 0 4px white,
	             0 -2px 4px #ff3,
	             2px -4px 6px #fd3,
	             -2px -6px 11px #f80,
	             2px -10px 18px #f20 !important;
	}

Sommaire

Maintenant que l'on a quasiment tout vu (ou plutôt que je pense que vous pouvez faire pas mal de choses avec ce que je vous ait donné), je vous propose d'aller dans la 3ème partie de ce tutoriel et de découvrir le fichier userContent, un autre fichier bien pratique de Firefox !

Sommaire

userContent ?

Principe et différence avec le fichier userChrome.css

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 :userchrome et usercontent 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 :black googleBien é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;
	}

Sommaire

une image en fond de Firefox

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 répétée.
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 : my firefox

Sommaire

Personnaliser chaque site

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 !

Sommaire

spécial CCM !

Mettre en relief les discutions sans réponses

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 */
	.subject {
		color: black !important;
		}
/* discutions sans réponses */
	.noAnswers {
		color: blue !important;
		font-weight: bold !important;
		}
/* discutions résolues */
	.resolved {
		color: black !important;
		}
	}

Voilà ce que ça donne ici :ccm et css : topic sans réponse en gras

Sommaire

spécial Ubuntu.fr

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 :design d'ubuntu forum by lehollandaisvolant
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.

Sommaire

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

Sommaire

Les easter-eggs de Firefox…

Les sous onglets

chrome://browser/content/browser.xul

Sommaire

Les pages spéciales…

Ce que j'appelle les pages spéciales de Firefox, sont les pages en about:. Vous connaissez about:config ? Et bien, y'en a plein d'autres, plus ou moins utiles !

  • about:config : permet de modifier des paramètres systèmes de Firefox. Ici par contre, il faut faire très attention à ce que l'on fait.
  • about:cache : permet de visualiser les fichiers qui se trouvent dans le cache mémoire ou cache disque de Firefox.
  • about:rights : affiche vos droits en tant qu'utilisateur de Firefox.
  • about:license : Affiche la licence MPL (Mozilla Public Licence) de Firefox.
  • about:mozilla : affiche un extrait du livre de Mozilla. Cette extrait varie en fonction de la version de Firefox.
  • about:robots : montre un petit message humoristique en rapport avec les robots et les trois lois de la robotique.about:robots firefox easteregg
  • about:plugins : montre en détail la liste des plugins installés sur Firefox. Pratique.
  • about:credits : une liste des personnes ayant contribué à Firefox.
  • about:logo : affiche le logo en grand de Firefox.
  • about kitchensink : une petite animation « ascii art » en XML. (merci à Lynd pour celui là ;-)
  • about:buildconfig : des informations sur la compilation des sources ayant donné la version que vous utilisez.
  • about:crashes : informations à propos des rapports d'erreurs que vous avez envoyés par le passé.
  • about:privatebrowsing : page d'accès à la navigation privée.
  • about:support : informations pour le débuggage (en cas de plantage.

Et les pages d'avertissements :

  • about:certerror : avertissement sur les pages non certifiés. Les SSL c'est bien, mais encore faut-il que l'on vérifie les certificats…
  • about:blocked : attention, page contrefaite !
  • about:effacer_internet : euh… non, j'ai du me fourvoyer là…

Sommaire

Petites astuces personnelles…

Organiser ses marques pages !

Firefox propose un système d'organisation des marques pages qui est bien pratique. Si vous n'avez que 5 ou 6 favoris, ok, pas la peine… Mais si, comme moi, vous voulez toujours garder une trace d'un lien utile, commencez par faire des dossiers dans le menu des marques pages ! Ensuite, organisez chaque nouveau site dans le bon dossier ! C'est plus facile que de trier 500 sites lorsque votre collection de sites préférés aura atteint des proportions énormes…

Le raccourci Ctrl + D permet de faire d'un site directement un marque page. À vous de rajouter les étiquettes. Les mots clés en quelque sortes. Ils serviront aussi à vous y retrouver.

Faire un raccourcis about:config

Si vous bricolez souvent des clés du registre de Firefox, via la page about:config, il est plus pratique d'en faire un raccourcis. Si en plus la barre de recherche intelligente est activée, vous commencez à taper et hop ! Firefox vous propose directement d'y accéder !
C'est tout con comme idée, mais c'est super pratique à la longue !

Un aperçu des onglets.

Changez simplement la clé browser.allTabs.previews à True dans about:config.

Quand vous cliquez ensuite sur la petite flèche à coté des onglets, vous aurez une prévisualisations ! Firefox native tabs preview

Sommaire

Wow… Un nouveau tuto qui s'achève pour moi, et une page que j'espère utile pour vous !

J'ai passé pas mal de temps sur ces pages, et j'ai beaucoup appris moi même sur Firefox. La liste des choses que j'ai dit sur Firefox est cependant loin d'être exhaustive, aussi ce tuto n'a pas la vocation de rassembler tout sur Firefox, mais un maximum de choses que j'ai jugé utile…

Sommaire

page créée un octobre 2010 — mise à jour le 26 novembre 2012
Adresse de la page : http://lehollandaisvolant.net/tuto/firefox/