Personnalisez Firefox 57 avec CSS

Essayez Notre Instrument Pour Éliminer Les Problèmes

Custom CSS for Fx est une collection de styles CSS pour Firefox 57 et plus récents par l'auteur du populaire module complémentaire de Firefox Classic Theme Restorer.

Firefox 57 ne prendra plus en charge Classic Theme Restorer ou toute autre interface changeant d'extensions ou de 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, en dehors de ce que Mozilla fournit nativement dans Firefox, est d'utiliser CSS.

Les utilisateurs de Firefox qui connaissent leur chemin avec CSS peuvent modifier les fichiers CSS manuellement pour modifier leur version du navigateur Web. En revanche, la plupart des utilisateurs de Firefox ne le font probablement pas, et c'est là que le CSS personnalisé pour Fx entre en jeu.

Personnalisez Firefox 57 avec CSS

classic firefox 57

Le projet est hébergé sur GitHub, et il est maintenu par Aris qui est connu pour les modules complémentaires populaires de Firefox tels que Classic Theme Restorer et NoiaButtons. Restaurateur de thème classique a été créé en tant que réponse à l'interface Australis que Mozilla a lancé dans Firefox 29. L'extension ne fonctionnera plus dans Firefox 57 ou plus récent car Mozilla a abandonné la prise en charge des modules complémentaires hérités dans cette version de Firefox et n'a pas introduit de capacités pour modifier l'interface utilisateur en tant qu'API WebExtensions.

La page de démarrage du projet offre des informations sur la localisation du dossier de profil du navigateur Web Firefox et 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 et de cliquer sur le bouton «Ouvrir le dossier» sous Principes de base de l'application> Dossier de profil.

Vous devez créer un dossier appelé chrome s'il n'existe pas à la racine du répertoire de profil. Une fois terminé, 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 doit être fait pour ajouter ces styles personnalisés à Firefox. Il y a cependant une autre étape que vous voudrez peut-être prendre, et c'est la personnalisation des ajustements.

L'ensemble de réglages par défaut peut plaire à certains utilisateurs, mais les fichiers CSS sont livrés avec des options permettant d'activer ou de désactiver différents réglages pour modifier davantage l'interface.

userchrome css firefox styles

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

Les lignes commençant par / * sont mises en commentaire et les fichiers CSS auxquels elles sont liées ne sont pas importées pour cette raison.

Ce que vous devez faire est de parcourir la liste une section à la fois pour déterminer les modifications disponibles que 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 tweak.

Voici la liste des ajustements actuellement disponibles:

  • Modifiez les boutons de la barre d'outils de navigation.
  • Activer les boutons carrés
  • Changer l'apparence de l'icône
  • Changer la fenêtre contextuelle du bouton de l'application.
  • Changer le menu des signets et l'apparence de la fenêtre contextuelle.
  • Apparence des boutons de la barre d'outils des anciens signets
  • Autres paramètres du bouton (bouton avant masquer, boutons arrière et avant séparés des fenêtres contextuelles de l'historique, boutons de zoom masquer la réinitialisation).
  • Apparence des boutons arrière et avant personnalisés
  • Bouton Application / Hamburger sur 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: les onglets ne sont 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.
  • Modifiez le style de la barre d'adresse.

Certains d'entre eux sont explicites. D'autres ne le sont pas, mais vous avez deux options à ce sujet. Activez-les et extrayez-les directement, ou ouvrez le fichier CSS qui est chargé pour savoir ce qu'ils font. Ce dernier nécessite cependant une certaine connaissance du CSS.

Le fichier userContent.css utilise la même disposition. Il importe les fichiers CSS, et c'est à vous de les activer ou de les désactiver.

Une liste des modifications de l'interface native suggérées et des modifications de about: config sont également fournies par le projet pour modifier davantage l'apparence de Firefox.

Mots de clôture

Le 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 à l'aide de fonctionnalités intégrées. Les utilisateurs existants de Firefox peuvent le trouver utile, surtout s'ils ont utilisé jusqu'à présent Classic Theme Restorer ou un module complémentaire comparable.

Des mises à jour sont publiées régulièrement par Aris; c'est bon non seulement pour les nouvelles fonctionnalités qui peuvent être introduites grâce à des ajustements, mais aussi pour garder les styles compatibles avec les nouvelles versions de Firefox.