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

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

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

Video: Come personalizzare l'aspetto del pulsante del menu di Orange Firefox
Video: Top 20 Windows 10 Tips and Tricks - YouTube 2024, Aprile
Anonim
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.
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é le sue 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 ChromEdit Plus.
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 ChromEdit Plus.

https://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.
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.
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.
È 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.
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.
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(“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; }

Potresti già avere un file userChrome.css, nel qual caso ci sarà già del testo nella scheda userChrome.css. Copia tutto il testo sopra tranne la prima riga, la riga @namespace e incollalo nella scheda in qualche punto 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 virgolette intelligenti, comprese quelle nella riga @namespace. Dovrebbero essere citazioni ordinarie e semplici. 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".
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 scegliere di cambiare anche 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 in 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".
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. Lascia il "file: ///" nel percorso.
È 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. Lascia il "file: ///" nel percorso.

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

Fai clic su Salva e riavvia di nuovo.

Consigliato: