Topic: Personalizzazione dell'interfaccia (userChrome e userContent) [da Firefox 4]

[Iceberg]

Modificare l'aspetto della barra delle schede

Alcune istruzioni, da inserire nel file userChrome.css, per cambiare l'aspetto della barra delle schede di Firefox senza dover installare un tema diverso da quello standard.
I valori dei vari parametri: le dimensioni espresse in pixel -px-, i colori che ho indicato con il loro codice esadecimale, così come la scelta dei font... sono solo di esempio. Adattate questi valori in base alle vostre preferenze.  


Cambiare il colore di sfondo della barra delle schede.

Con questo codice viene modificato il colore di sfondo della sola barra delle schede.

Codice: [Seleziona]

/* Cambia il colore di sfondo solo della barra delle schede */

.tabbrowser-tabs {
   -moz-appearance: none !important;
    background: #C4C4EC !important; }
Con quest'altro codice viene modficato anche il colore di sfondo dei pulsanti eventualmente presenti sulla barra delle schede.

Codice: [Seleziona]

/* Cambia il colore di sfondo della barra delle schede e dei pulsanti su di essa */

#TabsToolbar {
   -moz-appearance: none !important;
    background: #C4C4EC !important; }

Cambiare il colore di sfondo e il colore del testo delle schede

In questo esempio si hanno colori diversi per la scheda attiva rispetto alle schede non attive. Le schede non attive vengono evidenziate al passaggio del mouse.

Codice: [Seleziona]

/* Cambia il colore della scheda attiva */
.tabbrowser-tab[selected="true"] {
   -moz-appearance: none !important;
    background: #FF071C !important;
    color: #FFFFFF !important;
    border: none !important; }

/* Cambia il colore delle schede non attive */
.tabbrowser-tab:not([selected="true"]) {
   -moz-appearance: none !important;
    background: #8F848D !important;
    color: #000000 !important;
    border: none !important; }

/* Effetto al passaggio del mouse sulle schede non attive */
.tabbrowser-tab:not([selected="true"]):hover {
   -moz-appearance: none !important;
    background: #BBACB9 !important; }

Cambiare la forma delle schede

Con questi valori di esempio le schede assumono una forma ovale.
I 4 valori -moz-border-radius modificano la curvatura dei 4 angoli, con tutti i valori uguali a 0px le schede assumono un aspetto rettangolare a spigoli vivi.
I 2 valori padding evitano che il contenuto delle schede esca dalla scheda stessa se si adottano forme estreme (consegue che sono inutili con schede rettangolari).
Ripetendo il codice due volte, come visto poco sopra, si può anche dare una forma diversa alla scheda attiva rispetto alle altre schede.

Codice: [Seleziona]

/* Cambia la forma delle schede */

.tabbrowser-tab {
   -moz-appearance: none !important;
   -moz-border-radius: 20px 20px 20px 20px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    border: none !important; }

Cambiare il font delle schede

Assicurarsi che il font scelto sia disponibile.
Le parti che non interessano si possono omettere.
Ripetendo il codice due volte, come visto precedentemente, si può anche usare un font diverso per la scheda attiva rispetto alle altre schede.

Codice: [Seleziona]

/* Cambia il font delle schede */

.tabbrowser-tab {
   -moz-appearance: none !important;
    font-family: "Verdana" !important;
    font-weight: bold !important;
    font-style: italic !important;
    font-size: 12px !important; }

Cambiare l'altezza della barra delle schede

Codice: [Seleziona]

/* Cambia l'altezza della barra delle schede */

#TabsToolbar {
   -moz-appearance: none !important;
    height: 20px !important; }

Modificare la larghezza massima e minima delle schede sulla barra

Con le istruzioni sottostanti è possibile modificare la larghezza massima e minima occupata dalla schede sulla barra delle schede.

Codice: [Seleziona]

/* Modifica la larghezza massima e minima delle schede */

.tabbrowser-tab:not([pinned]) {
   max-width:200px !important;
   min-width:48px !important; }

.tabbrowser-tab:not([fadein]) {
   max-width:1px !important;
   min-width:1px !important; }La seconda istruzione, dove appaiono i due valori 1px, serve per gestire correttamente l'animazione delle tab, è quindi inutile nel caso in cui in about:config il parametro browser.tabs.animate viene settato a false.


Per indicare i colori, fra le varie possibilità, ho scelto di usare il loro codice esadecimale.
Un link ad una pagina di Wikipedia dove troverete una parziale lista di colori con i loro codici.
http://it.wikipedia.org/wiki/Lista_dei_colori

[Iceberg]

Sostituire il tasto Firefox con una icona

Inserendo questo codice nel file userChrome.css al posto del tasto "Firefox" verrà visualizzata solo l'icona di Firefox.

Codice: [Seleziona]

/* Visualizza un'icona nel tasto Firefox */

#appmenu-toolbar-button > .toolbarbutton-icon,
#appmenu-button > .button-box .button-icon {
   list-style-image: url("chrome://branding/content/icon16.png") !important; }


