Comment personnaliser l'apparence du bouton de menu Orange Firefox

Comment personnaliser l'apparence du bouton de menu Orange Firefox
Comment personnaliser l'apparence du bouton de menu Orange Firefox

Vidéo: Comment personnaliser l'apparence du bouton de menu Orange Firefox

Vidéo: Comment personnaliser l'apparence du bouton de menu Orange Firefox
Vidéo: Pourquoi MSN n'existe PLUS ? 📞😥 - YouTube 2024, Avril
Anonim
Êtes-vous fatigué de regarder le bouton orange du menu Firefox? L’interface de Firefox est entièrement personnalisable. Vous pouvez donc modifier la couleur, le texte et d’autres propriétés du bouton de menu de Firefox pour créer votre propre aspect personnalisé.
Êtes-vous fatigué de regarder le bouton orange du menu Firefox? L’interface de Firefox est entièrement personnalisable. Vous pouvez donc modifier la couleur, le texte et d’autres propriétés du bouton de menu de Firefox pour créer votre propre aspect personnalisé.

Pour changer l'apparence du bouton de menu Firefox, nous allons éditer le fichier userChrome.css. Ce fichier vous permet de modifier l'apparence de n'importe quelle partie de Firefox, ainsi que ses fonctionnalités.

Avant de plonger dans l'édition du fichier userChrome.css, nous allons installer un add-on, appelé ChromEdit Plus, qui nous permettra de facilement éditer le fichier et de l'enregistrer au format correct. Cliquez sur le lien suivant pour accéder à la page Web de ChromEdit Plus.
Avant de plonger dans l'édition du fichier userChrome.css, nous allons installer un add-on, appelé ChromEdit Plus, qui nous permettra de facilement éditer le fichier et de l'enregistrer au format correct. Cliquez sur le lien suivant pour accéder à la page Web de ChromEdit Plus.

https://webdesigns.ms11.net/chromeditp.html

Cliquez sur le bouton Ajouter à Firefox sur la page.

Le message suivant peut s'afficher. Cliquez sur Autoriser pour continuer à installer le module complémentaire ChromEdit Plus.
Le message suivant peut s'afficher. Cliquez sur Autoriser pour continuer à installer le module complémentaire ChromEdit Plus.

REMARQUE: Faites très attention à ce que vous autorisez lors de l'installation d'extensions et d'autres logiciels. Si vous n'êtes pas sûr du produit ou ne faites pas confiance à l'entreprise, n'installez pas. Nous avons testé ChromEdit Plus et l’avons trouvé sûr et fiable.

La boîte de dialogue Installation du logiciel s'affiche. Cliquez sur Installer maintenant, ce qui risque de ne pas être disponible avant la fin du compte à rebours.
La boîte de dialogue Installation du logiciel s'affiche. Cliquez sur Installer maintenant, ce qui risque de ne pas être disponible avant la fin du compte à rebours.

REMARQUE: vous pouvez modifier la durée du compte à rebours à l’aide du bouton Installer, mais nous vous déconseillons de le désactiver.

Vous devez redémarrer Firefox pour terminer l'installation. Cliquez sur Redémarrer maintenant dans la boîte de dialogue contextuelle.
Vous devez redémarrer Firefox pour terminer l'installation. Cliquez sur Redémarrer maintenant dans la boîte de dialogue contextuelle.
Une fois que Firefox redémarre, le bouton ChromEdit Plus est ajouté à droite de la zone Adresse. Cliquez dessus pour ouvrir la fenêtre ChromEdit Plus.
Une fois que Firefox redémarre, le bouton ChromEdit Plus est ajouté à droite de la zone Adresse. Cliquez dessus pour ouvrir la fenêtre ChromEdit Plus.
Il y a trois onglets par défaut dans la fenêtre ChromEdit Plus. Nous allons éditer le fichier userChrome.css, qui se trouve sur le premier onglet. Si l'onglet est vide, copiez et collez le texte suivant sur l'onglet userChrome.css, puis cliquez sur Enregistrer. Cela vous donne un fichier userChrome.css par défaut.
Il y a trois onglets par défaut dans la fenêtre ChromEdit Plus. Nous allons éditer le fichier userChrome.css, qui se trouve sur le premier onglet. Si l'onglet est vide, copiez et collez le texte suivant sur l'onglet userChrome.css, puis cliquez sur Enregistrer. Cela vous donne un fichier userChrome.css par défaut.

