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

[indigo]

Effetto al passaggio del mouse sulle tab - :hover

Codice: [Seleziona]


/** Effetto al passaggio del mouse sulle tab **/

tabbrowser#content tab{
        -moz-appearance: none !important;
}

tabbrowser#content tab:hover{
        background-color: blue !important;
}

Questo primo codice consente di far cambiare lo sfondo delle tab al passaggio del mouse..

N.B.
la riga

Codice: [Seleziona]


tabbrowser#content tab{
        -moz-appearance: none !important;
}
va aggiunta solo se non si sono già personalizzate le tab seguendo il post precedente

----------------------------------------------------------------

Codice: [Seleziona]

toolbar toolbarbutton:hover{
-moz-appearance: none !important;
background-color: red !important;
}

Questo secondo codice l'avevo pensato per implementare l'effetto hover anche per i pulsanti della toolbar, ma, seppur funzionante, genera un brutto effetto, è come se i pulsanti durante l'hover si allargassero e così facendo sballano i layout..quindi lo indico solo per curiosità (e così magari qualcuno risolve il problema)

ciao

[Underpass]

Sono riuscito a farlo funzionare con

Codice: [Seleziona]

/** Effetto al passaggio del mouse sui pulsanti  **/

toolbar toolbarbutton {
-moz-appearance: none !important;
}

toolbar toolbarbutton:hover{
-moz-appearance: none !important;
background-color: red !important;
}
Ciao

[Underpass]

Thunderbird: nomi lunghi degli allegati da non troncare

Approfitto della domanda dell'utente arkadian (che ringrazio ) per inserire questo tweak: a partire dalla versione 1.5.x di Thunderbird, i nomi degli allegati non vengono riportati per intero, ma se superano una certa lunghezza vengono troncati e completati da puntini sospensivi. Con questa modifica all'userchrome.css il comportamento "normale" viene ripristinato:

Codice: [Seleziona]

/* Nomi degli allegati */
.attachmentBox {
width: auto !important;
max-width: none !important;
min-width: 15em !important;
}

[Underpass]

Pulizia menu Strumenti di Firefox:

Su segnalazione di gialloporpora (che ringraziamo ):

Per fare un po' di pulizia al menu "Strumenti" di Firefox ci sono sicuramente tre voci da eliminare; siccome due di esse fra qualche settimana - quando sarà rilasciata la versione 2.0 - spariranno da sole, rimane questa:

Codice: [Seleziona]

/* Rimuovere la voce "Cerca nel Web" dal menu Strumenti */
#menu_ToolsPopup menuitem[command="Tools:Search"],
#menu_ToolsPopup menuitem[command="Tools:Search"] + menuseparator
{display: none;}

Copiato da qui, questo codice serve per mostrare i pulsanti "Stop" e "Ricarica" solo se necessari.

Codice: [Seleziona]

/* Visualizza i pulsanti Stop e Ricarica in modo intelligente */
#stop-button[disabled] { display: none;}
#stop-button:not([disabled]) + #reload-button {
display: none;
}

[tittoproject]

Aggiungo:

Codice: [Seleziona]

/* Rimuovere le voci "Leggi posta" e "Nuovo messaggio" dal menu Strumenti */
#tools-menu menuitem[command="Browser:ReadMail"],
#tools-menu menuitem[command="Browser:NewMessage"],
#tools-menu menuitem[command="Browser:NewMessage"] + menuseparator
{display: none;}
Anche queste dovrebbero sparire, e se no le facciamo sparire noi 

[Underpass]

Aumentare la lunghezza della barra di ricerca (searchbar)

Ringraziamo gialloporpora per aver individuato questo tweak:

Codice: [Seleziona]

/* Aumentare la lunghezza della barra di ricerca */
#search-container, #searchbar {
width: 400px !important;
}
Il valore, in questo caso 400 pixel, può essere naturalmente aumentato o diminuito a piacimento.

[Underpass]

Cambiare l'immagine del throbber sulle schede (tab)



Con questo codice

Codice: [Seleziona]

/* Cambiare l'immagine del throbber sulle schede */
.tabbrowser-tab[busy] > .tab-image-middle > .tab-icon > .tab-icon-image {
-moz-appearance: none !important;
list-style-image: url("throbtrans16.gif") !important;
opacity: 1.0 !important;
}
il throbber verrà sostituito con:   