/* Nasconde la scritta Firefox */

#appmenu-toolbar-button > .toolbarbutton-text,
#appmenu-button > .button-box .button-text {
   display: none !important; }


/* Nasconde la freccetta verso il basso */

#appmenu-toolbar-button > dropmarker,
#appmenu-button > .button-box dropmarker {
   display: none !important; }


/* Ridimensiona il pulsante e centra l'icona */

#appmenu-button,
#appmenu-toolbar-button {
   min-width: 40px !important;
   width: 40px !important;
   padding: 1px 5px 1px 5px !important; }
Quanto sopra è solo una base dalla quale partire.
Ho messo l'icona di Firefox ma potete mettere qualsiasi icona vi pare.
Ho nascosto la freccetta verso il basso ma potete lasciarla, basta cancellare quella parte di codice.
Ho nascosto la scritta Firefox ma potete lasciarla, basta cancellare quella parte di codice.
In questi due casi per avere un risultato ottimale sarà necessario modificare di conseguenza i due valori min-width e width.
Altra possibilità è avere un tasto muto, senza icona, senza scritta, senza freccetta e della larghezza che più vi piace, è sufficiente cancellare la prima delle quattro parti di codice.

[gialloporpora]

Icone nei bookmarklet

I bookmarklet sono dei segnalibri molto particolari che eseguono del codice Javascript, non contenendo un esplicito riferimento ad un sito web, vengono visualizzati con una favicon anonima che dipende dal tema utilizzato), questa è l'icona del tema predefinito su Windows:



È possibile che stiate usando dei bookmarklet senza saperlo, magari quello per pubblicare su Facebook (o altri siti sociali) o quello di Google Reader per condividere le notizie interessanti trovate sul Web. Solitamente questi segnalibri vengono messi sulla Barra del browser e proprio per questo dovrebbero avere una bella favicon che ci aiuti a riconoscerli a colpo d'occhio.

Per riconoscere i bookmarklet è sufficiente andare nelle Proprietà del segnalibro e assicurarsi che inizi con: javascript:.

In questo post raccolgo alcuni tweak per migliorare la loro visualizzazione.

Cambiare l'icona di tutti i bookmarklet

È possibile, anche se non molto utile, cambiare l'icona visualizzata per tutti i bookmarklet, questo è il codice da utilizzare:

Codice: [Seleziona]

.bookmark-item[scheme="javascript"]{
list-style-image: url(js.png) !important;
}

L'immagine js.png va inserita nella sottocartella chrome del profilo assieme al file userChrome.css. Come immagine è possibile usare il logo di jQuery, uno dei più utilizzati frameword Javascript:



La proprietà list-style-image specifica l'immagine di un elemento in un elenco.

Cambiare l'icona a uno specifico bookmarklet

Vediamo ora come procedere con un bookmarklet specifico, prendiamo il caso del bookmarklet di Facebook per condividere i contenuti sul famoso sito sociale tanto di moda di questi tempi. Si noti che i bookmarklet non hanno un #id, per selezionarli è necessario ricorrere all'attributo label che riporta il nome del bookmarklet stesso:




Salviamo quindi il logo di Facebook (in formato 16x16) nella cartella dove risiede il file userChrome.css:



e inseriamo questo codice nel nostro file userChrome.css:

Codice: [Seleziona]

/* Aggiunge la favicon al bookmarklet di Facebook */
.bookmark-item[label="Facebook"]
{
    list-style-image: url(fb.png) !important;
}

Lasciare la sola favicon dei segnalibri nella barra e visualizzare il testo al passaggio del mouse

