Le style et l’apparence de Firefox peuvent être modifiés en créant un dossier chrome dans le dossier du profil de Firefox, puis en y plaçant un fichier userChrome.css qui contient une règle de style personnalisée. Les règles de style que vous mettez dans le fichier userChrome.css remplacent les règles de styles par défaut de Firefox.
Vous trouverez ci-dessous les instructions à suivre pour modifier Firefox afin que les onglets soient affichés sous la barre d’adresse (URL) au lieu d’être au-dessus.
Si votre dossier de profil de Firefox comporte déjà un dossier chrome contenant un fichier userChrome.css, copiez le code pertinent pour votre version de Firefox dans votre fichier userChrome.css. Après avoir enregistré vos modifications et fermé le fichier, vous devez activer l’affichage de la barre de titre de votre Firefox ou la barre de menus sous Windows.
Dans Firefox 64 et antérieurs : rendez-vous sur la page https://www.userchrome.org/what-is-userchrome-css.html et copiez les règles de CSS qui figurent sous le titre « Move the Tab Bar Below the Other Toolbars » et collez-les dans votre fichier userChrome.css (les règles CSS que vous avez copiées comprennent d’autres suggestions dans les commentaires).
Dans Firefox 69 et postérieurs : Firefox 69 et postérieurs désactivent par défaut userChrome.css et userContent.css. Vous devez vérifier une préférence dans l’éditeur de configuration. Pour davantage de détails, consultez cette page en anglais.
Sinon, vous pouvez copier le code suivant :
Ce code fonctionnait dans Firefox 64 et inférieurs.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* ONGLETS en bas */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}
Ce code fonctionne dans Firefox 65 et supérieurs.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* ONGLETS : sous nav-bar – Firefox 65 et plus récents - corrigé dans 89+ */
/* ROOT -variables */
*|*:root {
--tab-toolbar-navbar-overlap: 0px !important;
--tab-min-height: 25px !important; /*passe outre la densité*/
--tab-min-width: 80px !important; /*passe outre la valeur par défaut*/
--tab-bottom-adjust: 0px; /*65-73; menubar, titlebar cachées*/
}
/* ONGLETS : sous nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
-moz-box-ordinal-group: 10 !important;
}
#TabsToolbar {
-moz-box-ordinal-group: 1000 !important;
}
/* ONGLETS : position */
#TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;
}
#tabbrowser-tabs {
width: 100vw !important;
}
/* navigator-toolbox: PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ajuster*/
position: relative !important;
}
/* Firefox 65-73 - menubar, titlebar cachées */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
#toolbar-menubar[autohide="true"] ~ #TabsToolbar{
bottom: var(--tab-bottom-adjust) !important;
}
/* ONGLETS : hauteur */
#tabbrowser-tabs,
#tabbrowser-arrowscrollbox,
#tabbrowser-tabs .tabbrowser-tab {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
/* ONGLETS : apparence */
#TabsToolbar {
height: var(--tab-min-height) !important;
margin-bottom: 1px !important;
box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*facultatif*/
background-color: var(--toolbar-bgcolor) !important;
color: var(--toolbar-color) !important;
}
/* indicateurs cachés */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator {display: none !important;}
/* en plein écran – contrôles de fenêtres cachés */
#TabsToolbar #window-controls {display: none !important;}
/* sur la barre d’onglets – boutons de titre cachés */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
#toolbar-menubar[autohide="true"] ~ #TabsToolbar
.titlebar-buttonbox-container {display: none !important;}
Si vous n’avez pas encore de fichier userChrome.css, suivez ces instructions :
Consultez cette page d’assistance (en anglais) et notre vidéo réalisée par un membre de notre communauté, à partir de 8 min 45 (en anglais également) pour en savoir davantage.
- Ouvrez votre dossier de profil actif : saisissez about:support dans la barre d’adresse de Firefox, puis dans la section « Paramètres de base de l’application » descendez à « Dossier de profil » et cliquez sur Ouvrir le dossier correspondant (Windows et Linux) ou Ouvrir dans le Finder (Mac).
- Sous Mac, le répertoire qui s’ouvre contient votre dossier de profil. Ouvrez le dossier de profil (il porte un nom du type xxxxxxxx.default pour un profil par défaut).
- Créez un nouveau dossier intitulé chrome dans le dossier de profil.
- Créez un raccourci pour le bureau vers le dossier chrome, si vous le souhaitez, pour vous permettre d’y accéder facilement à l’avenir.
- Téléchargez et enregistrez le fichier suivant avant de l’insérer dans ce dossier chrome :
- Pour Firefox 68-71 (Windows et Linux) :
https://www.userchrome.org/samples/userChrome-tabs_on_bottom_Fx68-71_Wi... - Pour Firefox 68-71 (macOS) :
https://www.userchrome.org/samples/userChrome-tabs_on_bottom_Fx68-71_Ma...
- Pour Firefox 68-71 (Windows et Linux) :
- Renommez le fichier « userChrome-tabs_on_bottom.css » ou le fichier « userChrome-tabs_on_bottom_Fx70.css » que vous avez téléchargé en « userChrome.css ».
- Sous Windows : si la terminaison « .css » ne figure pas dans le nom du fichier téléchargé, renommez-le plutôt en userChrome (voir la note ci-dessous).
- Redémarrez Firefox pour qu’il reconnaisse le nouveau fichier userChrome et en applique les règles.
Astuce : activez la barre de titre ou la barre de menus sous Windows après avoir appliqué ces modifications.
Note à l’intention des personnes sous Windows :
Sous Windows, les extensions des noms de fichiers sont masquées par défaut. Si le fichier téléchargé est enregistré sous le nom « userChrome-tabs_on_bottom » sans l’extension .css, cela signifie que Windows masque les extensions des noms de fichier. Dans ce cas, vous devez renommer le fichier userChrome pour ne pas vous retrouver avec un fichier nommé « userChrome.css.css » qui ne sera pas utilisable. Pour paramétrer Windows afin d’afficher les extensions des noms de fichier, consultez cet article de Microsoft pour Windows 7, 8.1 et 10 ou ces articles de WindowsFacile.fr pour Windows 8 et Windows 10. Vous pouvez aussi consulter en anglais cet article pour Windows 10/11 de thewindowsclub.com et ces articles de fileinfo.com pour Windows 8, Windows 10 et Windows 11.
