Accueil - Blog
Ubuntu
Windows
Tutoriels
Pokemon
Divers
Sommaire
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 !
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) :
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)
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.
Dans la partie suivante, vous trouverez quelques exemple…
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 : 
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;
}
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 : 
Une astuce de ma part vraiment sans intérêt…
Par défaut, cette barre est verte sous Windows :
Il est possible de l'agrandir, de changer sa couleur, d'y mettre une image de fond… Voyons tout ça !
/* barre de chargement agrandis */
.progress-bar {
width: 300px !important;
}
Cela donne ça :
/* 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) :
/* 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)
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;
}
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; }
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) : 
Site https : 
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
}
Pour le moment, c'est pas mal hein ? Pour peu que l'on s'y connaissent 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 :
…Mais les CSS permettent bien plus : on peut changer la couleur de chaque menu, le fond, la police, la taille… Voyez donc :
Bon, 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; }
… 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;
}
É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.
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.
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;
}
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) :
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 :
Le 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;
}
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 !
| index | page 1 | page 2 | page 3 | page 4 |
