MISE À JOUR 16/10/2014 : la sortie de Firefox 33 rend cette page obsolète (l’astuce ne marche plus).
Pour continuer à avoir une barre de signets verticale, utilisez cet module : Vertical Toolbar.
Si vous mettez à jour après avoir utilisé mon astuce ci-dessous, vous pouvez masquer la barre personnelle et supprimer les fichiers userChrome.js et userChrome.css.


L’un des challenges sur un navigateur c’est d’avoir le plus de choses à l’écran pour tout avoir à porté de mains (options, favoris…) sans trop réduire la place à l’écran.

Le navigateur Opera permet d’agencer les barres d’outils dans tous les sens, y compris verticalement : les écrans étant toujours plus large que haut, je préfère mettre le plus de choses sur les côtés et ainsi avoir de la place en hauteur. très pratique.

Firefox permet aussi de le faire, en bidouillant un peu : avant d’avoir un menu unifié, je plaçais mes icônes à côté de la barre d’outils, comme ici. Maintenant, je ne peux plus : ce sont les onglets qui ont pris cette place.

L’avantage de Firefox, c’est que l’interface elle-même est un simple arbre « DOM » : donc du XML ! Et on peut y appliquer tout le CSS et le Javascript que l’on veut. C’est d’ailleurs ce que font toutes les extensions.

Dans ce qui suit, vous verrez comment avoir une barre latérale pour vos favoris, comme ça :
firefox astuce barre latérale
Ce qu’il faut avant de commencer :
  • Installer le module userChrome.js : il permet de faire des fichiers JS utilisateurs.
  • Créer un fichier userChrome.js dans le dossier « chrome » du dossier de profil de Firefox.
  • Créer un fichier userChrome.css dans le même dossier.

Ouvrez les deux fichiers (css et js) dans un éditeur de texte et copiez y ce qui suit :

Dans le fichier JS :
document.getElementById('PlacesToolbarItems').orient = "vertical";

Dans le fichier CSS :
#PlacesToolbarItems {
    width: 30px!important;
    height: 100%!important;
}
#PersonalToolbar {
    position: fixed!important;
    top: 60px!important;
    right: 0!important;
    width: 30px!important;
    height:100%!important;
}
#personal-bookmarks {
    width: 30px;
}
.bookmark-item .toolbarbutton-text {
    display: none !important;
}
#browser, #browser-bottombox {
    margin-right: 30px!important;
}

Enregistrez alors les fichiers et redémarrez Firefox.
Normalement ceci marchera partout, quelque soit la version de Firefox supérieure à la version 4.

La seule chose qui peut éventuellement demander une adaptation de votre part, c’est le top: 60px!important; : peut-être aurez-vous besoin de mettre 100px ou 80px pour éviter que la barre latérale ne déborde sur l’interface en haut.

22 commentaires

gravatar
Smokey a dit :

Bonsoir,

sympa comme astuce, je viens de l'appliquer. Par contre y a-t-il un moyen d'avoir la barre de défilement à droite de cette barre et non à guauche?

gravatar
Guenhwyvar a dit :

@Smokey : T'as qu'à mettre les raccourcis à gauche, logiquement en remplaçant les deux « right » par des « left », ça devrait marcher.

gravatar
Kherua a dit :

Perso, ayant zéro connaissance technique, j'utilisais depuis des années l'addon "All-in-one Sidebar", et j'y ai tout mis, les options comme mes extensions (sauf Lazarus, mais on n'a pas besoin tous les jours d'accéder à son menu non plus...).
Du coup je n'ai plus que la barre d'adresse et celle des onglets, tout le reste est en panneaux latéraux:
https://pix.toile-libre.org/upload/original/1369797901.png

https://addons.mozilla.org/fr/firefox/addon/all-in-one-sidebar/?src=ss

gravatar
llk a dit :

Si tu fait la course à la place, tu peux essayer le "compact theme" ; c'est un thème de firefox, très compact (subordonée inutile au possible !). Sur un ultrabook, ou quoique ce soit de la même taillex c'est indispensable. Sur un écran normal, ça dépend des goûts, mais si t'aime bien avoit dla place, donne lui sa chance !