Se si iniziano ad avere molti segnalibri nella Barra dei segnalibri potrebbe essere utile lasciare la sola favicon, ovviamente è necessario che a ogni segnalibro della barra sia associata una favicon che ci permetta di distinguerli. Per fare questo inserire il seguente codice nel file userChrome.css:

Codice: [Seleziona]

/* Nascondere il testo dei segnalibri nella Barra (non a quelli nel menu a cascata) */
toolbarbutton.bookmark-item:not([type|="menu"]) > .toolbarbutton-text {
display:none !important;
}
/* Rendere visibile il testo al passaggio del mouse */
toolbarbutton.bookmark-item:not([type|="menu"]):hover > .toolbarbutton-text {
display: -moz-box !important;
}

Un po' di spiegazione del codice. La classe toolbarbutton ci assicura che lo stile venga applicato ai soli segnalibri nella Barra dei segnalibri, la pseudo classe :not() che non venga applicato a quelli contenuti in una cartella.

La pseudo classe :hover serve per rilevare il passaggio del mouse su un elemento.




MDN – Pseudo classe  :not()
MDN – La pseudo classe :hover

[gialloporpora]

Cambiare il carattere dell'interfaccia

Questa è una modifica davvero molto semplice dal punto di vista del codice da utilizzare. Se vogliamo applicare un font diverso da quello utilizzato nell'interfaccia di Firefox possiamo inserire questo codice nell'userChrome.css:

Codice: [Seleziona]

*{
font-family: Calibri !important;
}

Ovviamente al posto di Calibri va inserito il font che si desidera utilizzare.

La scelta del font deve essere valutata attentamente, tenendo ben presente:

• il font deve essere fra quelli installati sul proprio sistema;
• il font deve avere un minimo supporto unicode altrimenti alcuni caratteri non verranno riprodotti (esempio i …);
• scegliere un font che assomigli come dimensioni a quello usato di default, altrimenti si potrebbero avere strani effetti indesiderati.

Non conviene utilizzare font-size per modificare la dimensione globalmente in quanto così facendo non ci saranno differenze nelle dimensioni dei font dell'interfaccia.

[Iceberg]

Barre dei segnalibri e di navigazione a scomparsa

Queste istruzioni, da inserire nel file userChrome.css, consentono di nascondere la barra dei segnalibri, oppure la barra di navigazione, e di farle apparire quando ci si posiziona con il mouse sulla barra delle schede.
In questo modo, per chi gradisce questo effetto mostra-nascondi, si possono guadagnare molti pixel in altezza durante la visualizzazione di una pagina, ed anche rendere più "vivaci" le barre stesse.
Questi effetti, per evitare confusioni, si attivano solo se la barra delle schede è posizionata in alto.


Barra dei segnalibri a scomparsa

Codice: [Seleziona]

/* Barra dei segnalibri a scomparsa */

#main-window[tabsontop="true"] #PersonalToolbar {
   visibility: collapse !important; }
  
#main-window[tabsontop="true"] #navigator-toolbox:hover > #PersonalToolbar {
   visibility: visible !important; }


Barra di navigazione a scomparsa

Codice: [Seleziona]

/* Barra di navigazione a scomparsa */

#main-window[tabsontop="true"] #nav-bar {
   visibility: collapse !important; }
  
#main-window[tabsontop="true"] #navigator-toolbox:hover > #nav-bar {
   visibility: visible !important; }


Barre dei segnalibri e di navigazione a scomparsa

Se volete questo effetto su entrambe le barre il codice si può compattare in questo modo.

Codice: [Seleziona]

/* Barre dei segnalibri e di navigazione a scomparsa */

#main-window[tabsontop="true"] #PersonalToolbar,
#main-window[tabsontop="true"] #nav-bar {
   visibility: collapse !important; }
  
#main-window[tabsontop="true"] #navigator-toolbox:hover > #PersonalToolbar,
#main-window[tabsontop="true"] #navigator-toolbox:hover > #nav-bar {
   visibility: visible !important; }

[gialloporpora]

Barra laterale a scomparsa

Il seguente codice permette di nascondere la barra laterale e di renderla nuovamente visibile al passaggio del mouse sul bordo sinistro della finestra di Firefox.
Ovviamente è necessario che la barra sia presente, cioé che una delle voci di menu in Visualizza sia spuntata (Barra dei segnalibri o della cronologia).

Codice: [Seleziona]

#sidebar-box,
#sidebar-splitter{
visibility: collapse !important;
}
#browser-border-start{
display: -moz-box !important;
width: 1px !important;
}

#browser-border-start:hover + #sidebar-box,
#sidebar-box:hover{
visibility: visible !important;
}

Commento

Per ottenere l'effetto `a scomparsa' di un elemento è necessario nascondere l'elemento per impostazione predefinita e scegliere un altro oggetto adiacente su cui posizionare il mouse per far riappaire l'elemento nascosto.

Usando lo pseudo selettore :hover è possibile applicare uno stile agli elementi  al passaggio del mouse, ovviamente, in questo caso, lo stile non va applicato all'elemento su cui si trova il cursore, bensì all'elemento adiacente, per questo viene usato il + per selezionare l'elemento adiacente a quello su cui è stato posizionato il mouse e renderlo di nuovo visibile.

Personalmente sconsiglio di utilizzare elementi a scomparsa, in ogni caso se a qualcuno piace far sparire e riapparire oggetti al passaggio del mouse questo metodo funziona anche con altri elementi dell'interfaccia, con opportune modifiche.

[Iceberg]

SeaMonkey: Spostare in basso la barra di ricerca

Chi usa sia SeaMonkey che Firefox, magari aperti in contemporanea, potrebbe trovare interessante questo codice che sposta, da sopra a sotto le schede, la barra di ricerca di SeaMonkey.

Codice: [Seleziona]

/* Sposta in basso la barra di ricerca di SeaMonkey */

#FindToolbar {
 -moz-box-ordinal-group: 2 !important; }

[Gioxx]

Impostare uno sfondo per la nuova about:newtab
Tip di Godai71 valido a partire dalla versione 13 di Firefox.

Se volete cambiare il colore di sfondo della pagina about:newtab inserite questo codice nel file userContent.css:

Codice: [Seleziona]

/* Cambia il colore di sfondo della pagina about:newtab */

@-moz-document url("about:newtab") {
 #newtab-scrollbox {
   background: #DDF4CA !important; }
 }#DDF4CA è il codice del colore, potete cambiarlo con il colore che preferite.

Se invece volete mettere una immagine come sfondo della pagina about:newtab usate questo codice:

Codice: [Seleziona]

/* Aggiunge una immagine di sfondo alla pagina about:newtab */

@-moz-document url("about:newtab") {
 #newtab-scrollbox {
   background: url("example.jpg") no-repeat !important ;
   background-size: 100% !important; }
 }L'immagine example.jpg deve trovarsi nella cartella chrome del profilo, la stessa cartella dove si trova il file userContent.css.

[Underpass]

Forse qualcuno può trovarlo utile:

Nascondere il pulsante di chiusura sulla barra dei componenti aggiuntivi (ex-barra di stato)

Codice: [Seleziona]

/* Leva di mezzo il pulsante di chiusura dalla barra dei componenti aggiuntivi */
#addonbar-closebutton {
    visibility: collapse !important;
}

[miki64]

Sommario aggiornato. 

[Iceberg]

Cancellare i suggerimenti dai campi di testo facendoci clic sopra
Quanto segue è valido solo da Firefox 15 a Firefox 18.

Dalla versione 15 di Firefox i suggerimenti presenti nelle caselle di testo non vengono eliminati cliccandoci sopra. Vengono eliminati solo digitando il primo carattere di quanto si vuole scrivere. Novità per molti fastidiosa.

Se volete fare in modo che le scritte scompaiano facendo clic nei campi testo dell'interfaccia di Firefox incollate nel file userChrome.css questo codice, incollatelo all'inizio, prima di un eventuale altro codice presente:

Codice: [Seleziona]

/* Rimuove al clic le scritte in grigio dai campi di testo dell'interfaccia di Firefox */

input:-moz-placeholder:focus {
  color: transparent !important; }

Se volete fare in modo che le scritte scompaiano facendo clic nei campi testo dei siti web incollate nel file userContent.css questo codice:

Codice: [Seleziona]

/* Rimuove al clic le scritte in grigio dai campi di testo dei siti web */

input:-moz-placeholder:focus {
  color: transparent !important; }

Nota.
Da Firefox 19 quanto sopra si ottiene con questa impostazione in about:config

dom.placeholder.show_on_focus = false

[gialloporpora]

Ripristinare la voce "Chiudi finestra" nel menu "File"

Da una segnalazione di @underpass.
Come ripristinare la voce Chiudi finestra nel menu File:

Codice: [Seleziona]

#menu_closeWindow
{ display:-moz-box!important; }


[Iceberg]

Ripristinare l'ordine degli elementi sulla barra di ricerca come era fino a Firefox 24
Quanto segue è valido da Firefox 25.

Da Firefox 25 è stato modificato l'ordine degli elementi sulla barra di ricerca. La "X" per chiudere la barra è stata spostata dall'estrema sinistra all'estrema destra. C'è un grande spazio vuoto che divide in due parti i vari tasti.
Se volete ripristinare l'ordine degli elementi come era fino a Firefox 24 incollate nel file userChrome.css questo codice:

Codice: [Seleziona]

/* Ripristinare l'ordine degli elementi sulla barra di ricerca come era fino a Firefox 24 */

.findbar-closebutton {
 -moz-box-ordinal-group: 0 !important;
  margin-left: -8px !important; }

.findbar-container > spacer {
  -moz-box-ordinal-group: 4 !important; }

.findbar-find-status {
 -moz-box-ordinal-group: 3 !important; }In questo modo l'ordine degli elementi sulla barra di ricerca torna come era fino a Firefox 24.
Da sinistra verso destra senza spazi vuoti in mezzo, gli elementi riavranno questo ordine:
Tasto di chiusura; Casella di ricerca; Elemento precedente; Elemento successivo; Evidenzia; Maiuscole/Minuscole; Avvisi (testo non trovato, raggiunta la fine si riparte dall'inizio,...).

Nota.
Potreste dover adattare il valore -8px per avere il tasto di chiusura (la "X") ben centrato.

Per ripristinare le scritte "Precedente" e "Successivo" sui relativi tasti a fianco delle freccette, usate questo codice:

Codice: [Seleziona]

/* Aggiunge le scritte "Precedente" e "Successivo" ai tasti omonimi */

.findbar-find-previous label:after {
  margin-left: 4px !important;
  content:"Precedente" !important; }

.findbar-find-next label:after {
  margin-left: 4px !important; 
  content:"Successivo" !important; }

[Iceberg]

Rimuovere la barra di ricerca dalla pagina about:newtab

Questa istruzione inserita nel file userContent.css rimuove la barra di ricerca presente, da Firefox 31, nella parte superiore della pagina about:newtab:

Codice: [Seleziona]

/* Rimuove la barra di ricerca dalla pagina about:newtab */

@-moz-document url(about:newtab) {
  #newtab-margin-top,
  #newtab-search-container {
    display: none !important; }
  }

[Iceberg]

Eliminare le icone di navigazione dal menu contestuale e ripristinare le voci testuali

Da Firefox 32 alcune voci del menu contestuale appaiono come una riga di icone. Si tratta delle funzioni: Avanti, Indietro, Stop/Reload e Aggiungi pagina ai segnalibri.
Se volete riavere queste funzioni come elenco testuale verticale, incollate questo codice nel file userChrome.css:

Codice: [Seleziona]

/* Elimina le icone di navigazione dal menu contestuale e ripristina le voci testuali */

#context-back image,
#context-forward image,
#context-reload image,
#context-stop image,
#context-bookmarkpage image {
  display: none !important; }

#context-navigation .menu-iconic-left {
 -moz-margin-start: 14px !important; }

#context-back:after,
#context-forward:after,
#context-reload:after,
#context-stop:after,
#context-bookmarkpage:after {
  content: attr(aria-label) !important; }

#context-navigation {
 -moz-box-orient: vertical !important; }

#context-navigation > .menuitem-iconic {
 -moz-box-pack: start !important; }
-moz-margin-start: 14px
Per avere le varie voci incolonnate correttamente, rispetto alle altre già presenti, potreste dover aggiustare, in più o in meno, il valore "14".

Oppure, se ritenete quelle voci inutili, icone orizzontali o testo verticale che sia, le potete rimuovere con questo codice:

Codice: [Seleziona]

/* Rimuove i tasti di navigazione dal menu contestuale */

#context-navigation,
#context-sep-navigation {
  display: none !important; }
Ringrazio @Aris per il primo codice.