Notizie: Screenshots, Invia schede e molto altro. È arrivato il nuovo Firefox: più veloce, ricco di nuove funzioni e componenti aggiuntivi per tutti i gusti

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

0 Utenti e 1 Visitatore stanno visualizzando questo topic.

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
Questo topic sostituirà questa FAQ sull'userChrome.css, si prega di non inserire messaggi almeno inizialmente, i moderatori si riservano di cancellare i messaggi inutili da questa discussione.

In questa discussione verranno trattate le personalizzazioni all'interfaccia di Firefox mediante userChrome.css o userContent.css.

Purtroppo molte di queste modifiche potrebbero smettere di funzionare al rilascio di una nuova versione di Firefox a causa delle eventuali modifiche negli oggetti dell'interfaccia. In questa discussione si cercherà di mantenere i codici costantemente aggiornati. Non essendo una cosa semplice si prega chiunque dovesse notare degli errori di segnalarli in questa stessa discussione.

Nelle FAQ verrà riportato un sommario di questa discussione per permettere di raggiungere ciò che si cerca in modo semplice e senza dover perdere tempo a trovare la personalizzazione a cui si è interessati.

Questa discussione resterà aperta agli utenti per richieste o suggerimenti.

Legenda:

personalizzazioni riguardanti l'userChrome.css
personalizzazioni riguardanti l'userContent.css
questioni generiche




Sommario (provvisorio)

« Ultima modifica: 19 Agosto 2012 23:15:09 da miki64 »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
Come iniziare: creazione dei file

Prima di tutto è necessario creare i file in cui inserire  le nostre personalizzazioni. Per rimuovere specifiche personalizzazioni basterà eliminare il relativo codice, per eliminare tutte le personalizzazioni basterà cancellare (o rinominare) il file.

Purtroppo da Firefox 4 questi file (e la cartella che li ospita) non vengono più generati automaticamente alla creazione di un nuovo profilo(Bug. 589056). Sarà quindi necessario procedere alla loro creazione.  Per semplificare questa operazione mettiamo a disposizione questo file 7z che contiene la cartella chrome.

Una volta scaricato il file estrarlo nella cartella del profilo di Firefox (non del programma), verrà creata automaticamente la cartella chrome e i due file oggetto di questa discussione userChrome.css e userContent.css.

NOTA 1: se si è modificato in precedenza il file l'operazione di estrazione dell'archivio cancellerà tutte le modifiche fatte in precedenza.

