28Jun
Vous en avez marre 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 Firefox pour créer votre propre apparence personnalisée.
Pour modifier l'apparence du bouton de menu Firefox, nous allons éditer le fichier userChrome.css. Ce fichier vous permet de changer 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 modifier 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.
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 constaté qu'il était sûr et fiable.
La boîte de dialogue Installation du logiciel s'affiche. Cliquez sur Installer maintenant, qui peut ne pas être disponible jusqu'à la fin d'un compte à rebours.
REMARQUE: Vous pouvez modifier la durée du compte à rebours sur le 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.
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 dans l'onglet userChrome.css, puis cliquez sur Enregistrer. Cela vous donne un fichier userChrome.css par défaut.
@namespace url( "http: //www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul");
# appmenu-button{ Arrière-plan
: #orange! Important;
}
# appmenu-button dropmarker: avant{ contenu
: "Firefox"! Important;Couleur
: #FFFFFF! Important;
}
# appmenu-button. button-text{ Affichage
: aucun! 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 voulez conserver ce que vous avez déjà, vous pouvez coller le texte ci-dessus à la fin du fichier.
IMPORTANT: Assurez-vous que toutes les citations du fichier userChrome.css ne sont PAS des citations intelligentes, y compris celles de la ligne @namespace. Ils devraient être des citations ordinaires et droites. Si l'un d'eux est des citations intelligentes, le fichier n'affectera pas du tout 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".
Pour modifier la couleur d'arrière-plan, remplacez le texte "#orange" de la section "background" de la section "# appmenu-button" par une couleur différente, en utilisant le code 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 comprendre le code de couleur hexadécimal d'une couleur, consultez nos articles sur l'obtention de codes couleur hexadécimaux à partir des couleurs RVB décimales, la sélection des couleurs de n'importe où sur l'écran et l'obtention de codes couleur dans plusieurs formats.
Pour modifier le texte sur le bouton, modifiez le texte "Firefox" sur la ligne "content" dans la section "# appmenu-button dropmarker: before" du texte souhaité, 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 changer la couleur du texte en changeant la ligne "color" dans la même section "# appmenu-button dropmarker: before".Nous avons laissé la couleur du texte blanche( #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.
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 qui a le favicon How-To Geek sur la gauche et un fond transparent de sorte que la couleur de fond bleu foncé transparaît. Pour ajouter une image d'arrière-plan à votre bouton, ajoutez la ligne suivante à la section "# appmenu-button", en changeant le chemin dans 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.
Maintenant, notre bouton est terminé.
Vous pouvez également personnaliser le bouton de menu Firefox en le convertissant en icône. Nous avons également publié de nombreux autres conseils et astuces pour tirer le meilleur parti de Firefox.