En tout cas, c'est cool que tu partage tes astuce/etc sur firefox ; ça donne des idées de personalisation (même si je suis une bille en js/css x) )
, et aussi des trucs plus utile !
Bonne continuation !

gravatar
Yannick a dit :

Merci pour cette astuce, j'essaye ça au plus vite !

gravatar
Julien et Nel a dit :

Pour ma part, je pense que c'est mieux que la barre soit comme elle l'est sur Firefox. En la mettant ainsi, je pense que tu perds une place considérable pour mal de favoris ^^. Il y a plus de place sur la longueur que sur la largeur de l'écran, non ?

gravatar
Le Hollandais Volant a dit :

@Julien et Nel : pas faux, mais je peux mettre environ 20 favoris comme ça.
Ce sont quand même censés être des liens qu’on utilise souvent et qu’on accède d’un clic. J’ai beaucoup plus de favoris que ça (des milliers), mais ils sont dans le menu normal^^

Et puis… Je pense qu’avec un peu de JS il est possible de mettre 2, 3, 4… barres comme ça côte à côte, avec chacun ses propres favoris
Sinon, on peut aussi faire une page d’accueil avec uniquement des icônes : le must.

gravatar
Smokey a dit :

@Guenhwyvar :

Tout compte fait c'est très bien comme ça, je pensais que ça me gênerais mais finalement non. Merci tout de même.

gravatar
Will a dit :

Une astuce utile pour ceux qui aime personnaliser, moi je suis plutôt un adepte du choix par défaut pour ne pas être dépaysé quand je ne suis pas sur un de mes ordinateurs. ^^

Quand j'ai besoin de place notamment sur mon vieux EEE PC j’appuie tout bêtement sur F11 pour passer en plein écran ;)

gravatar
Nono a dit :

Moi je n'ai plus de barre de titre (enfin, les onglets sont sur la barre de titre), ça fait gagner un étage de plus.

gravatar
Le Hollandais Volant a dit :

@Nono : Il est également possible de faire une barre d’onglet sur le côté et avoir 100% de la hauteur pour l’affichage de la page. Mais ça risque de dérouter je pense.

gravatar
Matronix a dit :

Heu ça ne marche pas chez moi, il se passe rien :/

Linux Mint 15 Cinnamon

gravatar
Matronix a dit :

@Matronix : C'est bon j'ai trouvé, il faut changer la valeur #personal-bookmarks { width: 60px;} ;)

gravatar
Hegurka a dit :

Moi j'aime pas les barres verticales. Je préfère l'horizon hoirizontal :) Désolé !!

gravatar
Han Ho Nim a dit :

et pour retrouver l'apparence d'origine, si supprimer les modifs ou même désactiver l'extension ne suffit pas, c'est parce que FF garde tout ça en cache. Il faut alors le démarrer avec l'option -purgecaches
... voir le point 2 de la FAQ http://userchromejs.mozdev.org/faq.html

gravatar
minty a dit :

Mouais je n'aime pas trop les barres verticales et je ne trouve pas que ton modèle optimise l'espace (sauf si on veut que tout ces trucs soient affichés bien sûr). En ce qui me concerne j'ai tout compresser dans la barre d'outils. J'ai les menus avec les favoris, la barre de saisi, les extensions et la barre de recherche. Tout cela en une seule ligne (par contre je n'ai pas les onglets, ça prend trop de place). Je pense que ya pas mieux à part l’affichage plein écran. De plus, je préfère que les favoris soient regroupés dans un menu plutôt que de tous les voir affichés sur une ligne, ça pollue.

gravatar
Adrien a dit :

Au fait, avec la version 23 de Firefox, ils ont changé la façon d'afficher le texte à côté des boutons.

Maintenant ils utilisent le label des boutons et donc il faut ajouter l'option "overflow:hidden !important;" à la classe bookmark-item.

Les commentaires sont fermés pour cet article