NOTA 2: ovviamente è molto più semplice creare la cartella `chrome' e i file manualmente, la procedura mediante archivio è per i meno esperti. Nei filesystem case sensitive fare attenzione alla C maiuscola nel nome dei due file.

Breve presentazione di userChrome e userContent

userChrome.css
Questo file serve per sovrascrivere le regole di stile degli elementi dell'interfaccia di Firefox, barra degli indirizzi, barra dei menu, ecc…

userContent.css
Questo file serve per sovrascrivere le regole di stile degli elementi delle pagine Web e di alcuni elementi dell'interfaccia di Firefox che vengono caricati come contenuto (ad esempio il nuovo Gestore dei componenti aggiuntivi)





Come modificare i file

Una volta creati i file sarà necessario modificarli inserendo il codice necessario per effettuare le nostre personalizzazioni all'interfaccia. Per farlo è necessario utilizzare un editor di testo, non un editor di testo formattato, come ad esempio MS Word, MS Wordpad o Writer di LibreOffice. Tutte le modifiche saranno applicate al successivo riavvio di Firefox.

La scelta di un buon editor con colorazione della sintassi aiuterà notevolmente la scrittura del codice e la ricerca di eventuali errori; a tal proposito si consigliano:  Notepad++, PsPad e SciTE. In mancanza di un buon editor si può utilizzare il Notepad di Windows o l'editor di testo fornito dal sistema operativo in uso.
« Ultima modifica: 12 Settembre 2011 18:59:48 da gialloporpora »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
Come selezionare gli oggetti da personalizzare usando il DOM Inspector

Per effettuare le modifiche all'interfaccia è necessario capire come funzionano i CSS e il  Document Object Model (abbreviato come DOM), senza addentrarci troppo a fondo sull'argomento: di seguito sono elencate alcune nozioni che è utile conoscere almeno per fare delle piccole personalizzazioni.

Si pensi agli oggetti dell'interfaccia come a dei rettangoli disegnati su una lavagna, a ognuno di questi rettangoli possono essere applicate delle regole di stile (CSS) che ne definiranno le dimensioni, il colore del testo e dello sfondo, la loro posizione rispetto agli altri oggetti, la loro visibilità e così via.

Il primo passo quindi è quello di “selezionare” l'oggetto a cui si vogliono applicare tali regole. Per farlo è necessario utilizzare un'estensione, il DOM Inspector (chiamato anche Domi). Questa estensione permette di navigare all'interno del Document Object Model e ricavare il riferimento agli oggetti dell'interfaccia o delle pagine web che si stanno visitando.

Una volta installato e riavviato il browser, è possibile aprire il DOM Inspector dal menu "Strumenti → Sviluppo Web", o usando la combinazione di tasti CTRL+SHIFT+I.

Per ispezionare una finestra di Firefox fare clic in "File →  Inspect Chrome Document". Qui appariranno un elenco di pagine, selezionare quella che riporta il nome della pagina aperta in Firefox.

A questo punto verranno mostrate due sezioni:
- nella sezione di sinistra viene riportata la struttura del documento,
- nella sezione di destra appariranno informazioni riguardanti l'oggetto selezionato.



Il metodo più semplice per trovare un oggetto è quello di usare "Edit → Select Element By Click".
A questo punto portarsi sulla finestra e fare clic sull'elemento desiderato. Nell'immagine di sopra è stata selezionata la Barra di navigazione di Firefox, come si vede guardando nel pannello di destra è possibile vedere gli attributi di questo oggetto:

Codice: [Seleziona]
id = nav-bar
class = toolbar-primary chromeclass-toolbar

L'id e la class sono gli attributi più importanti e non è detto che siano sempre presenti, senza addentrarci troppo a fondo su questo argomento, una volta che si conosce l'id[7i] di un elemento è possibile selezionarlo usando il simbolo #, per riferirsi alla class invece si usa un ., ad esempio si può selezionare la Barra di navigazione utilizzando:

Codice: [Seleziona]
#nav-bar{…}
.oolbar-primary chromeclass-toolbar{…}

all'interno delle parentesi graffe verranno inserite le regole di stile che si vogliono applicare alla Barra di navigazione.

C'è quindi differenza fra l'usare il suo id per riferirci a un oggetto oppure la sua class?
La risposta è sì.
Un id è unico per ogni oggetto, e per questo è sempre il modo consigliato per riferirsi all'oggetto, la class invece potrebbe essere condivisa anche con altri oggetti, il risultato è quello che usando come selettore la class si potrebbe applicare lo stile anche ad altri oggetti e non solo alla Barra di navigazione.

E se l'oggetto  di cui si vuol modificare l'aspetto non dovesse avere né idclass?

In questo caso è un po' più complicato, ma è sempre possibile selezionarlo,  si può, ad esempio, utilizzare uno degli altri attributi dell'elemento XUL o HTML tramite la sintassi:

Codice: [Seleziona]
tipo_oggetto[attributo="valore"]{ … }

nel caso considerato della Barra di navigazione useremo:

Codice: [Seleziona]
toolbar[toolbarname="Barra di navigazione"]

Gli attributi hanno comunque un significato, possono ad esempio indicare lo stato dell'oggetto, quindi è bene fare attenzione nell'utilizzare questo tipo di selettore.

Nell'esempio della Barra di navigazione, l'attributo  fullscreentoolbar indica lo stato di visualizzazione a schermo intero, si può cioè applicare uno stile solamente quando alla Barra di navigazione quando Firefox è in modalità "schermo intero", in questo modo:

Codice: [Seleziona]
#nav-bar[fullscreentoolbar="true"] {…}

e così via.


Altri selettori verranno discussi nella discussione quando si presenteranno nei vari codici proposti.
« Ultima modifica: 10 Settembre 2011 09:00:08 da miki64 »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
La regola @-moz-document restringere il codice a pagine specifiche

La regola @-moz-document è una specifica dei browser basati su Gecko che serve per restringere l'applicazione di uno stile a determinate pagine.  Le funzioni che si possono usare con @-moz-document:

  • url() – permette di restringere le regole applicate a una specifica url
  •   url-prefix() – permette di restringere le regole a tutti gli indirizzi che iniziano con il valore indicato in questa funzione
  • domain() – permette di restringere le regole da applicare a tutte le pagine che risiedono su uno stesso dominio (o in un sottodominio)
  • regex() – applica le regole a tutti gli indirizzi che soddisfano la regex (non verrà discusso qui)
MDN: @-moz-document

Vediamo qualche esempio. Supponiamo di volere applicare uno stile particolare a forum.mozillaitalia.org e mozillaitalia.org, entrambi sul dominio mozillaitalia.org, inseriamo quindi questo codice nel file userContent.css:

Codice: [Seleziona]
@-moz-document domain(mozillaitalia.org){
*{
background: #000 !important;
color: #fff !important;
}
}


L'effetto è brutto ma rende l'idea, con la regola (at-rule) -moz-document si specifica che il codice fra parentesi graffe verrà applicato alle sole pagine che risiedono sul dominio di mozillaitalia.org. Il selettore * permette di selezionare tutte gli elementi della pagina.

Se invece volessimo applicare lo stile al solo forum e non al sito (cioé a forum.mozillaitalia.org e non a www.mozillaitalia.org) bisogna usare la funzionae url-prefix(), ad esempio:

Codice: [Seleziona]
@-moz-document url-prefix(http://forum.mozillaitalia.org){

}

Supponiamo ora di voler cambiare il colore di sfondo della pagina vuota (about:blank), per farlo inseriamo questo codice nel nostro file userChrome.css:

Codice: [Seleziona]
@-moz-document url("about:blank") {
*{
background: #456 !important;
}

La regola @-moz-document viene usata soprattutto nel file userContent.css per applicare le personalizzazioni a siti specifici, può essere comunque usata anche nel file userChrome.css per essere sicuri che le regole vengano applicate a delle singole finestre, esempio:


Codice: [Seleziona]
@-moz-document url(chrome://passwordmgr/content/passwordManager.xul){

}

permette di applicare il codice al solo Gestore delle password e non a altre finestre di Firefox.
« Ultima modifica: 16 Settembre 2011 14:43:24 da gialloporpora »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
I primi passi con i fogli di stile CSS

Ovviamente non è possibile scrivere qui una guida ai CSS, si devierebbe notevolmente dagli scopi di questa discussione. nel Web esistono molte guide, esempi e documentazione a riguardo. Un breve cenno sulla sintassi CSS è però necessario ai fini di comprendere, almeno a grandi linee, i vari codici proposti.

Sintassi generica di una dichiarazione di stile:

Codice: [Seleziona]
selettore1, selettore2, selettore3, … selettore n{
proprietà: valore !important;
}

i vari selettori sono i riferimenti agli oggetti XUL o HTML, maggiori informazioni verranno date nei codici proposti, la virgola serve per separare i vari selttori.

Fra parentesi graffe ci sono le regole di stile da applicare all'elemento (o agli elementi) indicati dal selettore (selettori).

  • proprietà – è una proprietà CSS (background, color, display, ecc…)
  • valore – il valore associato alla proprietà (esempio un codice colore)
  • !important – serve per sovrascrivere una regola se questa è già definita altrove, si consiglia di usare sempre !important onde evitare che il codice non abbia effetto


Molte volte sarà inoltre necessario includere questa regola:

Codice: [Seleziona]
-moz-appearance: none !important;


-moz-appearance: none !important

Questa regola permette di ignorare le impostazioni di stile applicate dai vari sistemi operativi a cui, talvolta, Firefox si attiene per integrarsi meglio con la piattaforma.

Dividere e tenere ordinato il codice

é possibile inserire il codice CSS in file separati, questo può tornar utile per ordinare e mantenere separate le varie personalizzazioni. Possiamo, ad esempio, creare un file menu.css dove inserire il codice che apporta modifiche ai menu e richiamarlo nel file userChrome.css con questa riga di codice:

Codice: [Seleziona]
@import url(menu.css);

L'importazione delle regole di stile va fatta prima di ogni altra personalizzazione, questa riga va inserita prima di ogni altra dichiarazione, affinché sia valida l'importazione può essere preceduta solo dal @namespace e dagli, eventuali, commenti.

Commenti

Per rendere più leggibile il file si possono inserire delle note che spiegano l'effetto delle righe di codice tramite i commenti.  I commenti vengono inseriti usando /* */, ad esempio:

Codice: [Seleziona]
/*  Questo è un commento
*/

Si consiglia di inserire sempre un commento, in questo modo si tiene traccia delle modifiche apportate dal codice.
« Ultima modifica: 09 Settembre 2011 23:55:34 da gialloporpora »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
Estensioni utili

Oltre al già citato DOM Inspector ecco altre due estensioni che potrebbero tornare molto utili per gestire le personalizzazioni con userChrome.css e userContent.css.

Stylish


Un'estensione che può tornare molto utile per accelerare le operazioni di personalizzazione di Firefox è Stylish.

I principali vantaggi nell'usare Stylish sono i seguenti:

  • installare stili già pronti da userstyles.org;
  • gestire tutti gli stili dal pannello `User Styles' nella Gestione componenti aggiuntivi;
  • applicare gli stili senza dover riavviare Firefox;
  • avere una voce aggiuntiva al menu contestuale del Domi per ricavare automaticamente il selettore dell'elemento;
  • notifica di eventuali errori di sintassi durante l'inserimento del codice delle regole di stile.

