Firefox

firefox logo

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

On ne présente plus le petit panda roux, le Firefox : le navigateur libre de Mozilla.

Ce navigateur, en plus d’être multiplateforme 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 moi ou non, le petit panda réserve pas mal de surprises !

Télécharger Firefox

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 :

firefox : options

Onglet « Général »

On peut par exemple y changer l'adresse de la page d'accueil : firefox : change homepage On peut aussi choisir son dossier de téléchargement des fichiers. Le plus pratique, je trouve, c'est de faire en sorte qu'il nous demande où enregistrer le fichier à chaque fois :firefox : change downloads location

Onglet « Onglets »

On y règle les options relatifs aux onglets. C'est à vous de voir comment utiliser ces options. Je n'attirerais votre attention que sur la case Toujours afficher la barre des onglets : cette case permet de garder la barre d'onglets visible même s'il n'y a qu'un seul onglet d'ouvert. Décocher cette case permet de gagner un peu de place à l'écran si vous n'utiliser que très peu les onglets.

Onglet « Contenu »

Permet de régler les polices d'écritures, les couleurs et la taille du texte dans les pages web. On peut aussi paramétrer l'activation du JavaScript ou du Java.

Onglet « Applications »

Cet onglet n'est pas souvent utilisé. Il permet de choisir les logiciels à ouvrir au cas où Firefox rencontre un fichier spécifique. Par exemple, si Firefox rencontre un fichier PDF, il l'ouvrira en général avec Adobe Reader, si cela ne vous convient pas, vous pouvez le changer ici.

Onglet « Vie privée »

Options relatifs 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.

Onglet « Sécurité »

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.

Onglet « Avancé »

Des options plus techniques, qu'il ne faut pas toucher sans savoir ce que c'est. On peut y changer les paramètres proxy ou les préférences relatifs aux chiffrements des pages sécurisés.

Sommaire

Ajouter des fonctionnalités avec les extensions

L'un des plus gros atouts de Firefox, ce sont ses extensions : des petits ajouts pour Firefox qui lui donnent des fonctionnalités supplémentaires. Voici une sélection de modules que je trouve extrêmement pratiques :

Web Of Trust

Cet add-on, dont le nom est souvent abrégé en « WOT » nous signale les liens de sites web dangereux dans une page web.
Voici un exemple :firefox : WOT addon, dangerous sites finder ! Vous voyez les ronds rouges et verts ? Les rouges sont des sites potentiellement dangereux (phishing, virus, logiciels piratés, etc.). Sans WOT, il est impossible de savoir que vous courrez un risque.

Je vous recommande très fortement de l'installer. Chacun peut noter un site comme bon ou mauvais, et globalement, ce n'est pas un Chaos car les utilisateurs jouent le jeu. Bien entendu, ce service est gratuit et vous n'avez pas besoin de contribuer pour bénéficier de sa protection. WOT vous protège en vous évitant de télécharger des logiciels plein de virus, là où les autres logiciels ne font que traquer les virus. C'est mieux de ne pas les attraper dés le début non ?

Ad Block Plus

Vous n'en avez pas marre des tonnes de publicités sur certaines pages web ? Si ? Alors Ad Block Plus est fait pour vous !

Ce module très populaire parmi les utilisateurs de Firefox élimine presque à 100% les publicités, et il est prêt à l'emploi en 3 clics ! Les publicités ne sont plus chargés, donc on surfe plus vite !

Astuce : gagnez de la place à l'écran en plaçant l'icône d'Adblock en bas, dans la barre d'état :

Flash Block

Le Flash permet de faire de belles choses sur les pages web. Malheureusement, certains sites en abusent et vous balances des tonnes de boites ou fenêtres qui mettent du temps à charger et monopolisent la puissance de l'ordinateur.

Flashblock empêche les éléments en flash de de lancer tout seul. Il suffit d'un seul clic pour les ouvrir. On gagne en rapidité d'affichage et les éléments inutiles ne sont pas téléchargés.

Scrapbook

Un module que j'ai découvert récemment (enfin… plus trop) et qui est devenu mon préféré ! Scrapbook permet de sauvegarder facilement des pages web entières et l'enregistrement se fait bien mieux que enregistrer sous. En deux clics, la page est sauvegardée et je peux même surligner certains passages, retirer des morceaux, les annoter… C'est super pratique pour conserver une page pour le lire plus tard !
Si je commence à avoir une liste énorme de pages, je peux les ranger dans des menus, sous formes de dossiers…firefox : scrapbook addon

Web Développer

Pour tout ceux qui fabriquent des pages web au niveau du code HTML/CSS/JS, ce module est indispensable : il permet d'analyser rapidement et simplement la structure de pages ! Il permet par exemple d'afficher l'ordre d'imbrication des éléments, le niveau d'empilement (avec z-index), etc. Il est super pratique !firefox : web developer addon

