in

Comment personnaliser l’apparence du bouton de menu Orange Firefox

Vous en avez assez de regarder le bouton de menu orange de 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 Firefox pour créer votre propre look personnalisé.

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

01_default_firefox_button

Avant de plonger dans l’édition du fichier userChrome.css, nous allons installer un module complémentaire, appelé ChromEdit Plus, qui nous permettra d’éditer facilement le fichier et de l’enregistrer dans le bon format. Cliquez sur le lien suivant pour accéder à la page Web ChromEdit Plus.

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

Cliquez sur le bouton Ajouter à Firefox sur la page.

02_installing_chromedit_plus

Le message suivant peut s’afficher. Cliquez sur Autoriser pour continuer l’installation du 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 si vous ne faites pas confiance à l’entreprise, ne l’installez pas. Nous avons testé ChromEdit Plus et l’avons trouvé sûr et fiable.

03_clic_autoriser

La boîte de dialogue d’installation du logiciel s’affiche. Cliquez sur Installer maintenant, qui peut ne pas être disponible tant qu’un compte à rebours n’est pas terminé.

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

04_clic_install_now

Vous devez redémarrer Firefox pour terminer l’installation. Cliquez sur Redémarrer maintenant dans la boîte de dialogue contextuelle.

05_clic_restart_now

Une fois Firefox redémarré, le bouton ChromEdit Plus est ajouté à droite de la zone Adresse. Cliquez dessus pour ouvrir la fenêtre ChromEdit Plus.

06_clic_chromedit_plus_button

Il y a trois onglets par défaut dans la fenêtre ChromEdit Plus. Nous éditerons le fichier userChrome.css, qui se trouve dans le premier onglet. Si l’onglet est vide, copiez et collez le texte suivant dans l’onglet userChrome.css et cliquez sur Enregistrer. Cela vous donne un fichier userChrome.css par défaut.

Vous avez peut-être déjà un fichier userChrome.css, auquel cas il y aura déjà du texte sur 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 de userChrome.css ne sont PAS des guillemets intelligents, y compris ceux de la ligne @namespace. Il doit s’agir de citations simples et droites. Si l’un d’entre eux est des guillemets intelligents, le fichier n’affectera en rien l’apparence de Firefox.

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

07_creating_userchrome_file

Dans cet exemple, nous allons changer la couleur d’arrière-plan en bleu foncé et changer le texte «Firefox» en «How-To Geek».

Pour changer la couleur d’arrière-plan, changez le texte «#orange» sur la ligne «background» dans la section «# appmenu-button» en une couleur différente, en utilisant le code couleur hexadécimal ou le code couleur HTML. Par exemple, nous avons choisi un bleu foncé avec le code de couleur hexadécimal # 2C4362.

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

Pour changer le texte sur le bouton, changez le texte «Firefox» sur la ligne «contenu» dans la section «# appmenu-button dropmarker: before» en votre texte désiré, tel que «How-To Geek». Nous avons ajouté un espace après le texte pour avoir plus d’espace entre le texte et la flèche déroulante sur le bouton.

Vous pouvez également choisir de changer 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 la changer en quelque chose comme un gris clair (# F2F2F2), ou quelque chose comme ça.

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

08_new_color_and_text

Le bouton est maintenant bleu foncé et indique «How-To Geek».

09_firefox_menu_with_new_color_and_text

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 qui a le favicon How-To Geek sur la gauche et un arrière-plan transparent pour que la couleur de fond bleu foncé soit visible. Pour ajouter une image d’arrière-plan à votre bouton, ajoutez la ligne suivante à la section «# appmenu-button», en changeant le chemin entre les guillemets à l’emplacement de votre image sur votre ordinateur. Laissez le «fichier: ///» dans le chemin.

background-image: url (« fichier: /// C: /Users/Lori/Pictures/htg_background.png »)! important;

Cliquez à nouveau sur Enregistrer et redémarrer.

10_adding_a_background

Maintenant, notre bouton est terminé.

11_firefox_button_with_background

Vous pouvez également personnaliser le bouton de menu Firefox en le convertissant en icône. Nous avons également publié de nombreux autres conseils et modifications pour tirer le meilleur parti de Firefox.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Apple revendique le trône de la confidentialité

iOS 12 pourrait empêcher les périphériques USB de déchiffrer le code de votre iPhone

iOS 12 pourrait empêcher les périphériques USB de déchiffrer le code de votre iPhone