Per un accesso veloce alle funzioni dell'estensione è ppossibile aggiungere l'icona di Stylish alla Barra degli Strumenti o a quella dei componenti aggiuntivi (ex Barra di stato).



Per aggiungere uno stile, fare clic col tasto sinistro sull'icona di Stylish, quindi selezionare Crea uno stile \rarr Nuovo…. Nella finestra che viene aperta inserire il nome dello stile, il relativo codice e, opzionalmente, delle etichette. Salvare e verificare che la personalizzazione sia stata applicata.

NOTA 1: Stylish non distingue fra contenuto e interfaccia, le regole verranno applicate a entrambi gli elementi, per questo si consiglia sempre di restringere l'applicazione dello stile utilizzando la regola @-moz-document.




Chromedit Plus
Chromedit Plus[/b] permette di modificare direttamente i file userChrome.css e userContent.css senza ricorrere ad un editor esterno.
« Ultima modifica: 12 Settembre 2011 14:51:54 da gialloporpora »

Offline Iceberg

  • Moderatore
  • Post: 7067
Pulizia menu Segnalibri di Firefox

Come primo esempio di cosa è possibile ottenere inserendo istruzioni nel file userChrome.css riporto alcune istruzioni per eliminare voci dal menu Segnalibri.

Questo esempio è riferito agli utenti che considerano ridondanti alcune voci presenti in questo menu, trovando più comodo mantenere i soli segnalibri e accedere a questi comandi usando scorciatoie da tastiera oppure le rispettive icone.

