Comment personnaliser l’interface utilisateur de Firefox avec userChrome.css

Table des matières:

Comment personnaliser l’interface utilisateur de Firefox avec userChrome.css
Comment personnaliser l’interface utilisateur de Firefox avec userChrome.css

Vidéo: Comment personnaliser l’interface utilisateur de Firefox avec userChrome.css

Vidéo: Comment personnaliser l’interface utilisateur de Firefox avec userChrome.css
Vidéo: La Différence entre une application web et un site web - YouTube 2024, Avril
Anonim
L’interface de Firefox Quantum est encore extrêmement personnalisable grâce à son fichier userChrome.css. Vous pouvez modifier ce fichier pour masquer des éléments de menu non souhaités, déplacer la barre d'onglets sous la barre d'outils de navigation, afficher plusieurs lignes dans la barre d'outils des signets et effectuer d'autres opérations qui ne seraient normalement pas possibles.
L’interface de Firefox Quantum est encore extrêmement personnalisable grâce à son fichier userChrome.css. Vous pouvez modifier ce fichier pour masquer des éléments de menu non souhaités, déplacer la barre d'onglets sous la barre d'outils de navigation, afficher plusieurs lignes dans la barre d'outils des signets et effectuer d'autres opérations qui ne seraient normalement pas possibles.

Comment ça marche

Le fichier userChrome.css de Firefox est un fichier de feuille de style en cascade (CSS) utilisé par Firefox. Bien que les feuilles de style soient normalement appliquées aux pages Web, cette feuille de style s’applique à l’interface utilisateur de Firefox. Il vous permet de changer l'apparence et la disposition de tout ce qui entoure la page Web iteslf. Vous ne pouvez pas ajouter de fonctionnalités. vous ne pouvez modifier que ce qui existe déjà pour le changer, le masquer ou le déplacer.

Cela n'a rien à voir avec Google Chrome. "Chrome" fait référence à l'interface utilisateur du navigateur Web, qui a donné son nom à Google Chrome.

Le fichier userChrome.css existe depuis longtemps dans Firefox, mais il a pris une importance nouvelle avec Firefox Quantum. De nombreux ajustements qui pouvaient auparavant être réalisés par les modules complémentaires du navigateur ne peuvent désormais être réalisés qu'en modifiant le fichier userChrome.css.

Où trouver des réglages

Vous pouvez créer vos propres modifications si vous comprenez le code CSS et la conception de l’interface de Firefox, mais vous pouvez également trouver des modifications en ligne. Si vous souhaitez effectuer un certain changement, quelqu'un d'autre a probablement déjà compris comment le faire et a écrit le code.

Voici quelques ressources pour vous aider à démarrer:

  • Exemples de tweaks provenant de userChrome.org: une courte liste de tweaks intéressants démontrant la puissance de userChrome.css.
  • Classic CSS Tweaks: Un répertoire de modifications de userChrome.css de l'auteur de l'extension Classic Theme Restorer, qui ne fonctionne plus sous Firefox Quantum.
  • userChrome Tweaks: une collection de modifications intéressantes de Firefox.
  • FirefoxCSS sur Reddit: Ce sous-site est une communauté permettant de discuter des modifications. Vous pouvez effectuer une recherche dans le sous-répertoire pour rechercher les modifications d’autres personnes, voir ce que les personnes partagent et même demander leur avis si vous ne trouvez pas l’ajustement que vous souhaitez vraiment.
  • Guide d’édition du menu contextuel: Instructions pour supprimer des éléments du menu contextuel de Firefox et modifier leur ordre dans la liste, extraits du sous-répertoire FirefoxCSS.

Gardez à l'esprit que les anciennes versions de Firefox avaient une interface différente. Les modifications plus anciennes de userChrome.css trouvées en ligne risquent de ne pas fonctionner sur Firefox 57 et versions ultérieures, également connu sous le nom de Firefox Quantum.

Si vous savez ce que vous faites avec CSS, vous pouvez activer la boîte à outils du navigateur pour inspecter le chrome du navigateur Firefox. Cela vous fournira les informations dont vous avez besoin pour personnaliser divers éléments d'interface de navigateur avec votre propre code CSS.

Comment créer votre fichier userChrome.css

Le fichier userChrome.css n’existant pas par défaut, vous devez donc le créer à l’emplacement approprié dans votre dossier de profil Firefox.

Pour lancer votre dossier de profil Firefox, cliquez sur menu> Aide> Informations de dépannage dans Firefox.

Cliquez sur le bouton «Ouvrir le dossier» à droite du Dossier du profil pour l'ouvrir. (Sous MacOS ou Linux, vous verrez à la place un bouton «Afficher dans le Finder» ou «Open Directory». Les instructions suivantes montrent le processus sous Windows, mais il est fondamentalement identique sur Mac et Linux. gestionnaire de fichiers et éditeur de texte différents.)
Cliquez sur le bouton «Ouvrir le dossier» à droite du Dossier du profil pour l'ouvrir. (Sous MacOS ou Linux, vous verrez à la place un bouton «Afficher dans le Finder» ou «Open Directory». Les instructions suivantes montrent le processus sous Windows, mais il est fondamentalement identique sur Mac et Linux. gestionnaire de fichiers et éditeur de texte différents.)
Si vous voyez un dossier nommé «chrome» dans le dossier du profil qui apparaît, double-cliquez dessus. Cependant, vous ne le ferez probablement pas, car ce dossier n’a pas été créé par les versions modernes de Firefox.
Si vous voyez un dossier nommé «chrome» dans le dossier du profil qui apparaît, double-cliquez dessus. Cependant, vous ne le ferez probablement pas, car ce dossier n’a pas été créé par les versions modernes de Firefox.

Pour créer le dossier, cliquez avec le bouton droit dans le volet de droite et sélectionnez Nouveau> Dossier. Nommez-le «chrome», appuyez sur Entrée, puis double-cliquez dessus.

Si vous ne l’avez pas déjà fait, vous devrez demander à Windows de vous montrer les extensions de fichier. Windows masque les extensions de fichier par défaut pour simplifier les choses. Cette étape n’est pas nécessaire sous macOS ou Linux, qui affiche ces informations par défaut.
Si vous ne l’avez pas déjà fait, vous devrez demander à Windows de vous montrer les extensions de fichier. Windows masque les extensions de fichier par défaut pour simplifier les choses. Cette étape n’est pas nécessaire sous macOS ou Linux, qui affiche ces informations par défaut.

Sous Windows 8 ou 10, vous pouvez simplement cliquer sur l'onglet «Affichage» du ruban et cocher la case «Extensions de nom de fichier» pour les rendre visibles. Sous Windows 7, cliquez sur Organiser> Options de dossier et de recherche, cliquez sur l'onglet “Afficher”, puis décochez “Masquer les extensions pour les types de fichiers connus”.

Vous allez maintenant créer le fichier userChrome.css, qui est en réalité un fichier texte vide avec l'extension.css au lieu de l'extension.txt.
Vous allez maintenant créer le fichier userChrome.css, qui est en réalité un fichier texte vide avec l'extension.css au lieu de l'extension.txt.

Pour ce faire, cliquez-droit dans le volet de droite ici et sélectionnez Nouveau> Document texte. Nommez-le "userChrome.css" en veillant à supprimer l'extension de fichier.txt.

Windows vous avertira que vous modifiez l’extension du fichier et que cela peut poser un problème pour certains types de fichiers. Cliquez sur “Oui” pour confirmer votre modification.

Sous macOS ou Linux, créez un fichier texte vide portant le même nom.

Image
Image

Comment éditer le fichier userChrome.css

Vous pouvez utiliser n'importe quel éditeur de texte pour modifier le fichier userChrome.css. L'éditeur de texte Notepad fourni avec Windows fonctionne parfaitement. Si vous voulez un éditeur de texte plus puissant avec plus de fonctionnalités, nous aimons Notepad ++.

Pour éditer le fichier dans le Bloc-notes, cliquez dessus avec le bouton droit de la souris et sélectionnez «Éditer».

Ajoutez les modifications souhaitées au fichier en les copiant et en les collant. Si vous ajoutez plusieurs modifications, veillez à les ajouter toutes sur leurs propres lignes.
Ajoutez les modifications souhaitées au fichier en les copiant et en les collant. Si vous ajoutez plusieurs modifications, veillez à les ajouter toutes sur leurs propres lignes.
Une fois que vous avez terminé, enregistrez le fichier en cliquant sur Fichier> Enregistrer dans le bloc-notes.
Une fois que vous avez terminé, enregistrez le fichier en cliquant sur Fichier> Enregistrer dans le bloc-notes.
Chaque fois que vous modifierez votre fichier userChrome.css, vous devrez fermer toutes les fenêtres Firefox ouvertes et relancer Firefox pour que vos modifications prennent effet.
Chaque fois que vous modifierez votre fichier userChrome.css, vous devrez fermer toutes les fenêtres Firefox ouvertes et relancer Firefox pour que vos modifications prennent effet.
Si vous revenez fréquemment dans le dossier «chrome» pour modifier votre fichier userChrome.css, vous pouvez créer un raccourci vers le dossier du bureau ou l'ajouter aux dossiers «Accès rapide» de l'Explorateur de fichiers.
Si vous revenez fréquemment dans le dossier «chrome» pour modifier votre fichier userChrome.css, vous pouvez créer un raccourci vers le dossier du bureau ou l'ajouter aux dossiers «Accès rapide» de l'Explorateur de fichiers.

Le fichier userContent.css

Firefox a également un fichier userContent.css que vous pouvez modifier, et vous risquez de tomber sur quelques modifications qui indiquent qu’elles sont destinées au fichier userContent.css.

Pour utiliser ce fichier, créez simplement un fichier nommé «userContent.css» dans le même dossier que votre dossier Chrome. Les modifications que vous placez dans ce fichier affectent les «pages de contenu» internes de Firefox, telles que les pages Nouvel onglet et Options.

Au secours, j'ai cassé quelque chose!

Si vous rencontrez un problème avec un tweak, vous pouvez simplement le supprimer de votre fichier userChrome.css et redémarrer Firefox. Si cela ne fonctionne pas, vous pouvez supprimer complètement le fichier userChrome.css et redémarrer le navigateur pour effacer toutes vos modifications et obtenir une nouvelle interface Firefox.

Conseillé: