Personnaliser Firefox 57 avec CSS

CSS personnalisé pour Fx est une collection de styles CSS pour Firefox 57 et plus récents de l'auteur du célèbre add-on de Firefox, Classic Theme Restorer.

Firefox 57 ne prend plus en charge Classic Theme Restorer ni aucune autre interface modifiant des extensions ou des thèmes en raison du passage à un système exclusif WebExtensions. Le nouveau système WebExtensions empêche les modifications de l'interface utilisateur du navigateur en ne fournissant pas d'API aux développeurs d'extensions.

La seule option qui reste aux utilisateurs de Firefox pour modifier l'interface utilisateur, à l'exception de ce que Mozilla fournit de manière native dans Firefox, consiste à utiliser CSS.

Les utilisateurs de Firefox qui connaissent bien les CSS peuvent éditer les fichiers CSS manuellement pour modifier leur version du navigateur Web. La plupart des utilisateurs de Firefox, d’autre part, ne le font probablement pas, et c’est là que le CSS personnalisé pour Fx entre en jeu.

Personnaliser Firefox 57 avec CSS

Le projet est hébergé sur GitHub, et il est maintenu par Aris, connu pour ses add-ons populaires pour Firefox tels que Classic Theme Restorer et NoiaButtons. Classic Theme Restorer a été créé en réponse à l'interface Australis que Mozilla a lancée dans Firefox 29. L'extension ne fonctionnera plus dans Firefox 57 ou plus récent, car Mozilla a cessé de prendre en charge les modules complémentaires hérités dans cette version de Firefox et n'a pas introduit de fonctionnalités. modifier l'interface utilisateur en tant qu'API WebExtensions.

La page de démarrage du projet fournit des informations sur la localisation du dossier de profil du navigateur Web Firefox et sur l’utilisation des styles fournis pour modifier Firefox.

Le moyen le plus simple de localiser le dossier de profil est de charger about: support dans la barre d'adresse du navigateur, puis de cliquer sur le bouton "Ouvrir le dossier" sous Application de base> Dossier de profil.

Vous devez créer un dossier appelé chrome s'il n'existe pas à la racine du répertoire du profil. Une fois cela fait, copiez le contenu de l'archive dans ce dossier. Assurez-vous que userChrome.css et userContent.css se trouvent à la racine du dossier chrome.

C’est tout ce qui reste à faire pour ajouter ces styles personnalisés à Firefox. Il est toutefois possible que vous souhaitiez prendre une autre mesure, à savoir personnaliser les réglages.

Le jeu de réglages par défaut peut intéresser certains utilisateurs, mais les fichiers CSS comportent des options permettant d'activer ou de désactiver différents réglages pour modifier davantage l'interface.

Ouvrez le fichier userChrome.css dans un éditeur de texte brut. Le fichier utilise la commande @import pour importer les styles CSS actuels à partir de fichiers CSS. Ceci est fait pour garder le dossier principal userChrome.css bien rangé et permettre aux utilisateurs de Firefox de le modifier plus facilement.

Les lignes commençant par / * sont commentées et les fichiers CSS auxquels ils sont liés ne sont pas importés à cause de cela.

Ce que vous devez faire est de parcourir la liste une section à la fois pour déterminer lequel des réglages disponibles vous souhaitez activer dans Firefox.

Vous déchargez les réglages en ajoutant / * devant la ligne et * / à l’arrière. De même, vous supprimez / * à l'avant et * / à l'arrière pour activer un réglage.

Voici la liste des réglages disponibles actuellement:

  • Modifier les boutons de la barre d’outils de navigation.
  • Activer les boutons au carré
  • Changer l'apparence de l'icône
  • Changer le bouton de l'application popup.
  • Changer le menu des signets et l'apparence du popup.
  • Apparence des boutons de la barre d'outils des anciens favoris
  • Autres réglages des boutons (masquer les boutons, masquer les boutons Précédent et Suivant, historique des fenêtres séparées, boutons de zoom masquer la réinitialisation).
  • Apparence personnalisée des boutons Précédent et Suivant
  • Bouton Application / hamburger dans la barre d’outils de navigation
  • Bouton Application / hamburger dans la barre de titre de Firefox (Windows uniquement)
  • Apparence des onglets (style, position de la barre d'outils, par exemple sous les barres d'outils (lire: onglets pas en haut), titres des onglets, icônes, etc.
  • Modifiez la barre de recherche, les menus contextuels, les icônes et autres barres d’outils.
  • Changer le style de la barre d'emplacement.

Certains d'entre eux sont explicites. Les autres ne le sont pas, mais vous avez deux options. Activez-les et extrayez-les directement ou ouvrez le fichier CSS chargé pour savoir ce qu’ils font. Ce dernier nécessite toutefois des connaissances en CSS.

Le fichier userContent.css utilise la même disposition. Il importe les fichiers CSS et vous devez les activer ou les désactiver.

Une liste d'ajustements d'interface natifs suggérés et sur: des ajustements de configuration sont également fournis par le projet pour modifier davantage l'apparence de Firefox.

Mots de clôture

CSS personnalisé pour Fx offre de nombreuses modifications d'interface pour l'interface de Firefox 57 qui ne peuvent pas être effectuées à l'aide d'extensions ou de fonctionnalités intégrées. Les utilisateurs de Firefox existants peuvent trouver cela utile, surtout s'ils ont utilisé jusqu'à présent Classic Theme Restorer ou un add-on comparable.

Des mises à jour sont publiées régulièrement par Aris. c’est bien non seulement pour les nouvelles fonctionnalités pouvant être introduites par le biais de modifications, mais également pour que les styles restent compatibles avec les nouvelles versions de Firefox.