Come personalizzare l'aspetto del pulsante del menu di Orange Firefox

Ti sei stancato di guardare il pulsante del menu arancione di Firefox? L'interfaccia di Firefox è completamente personalizzabile, quindi puoi cambiare il colore, il testo e altre proprietà del pulsante del menu di Firefox per creare il tuo look personalizzato.

Per cambiare l'aspetto del pulsante del menu di Firefox, modificheremo il file userChrome.css. Questo file ti consente di modificare l'aspetto di qualsiasi parte di Firefox, nonché la sua funzionalità.

Prima di iniziare a modificare il file userChrome.css, installeremo un componente aggiuntivo, chiamato ChromEdit Plus, che ci consentirà di modificare facilmente il file e salvarlo nel formato corretto. Fare clic sul seguente collegamento per accedere alla pagina Web di ChromEdit Plus.

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

Fai clic sul pulsante Aggiungi a Firefox sulla pagina.

Potrebbe essere visualizzato il seguente messaggio. Fai clic su Consenti per continuare l'installazione del componente aggiuntivo ChromEdit Plus.

NOTA: prestare molta attenzione a ciò che si consente durante l'installazione di estensioni e altri software. Se non sei sicuro del prodotto o non ti fidi della compagnia, non installare. Abbiamo testato ChromEdit Plus e l'abbiamo trovato sicuro e affidabile.

Viene visualizzata la finestra di dialogo Installazione software. Fai clic su Installa ora, che potrebbe non essere disponibile fino al termine del conto alla rovescia.

NOTA: è possibile modificare la durata del conto alla rovescia sul pulsante Installa, ma non è consigliabile disabilitarla.

È necessario riavviare Firefox per completare l'installazione. Fare clic su Riavvia ora nella finestra di dialogo popup.

Una volta riavviato Firefox, il pulsante ChromEdit Plus viene aggiunto a destra della casella Indirizzo. Fare clic per aprire la finestra di ChromEdit Plus.

Ci sono tre schede di default sulla finestra di ChromEdit Plus. Modificheremo il file userChrome.css, che si trova nella prima scheda. Se la scheda è vuota, copia e incolla il seguente testo nella scheda userChrome.css e fai clic su Salva. Questo ti dà un file userChrome.css predefinito.

@namespace url ("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
# appmenu-button
sfondo: #orange! importante;

# dropmarker del pulsante appmen: before
contenuto: "Firefox"! importante;
colore: #FFFFFF! importante;

# appmenu-button .button-text
display: nessuno! importante;

Potresti già avere un file userChrome.css, nel qual caso ci sarà già del testo nella scheda userChrome.css. Copia tutto il testo sopra, ad eccezione della prima riga, la riga @namespace, e incollalo nella scheda da qualche parte dopo la riga @namespace. Se vuoi mantenere ciò che hai già, puoi incollare il testo sopra alla fine del file.

IMPORTANTE: assicurati che tutte le virgolette in userChrome.css NON siano citazioni intelligenti, comprese quelle nella riga @namespace. Dovrebbero essere citazioni ordinarie e dirette. Se qualcuno di questi è virgolette intelligenti, il file non avrà alcun effetto sull'aspetto di Firefox.

Fai clic su Riavvia per riavviare Firefox utilizzando il file userChrome.css nuovo o revisionato.

In questo esempio, cambieremo il colore di sfondo in blu scuro e cambieremo il testo di "Firefox" in "How-To Geek".

Per cambiare il colore di sfondo, modifica il testo "#orange" sulla riga "background" nella sezione "# appmenu-button" su un colore diverso, usando il codice esadecimale o il codice colore HTML. Ad esempio, abbiamo scelto un blu scuro con il codice colore esadecimale di # 2C4362.

NOTA: per capire il codice esadecimale per il colore desiderato, consulta i nostri articoli su come ottenere codici colore esadecimali dai colori RGB decimali, selezionare i colori da qualsiasi punto dello schermo e ottenere codici colore in più formati.

Per modificare il testo sul pulsante, modificare il testo "Firefox" sulla riga "contenuto" nel "dropmarker # button: prima di" sezione del testo desiderato, ad esempio "How-To Geek". Abbiamo aggiunto uno spazio dopo il testo per avere più spazio tra il testo e la freccia a discesa sul pulsante.

Puoi anche scegliere di cambiare il colore del testo cambiando la linea "colore" nello stesso "# dropmarker pulsante appmenu: prima" sezione. Abbiamo lasciato il colore del testo come bianco (#FFFFFF), ma puoi cambiarlo con qualcosa di simile a un grigio chiaro (# F2F2F2), o qualcosa del genere.

Fai clic su Salva, quindi su Riavvia per rendere effettive le modifiche.

Il pulsante è ora blu scuro e dice "How-To Geek".

È anche possibile aggiungere un'immagine di sfondo al pulsante, oltre a modificare il colore di sfondo. Abbiamo creato un'immagine con la favicon How-To Geek sulla sinistra e uno sfondo trasparente in modo che il colore di sfondo blu scuro sia visibile. Per aggiungere un'immagine di sfondo al tuo pulsante, aggiungi la seguente riga alla sezione "# appmenu-button", cambiando il percorso tra virgolette e la posizione dell'immagine sul tuo computer. Lasciare il "file: ///" nel percorso.

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

Fai clic su Salva e riavvia di nuovo.

Ora il nostro pulsante è completo.

Puoi anche personalizzare il pulsante del menu di Firefox convertendolo in un'icona. Abbiamo anche pubblicato molti altri suggerimenti e trucchi per ottenere il massimo da Firefox.