Hvordan endre stilegenskaper til Gnome Shell -temaer

Gnome Shell (GS) temaer avhenger sterkt av CSS for å style forskjellige elementer i skallet. En typisk CSS -fil inkludert i et GS -tema kan ha tusenvis av egenskaper. Denne artikkelen vil dekke noen konsepter som du kan bruke til å finpusse eksisterende GS -temaer ved å lage et nytt tema som arver verdier fra de originale temaene. Hvis du er litt kjent med hvordan CSS fungerer, kan du bygge videre på eksemplene som er nevnt nedenfor for å endre nesten ethvert aspekt av et GS -tema.

Aktivering av tilpassede Gnome Shell -temaer

Ubuntu, sammen med mange andre GNOME-baserte distribusjoner, tillater ikke brukerproduserte tilpassede temaer som standard. For å laste inn brukertemaer, må en GS -utvidelse og et skjult finjusteringsverktøy installeres. Du kan installere det nødvendige utvidelses- og gnome -finjusteringsverktøyet i Ubuntu ved å kjøre følgende kommando:

$ sudo apt install Gnome-shell-utvidelser Gnome-Tweaks

Start "Tweaks" -appen fra applikasjonslasteret og gå til "Extensions" -fanen i sidefeltet. Aktiver "brukertemaer" -utvidelsen, som vist på skjermdumpen nedenfor. Forsikre deg om at "utvidelser" -tegnet er aktivert øverst.

Når du er ferdig med dette trinnet, lukker du og lanserer tweaks -appen. Nå vil du kunne endre GS -temaet fra fanen "Utseende".

Opprette de nødvendige filene for tilpasning av tema

For å tilpasse et eksisterende tema, må du lage et nytt GS -tema som bygger på det originale temaet. På denne måten kan du bare endre utvalgte deler av temaet, uten å endre hele temaet. Enhver uberørt del av det opprinnelige temaet vil bli holdt som det er. Å kjøre kommandoene nedenfor vil lage et nytt tilpasset tema som heter “Mytheme” i din $ Home Directory.

$ mkdir -p ~/.Temaer/Mytheme/Gnome-Shell/
$ berøring ~/.Temaer/Mytheme/Gnome-Shell/Gnome-Shell.CSS

Du kan bruke hvilken som helst tekstredigerer for å oppgi dine egne tilpasninger i “Gnome-Shell.CSS ”-fil opprettet ved å kjøre kommandoen over. Når du har lagt inn den nødvendige koden, kan du velge "Mytheme" -temaet i rullegardinmenyen i Tweaks -appen, som forklart i den første delen av denne artikkelen. Merk at du må logge ut og logge inn for at endringene skal tre i kraft. Alternativt kan du også trykke og legge inn “R” i popup -inngangsboksen for å laste inn GNOME -skallet på nytt.

Finne base CSS -filen

Hvis du vil bruke den originale CSS -filen som referanse, må du finne og trekke den ut først. Tredjeparts temaer kan direkte inneholde et "Gnome-Shell.CSS ”-fil, noe som gjør det enkelt å bruke som base for CSS -tilpasning. Imidlertid kan standardsystemfiler omfatte “Gnome-Shell-tema.gresource ”-filer i stedet. Du kan finne standardsystemet GS-tema som ligger på "/usr/share/gnome-shell/tema" -banen. Inne i denne katalogen finner du GRESOURCE -filen under en annen mappe av den samme som navnet på standard systemtema. I den siste versjonen av Ubuntu finner du GRESource-filen på "/usr/share/gnome-shell/tema/yaru" -stien. Kopier GRESource -filen til en annen mappe og kjør følgende kommando:

$ gresource liste gnome-shell-tema.Gresource

Etter å ha kommet inn i kommandoen ovenfor, vil du motta følgende utdata:

/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-høy-kontrast.CSS
/org/gnome/shell/tema/yaru/gnome-shell.CSS
..
..
..

Den fjerde linjen i utgangen over gir riktig vei til CSS -filen. For å trekke den ut, kjør en kommando i følgende format:

$ gresource extract gnome-shell-tema.gresource/org/gnome/shell/tema/yaru/gnome-shell.CSS
> Utgang.CSS

Du kan nå henvise til “Output.CSS ”-fil oppnådd ovenfor og bruk den som base for tilpasning. Noen eksempler på CSS -tilpasning er nevnt nedenfor. Disse eksemplene dekker ikke alle brukssaker, men vil gi deg en grunnleggende ide for hvordan du går frem. Merk at det ikke vil bli gitt noen forklaring for CSS -reglene som er nevnt nedenfor, ettersom de er utenfor omfanget av denne artikkelen. Du kan henvise til CSS -referansedokumentasjonen fra W3Schools eller Mozilla for mer informasjon.

Endring av fontegenskaper til systemtema

Følgende kode vil endre fontegenskapene til standard systemtema. Fontstilen vil bli endret til noto sans og skriftstørrelsen vil bli endret til 12 pt.

scene
Font-Family: Noto Sans, Sans-serif;
Font-størrelse: 12pt;

Hvis du bruker et tredjeparts GS-tema, kan det hende du må importere CSS-filen først ved å spesifisere hele banen, som vist i eksemplet nedenfor:

@Import URL ("Path/To/Theme.css ");
scene
Font-Family: Noto Sans, Sans-serif;
Font-størrelse: 12pt;

Hvis en CSS -fil ikke er tilgjengelig for import, kan du trekke den ut fra GRESource -filen, som forklart ovenfor.

Endre panelbakgrunnsfarge

For å endre panelets bakgrunnsfarge til rødt, bruk følgende kode:

#panel
bakgrunnsfarge: rød;

Endre bredde på vekslingsbryteren

Bruk koden nedenfor for å endre bredden på vippeknappene:

.veksle-bryter
Bredde: 100px;

Konklusjon

Med litt kunnskap om CSS -regler og egenskaper, kan du enkelt tilpasse nesten alle aspekter av et GS -tema. Det er imidlertid viktig å finne riktig base CSS -fil for å bruke den som referanse og unngå mye gjetninger.