Slik endrer du stilegenskaper for GNOME-skjelltemaer

GNOME Shell (GS) -temaer er sterkt avhengig av CSS for å utforme forskjellige elementer i skallet. En typisk CSS-fil som inngår i et GS-tema, kan ha tusenvis av eiendommer. Denne artikkelen vil dekke noen konsepter som du kan bruke til å tilpasse eksisterende GS-temaer ved å lage et nytt tema som arver verdier fra de opprinnelige temaene. Hvis du er litt kjent med hvordan CSS fungerer, kan du bygge videre på eksemplene nevnt nedenfor for å endre nesten alle aspekter av et GS-tema.

Aktivering av tilpassede GNOME-skjelltemaer

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

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

Start "Tweaks" -appen fra applikasjonsstarteren, og gå til "Extensions" -fanen i sidefeltet. Aktiver utvidelsen "User Themes", som vist på skjermbildet nedenfor. Forsikre deg om at "Extensions" -bryteren er aktivert øverst.

Når du er ferdig med dette trinnet, lukk og start Tweaks-appen på nytt. Nå vil du kunne endre GS-temaet fra "Utseende" -fanen.

Opprette nødvendige filer for tilpasning av tema

For å tilpasse et eksisterende tema, må du opprette et nytt GS-tema som bygger på det opprinnelige temaet. På denne måten kan du bare endre utvalgte deler av temaet, uten å endre hele temaet. Enhver urørt del av det opprinnelige temaet blir beholdt som det er. Å kjøre kommandoene nedenfor vil opprette et nytt tilpasset tema med navnet “mytheme” i $ HOME-katalogen.

$ mkdir -p ~ /.temaer / myte / gnome-shell /
$ touch ~ /.temaer / myte / gnome-shell / gnome-shell.css

Du kan bruke hvilken som helst teksteditor for å legge inn dine egne tilpasninger i “gnome-shell.css ”-fil opprettet ved å kjøre kommandoen ovenfor. Når du har angitt den nødvendige koden, kan du velge temaet "Mytheme" i rullegardinmenyen i Tweaks-appen, som forklart i første del av denne artikkelen. Merk at du må logge ut og logge på igjen for at endringene skal tre i kraft. Alternativt kan du også trykke og skriv “r” i popup-inndatafeltet for å laste inn GNOME-skallet på nytt.

Finne Base CSS-filen

Hvis du vil bruke den opprinnelige CSS-filen som referanse, må du finne og pakke den ut først. Tredjeparts temaer kan direkte inkludere et “gnome-shell.css ”-fil, noe som gjør det enkelt å bruke som en base for CSS-tilpasning. Standard systemfiler kan imidlertid inneholde “gnome-shell-theme.gresource ”-filer i stedet. Du kan finne standard GS-systemtema som ligger i "/ usr / share / gnome-shell / theme" -stien. Inne i denne katalogen finner du gresource-filen under en annen mappe med samme navn som standard systemtema. I den nyeste versjonen av Ubuntu finner du gresource-filen i stien “/ usr / share / gnome-shell / theme / Yaru”. Kopier gresource-filen til en annen mappe og kjør følgende kommando:

$ gresource list gnome-shell-theme.gresource

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

/ org / gnome / shell / theme / Yaru-dark / gnome-shell-high-contrast.css
/ org / gnome / shell / theme / Yaru-dark / gnome-shell.css
/ org / gnome / shell / theme / Yaru / gnome-shell-high-contrast.css
/ org / gnome / shell / theme / Yaru / gnome-shell.css
..
..
..

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

$ gresource ekstrakt gnome-shell-tema.gresource / org / gnome / shell / theme / Yaru / gnome-shell.css
> utgang.css

Du kan nå referere til “output.css ”-fil oppnådd ovenfor, og bruk den som en base for tilpasning. Noen eksempler på CSS-tilpasning er nevnt nedenfor. Disse eksemplene dekker ikke alle brukssaker, men gir deg en grunnleggende ide om hvordan du skal gå frem. Merk at ingen forklaring vil bli gitt på CSS-reglene nevnt nedenfor, da de ligger utenfor omfanget av denne artikkelen. Du kan se CSS referansedokumentasjon fra W3Schools eller Mozilla for mer informasjon.

Endring av fontegenskaper for systemtema

Den følgende koden vil endre fontegenskapene til standard systemtema. Skriftstilen endres til Noto Sans og skriftstørrelsen endres til 12 punkter.

scene
font-familie: Noto Sans, sans-serif;
skriftstørrelse: 12pt;

Hvis du bruker et GS-tema fra en tredjepart, må du kanskje importere CSS-filen først ved å spesifisere hele banen, som vist i eksemplet nedenfor:

@import url ("sti / til / tema.css ");
scene
font-familie: Noto Sans, sans-serif;
skriftstørrelse: 12pt;

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

Endre bakgrunnsfarge på panelet

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

#panel
bakgrunnsfarge: rød;

Endre bredden på vippebryteren

Bruk koden nedenfor for å endre bredden på vippeknappene:

.vippebryter
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 den riktige basen CSS-filen for å bruke den som referanse og unngå mye gjetning.