Autore Topic: UserChrome.css How-To [fino alla versione 3.6.x]  (Letto 104229 volte)

0 Utenti e 1 Visitatore stanno visualizzando questo topic.

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
UserChrome.css How-To [fino alla versione 3.6.x]
« il: 18 Febbraio 2006 17:23:20 »

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:

« Ultima modifica: 14 Agosto 2013 16:31:44 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #1 il: 18 Febbraio 2006 18:19:13 »
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 :))
« Ultima modifica: 25 Giugno 2008 08:24:43 da miki64 »

Offline tittoproject

  • Post: 1298
    • The Home Of Tittoproject
Re: UserChrome.css How-To
« Risposta #2 il: 26 Febbraio 2006 11:35:18 »
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.
« Ultima modifica: 25 Giugno 2008 08:24:00 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #3 il: 26 Febbraio 2006 15:50:44 »
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;
}
« Ultima modifica: 25 Giugno 2008 08:25:01 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #4 il: 03 Marzo 2006 22:45:34 »
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:

« Ultima modifica: 25 Giugno 2008 08:25:16 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #5 il: 07 Marzo 2006 17:44:31 »
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;
}
« Ultima modifica: 25 Giugno 2008 08:26:09 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #6 il: 07 Marzo 2006 17:54:48 »
-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... ;)
« Ultima modifica: 25 Giugno 2008 08:29:06 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #7 il: 14 Marzo 2006 20:22:38 »
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". ;)
« Ultima modifica: 25 Giugno 2008 08:29:19 da miki64 »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10776
    • Il blog che non c'è
Re: UserChrome.css How-To
« Risposta #8 il: 15 Marzo 2006 18:25:32 »
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 ?
« Ultima modifica: 25 Giugno 2008 08:29:33 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #9 il: 15 Marzo 2006 21:33:41 »
Citazione di: gialloporpora
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... ;)

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #10 il: 18 Marzo 2006 13:37:50 »
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.
« Ultima modifica: 25 Giugno 2008 08:29:53 da miki64 »

Offline Underpass

  • I've got fabric to sell
  • Amministratore
  • Post: 20519
    • Mozilla Italia
Re: UserChrome.css How-To
« Risposta #11 il: 25 Marzo 2006 12:49:50 »
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;}
« Ultima modifica: 20 Luglio 2008 08:34:42 da flod »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10776
    • Il blog che non c'è
Thunderbird: Folder pane e Message Pane
« Risposta #12 il: 02 Aprile 2006 15:04:47 »
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
« Ultima modifica: 11 Luglio 2008 22:43:38 da gialloporpora »

Offline indigo

  • Post: 1277
Re: UserChrome.css How-To
« Risposta #13 il: 17 Maggio 2006 16:23:51 »
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

:D
« Ultima modifica: 25 Giugno 2008 08:30:43 da miki64 »

Offline indigo

  • Post: 1277
Re: UserChrome.css How-To
« Risposta #14 il: 17 Maggio 2006 16:55:09 »
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  :P)

ciao

:D
« Ultima modifica: 05 Febbraio 2009 11:19:11 da miki64 »

0 Utenti e 1 Visitatore stanno visualizzando questo topic.