(attenzione: l'immagine deve trovarsi nella cartella Chrome del profilo e avere nome throbtrans16.gif)

Per Firefox 3.x il codice è:

Codice: [Seleziona]

/* Cambiare l'immagine del throbber sulle schede */
.tabbrowser-tab[busy] > .tab-icon-image {
-moz-appearance: none !important;
list-style-image: url("throbtrans16.gif") !important;
opacity: 1.0 !important;
}
Ringraziamo l'utente RoksVempire per aver posto il problema


Edit: altro throbber pescato in rete:

[Underpass]

Riproduzione gli effetti dell'estensione Slim Extension List

Pubblichiamo con piacere la segnalazione fatta dall'utente rpanizza sul forum di eXtenZilla.

Il seguente codice, applicato all'userchrome.css, riproduce gli effetti dell'estensione Slim Extension List, al momento non compatibile con Firefox 2.0.

Codice: [Seleziona]

/* Lista compatta delle estensioni */

#extensionsView richlistitem {

  padding-bottom: 3px !important;

  padding-top: 3px !important;

}

#extensionsView richlistitem:not([selected=true]) .addonIcon {

  height: 16px !important;

  width: 16px !important;

}

#extensionsView richlistitem:not([selected=true]) .addon-description {

  display: none !important;

}

#extensionsView richlistitem:not([selected=true]) .addon-name-version {

  height: 16px !important;

  width: 16px !important;

  min-height: 16px !important;

  min-width: 16px !important;

}

#viewGroup radio{

  min-width: 40px !important;

  width: 40px !important;

}

#viewGroup radio label{

  display: none !important;

}
Il codice è testato per i rami 3.0* e 3.5*.

[Underpass]

Password: eliminare il tasto Rimuovi tutto

Vi siete mai trovati a voler rimuovere UNA SOLA password memorizzata e avete premuto per sbaglio il tasto RIMUOVI TUTTO? (io una volta sì... )

Con questo tweak è possibile far sparire quel tasto

Codice: [Seleziona]

/* Non visualizzare il tasto per rimuovere tutte le password */
#removeAllSignons {display: none !important;}

[Underpass]

Aumentare la leggibilità del Pannello Messaggi in Thunderbird 1.5.0.x

Aggiungendo questo codice all'userchrome.css di Thunderbird

Codice: [Seleziona]

/* Leggibilità del pannello messaggi - Inizio */
treechildren::-moz-tree-row(odd) {
  border: 1px solid transparent !important;
  background-color: #FFFFFF !important;
  min-height: 18px !important;
  height: 1.3em !important;
}
treechildren::-moz-tree-row(even) {
  border: 1px solid transparent !important;
  background-color: #F0F0F0 !important;
  min-height: 18px !important;
  height: 1.3em !important;
}
treechildren::-moz-tree-row(selected) {
  background-color: -moz-Dialog !important;
}
treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}
treechildren::-moz-tree-row(current, focus) {
  border: 1px dotted #000000 !important;
}
treechildren::-moz-tree-row(selected, current, focus) {
  border: 1px dotted #C0C0C0 !important;
}
tree[selstyle="primary"] > treechildren::-moz-tree-row {
  border: none !important;
  background-color: transparent !important;
}

/* Leggibilità del pannello messaggi - Fine */
Si otterrà il seguente effetto:



senza bisogno di installare temi aggiuntivi.
Intervenendo sui valori #FFFFFF e #F0F0F0 è possibile cambiare i colori dello sfondo per le righe.

[miki64]

Barra dei segnalibri a scomparsa

La seguente personalizzazione permette di nascondere la barra dei segnalibri e di farla apparire quando ci si posiziona col mouse sulla barra degli strumenti:

Codice: [Seleziona]

/**Barra dei segnalibri a scomparsa**/
#PersonalToolbar {
display: none !important;
}
#navigator-toolbox:hover > #PersonalToolbar {
display: -moz-box !important;
}

Grazie a gialloporpora  per la segnalazione via: Alta Gradazione

[Underpass]

Thunderbird: Evidenziazione dei messaggi etichettati

Sinceramente, una cosa che non mi piace molto è la gestione dei tag in Thunderbird.
Quando il messaggio è selezionato, le email etichettate si riconoscono e si identificano facilmente.

Ma quando non sono selezionati, i messaggi etichettati risultano davvero poco riconoscibili.