@namespace url(“https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”); #appmenu-button { background: #orange !important; } #appmenu-button dropmarker:before { content: “Firefox” !important; color: #FFFFFF !important; } #appmenu-button.button-text { display: none !important; }

Vous avez peut-être déjà un fichier userChrome.css, auquel cas il y aura déjà du texte dans l'onglet userChrome.css. Copiez tout le texte ci-dessus à l'exception de la première ligne, la ligne @namespace, et collez-le sur l'onglet quelque part après la ligne @namespace. Si vous souhaitez conserver ce que vous avez déjà, vous pouvez coller le texte ci-dessus à la fin du fichier.

IMPORTANT: assurez-vous que tous les guillemets du userChrome.css ne sont PAS des guillemets intelligents, y compris ceux de la ligne @namespace. Ils devraient être ordinaires, citations droites. Si certains d'entre eux sont des guillemets intelligents, le fichier n'aura aucune incidence sur l'apparence de Firefox.

Cliquez sur Redémarrer pour redémarrer Firefox à l'aide du fichier userChrome.css nouveau ou révisé.

Dans cet exemple, nous allons changer la couleur de fond en bleu foncé et changer le texte «Firefox» en «How-To Geek».
Dans cet exemple, nous allons changer la couleur de fond en bleu foncé et changer le texte «Firefox» en «How-To Geek».

Pour changer la couleur d'arrière-plan, modifiez le texte «#orange» sur la ligne «arrière-plan» de la section «# bouton-menu» en lui donnant une couleur différente, à l'aide du code de couleur hexadécimale ou du code de couleur HTML. Par exemple, nous avons choisi un bleu foncé avec le code de couleur hexadécimale de # 2C4362.

REMARQUE: pour connaître le code de couleur hexadécimal de la couleur souhaitée, consultez nos articles sur l’obtention de codes de couleur hexadécimale à partir de couleurs RVB décimales, la sélection de couleurs à partir de n’importe où sur l’écran et l’obtention de codes de couleur dans différents formats.

Pour modifier le texte du bouton, modifiez le texte «Firefox» de la ligne «contenu» de la section «# appmenu-button dropmarker: before» sur votre texte souhaité, par exemple «How-To Geek». Nous avons ajouté un espace après le texte pour laisser plus d'espace entre le texte et la flèche déroulante du bouton.

Vous pouvez également choisir de modifier la couleur du texte en modifiant la ligne «couleur» dans la même section «# appmenu-button dropmarker: before». Nous avons laissé la couleur du texte en blanc (#FFFFFF), mais vous pouvez le changer en gris clair (# F2F2F2) ou quelque chose du genre.

Cliquez sur Enregistrer, puis sur Redémarrer pour que les modifications prennent effet.

Le bouton est maintenant bleu foncé et dit «How-To Geek».
Le bouton est maintenant bleu foncé et dit «How-To Geek».
Vous pouvez également ajouter une image d’arrière-plan au bouton, en plus de changer la couleur d’arrière-plan. Nous avons créé une image avec le favicon How-To Geek à gauche et un arrière-plan transparent laissant apparaître la couleur de fond bleu foncé. Pour ajouter une image d'arrière-plan à votre bouton, ajoutez la ligne suivante à la section «# appmenu-button», en modifiant le chemin d'accès des guillemets à l'emplacement de votre image sur votre ordinateur. Laissez le "fichier: ///" dans le chemin.
Vous pouvez également ajouter une image d’arrière-plan au bouton, en plus de changer la couleur d’arrière-plan. Nous avons créé une image avec le favicon How-To Geek à gauche et un arrière-plan transparent laissant apparaître la couleur de fond bleu foncé. Pour ajouter une image d'arrière-plan à votre bouton, ajoutez la ligne suivante à la section «# appmenu-button», en modifiant le chemin d'accès des guillemets à l'emplacement de votre image sur votre ordinateur. Laissez le "fichier: ///" dans le chemin.

background-image: url(“file:///C:/Users/Lori/Pictures/htg_background.png”) !important;

Cliquez à nouveau sur Enregistrer et redémarrer.

Conseillé: