Topic: userChrome.css How-To -Aggiornamenti

[Iceberg]

Per le versioni precedenti a Firefox 3.6.x, leggere la FAQ
UserChrome.css How-To [fino alla versione 3.6.x]

Con il passare delle versioni di Firefox alcune istruzioni non sono più valide se non con qualche aggiustamento, altre non hanno più senso e nuove ne sono nate.
Riferendomi in particolare a Firefox 4 è cambiato il nome di qualche elemento, sono nate nuove funzioni, diversi aspetti dell'interfaccia sono ora personalizzabili senza bisogno di trucchi, non c'è più la barra di stato, c'è la barra dei componenti aggiuntivi...

La prima cosa da segnalare è che con Firefox 4 creando un nuovo profilo all'interno di esso la cartella chrome non viene creata. Non ci sono quindi neanche i due file userChrome-example.css e userContent-example.css dai quali partire.
Sia la cartella chrome che i file userChrome.css e userContent.css andranno creati dall'utente, una alternativa è copiare la cartella chrome con il suo contenuto da un profilo di Firefox 3.6.


Aggiornamento. (11/07/ 2011)

Considerato il nuovo ciclo di sviluppo di Firefox che prevede una nuova versione ogni 6 settimane, nel seguito di questa discussione non troverete più aggiornamenti validi per Firefox 4 (come avevo scritto sopra) ma aggiornamenti che via via interesseranno le nuove versioni. Sotto il titolo del trucco verrà specificato da quale versione esso è valido.


FIREFOX

Barra a comparsa degli indirizzi: nascondere la barra
Barre: aggiungere un'immagine di sfondo
Barre: cambiare il colore di sfondo
Segnalibri: voce del Menu "Organizza i segnalibri" da creare
Segnalibri: voce del menu "Segnalibri non catalogati" da rimuovere
Schede: modificare la larghezza minima e massima
Schede: modificare l'aspetto della barra delle schede
Tasto "Controlla gli aggiornamenti": eliminazione
Tasto "Firefox": sostituirlo con un'icona

[Iceberg]

Cambiare il colore di sfondo delle barre di Firefox

Con le istruzioni sottostanti è possibile modificare il colore di sfondo delle barre di Firefox senza installare temi particolari.

Il codice del colore, in questi esempi C4C4EC, è a vostra scelta e può essere diverso da barra a barra. Ovviamente cambiando il colore di tutte le barre con una unica istruzione tutte le barre avranno lo stesso colore.


Barra dei menu.
Firefox 4 e Firefox 3.6.

Codice: [Seleziona]

/* Cambiare il colore di sfondo della barra dei menu */

#toolbar-menubar {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }

Barra di navigazione.
Firefox 4 e Firefox 3.6.

Codice: [Seleziona]

/* Cambiare il colore di sfondo della barra di navigazione */

#nav-bar {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }

Barra dei segnalibri.
Firefox 4 e Firefox 3.6.

Codice: [Seleziona]

/* Cambiare il colore di sfondo della barra dei segnalibri */

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

Barra delle schede.
Firefox 4.

Codice: [Seleziona]

/* Cambiare il colore di sfondo della barra delle schede */

#TabsToolbar {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }
Firefox 3.6.

Codice: [Seleziona]

/* Cambiare il colore di sfondo della barra delle schede */

.tabbrowser-tabs {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }

Barra dei componenti aggiuntivi.
Firefox 4.

Codice: [Seleziona]

/* Cambiare il colore di sfondo della barra dei componenti aggiuntivi */

#addon-bar {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }

Barra di stato.
Firefox 3.6.

Codice: [Seleziona]

/* Cambiare il colore di sfondo della barra di stato */

#status-bar statusbarpanel {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }

Tutte le barre.
Firefox 4.

Codice: [Seleziona]

/* Cambiare il colore di sfondo di tutte le barre in modo compatto */

#navigator-toolbox > *,
#addon-bar {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }
Firefox 3.6.

Codice: [Seleziona]

/* Cambiare il colore di sfondo di tutte le barre in modo compatto */

#navigator-toolbox > *,
.tabbrowser-tabs,
#status-bar statusbarpanel {
 -moz-appearance: none !important;
 background-color: #C4C4EC !important; }

[Iceberg]

Aggiungere un'immagine di sfondo alle barre di Firefox

Con le istruzioni sottostanti è possibile aggiungere un'immagine di sfondo alle barre di Firefox senza installare temi particolari.

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)
L'immagine potrà essere la stessa per tutte le barre o diversa per ogni barra.


Barra dei menu.
Firefox 4 e Firefox 3.6.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo alla barra dei menu */

#toolbar-menubar {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }

Barra di navigazione.
Firefox 4 e Firefox 3.6.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo alla barra di navigazione */

#nav-bar {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }

Barra dei segnalibri.
Firefox 4 e Firefox 3.6.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo alla barra dei segnalibri */

#PersonalToolbar {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }

Barra delle schede.
Firefox 4.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo alla barra delle schede */

#TabsToolbar {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }
Firefox 3.6.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo alla barra delle schede */

.tabbrowser-tabs {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }

Barra dei componenti aggiuntivi.
Firefox 4.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo alla barra dei componenti aggiuntivi */

#addon-bar {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }

Barra di stato.
Firefox 3.6.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo alla barra di stato */

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

Tutte le barre.
Firefox 4.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo a tutte le barre in modo compatto */

#navigator-toolbox > *,
#addon-bar {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }
Firefox 3.6.

Codice: [Seleziona]

/* Aggiungere un'immagine di sfondo a tutte le barre in modo compatto */

#navigator-toolbox > *,
.tabbrowser-tabs,
#status-bar statusbarpanel {
 -moz-appearance: none !important;
 background-color: transparent !important;
 background-image: url("immagine.gif") !important; }

[Iceberg]

Modificare la larghezza massima e minima delle schede sulla barra

Firefox 4.
Con le istruzioni sottostanti è possibile modificare la larghezza massima e minima occupata dalla schede sulla barra delle schede.
I valori (200 e 48 pixel) sono solo di esempio, potete cambiarli in base alle vostre preferenze.

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.


Firefox 3.6.
Non riguarda il file userChrome.css riporto in ogni caso come ottenere lo stesso effetto con Firefox 3.6.
Aprite l'editor della configurazione digitando about:config nella barra degli indirizzi e intervenite modificando il valore di questi due parametri, sempre espressi in pixel:

browser.tabs.tabMinWidth
browser.tabs.tabMaxWidth

[grillaio]

Io parto poi chi vorrà e soprattutto chi ne sa più di me potrà integrare, correggere e utilizzare nel modo migliore.

questa modifica: http://forum.mozillaitalia.org/index.php?topic=17028.msg235001#msg235001 funziona anche su FF4 (l'ho usata io)
Potete anche cancellare questo messaggio.

[Iceberg]

[Sperimentale] Organizza i segnalibri...

Il codice sottostante è nato come idea per correggere questo bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=646402

Sostituisce l'etichetta "Visualizza tutti i segnalibri" con l'etichetta "Organizza i segnalibri..." come era in Firefox 3.6.

Ho scritto sperimentale perchè ci sono vari problemi per i quali da dilettante chiedo aiuto agli esperti per correggerli.
L'impressione è che quei margini vadano fissati in modo relativo e non assoluto.
Non funziona con Linux, si ottiene un pastrocchio.
Perchè lo posto allora? Perchè prima di buttarlo l'ho inviato ad una persona con Windows 7 e mi ha detto che funziona perfettamente gli piace e lo lascerà in uso, temo però che con altri Windows 7 il risultato possa non essere ottimale.

Qualche volontario vuol provare e dare la sua opinione?

Codice: [Seleziona]

menuitem[label="Visualizza tutti i segnalibri"]::before {
    content: "Organizza i segnalibri...";
    margin-left: 34px;
    margin-right: 64px; }

menuitem[label="Visualizza tutti i segnalibri"] .menu-text {
    display: none !important; }

[gialloporpora]

Per chi non ha l'estensione che ripristina la barra di stato, ma che senso  ha spostare a destra il notificatore quando è aperta la findbar?
Non ci avevo mai fatto caso, ma mi sembra assurdo come comportamento.