Per attenuare questo problema, è possibile aggiungere questo codice da aggiungere all'userchrome.css

Codice: [Seleziona]

/* Tag evidenziati */

treechildren::-moz-tree-cell(lc-FF0000) {background-color: #FFCCCC !important;}
treechildren::-moz-tree-cell-text(lc-FF0000) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FF0000, selected) { background-color: #FF0000 !important; }
treechildren::-moz-tree-cell-text(lc-FF0000, selected) { color: #FFF !important; }

treechildren::-moz-tree-cell(lc-FF9900) {background-color: #FFCC99 !important;} 
treechildren::-moz-tree-cell-text(lc-FF9900) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-FF9900, selected) { background-color: #FF9900 !important; }
treechildren::-moz-tree-cell-text(lc-FF9900, selected) { color: #FFF !important; }

treechildren::-moz-tree-cell(lc-009900) {background-color: #99FF99 !important;}
treechildren::-moz-tree-cell-text(lc-009900) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-009900, selected) { background-color: #009900 !important; }
treechildren::-moz-tree-cell-text(lc-009900, selected) { color: #FFF !important; }

treechildren::-moz-tree-cell(lc-3333FF) {background-color: #CCCCFF !important;}
treechildren::-moz-tree-cell-text(lc-3333FF) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-3333FF, selected) { background-color: #3333FF !important; }
treechildren::-moz-tree-cell-text(lc-3333FF, selected) { color: #FFF !important; }

treechildren::-moz-tree-cell(lc-993399) {background-color: #FFCCFF !important;}
treechildren::-moz-tree-cell-text(lc-993399) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-993399, selected) { background-color: #993399 !important; }
treechildren::-moz-tree-cell-text(lc-993399, selected) { color: #FFF !important; }
E questo è il risultato:



Se vogliamo, l'unica nota dolente è che se si aggiungono etichette personalizzate, è necessario capire il codice che utilizzano e aggiungere nuove righe per inserire un colore differente.

Ciao

P.S. Grazie a gialloporpora

EDIT by Sokak

Come individuare, e come inserire le nuove etichette?

Aprite il file prefs.js all'interno della cartella del profilo di Thunderbird.

Cercate il nome di una delle nuove etichette che avete creato: per un ipotetica etichetta chiamata "Prova" dovreste trovare un codice molto simile a questo:

Codice: [Seleziona]

user_pref("mailnews.tags.prova.color", "#CC66CC");
user_pref("mailnews.tags.prova.tag", "Prova");
Una volta in possesso di questi dati, come fare?

Si crea un nuovo blocco in userchrome.css contenente queste righe

Codice: [Seleziona]

treechildren::-moz-tree-cell(lc-CC66CC) {background-color: #DC6EDC !important;}
treechildren::-moz-tree-cell-text(lc-CC66CC) { color: #000 !important; }
treechildren::-moz-tree-cell(lc-CC66CC, selected) { background-color: #CC66CC !important; }
treechildren::-moz-tree-cell-text(lc-CC66CC, selected) { color: #FFF !important; }
dove il parametro inserito dopo lc- equivale al valore del parametro mailnews.tags.[etichetta].color senza # davanti;

il primo colore della serie, nella prima riga, (#DC6EDC) sarà il colore con cui verrà mostrata una mail etichettata non selezionata mentre il colore impostato nella terza è quello che avete definito voi all'interno di Thunderbird per l'etichetta.

I colori potrebbero essere anche identici, ma consiglio un colore leggermente più chiaro o più scuro: vi permetterà di capire, all'interno di un gruppo di mail aventi tutte la stessa etichetta, quali avete selezionato e quali no.

I parametri nella seconda e quarta riga non vanno mai toccati.

[Underpass]

Centrare le schede nel pannello delle Preferenze principali e in quello dei componenti aggiuntivi:

Questo tip giunge da andr3a: due personalizzazioni "estetiche":

Codice: [Seleziona]

/* Centra le schede delle Preferenze */
.paneSelector {
  -moz-box-pack: center !important;
}
/* Centra le schede dei componenti aggiuntivi. */
.viewSelector {
  -moz-box-pack: center !important;
}
Servono per centrare le schede nel pannello delle Preferenze principali (e dei pannelli di alcune estensioni come ad esempio Secure Login) e in quello dei componenti aggiuntivi.



Grazie!

[Underpass]

Cambiare le icone delle cartelle della barra dei segnalibri

Questo trucchetto invece è stato ricordato qualche tempo fa da tyler: serve a cambiare le icone delle cartelle della barra dei segnalibri.

Codice: [Seleziona]

/* Sostituisce una folder specifica  */
.bookmark-item[container="true"][label="<Nome della folder>"]
{ list-style-image: url("<file dell'icona>") !important; }

/* Sostituisce una folder specifica aperta */
.bookmark-item[container="true"][open="true"][label="<Nome della folder>"]
{ list-style-image: url("<file dell'icona>") !important; }
Le icone devono essere GIF o PNG di dimensione 16x16 pixel. Se risiedono nella stessa directory in cui è ubicato il file Userchrome.css è possibile indicarne solo il nome (omettendo il path).

Esempio:



Grazie

In Firefox 3 utilizzare questo codice:

Codice: [Seleziona]

/* Sostituisce una folder specifica  in Firefox 3 */
toolbarbutton.bookmark-item[container][label="<Nome della folder>"]
{
-moz-image-region: rect(0px,16px,16px,0px) !important;
list-style-image: url("<File dell'icona>") !important;
}
/* Sostituisce una folder specifica aperta */
toolbarbutton.bookmark-item[container][open="true"][label="<Nome della folder>"]
{
-moz-image-region: rect(0px,16px,16px,0px) !important;
list-style-image: url("<File dell'icona>") !important;
}

Se si omette il prefisso toolbarbutton  le modifiche vengono apportate anche  alle cartelle presenti nel menu segnalibri.

Per eventuali richieste, fare riferimento a  questa discussione.
Un ringraziamento a @indigo che ha contribuito al codice per Firefox 3.

[reherd]

Thunderbird: Etichette più leggibili

Grazie ad un post di Gialloporpora
http://forum.mozillaitalia.org/index.php?topic=17272.msg106854#msg106854

e a qualche pesante scopiazzamento fatto in giro, ho costruito uno stile per assegnare alle etichette di Thunderbird un colore di sfondo mantenendo le scritte di colore nero in modo che siano più leggibili di come le riporta Thunderbird al naturale. Il tutto applicabile a tutti i 70 colori della palette proposta da TB.

Il risultato che si ottiene è di questo tipo:


I colori che si scelgono per le etichette di TB da Strumenti -> Opzioni -> Visualizzazione -> Etichette, faranno assumere al messaggio etichettato uno sfondo con un colore della stessa tonalità ma più sbiadito.

La corrispondenza tra i colori che si scelgono per una data etichetta e quelli che si vedranno nello sfondo è indicata in questa immagine (colori corrispondenti per stessa posizione nelle due palette):


Il colore vero e proprio che si sceglie per l'etichetta viene riportato con un sottile bordo nella parte inferiore dell'intestazione del messaggio e viene assunto dal messaggio stesso quando viene selezionato (si fa prima a provarlo che a descriverlo).

Lo stile è costituito da codice CSS ed è già in forma di file userChrome.css. A chi interessa lo può scaricare qui:
http://www.mediafire.com/?j39z1tp19r9

Per chi non lo sapesse, il file userChrome.css va inserito nella cartella "chrome"  situata dentro la cartella "profile" di Thunderbird come indicato qui:
http://www.mozillaitalia.it/thunderbird/edit.html#css

oppure si può installare l'estensione Stylish che consente di creare uno stile dandogli un nome e incollando il codice CSS che serve per poi modificarlo o disabilitarlo al volo:
http://www.extenzilla.org/scheda_estensione.php?id=441.

Per fare diventare attivo lo stile, occorre riavviare Thunderbird per cui, se si ha intenzione di fare diverse prove, l'estensione Restart Thunderbird aiuta a ridurre lo stress (Stylish dovrebbe attivare lo stile senza il riavvio, ma non funziona sempre):
http://www.extenzilla.org/scheda_estensione.php?id=522

Per alcuni colori specie quelli chiari il risultato non è dei migliori e se non vi piace la scelta delle tonalità metteteci pure le mani e cambiateli come vi pare, non mi offendo . Idem se mi segnalate la presenza di errori.

Ciao.

P.S. Non conosco se non superficialmente dettagli su selettori e proprietà del codice CSS per cui se vi serve qualche informazione a riguardo aspettate una risposta da qualche anima pia (di cui, per fortuna, il forum è  popolato ).