Topic: Modifica dell'userChrome.css: cambiare i colori di sfondo delle varie barre

[Almotasim]

Ciao a tutti!
Seguendo alcune dritte presenti in questo topic, ho provato a cambiare i colori di sfondo delle varie barre, ma tutto ciò che sono riuscito a fare è questo:


Io invece vorrei (vd. immagine sopra) alternare i colori, per es. qualcosa del tipo arancione/blu:
Barra dei menu
Barra dei pulsanti
Barra dei segnalibri
Barra delle schede (non solo "lo sfondo" - che in effetti, come vedete, è diventato blu, ma pure i cartellini delle schede)

Questo è il mio userChrome.css:

Codice: [Seleziona]

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

/* 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;
}

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

/* 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;
}

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

/*** Personalizzazione delle tab ***/

tabbrowser#content tab{
-moz-appearance: none !important;
background-color: #3366FF !important;
}

Immagino che sia un'operazione fattibile, ma non da me...
Mi aiutate please?

Grazie e buona serata!!


[EDIT]
Ho dimenticato di chiedervi un'altra cosa: se invece volessi inserire un'immagine di sfondo, la .gif che dimensioni dovrebbe avere?

[Underpass]

Codice: [Seleziona]

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


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

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

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

.tabbrowser-tabs {
-moz-appearance: none !important;
background-color: #456A96 !important;
}
Per trovare gli id degli elementi devi solamente sbattere un po' la testa sul DOM Inspector.

Per la questione relativa all'immagine GIF mi sembra di aver provato con immagini anche piuttosto grandi. Hai avuto problemi con qualche immagine?

Ciao

[Almotasim]

Per trovare gli id degli elementi devi solamente sbattere un po' la testa sul DOM Inspector.

DOM che?
Eh, non si finisce mai d'imparare...

Hai avuto problemi con qualche immagine?

In realtà non ho ancora provato, eventualmente tornerò a rompere...


Per intanto - come sempre - grazie!!

[Underpass]

http://forum.mozillaitalia.org/index.php?topic=17028.0

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).

Il DOM Inspector viene installato durante il setup di Firefox (mi pare che devi selezionare qualcosa tipo "Strumenti di sviluppo", oppure dai direttamente "Installazione completa").

[Almotasim]

Ho provato ad usare la combinazione CTRL+SHIFT+I, ma non succede niente…
Mi sa che devo essere sprovvisto del DOM Inspector, avendo effettuato l’installazione standard di FF.

Ho quindi installato l’estensione Web Developer e, dopo un po’ di smanettamenti, inserendo il percorso chrome://browser/content/browser.xul ho ottenuto questo:
http://img338.imageshack.us/img338/5025/0webdevhb6.png

Ora, se clicco su un menu della relativa barra, ho capito dove vedere l'"attrributo relativo" (#toolbar-menubar):


Stessa cosa per l'attributo della barra di navigazione (#nav-bar):


Venendo però alla barra delle schede, il mio problema è: qual è l'attributo per l'"interno" dei vari cartellini, quello - per intenderci - che installando l’estensione ColorfulTabs varia di scheda in scheda?


Se infatti seleziono una scheda col Web Developer, ecco cosa vedo:
http://img130.imageshack.us/img130/1462/3barraschedelb7.png

Per quel poco che ne capisco, dovrei forse modificare il valore tabbrowser #content?
Ma come?
Considerando pure che due stringhe assai simili, come tabbrowser#content tab e .tabbrowser-tabs, le ho già modificate (rispettivamente per ottenere il blu intorno ai cartellini e l'azzurrino dello sfondo della barra).

Io vorrei che i suddetti cartellini avessero come colore quello della barra di navigazione (#EDEDFA) dell'immagine sotto, e non mantenessero il grigio di default:


E' possibile modificare anche quel colore?
E se sì - come credo - cosa bisogna aggiungere nell'userChrome.css?
Posto la mia ultima versione:

Codice: [Seleziona]

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

/* 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;
}

/* 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;
}

/* Colorare menù, toolbar, barra dei segnalibri e barra delle schede  */
#toolbar-menubar {
-moz-appearance: none !important;
background-color: #A2A2E1 !important;
}

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

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

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

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

/*** Personalizzazione delle tab ***/
tabbrowser#content tab{
-moz-appearance: none !important;
background-color: #1D3259 !important;
}

Grazie ancora per l'indispensabile supporto, ciao!!

[Underpass]

Questa era più difficile, ma mi è venuto in mente di scopiazzare il file CSS dell'estensione Colorful Tabs e quindi:

Codice: [Seleziona]

/* Colorare i cartellini delle schede */
tab .tab-image-middle {
background-color: #456A96 !important;
}
tab .tab-image-left {
background-color: #456A96 !important;
}
tab .tab-image-right {
background-color: #456A96 !important;
}
tab .tab-close-button {
background-color: #456A96 !important;
}
Alla fine, mi raccomando, scrivi tutto quello che hai fatto e commenta i vari elementi nel file userchrome.css

Ciao

[Almotasim]

Questa era più difficile, ma mi è venuto in mente di scopiazzare il file CSS dell'estensione Colorful Tabs

Anch'io avevo scompattato Colorful Tabs nella speranza di risolvere, ma mi sono arreso dopo qualche minuto - non sapevo esattamente dove e cosa cercare...

Ma tanto lo sapevo di poter contare su di te,
grazie mille!!

 

[Underpass]

Prego

E quindi qual è l'userchrome.css finale?

[Almotasim]

Te lo posto stasera!!


[EDIT]

Modello "Giuditta nr. 1" (cromaticamente firefoxoso ):

Codice: [Seleziona]

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

/* 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;
}

/* 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;
}

/* Colorare menù, toolbar, barra dei segnalibri e barra delle schede  */
#toolbar-menubar {
-moz-appearance: none !important;
background-color: #3D8CFF !important;
}

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

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

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

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

/*** Personalizzazione delle tab ***/
tabbrowser#content tab{
-moz-appearance: none !important;
background-color: #0000E6 !important;
}

/* Colorare i cartellini delle schede */
tab .tab-image-middle {
background-color: #FFB40F !important;
}
tab .tab-image-left {
background-color: #FFB40F !important;
}
tab .tab-image-right {
background-color: #FFB40F !important;
}
tab .tab-close-button {
background-color: #FFB40F !important;
}

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

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


Modello "Giuditta nr. 2" (cromaticamente mozitaliano, con un tocco extenzilloso... ):

Codice: [Seleziona]

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

/* 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;
}

/* 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;
}

/* Colorare menù, toolbar, barra dei segnalibri e barra delle schede  */
#toolbar-menubar {
-moz-appearance: none !important;
background-color: #A2A2E1 !important;
}

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

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

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

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

/*** Personalizzazione delle tab ***/
tabbrowser#content tab{
-moz-appearance: none !important;
background-color: #1D3259 !important;
}

/* Colorare i cartellini delle schede */
tab .tab-image-middle {
background-color: #EDEDFA !important;
}
tab .tab-image-left {
background-color: #EDEDFA !important;
}
tab .tab-image-right {
background-color: #EDEDFA !important;
}
tab .tab-close-button {
background-color: #EDEDFA !important;
}

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

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

Entrambi su tema Kempelton.


Il primo non mi convince pienamente , ma ci vorrebbe un pittore esperto per scegliere i giusti toni di arancio e blu, sì da ottenere una fusione armoniosamente sublime...
Non è che magari, oltre a tutto il resto , ti diletti pure al cavalletto?


Ciao e grazie ancora!!

[Underpass]

Nelle arti figurative sono praticamente una capra...

Simpatici, li ho provati entrambi col tema di default. Ti suggerirei di armarti di ColorZilla e di prendere i colori per il primo direttamente dal logo di Firefox.

Ora ti puoi mettere a lavorare sui menu contestuali e sull'evidenziazione dei pulsanti...

Ciao