Come modificare le proprietà di stile dei temi di shell gnome

I temi di guscio gnoma (GS) dipendono fortemente dal CSS per lo styling di vari elementi del guscio. Un tipico file CSS incluso in un tema GS può avere migliaia di proprietà. Questo articolo coprirà alcuni concetti che puoi usare per modificare i temi GS esistenti creando un nuovo tema che eredita i valori dai temi originali. Se hai un po 'di familiarità con il funzionamento del CSS, puoi basarsi sugli esempi menzionati di seguito per cambiare quasi ogni aspetto di un tema GS.

Abilitare temi personalizzati di shell gnome

Ubuntu, insieme a molte altre distribuzioni basate su gnome, non consente di default. Per caricare temi utente, è necessario installare un'estensione GS e un'utilità di modifiche nascoste. È possibile installare lo strumento di tweak di estensione e gnome richiesto in Ubuntu eseguendo il seguente comando:

$ sudo apt installare gnome-shell-extensions gnome-tweaks

Avvia l'app "Tweaks" dal lancio dell'applicazione e vai alla scheda "Extensions" nella barra laterale. Abilita l'estensione "temi utente", come mostrato nello screenshot seguente. Assicurarsi che il boscaglia "estensioni" sia abilitato nella parte superiore.

Una volta che hai finito con questo passaggio, chiudi e rilancia l'app di tweaks. Ora sarai in grado di cambiare il tema GS dalla scheda "Aspetto".

Creazione dei file necessari per la personalizzazione del tema

Per personalizzare un tema esistente, dovrai creare un nuovo tema GS che si basa sul tema originale. In questo modo, puoi cambiare solo parti selezionate del tema, senza cambiare l'intero tema. Qualsiasi parte incontaminata del tema originale sarà mantenuta così com'è. L'esecuzione dei comandi di seguito creerà un nuovo tema personalizzato chiamato "Mytheme" nella tua $ Home Directory.

$ mkdir -p ~/.temi/mitheme/gnome shell/
$ touch ~/.temi/mitheme/gnome-shell/gnome-shell.CSS

Puoi utilizzare qualsiasi editor di testo per inserire le tue personalizzazioni nel "gnome-shell.File CSS "creato mediante il comando sopra. Una volta inserito il codice richiesto, è possibile selezionare il tema "Mytheme" nel menu a discesa nell'app Tweaks, come spiegato nella prima sezione di questo articolo. Si noti che dovrai disconnettersi e accedere per le modifiche per avere effetto. In alternativa, è anche possibile premere e immettere "R" nella casella di input popup per ricaricare la shell gnome.

Trovare il file CSS di base

Se si desidera utilizzare il file CSS originale come riferimento, dovrai prima trovarlo ed estrarlo. I temi di terze parti possono includere direttamente un "gnome shell.File CSS ”, rendendo facile da usare come base per la personalizzazione CSS. Tuttavia, i file di sistema predefiniti possono includere "Gnome-shell-teme.File Gresource ”invece. È possibile trovare il tema GS del sistema predefinito situato nel percorso "/share/share/gnome-shell/tema". All'interno di questa directory, troverai il file Gresource in un'altra cartella come il nome del tema del sistema predefinito. Nell'ultima versione di Ubuntu, troverai il file Gresource sul percorso "/usr/share/gnome-shell/tema/yaru". Copia il file Gresource in un'altra cartella ed esegui il comando seguente:

$ Gresource List-tema di gnome-shell.Gresource

Dopo aver inserito il comando sopra, riceverai il seguente output:

/org/gnome/shell/tema/yaru-dark/gnome-shell-high-contrast.CSS
/org/gnome/shell/tema/yaru-dark/gnome-shell.CSS
/org/gnome/shell/tema/yaru/gnome-shell-high-contrast.CSS
/org/gnome/shell/tema/yaru/gnome-shell.CSS
..
..
..

La quarta riga nell'output sopra fornisce il percorso corretto al file CSS. Per estrarlo, esegui un comando nel seguente formato:

$ Gresource Estratto-tema.Gresource/org/gnome/shell/tema/yaru/gnome-shell.CSS
> output.CSS

Ora puoi fare riferimento all'output.File CSS ”ottenuto sopra e usalo come base per la personalizzazione. Alcuni esempi di personalizzazione CSS sono menzionati di seguito. Questi esempi non coprono tutti i casi d'uso ma ti daranno un'idea di base su come procedere. Si noti che non verrà fornita alcuna spiegazione per le regole CSS menzionate di seguito, in quanto sono oltre lo scopo di questo articolo. È possibile fare riferimento alla documentazione di riferimento CSS da W3Schools o Mozilla per ulteriori informazioni.

Modifica delle proprietà del carattere del tema del sistema

Il seguente codice modificherà le proprietà del carattere del tema del sistema predefinito. Lo stile del carattere verrà cambiato in noto sans e la dimensione del carattere verrà modificata in 12 pt.

palcoscenico
Font-Family: noto sans, sans-serif;
Font-size: 12pt;

Se si utilizza un tema GS di terze parti, potrebbe essere necessario importare prima il suo file CSS specificando il percorso completo, come mostrato nell'esempio seguente:

@IMport URL ("Path/to/Theme.css ");
palcoscenico
Font-Family: noto sans, sans-serif;
Font-size: 12pt;

Se un file CSS non è disponibile per l'importazione, è possibile estrarlo dal file Gresource, come spiegato sopra.

Modifica del colore di sfondo del pannello

Per modificare il colore dello sfondo del pannello in rosso, utilizzare il seguente codice:

#panel
Background-color: rosso;

Modifica della larghezza dell'interruttore a levetta

Utilizzare il codice seguente per modificare la larghezza dei pulsanti a disattivazione:

.interruttore a levetta
larghezza: 100px;

Conclusione

Con una certa conoscenza delle regole e delle proprietà CSS, puoi facilmente personalizzare quasi tutti gli aspetti di un tema GS. Tuttavia, è importante individuare il file CSS di base corretto per usarlo come riferimento ed evitare molte congetture.