Allo stesso modo è possibile eliminare le voci che ritenete superflue dagli altri menu di Firefox.
Osservando le istruzioni sottostanti e seguendo i consigli presenti nei precedenti messaggi di @gialloporpora dovreste riuscire nell'intento. In caso di difficoltà potete chiedere aiuto in questa discussione.


Aggiungi pagina ai segnalibri

Codice: [Seleziona]
/* Rimuove la voce "Aggiungi pagina ai segnalibri" */

#menu_bookmarkThisPage,
#appmenu_bookmarkThisPage {
   display: none !important; }


Abbonati a questa pagina

Per eliminare completamente la voce dai menu Segnalibri utilizzare il seguente codice:
Codice: [Seleziona]
/* Rimuove sempre la voce "Abbonati a questa pagina", anche se c'è una pagina a cui abbonarsi */

#subscribeToPageMenuitem,
#subscribeToPageMenupopup,
#appmenu_subscribeToPageMenu,
#appmenu_subscribeToPage {
   display: none !important; }

Per rimuovere la voce solamente quando non c'è un feed RSS da sottoscrivere utilizzare queste istruzioni:
Codice: [Seleziona]
/* Rimuove la voce "Abbonati a questa pagina", quando non c'è una pagina a cui abbonarsi */

#subscribeToPageMenuitem[disabled="true"],
#appmenu_subscribeToPage[disabled="true"] {
   display: none !important; }


