Topic: UserChrome.css How-To [fino alla versione 3.6.x]

[Underpass]

Per le versioni successive a Firefox 3.6.x, leggere la FAQ
userChrome.css How-To -Aggiornamenti

Questa vuole essere una discussione aperta affinché tutti gli utenti del forum diano suggerimenti e possano chiedere supporto sulle personalizzazioni di Firefox ottenibili mediante la modifica del file userChrome.css

Ricordiamo che questo file imposta le regole di visualizzazione per vari elementi nell'interfaccia utente di Mozilla Firefox ed è posto in una sottodirectory chiamata "chrome", all'interno della cartella del profilo. L'userChrome.css non esiste di norma e va creato prima di aggiungere le proprie preferenze. Vi è comunque un esempio di tale file chiamato userChrome-example.css. Praticamente, basta rinominare tale file rimuovendo la parte -example.
Similmente, è possibile personalizzare anche Thunderbird e Mozilla Suite/SeaMonkey.

Alcuni effetti che possiamo ottenere modificando opportunamente questo file:

- modificare il tipo, la dimensione e i colori dei font utilizzati
- cambiare i colori o aggiungere sfondi agli elementi dell'interfaccia
- nascondere vari elementi e voci di menù

Invitiamo gli utenti a:

• postare il contenuto dei propri file servendosi del tag CODE (come mostrato in figura)
  
  
• al fine di semplificare la lettura e tenere traccia dei cambiamenti effettuati, inserire un commento al principio di ogni personalizzazione o blocco di personalizzazioni. Per commentare una riga è sufficiente sia compresa tra i caratteri /* e */.
  Esempio:
  
  

Codice: [Seleziona]

/* Inserire i commenti nel file in questo modo  */


• Inserire post strettamente inerenti all'argomento. Post che vertono su argomenti di altro genere verranno cancellati senza preavviso a discrezione di mod e admin

Alcuni suggerimenti utili:

• dotarsi di un editor con funzioni avanzate di ricerca e sostituzione testo come SciTE, PSPad, etc. (in alternativa è comunque possibile utilizzare il blocco note in Windows e Gedit o Kwrite in Linux)
• utilizzare estensioni che diano accesso immediato alla modifica dei file di configurazione (ChromEdit Plus, Edit Config Files, etc.)
  
  
• effettuare le prove su un profilo "pulito"; tenere presente che alcune Estensioni particolari e soprattutto i Temi possono inficiare le modifiche effettuate
• familiarizzare con il DOM inspector: per sapere come si chiamano i vari elementi è possibile richiamare il DOM Inspector (CTRL + SHIFT + I), inserire l'URL chrome://browser/content/browser.xul e cliccare su Inspect (per SeaMonkey/MAS l'URL è: chrome://navigator/content/navigator.xul).
  
  
• dal momento che ogni modifica effetutata all'userChrome.css viene applicata al successivo riavvio di Firefox, può essere comodo a questo scopo utilizzare l'estensione Restart Firefox
  
  Aspettiamo quindi i vostri esempi, suggerimenti e richieste.
  Ciao ;)
  
  
  
  FIREFOX
  
  About:config, impedirne l'accesso
  Awesome bar: colorare lo sfondo dei suggerimenti
  Barra di caricamento (Progressbar)
  Pulizia della barra degli indirizzi
  Barra degli indirizzi: modifiche
  Barra degli indirizzi: eliminare il pulsante dei feed
  Barra degli indirizzi: eliminare il pulsante "Vai"
  Pulizia del menu segnalibri
  Barra dei menu, toolbar, barra dei segnalibri e barra delle schede: variare a nostro piacimento i colori
  Nascondere gli elementi della barra dei menu
  Barra dei menu: rimuovere elementi
  Barra delle schede: eliminare il pulsante "Apri una nuova scheda"
  Barra delle schede: eliminare il pulsante Elenco di tutte le schede
  Barra dei segnalibri: a scomparsa
  Barra dei segnalibri: cambiare le icone delle cartelle
  Barra dei segnalibri: su più righe
  Barra di ricerca (searchbar): aumentare la lunghezza
  Barra di stato: cambiare colore
  Barra di stato: immagine di sfondo
  Barra laterale (segnalibri, cronologia, ecc.): spostarla a destra
  Barre di scorrimento: cambiare colore (bug)
  Menu Cronologia: pulizia
  Menu File, Chiudi finestra
  Menu Strumenti: togliere la voce "Avvia navigazione anonima"
  Menu Strumenti: togliere il pulsante delle impostazioni di connessione nel menu Rete per impedire il collegamento a determinati siti
  Menu Strumenti: pulizia
  Messaggi di avviso: cambiare il colore
  Password: eliminare il tasto Rimuovi tutto
  Schede: cambiare l'immagine del throbber
  Schede: centrare le schede nel pannello delle Preferenze principali e in quello dei componenti aggiuntivi
  Schede: effetto al passaggio del mouse sulle tab - :hover
  Schede: personalizzazione
  Segnalibri: personalizzare il pannello di aggiunta nuovo segnalibro
  Toolbar: immagine di sfondo
  Throbber
  -moz-appearance: none !important;
  Ripristinare tutti i pulsanti nel FAYT (stile FF 1.5)
  Ripristinare la colorazione gialla della barra degli indirizzi sui siti che usano https
  Riprodurre gli effetti dell'estensione Slim Extension List
  Visualizzazione del titolo dei segnalibri nella barra al solo passaggio del mouse
  
  
  
  
  
  THUNDERBIRD
  
  Thunderbird 1.5.0.x: aumentare la leggibilità del Pannello Messaggi controllare se questo trucco è ancora valido
  Thunderbird: allegati con nomi lunghi da non troncare
  Thunderbird: Folder Pane & Message Pane
  Thunderbird: messaggi etichettati, come evidenziarli
  Thunderbird: etichette più leggibili
  Thunderbird: rimuovere il tasto Mostra password del password manager
  Tasti per spostarsi fra le viste cartelle (TB ≥ 8.0)
  Mostrare gli allegati senza raggrupparli (TB ≥ 8.0)