[Iceberg]

Nascondere la floating status bar

Firefox 4.
Mi riferisco alla barra a scomparsa che appare in basso notificando il caricamento delle pagine e mostrando il contenuto dei link presenti nella pagina al passaggio del puntatore su di essi.
Se trovate queste informazioni più fastidiose che utili potete nascondere queste notifiche inserendo questo codice nel file userChrome.css

Codice: [Seleziona]

/* Nasconde la floating status bar */

#statusbar-display {
  display: none !important; }

[Iceberg]

Modificare l'aspetto della barra delle schede

Alcune modifiche per cambiare l'aspetto della barra delle schede di Firefox senza installare temi.
Un riassunto delle principali modifiche al riguardo presentate nel tempo in questo forum.
I valori dei vari parametri (colori, dimensioni...) sono solo di esempio.

Cambiare il colore di sfondo della barra delle schede.
Firefox 4.
Viene modficato anche il colore di sfondo dei pulsanti presenti sulla barra delle schede.
Se non volete modificare lo sfondo dei pulsanti usate il sottostante codice per Firefox 3.6.

Codice: [Seleziona]

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

#TabsToolbar {
   -moz-appearance: none !important;
   background-color: #C4C4EC !important; }
Firefox 3.6.

Codice: [Seleziona]

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

.tabbrowser-tabs {
   -moz-appearance: none !important;
   background-color: #C4C4EC !important; }

Cambiare il colore di sfondo e il colore del testo delle schede
Firefox 4 e Firefox 3.6.
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
Firefox 4 e Firefox 3.6.
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
Firefox 4 e Firefox 3.6.
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
Firefox 4.

Codice: [Seleziona]

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

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

Codice: [Seleziona]

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

.tabbrowser-tabs {
   -moz-appearance: none !important;
   height: 20px !important; }

[Iceberg]

Sostituire il tasto Firefox con una icona
Firefox 4.

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"); }

/* 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.

[Cristian_1973]

Ciao a tutti. VOlevo sapere se esiste ed aventualmente dove trovare un elenco dei codici colori. Mi spiego meglio come faccio a sapere a che colore corrisponde il cod. #C4C4EC? Se volessi ricreare il nero qual'è il cod. corrispondente.Chiedo scusa anticipatamente ma sono super principiante.

Grazie per l'aiuto che mi vorrete dare.

[miki64]

Va bene questa http://www.asciitable.it/colorihtml.asp ?
Io non lo so, queste cose le ignoro....  

[gialloporpora]

C4C4EC=
Rosso = C4 = 196
Verde = C4 = 196
Blu = EC = 236
nella Tavolozza colori di Windows e vedi che colore è. Se vuoi un colore, senza passare per la conversione in base 16, puoi  usare la scrittura:

Codice: [Seleziona]

rgb(196,196,236)

(rosso, verde, blue)

ovviamente nero è:

rgb(0,0,0) = #000000

[Iceberg]

Il titolo di questa discussione è userChrome.css How-To -aggiornamenti per Firefox 4- forse è il caso di modificarlo o di aprire una nuova discussione per le versioni successive di Firefox. Considerato il ritmo di aggiornamento la prima soluzione credo sia migliore. Se i moderatori concordano cambierei in userChrome.css How-To -aggiornamenti- o altro migliore.

Fatta la premessa, un aggiornamento per Firefox 6 e successivi.

Rimuovere la voce Segnalibri non catalogati dal menu Segnalibri
Firefox 6.

Con la versione 6 di Firefox aprendo il menu Segnalibri appare come ultima voce Segnalibri non catalogati, voce non eliminabile tramite le opzioni della libreria. Se la trovate inutile o peggio ancora fastidiosa potete rimuoverla copiando nel file userChrome.css questo codice:

Codice: [Seleziona]

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* imposta il  namespace predefinito per XUL */

/*Rimuove la voce Segnalibri non catalogati dal menu Segnalibri */

#menu_unsortedBookmarks,
#bookmarksMenuPopup > menuseparator[builder="end"] {
 display:none !important; }

[miki64]

Procedi pure, Iceberg.