Visualizza tutti i segnalibri

Codice: [Seleziona]
/* Rimuove la voce "Visualizza tutti i segnalibri" (e la sottostante linea di separazione) */

#bookmarksShowAll,
#organizeBookmarksSeparator,
#appmenu_showAllBookmarks,
#appmenu_showAllBookmarks + menuseparator {
   display: none !important; }


Segnalibri non catalogati

Questa istruzione è valida da Firefox 6 e successivi.
Con la versione 6 di Firefox aprendo il menu Segnalibri come ultima voce appare Segnalibri non catalogati, voce non eliminabile. Se la trovate inutile o peggio ancora fastidiosa ecco il codice per rimuoverla.

Codice: [Seleziona]
/* Rimuove la voce "Segnalibri non catalogati" */

#menu_unsortedBookmarks,
#bookmarksMenuPopup > menuseparator[builder="end"],
#appmenu_unsortedBookmarks,
#appmenu_bookmarksPopup > menuseparator[builder="end"] {
   display:none !important; }
« Ultima modifica: 21 Marzo 2014 17:54:00 da Iceberg »

Offline Iceberg

  • Moderatore
  • Post: 7067
Nascondere la floating status bar

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 nel file userChrome.css questo codice.

Codice valido fino a Firefox 24:
Codice: [Seleziona]
/* Nasconde la floating status bar (fino a Firefox 24) */

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

Codice per Firefox 25 e seguenti:
Codice: [Seleziona]
/* Nasconde la floating status bar (da Firefox 25) */

statuspanel {
   display: none !important; }
« Ultima modifica: 21 Settembre 2013 00:31:28 da Iceberg »

Offline Iceberg

  • Moderatore
  • Post: 7067
Nascondere la possibilità di avviare la Navigazione anonima

Questo codice inserito nel file userChrome.css elimina la voce Avvia navigazione anonima dai menu ed impedisce di selezionare l'opzione Utilizza sempre la modalità di navigazione anonima presente fra le opzioni riguardanti la privacy.

Codice: [Seleziona]
/* Nasconde la possibilità di avviare la Navigazione anonima */

#privateBrowsingItem,
#privateBrowsingAutoStart,
#appmenu_privateBrowsing,
#menu_newPrivateWindow,
#appmenu_newPrivateWindow {
   display: none !important; }

Attenzione: questo codice rende più difficoltoso avviare Firefox in modalità anonima, la sua efficacia reale dipende dall'uso che se ne vuol fare. Chi è che non deve avviare Firefox in modalità anonima?
Sarà l'utente a decidere se nel suo caso è o non è una soluzione efficace.
« Ultima modifica: 04 Ottobre 2013 17:51:41 da Iceberg »

Offline Iceberg

  • Moderatore
  • Post: 7067
about:config, impedirne l'accesso

Questa istruzione inserita nel file userContent.css impedisce di accedere ai parametri presenti in about:config. Digitando about:config nella barra degli indirizzi apparirà una pagina bianca completamente vuota e non sarà possibile effettuare nessuna operazione.

Codice: [Seleziona]
/* Impedisce l'accesso all'about:config */

@-moz-document url(about:config) {
   window#config * {
      display: none !important; }
 }

Attenzione: l'efficacia di questo codice nell'impedire modifiche alla configurazione avanzata di Firefox va rapportata a chi è diretto. Stiamo parlando di trucchi e non di programmi di sicurezza. Trucchi che in taluni casi possono essere sufficienti. In altri no. Sarà l'utente a decidere se nel suo caso è o non è una soluzione efficace.
« Ultima modifica: 14 Settembre 2011 12:48:02 da Iceberg »

Offline Iceberg

  • Moderatore
  • Post: 7067
Password: eliminare "Rimuovi tutto" e "Mostra password"

Il riferimento è al pannello Password salvate delle opzioni di sicurezza.


Password: eliminare il tasto "Rimuovi tutto"

Volendo rimuovere una sola password può capitare di premere inavvertitamente il tasto Rimuovi tutto, cancellando così tutte le password salvate e non l'unica che volevate eliminare.
Se volete evitare questo rischio, questa istruzione inserita nel file usercontent.css rimuoverà tale pulsante.

Codice: [Seleziona]
/* Elimina il tasto "Rimuovi tutto" dal pannello password salvate */

#removeAllSignons {
   display: none !important; }



Password: eliminare il tasto "Mostra password"

Per rendere visibili in chiaro le password salvate è sufficiente fare clic sul pulsante "Mostra password". Se volete rimuovere questo tasto inserite nel file usercontent.css questo codice.

Codice: [Seleziona]
/* Elimina il tasto "Mostra password" dal pannello password salvate */

#togglePasswords {
   display: none !important; }
« Ultima modifica: 30 Luglio 2017 11:07:56 da miki64 »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
Far riapparire elementi “invisibili”


Finora abbiamo visto degli esempi in cui si nascondevano degli elementi dell'interfaccia, è anche possibile far apparire alcuni elementi che sono stati nascosti per impostazione predefinita.

Con il file userChrome.css non è possibile creare nuovi elementi, è però possibile rendere visibili oggetti che ci sono ma a cui è stato assegnato un display: None perché non appaiano in determinati contesti (o per altre scelte degli sviluppatori).

Per far “riapparire” un elemento basterà assegnare alla proprietà display il valore -moz-box. Questo è un valore che imposta la visualizzazione degli elementi dell'interfaccia di Firefox e, grossomodo, è equiparabile al block degli elementi HTML. Per maggiori informazioni sui valori che può assumere la proprietà display leggere questo articolo (in inglese):

MDN – Proprietà display


Attivare la voce di menu “Lavora non in linea“ nel pulsante Firefox

Come primo e semplice esempio facciamo riapparire la voce di menu “Lavora non in linea” nel menu del pulsante Firefox che è nascosta per impostazione predefinita:

Codice: [Seleziona]
/* Rende visibile la voce di menu Lavora non in linea nel pulsante Firefox */
#appmenu_offlineModeRecovery{
display: -moz-boz !important;
}

Al successivo riavvio di Firefox ci sarà una nuova voce nel menu del pulsante Firefox, “Lavora non in linea”.

Vecchio stile della barra di ricerca rapida nel testo

Ripristinare tutti i pulsanti nella barra di ricerca rapida nel testo

Dalla versione 2.0 di Firefox,  per impostazione predefinita,  è stato scelto di nascondere i pulsanti presenti nella barra di ricerca rapida nel testo, barra che appare usando CTRL+F o alla pressione di un tasto se è attivata la ricerca rapida nel testo (FAYT), se si volessero riabilitare questi pulsanti questo è il codice da inserire nel file  userChrome.css:

Codice: [Seleziona]
/* Riabilita tutti i pulsanti nella barra di ricerca rapida nel testo (CTRL+F o FAYT) */
.findbar-container > *
{display: -moz-box !important;}

Il simbolo > seleziona i discendenti di primo livello dell'elemento che lo precede (i, usando * si selezionano tutti i “figli” (child element) dell'elemento findbar-container che è la barra di ricerca rapida nel testo.

« Ultima modifica: 15 Settembre 2011 15:51:05 da gialloporpora »

Offline gialloporpora

  • サンドロ
  • Moderatore
  • Post: 10805
    • Il blog che non c'è
Rendere visibili i campi avanzati nel pannello di aggiunta nuovo segnalibro

Ci sono altri elementi “nascosti” che possono essere resi visibili in una maniera leggermente diversa da quanto mostrato in precedenza, in quanto la proprietà display non è impostata a none, ma sono resi “invisibili” tramite la proprietà visibility. un esempio sono i campi avanzati nel pannello di aggiunta nuovo segnalibro.

Codice: [Seleziona]
/* Mostrare i campi indirizzo, descrizione e keyword nel pannello per l'aggiunta di un nuovo segnalibro */
#editBMPanel_descriptionRow, /* campo descrizione */
#editBMPanel_locationRow, /* campo indirizzo */
#editBMPanel_keywordRow /* campo keyword (parola chiave) */
{
   visibility:   visible;
   -moz-box-align:   center;
}

NOTA:  lo stile inoltre, rende sempre visibile il campo Indirizzo di un segnalibro anche nel caso di una query a places (di default l'url della query è nascosto se si accede alle Proprietà del segnalibro)






Stile autoinstallante per Stylish:
http://userstyles.org/styles/8634
« Ultima modifica: 15 Settembre 2011 23:29:19 da gialloporpora »

Offline Iceberg

  • Moderatore
  • Post: 7067
Cambiare il colore di sfondo delle barre di Firefox

Con le istruzioni sottostanti, inserite nel file userChrome.css, è possibile modificare il colore di sfondo delle barre di Firefox senza dover installare un tema diverso da quello standard.

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.

Codice: [Seleziona]
/* Cambiare il colore di sfondo della barra dei menu */

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


Barra di navigazione.

Codice: [Seleziona]
/* Cambiare il colore di sfondo della barra di navigazione */

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


Barra dei segnalibri.

Codice: [Seleziona]
/* Cambiare il colore di sfondo della barra dei segnalibri */

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


Barra delle schede.

Codice: [Seleziona]
/* Cambiare il colore di sfondo della barra delle schede */

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


Barra dei componenti aggiuntivi.

Codice: [Seleziona]
/* Cambiare il colore di sfondo della barra dei componenti aggiuntivi */

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


Tutte le barre.

Codice: [Seleziona]
/* Cambiare il colore di sfondo di tutte le barre in modo compatto */

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


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
« Ultima modifica: 17 Settembre 2011 12:58:16 da Iceberg »

Offline Iceberg

  • Moderatore
  • Post: 7067
Aggiungere un'immagine di sfondo alle barre di Firefox

Con le istruzioni sottostanti, inserite nel file userChrome.css, è possibile aggiungere un'immagine di sfondo alle barre di Firefox senza dover installare un tema diverso da quello standard.

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.

Codice: [Seleziona]
/* Aggiunge un'immagine di sfondo alla barra dei menu */

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


Barra di navigazione.

Codice: [Seleziona]
/* Aggiunge un'immagine di sfondo alla barra di navigazione */

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


Barra dei segnalibri.

Codice: [Seleziona]
/* Aggiunge un'immagine di sfondo alla barra dei segnalibri */

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


Barra delle schede.

Codice: [Seleziona]
/* Aggiunge un'immagine di sfondo alla barra delle schede */

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


Barra dei componenti aggiuntivi.

Codice: [Seleziona]
/* Aggiunge un'immagine di sfondo alla barra dei componenti aggiuntivi */

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


Tutte le barre.

Codice: [Seleziona]
/* Aggiunge un'immagine di sfondo a tutte le barre in modo compatto */
/* In questo caso l'immagine di sfondo sarà sempre la stessa per tutte le barre */

#navigator-toolbox > *,
#addon-bar {
 -moz-appearance: none !important;
  background: transparent !important;
  background-image: url("immagine.gif") !important; }
« Ultima modifica: 17 Settembre 2011 12:59:29 da Iceberg »

0 Utenti e 1 Visitatore stanno visualizzando questo topic.