[Underpass]

Esempio: senza installare temi particolari è possibile variare a nostro piacimento i colori della barra dei menù, toolbar, barra dei segnalibri e barra delle schede:

Codice: [Seleziona]

/* Colorare menù, toolbar, barra dei segnalibri e barra delle schede  */
#navigator-toolbox, .tabbrowser-tabs {
-moz-appearance: none !important;
background-color: #C4C4EC !important;
}

Ovviamente è possibile usare qualunque colore (ho preso come esempio il colore di Mozilla Italia )

[tittoproject]

Nascondere gli elementi della barra dei menu

Nel codice seguente, ogni riga identifica un elemento della barra dei menu: "File", "Modifica", "Visualizza", "Vai", "Segnalibri", "Strumenti" e "?".

Codice: [Seleziona]

/* Nascondere gli elementi della barra dei menu */
/*#file-menu,*/
#edit-menu,
/*#view-menu,*/
#go-menu,
/*#bookmarks-menu,
#tools-menu, */
#helpMenu
{display: none !important;}
Nell'esempio, sono nascosti i menu "Modifica", "Vai" e "?", gli altri, infatti, sono racchiusi tra i simboli /* e */ e quindi trattati come commenti e non come comandi.

[Underpass]

Cambiare colore della barra di stato

Con questo codice è possibile cambiare il colore della barra di stato:

Codice: [Seleziona]

/* Barra di stato */
#status-bar statusbarpanel {
-moz-appearance: none !important;
background-color: #C4C4EC !important;
}

[Underpass]

Immagine di sfondo toolbar:

Il seguente codice ci permette di aggiungere un'immagine di sfondo al gruppo barra dei menù + segnalibri + barra di navigazione + barra delle schede:

Codice: [Seleziona]

/* Immagine di sfondo toolbar + barra schede */
#navigator-toolbox, .tabbrowser-tabs {
-moz-appearance: none !important;
background-color: transparent !important;
background-image: url("immagine.gif") !important;
}
Come immagine possiamo usare file PNG, JPG o GIF, che vanno posti all'interno della cartella chrome. Nel caso in cui invece siano in cartelle differenti, è necessario specificarne l'ubicazione (in Windows utilizzare la sintassi file:///path/del/file.gif)

Ad esempio, utilizzando il file blue_oil.gif, l'effetto ottenuto è il seguente:

[Underpass]

Immagine di sfondo per la barra di stato

Confrontando i precedenti due post, è facile trarne spunto per aggiungere uno sfondo alla barra di stato:

Codice: [Seleziona]

/* Barra di stato */
#status-bar statusbarpanel {
-moz-appearance: none !important;
background-color: transparent !important;
background-image: url("immagine.gif") !important;
}

