mercredi 9 mai 2007

Personnaliser Firefox

L'une des caractéristiques les plus intéressantes (et passionnante !) chez Firefox, est son extraordinaire capacité de personnalisation..

Schématiquement, il existe 3 niveaux de personnalisation :
  • Le niveau 0, qui comme son nom l'indique, consiste à utiliser Firefox "brut de décoffrage", c'est à dire sans thème ni extension.
  • Le niveau 1, qui consiste à équiper Firefox de modules complémentaires (thèmes ou extensions, il en existe des milliers !) en fonction des besoins et /ou des goûts de l'utilisateur. On choisit son module, on l'installe, parfois on règle quelques options, et c'est fait !
  • Le niveau 2, qui passe par l'insertion directe de code, arme absolue s'il en est, et qui ouvre des espaces quasiment illimités :))
C'est bien entendu à ce dernier niveau que nous allons nous intéresser, mais ici avec un exemple très simple pour en montrer le principe.

Tout d'abord et dans chaque profil, il existe 4 fichiers "utilisateur" qui peuvent être nourris pour agir sur les différentes interfaces du programme :
  1. Le fichier prefs.js, qui sauvegarde vos préférences personnelles (options du programme et des extensions). Ce fichier est géré directement par Firefox, et il est préférable de ne pas y toucher manuellement.
  2. Le fichier user.js, qui permet de rentrer manuellement des instructions personnelles, notamment celles destinées à modifier la config de base de Firefox. Je l'utilise par exemple pour définir un seul fichier de "Marque-pages" pour l'ensemble de mes profils.
  3. Le fichier userContent.css qui permet d'agir sur le contenu des pages web (polices, taille et couleurs des textes, hyperliens, affichage, etc..).
  4. et enfin le plus intéressant, le userChrome.css, qui permet de modifier l'interface d'affichage de Firefox (menus, barres, onglets, etc..)
Une extension très utile pour éditer et modifier facilement ces 4 fichiers : ChromEdit [fr], que je vous conseille donc d'installer si vous souhaitez faire quelques tests de customisation :)). Par exemple, imaginons que vous vouliez mettre en texte gras bleu et centré le nom de l'onglet actif dans Firefox : dans le menu "Outils" ouvrez ChromEdit, cliquez sur "userChrome.css", et ajoutez à la fin les lignes suivantes (par simple copier/coller) :

* Onglet actif: */
tab[selected="true"] {
font-weight: bold !important;
color: blue !important;
text-align: center !important;
}

Sauvegardez, fermez et relancez Firefox, vous devriez avoir désormais ceci :



Voilà, le but de ce petit billet étant donc de vous montrer que ce n'est pas forcément très compliqué à réaliser, si cette technique de personnalisation vous intéresse, vous trouverez de nombreux exemples (à copier/coller) dans ce remarquable sujet [fr], ou encore ici [en] mais en anglais.

En somme, et entre les modules, les thèmes [fr] et le code, de quoi complétement transformer votre Firefox ! :)

.

6 commentaires:

Anonyme a dit…

Hello Gab,

Je me demandais lorsque par exemple : une extension (tabmix plus) fait le même travail qu'un code dans le userchrome, à savoir diminuer la taille des onglets en largeur dans ce cas-ci.
==> qu'est-il préférable de choisir pour le bien-être de Firefox ?
Une extension en moins c'est mieux ? Ou bien y-a-t'il une autre bonne raison de choisir une ligne de code pour le faire ?
(c'est plus intéressant de le faire soi-même avec le code, je crois^^)

Et une autre question dont je ne parviens pas à trouver la solution : je voudrais bien réduire (aussi) la taille en hauteur des onglets dans le thème Windows Media (juste pour voir ce que ça donnerait). Comment faire, tout en gardant le bel aspect de l'onglet (avec les bords) sans qu'il n'ait l'air d'être coupé en deux ?

J'espère que c'est compréhensible tout ça :s

Heu... et enfin : avec le thème Charamel il me semble que lorsqu'on affiche la colonne à gauche des marque-pages on ne peut pas la réduire autant qu'avec d'autres thèmes (il y a un moment où on ne peut plus la diminuer) : il y a un bidouillage à faire pour "arranger" ça ?

Chuis difficile, hin^^

Je dois aller poser mes questions tordues sur un forum ? ;-)

"Miss Réductrice"! :-)

Gabuzo38 a dit…

Hello Miss :)

Il est clair que si ton besoin se limite à la taille des onglets, le code, dans la mesure où tu le maîtrises, est préférable. Si les MozDevs se sont donnés la peine de mettre à notre disposition un outil aussi remarquable que le userChrome.css, ce serait dommage de ne pas en profiter !

Ceci étant, Firefox a atteint un degré de maturité qui lui permet d'encaisser sans broncher un nombre impressionnant d'extensions, qui plus est lorsque l'environnement (CPU et RAM) est performant. Ça ne vaut donc vraiment pas la peine de se passer d'une extension telle que TabMix Plus, au regard de sa puissance et de la kyrielle de fonctionnalités qu'elle est capable de gérer.

Pour la réduction en hauteur de la taille des onglets, oui, on peut aussi la personnaliser avec le userChrome.css. J'ai testé le code et ça marche nickel, y compris sous Windows Media 11 ;) Mais perso, je trouve que ça gâche un peu l'équilibre du thème, et de plus ça écrase les favicons, ce qui est mal :)

Sinon pour Charamel, c'est vrai que Lucx a dû verrouiller une largeur mini (autour de 10% de l'écran) pour la sidebar. Ça ne me choque d'ailleurs pas, car en dessous on voit plus grand chose. C'est peut-être modifiable, mais bon, avec ce thème en particulier, il vaut mieux éviter la bidouille ! :)

Anonyme a dit…

Gaaaab,
bonjour :-)

J'ai essayé plus par curiosité que par besoin ton code :

* Onglet actif: */
tab[selected="true"] {
font-weight: bold !important;
color: blue !important;
text-align: center !important;
}

Il n'y a rien qui change :-/ J'ai bien copié le code dans le userChrome.css (j'ai essayé dans différents profils) mais rien à faire : ni bleu, ni gras, ni centré comme sur ta capture d'écran.
C'est grave ? J'ai loupé une étape ?

Par contre j'ai essayé le code vers lequel tu m'envoies pour diminuer la hauteur des onglets: ça marche :-) mais c'est vrai que ce n'est pas terrible comme look pour le thème Windows Media 11 (ils ont l'air de souffrir les petits onglets).
Donc je laisse la hauteur d'origine en place.

Pour le thème Charamel, ok je ne toucherai à rien dans la barre des marque-pages. C'était un peu par curiosité aussi^^ que je demandais.
(et peur d'un bug dans le profil)

En résumé si j'ai bien saisi; lorsque je trouve un code à mettre dans userChrome je n'hésite pas, et je n'hésite pas non plus à rajouter des extensions quand je ne trouve pas la méthode via le userChrome (je débute, ça doit se voir).

Un grand merci pour toutes les explications :-)

Un prochain sujet ? : Comment changer les barres d'ascenseur (pour qu'elles soient aussi belles que celles du thème Noia eXtreme ou du moins qu'elles ressemblent un peu à celles d'Aluminium Kai)?
:D


"miss Bavarde"

Gabuzo38 a dit…

Pour la mise en valeur de l'onglet actif, certains thèmes ou extensions (comme Tab Mix Plus qui gère aussi ce type de personnalisation) peuvent bloquer ou perturber le code.

Teste dans un profil vierge, ou avec le thème d'origine, et tu verras que ça fonctionne très bien ;)

Pour les barres d'ascenseur, y'a effectivement moyen de les colorier, mais obtenir un graphisme plus sophistiqué avec arrondis et couleurs dégradées est une autre histoire ! :)

Anonyme a dit…

Bon alors après maints essais (dans 1 profil vierge tout neuf, d'autres profils pas vierges du tout 8-)...finalement ça marche dans tous mes profils, vierge y compris, mais seulement avec ceci au début :

#main-window tab label
{
font-weight: bold !important;
color: blue !important;
text-align: center !important;
}

voilou, je suis rassurée :-)

miss au boulot

Anonyme a dit…

Gab,

J'ai continué à chercher parce que ça m'énervait que ça ne fonctionne pas avec ton code.

Donc voilà comme ça, ça marche avec ton code et la même ligne au début :

/* Onglet actif: */
tab[selected="true"]
{
font-weight: bold !important;
color: blue !important;
text-align: center !important;
}

C'est la / du début qui manquait,
ou le retour à la ligne ... ? je sais pas.

miss^^ :-)