Cum de a personaliza aspectul butonului Orange Firefox

Te-ai săturat să te uiți la butonul de meniu portocaliu Firefox? Interfața Firefox este complet personalizabilă, astfel încât să puteți schimba culoarea, textul și alte proprietăți ale butonului meniului Firefox pentru a crea un aspect personalizat.

Pentru a modifica aspectul butonului meniului Firefox, vom edita fișierul userChrome.css. Acest fișier vă permite să modificați aspectul oricărei părți a Firefox, precum și funcționalitatea acestuia.

Înainte de scufundări în editarea fișierului userChrome.css, vom instala un add-on, numit ChromEdit Plus, care ne va permite să editați cu ușurință fișierul și să-l salvați în formatul corect. Faceți clic pe următorul link pentru a accesa pagina Web ChromEdit Plus.

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

Faceți clic pe butonul Adăugați la Firefox de pe pagină.

Următorul mesaj poate fi afișat. Faceți clic pe Allow (Permite) pentru a continua instalarea suplimentului ChromEdit Plus.

NOTĂ: Fiți foarte atenți la ceea ce permiteți atunci când instalați extensii și alte programe software. Dacă nu sunteți sigur de produsul sau nu aveți încredere în companie, nu instalați. Am testat ChromEdit Plus și am considerat că este sigur și sigur.

Se afișează caseta de dialog Instalare software. Faceți clic pe Instalați acum, care poate să nu fie disponibilă până când nu se finalizează numărătoarea inversă.

NOTĂ: Puteți schimba lungimea numărătoarei inverse pe butonul Instalare, dar nu vă recomandăm să o dezactivați.

Trebuie să reporniți Firefox pentru a termina instalarea. Faceți clic pe Reporniți acum în fereastra de dialog pop-up.

Odată ce Firefox se repornește, butonul ChromEdit Plus este adăugat în partea dreaptă a casetei Address. Faceți clic pe acesta pentru a deschide fereastra ChromEdit Plus.

Există trei file în mod prestabilit în fereastra ChromEdit Plus. Vom edita fișierul userChrome.css, care se află pe prima filă. Dacă fila este goală, copiați și inserați următorul text pe fila userChrome.css și faceți clic pe Salvați. Acest lucru vă oferă un fișier userChrome.css implicit.

adresa urlului de nume ("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
# appmenu-button
fundal: #orange! important;

# appmenu-button dropmarker: înainte de
conținut: "Firefox" important!
culoare: #FFFFFF! important;

# butonul appmenu .button-text
afișare: nici unul! important;

Este posibil să aveți deja un fișier userChrome.css, caz în care va exista deja text pe fila userChrome.css. Copiați tot textul de mai sus, cu excepția primei linii, linia @namespace și inserați-o în fila undeva după linia @namespace. Dacă doriți să păstrați ceea ce aveți deja, puteți lipi textul de mai sus la sfârșitul fișierului.

IMPORTANT: Asigurați-vă că toate citatele din userChrome.css NU sunt citate inteligente, inclusiv cele din linia @namespace. Ar trebui să fie citate simple, simple. Dacă oricare dintre acestea sunt citate inteligente, fișierul nu va afecta aspectul Firefox.

Faceți clic pe Restart pentru a reporni Firefox utilizând fișierul userChrome.css nou sau revizuit.

În acest exemplu, vom schimba culoarea de fundal într-un albastru închis și vom schimba textul "Firefox" în "How-To Geek".

Pentru a modifica culoarea de fundal, modificați textul "#orange" de pe linia "fundal" din secțiunea "# appmenu-button" la o altă culoare, utilizând codul de culoare hexagonală sau codul de culoare HTML. De exemplu, am ales un albastru închis cu codul de culoare hex din # 2C4362.

NOTĂ: Pentru a afla codul de culoare hexagonală pentru culoarea dorită, consultați articolele despre obținerea codurilor de culoare hexagonale din culori zecimale RGB, selectarea culorilor de oriunde pe ecran și obținerea codurilor de culoare în mai multe formate.

Pentru a schimba textul pe buton, schimbați textul "Firefox" pe linia "content" din secțiunea "# appmenu-button dropmarker: before" la textul dorit, cum ar fi "How-To Geek". Am adăugat un spațiu după text pentru a avea mai mult spațiu între text și săgeata drop-down de pe buton.

Puteți alege să modificați și culoarea textului, schimbând linia "color" în aceeași secțiune "# appmenu-button dropmarker: before". Am lăsat culoarea textului ca alb (#FFFFFF), dar o puteți schimba în ceva de tipul gri deschis (# F2F2F2) sau ceva de genul acesta.

Faceți clic pe Salvați și apoi pe Repornire pentru ca modificările să aibă efect.

Butonul este acum albastru închis și spune "How-To Geek".

De asemenea, puteți adăuga o imagine de fundal pe buton, pe lângă schimbarea culorii de fundal. Am creat o imagine care are faviconul How-To Geek din partea stângă și un fundal transparent, astfel încât culoarea de fundal albastru închis să fie afișată. Pentru a adăuga o imagine de fundal pe butonul dvs., adăugați următoarea linie în secțiunea "# appmenu-button", schimbând calea în ghilimele în locația imaginii pe computer. Lăsați "file: ///" în cale.

background-image: url ("fișier: /// C: /Users/Lori/Pictures/htg_background.png")! important;

Dați clic pe Salvați și reporniți din nou.

Acum butonul nostru este complet.

De asemenea, puteți personaliza butonul meniului Firefox transformându-l într-o pictogramă. De asemenea, am publicat multe alte sfaturi și trucuri pentru a obține cele mai multe din Firefox.