[Underpass]

-moz-appearance: none !important;

Nel tema di default di Firefox, alcuni elementi assumono colori e forme in accordo con il tema che abbiamo scelto per il sistema operativo.

L'istruzione:

Codice: [Seleziona]

-moz-appearance: none !important;
che qualcuno può aver notato in maniera ricorrente nei precedenti esempi ci serve per contrastare questo comportamento, imponendo che prevalgano i nostri settaggi, e non i colori di Windows (o Linux, o MAC OS).
Sfruttando gli esempi precedenti, potete provare a colorare la barra di stato omettendo questa istruzione...

[Underpass]

Throbber

Il throbber è quell"'oggetto" che trovate in alto a destra nella finestra di Firefox, e che ruota durante il caricamento delle pagine:



Se voleste eliminarlo completamente, non avete che da aggiungere questo codice all'userchrome.css:

Codice: [Seleziona]

/* Elimina il throbber */
#throbber-box {
 display: none !important;
}
Di seguito invece trovate le istruzioni da aggiungere per sostituire il throbber di default.
Abbiamo bisogno, per far questo, di due immagini: una per il throbber "fermo" e una da utilizzare durante il caricamento delle pagine.

Ad esempio:

     e     

Se le salviamo rispettivamente con i nomi world16.gif e throbtrans16.gif all'interno della cartella chrome, useremo questo codice:

Codice: [Seleziona]

/* Nuovo throbber */
#navigator-throbber {
list-style-image: url("world16.gif") !important;
-moz-opacity: 1 !important;
}
#navigator-throbber[busy="true"] {
list-style-image: url("throbtrans16.gif") !important;
-moz-opacity: 1 !important;
}
Possiamo usare valori compresi tra 0 e 1 per l'istruzione -moz-opacity (ad esempio 0.7) al fine di rendere il throbber meno "appariscente".

[gialloporpora]

Cambiare il colore nei messaggi di avviso

Questo codice cambia il colore degli alert, ad esempio il messaggio che compare quando Firefox vi chiede se
volete ricordare una passwor oppure quello che TB vi mostra quando ci sono problemi di connessione col server.

Codice: [Seleziona]

/* Cambia il colore dei messaggi di avviso, sfondo e testo */
dialog {
-moz-appearance: none !important;
background-color: blue !important;
  color: white !important;
  font-weight: bold !important;
}

/* Cambia il colore dei bottoni nei messaggi di avviso */
.dialog-button {
-moz-appearance: none !important;
background-color: #0000DD !important;
color: yellow !important;
font-weight: 900 !important;
}

Screenshot:




Link utili:
Introduzione ai fogli di stile CSS
Comandi CSS specifici di Mozilla (in inglese)
Tavolozza dei colori

E ho anche una domanda, che significato ha la specifica ThreeDShadow ?

[Underpass]

che significato ha la specifica ThreeDShadow ?

Ciao, mi pare di capire che sia una proprietà che si può dare ai bordi, opposta a ThreeDHighlight, e dà l'effetto ombreggiatura e rilievo. Tornando all'esempio del throbber, stavo provando:

Codice: [Seleziona]

/* Bordo casella del throbber /*
#throbber-box {
-moz-appearance: none !important;
margin: 4px !important;
padding: 4px !important;
border: 3px solid transparent !important;
-moz-border-top-colors: ThreeDHighlight !important;
-moz-border-right-colors: ThreeDShadow !important;
-moz-border-bottom-colors: ThreeDShadow !important;
-moz-border-left-colors: ThreeDHighlight !important;
  }
Che non è propriamente un bell'effetto ma dà l'idea...

[Underpass]

Barra di caricamento (Progressbar)

E' possibile cambiare colore o dare uno sfondo alla barra di caricamento:

Codice: [Seleziona]

/* Colore / sfondo progress-bar */
.progress-bar {
-moz-appearance: none !important;
min-height: 12px !important;
background-color: #d15824 !important;
}
min-height ci serve per impostarne l'altezza. Il colore è, naturalmente, un esempio: si può usare qualunque colore si desideri. Per lo sfondo si procede analogamente: si prende un'immagine di sfondo, ad esempio questa:



(a cui daremo nome progbar.jpg e salveremo nella chrome) e si sostituisce, nel codice precedente la riga

Codice: [Seleziona]

background-image: url("progbar.jpg") !important;
alla riga con background-color.

Nota: questo codice ha effetto anche sulla barra di caricamento della scheda Estensioni durante la procedura di aggiornamento.

[Underpass]

Barra dei Segnalibri su più righe

E' possibile fare in modo che la Barra dei Segnalibri si disponga su più righe, una volta che si sia esaurito lo spazio nella prima, evitando lo scomodo menù a tendina. Queste sono le righe da aggiungere all'userchrome.css:

Codice: [Seleziona]

/* Barra dei Segnalibri su più righe */
#bookmarks-ptf {display:block}
#bookmarks-ptf toolbarseparator {display:inline}
Versione per FIREFOX 3

Codice: [Seleziona]

/* Multi-row bookmarks toolbar */
#bookmarksBarContent {display:block !important;}
.places-toolbar-items {display:block !important; height: 48px !important;
overflow-y:auto!important;}
#bookmarksBarContent toolbarseparator {display:inline !important;}
#bookmarksBarContent .bookmark-item {visibility: visible !important;}
.chevron {height: 0px !important;}

[gialloporpora]

Thunderbird: Folder Pane & Message Pane

Non so come chiamarli in italiano comunque sono rispettivamente i riquadri dove appariono
le varie cartelle di posta e dove appaiono le mail in Thunderbird/SeaMonkey. Per definire
un colore di sfondo  diverso da quello impostato nel vostro tema usare questo codice:

Codice: [Seleziona]

/*  Folderpane & Messagepane */
/*    Cambia il colore di sfondo delle finestre degli account e dei messaggi */
treechildren {
background-color: yellow  !important;
}
E' anche possibile impostare un'immagine di background come spiegato da underpass nei post precedenti

[indigo]

Ecco la mia prima (modesta) collaborazione..

Modifiche alla barra degli indirizzi

Codice: [Seleziona]

/*** Modifiche alla barra degli indirizzi **/
textbox#urlbar {
        -moz-appearance: none !important;
        font-weight: 700 !important;
        font-size: 18px !important;     
        font-family: Arial !important;
        color: #ffffff !important;
        height: 30px !important;
        text-align: center !important;
        background-color: red !important;
}

/*** Font-weight indica il peso del testo..valori possibili da 100 a 900, salendo di cento in cento.
Font-size indica la grandezza del testo, da indicare in pixel
Font-family indica il font del testo
Color indica il colore del testo, da indicare volendo anche in hex (esadecimale)
Height indica l'altezza della barra degli indirizzi, eventualmente da armonizzare con la grandezza del font-size
Text-align ammette come valori: left (default), right, center;
Background-color modifica il colore di sfondo della barra, vedi quanto detto su color
***/

Da un lato permette di aumentare la grandezza del carattere, aumentando l'accessibilità, dall'altro di personalizzare il colore del font e il font stesso..
text-align è sostanzialmente inutile, ma magari a qualche "eccentrico" può tornare utile..

ciao

[indigo]

Personalizzazione delle schede

Codice: [Seleziona]


/*** Personalizzazione delle tab ***/

tabbrowser#content tab{
-moz-appearance: none !important;
background-color: green !important;
        height: 30px !important;
        font-family: Arial !important;
        border-bottom: 2px solid red !important;
}

Questo codice consente di completare la personalizzazione indicata vari post sopra da Underpass, e avere un Firefox tutto colorato, colorando anche le tab..
La voce più rilevante è quindi "background-color" per il quale vale il discorso fatto sopra..
"height" si commenta da sè..
ho scelto,per quanto riguarda il font, di modificare solo la famiglia e non le dimensioni del font, in quanto non vi è elasticità orizzontale della tab, e FF pare non accettare una modifica della larghezza..
Per quanto riguarda "border-bottom", abbastanza irrilevante, ho messo solo lui, e non tutti i bordi perchè pare l'unico personalizzabile (per ora  )

ciao