Tab Whell Scroll

La page de cette addon affiche : « L'objet de cette extension est de faire une seule chose et de le faire bien : procurer le passage d'un onglet à l'autre avec la molette de la souris. »
Et il le fait.

Sommaire

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.
Sous Linux Ubuntu, je trouve le thème Strata Human très beau. Sous Windows, j'aime bien Strata Reloaded.


Personnaliser l'interface

Les thèmes, c'est beau ! Pouvoir choisir les icônes et leurs positions à l'écran, c'est mieux ! Ça tombe bien, c'est possible sous Firefox !
À coté de la barre des menus (“marques pages”, “outils”, “aide”, etc.), faites un clic droit puis personnaliser. Vous pouvez alors ajouter des icônes, les déplacer, en supprimer… Au final, ça vous donne quelque chose de personnalisé.firefox : personalize windox

Hmm… : je trouve que l'interface de Firefox prend pas mal de place à l'écran. J'ai eu l'idée de mettre la barre des marques pages en haut, à coté de la barre des menus. Lorsque vous êtes dans le mode “personnaliser” de Firefox, vous n'avez qu'à faire un glisser déposer de l'élément Éléments de la barre personnelle tout en haut. J'ai tout expliqué ici. On peut alors désactiver la barre personnelle et ça fait de la place de gagnée !

Cette astuce m'est particulièrement pratique, mon écran n'étant pas super haut, c'est un réel gain de place. On peut aller encore plus loin avec le module Personal Menu, j'ai expliqué ça . Cela permet d'utiliser Firefox même sur les mini-portables, qui ont un tout petit écran.

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 regarder la page consacrée ;-)

Sommaire

Optimiser Firefox

À son origine, Firefox était un navigateur rapide et léger. Malheureusement, au fil des ans, des ajouts ont été faits dans Firefox, et l'ensemble est devenu un navigateur plutôt lourd et lent. On peut donc tenter d'accélérer tout ça… Le résultat n'est pas super mais ça aide toujours un peu :

Modifications internes…

Firefox permet d'effectuer des modifications internes. Ces paramètres sont visibles en tapant about:config dans la barre d'adresse. Il faut cependant faire gaffe à ne pas faire n'importe quoi !!
Voici, sur CCM, une liste de paramètres que vous pouvez changer pour tenter de surfer plus vite.


Alléger Firefox

Firefox devient plus gourmand en RAM et plus lourd si vous ajouter des modules complémentaires. On peut donc faire le tri dans les modules. Supprimer ou désactiver ceux que vous n'utilisez pas est toujours bénéfique.

Désactiver l'historique évite à Firefox de charger un gros fichier (10Mo) à chaque lancement. On peut aussi paramétrer l'historique pour que Firefox ne garde que les liens visités des XX derniers jours. Plus le nombre est petit, plus Firefox se lancera rapidement.

Depuis la version 3, Firefox dispose de la barre d'adresse "intelligente" : on commence à taper des mots clés ou une adresse web et Firefox nous sort tout ce qui correspond et qui se trouve dans l'historique. On peut désactiver cet outil si on ne s'en sert pas : tapez about:config dans la barre d'adresse et recherchez la clé browser.urlbar.maxRichResults. Il s'agit du nombre de suggestions que la barre vous donne en cherchant dans les marques pages et/ou l'historique. Pour la désactiver, mettez "-1" (sans les guillemets).

La clé browser.urlbar.autoFill correspond à l'auto-complétion de la barre lorsque l'on commence à taper. Mettez là valeur à « false » en double cliquant dessus si c'est à « true » pour désactiver cette fonction.


Défragmenter Firefox

Firefox stocke ses fichiers comme l'historique ou les marques pages dans des fichiers SQLite. Il se peut que ces fichiers se fragmentent. Les défragmenter permet d'accélérer le chargement de Firefox.

Voici une astuce pour défragmenter les fichiers de Firefox.

Sommaire

Voilà ! Normalement vous connaissez les bases de Firefox et vous savez surfer avec. Vous savez aussi le personnaliser avec des extensions.
Si vous êtes curieux et que le bricolage ne vous fait pas trop peur, je vous invite à voir la suite de ce tutoriel. La partie suivante vous donnera en effet les bases pour modifier de A à Z l'apparence de Firefox grâces aux feuilles de styles, et plus particulièrement le fichier userChrome.css.

Sommaire

userChrome ?

Ce fichier 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 !

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 !


Sommaire

Changer le fond dans l'interface


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 :

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
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 !

Et les pages d'avertissements :

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/