Come posso personalizzare l'interfaccia grafica di Floorp utilizzando il file userChrome.css?

Il file userChrome.css consente di modificare l'interfaccia grafica (UI) di Floorp agendo direttamente sul foglio di stile del browser. Poiché Floorp si basa sul motore Gecko di Firefox, supporta le stesse regole di personalizzazione CSS.

1.Abilitare il supporto CSS in about:config:

Di default, la lettura dei file CSS personalizzati è disattivata.

1. Nella barra degli indirizzi di Floorp, digita about:config e premi Invio.

2. Accetta il messaggio di avviso per procedere.

3. Cerca la preferenza: toolkit.legacyUserProfileCustomizations.stylesheets.

4. Clicca sul pulsante di switch sulla destra per impostare il valore su true.

2.Individuare la cartella del profilo:

1. Nella barra degli indirizzi, digita about:support e premi Invio.

2. Nella sezione Informazioni di base, individua la riga Cartella del profilo (o Profile Directory).

3. Clicca su Apri cartella (oppure copia il percorso indicato).

3.Creare la struttura di file chrome:

1. All'interno della cartella del profilo appena aperta, crea una nuova cartella e rinominala esattamente chrome (tutto in minuscolo).

2. Entra nella cartella chrome.

3. Crea un nuovo file di testo e rinominalo userChrome.css.

4.Inserire le regole CSS di personalizzazione:

Apri il file userChrome.css con un editor di testo (es. Text Editor, VS Code o Gedit) e aggiungi il codice CSS desiderato.

5.Riavviare Floorp:

Chiudi completamente il browser e riavvialo per consentire a Floorp di caricare il nuovo foglio di stile.

Esempi pratici da copiare in userChrome.css

Ecco alcune personalizzazioni pronte all'uso per modificare l'aspetto di Floorp:

1. Nascondere i pulsanti di chiusura sulle schede (tranne quella attiva)

CSS

/* Nasconde il pulsante di chiusura per le schede non attive */
.tabbrowser-tab:not([selected]) .tab-close-button {
  display: none !important;
}

2. Arrotondare gli angoli dell'area di navigazione

CSS

/* Modifica il raggio di curvatura del rettangolo principale della pagina */
#browser, #main-window {
  --user-border-radius: 12px;
}

#appcontent {
  border-radius: var(--user-border-radius) !important;
  overflow: hidden !important;
}

3. Nascondere la barra dei preferiti quando si passa il cursore altrove (Auto-hide)

CSS

/* Mostra la barra dei segnalibri solo al passaggio del mouse */
#PersonalToolbar {
  max-height: 0px !important;
  min-height: 0px !important;
  opacity: 0 !important;
  transition: all 0.25s ease-in-out !important;
}

#PersonalToolbar:hover {
  max-height: 40px !important;
  min-height: 32px !important;
  opacity: 1 !important;
}

4. Personalizzare lo sfondo della barra laterale di Floorp

CSS

/* Cambia il colore di sfondo della Browser Manager Sidebar */
#sidebar-box, #sidebar-main {
  background-color: #1e1e2e !important; /* Colore dark Catppuccin */
}

Come identificare gli elementi da personalizzare

Per trovare i nomi degli elementi di Floorp (id o class) da modificare con il CSS:

1. Apri about:config e imposta a true le preferenze:

   • devtools.chrome.enabled

   • devtools.debugger.remote-enabled

2. Premi Ctrl + Shift + Alt + I per aprire il Browser Toolbox (lo strumento di ispezione dell'interfaccia intera del browser).

3. Usa lo strumento "Ispeziona elemento" per selezionare qualsiasi parte dell'interfaccia di Floorp e vedere il suo codice sorgente.