Jak modyfikować właściwości stylu motywów skorupy gnom

Tematy Gnome Shell (GS) w dużej mierze zależą od CSS do stylizacji różnych elementów skorupy. Typowy plik CSS zawarty w motywie GS może mieć tysiące nieruchomości. W tym artykule obejmie niektóre pojęcia, których można użyć do dostosowania istniejących tematów GS, tworząc nowy motyw dziedziczący wartości od oryginalnych motywów. Jeśli jesteś trochę zaznajomiony z tym, jak działa CSS, możesz opierać się na przykładach wymienionych poniżej, aby zmienić prawie każdy aspekt motywu GS.

Włączanie niestandardowych motywów powłoki gnome

Ubuntu, wraz z wieloma innymi dystrybucjami opartymi na GNOME, domyślnie nie pozwala na niestandardowe motywy użytkowników. Aby załadować motywy użytkownika, należy zainstalować rozszerzenie GS i narzędzie Ukryte poprawki. Możesz zainstalować wymagane narzędzie rozszerzenia i ulepszenia GNOME w Ubuntu, uruchamiając następujące polecenie:

$ sudo apt instal gnome-shell-rozszerzenie gnome-tweaks

Uruchom aplikację „poprawki” z uruchamiania aplikacji i przejdź do karty „rozszerzenia” na pasku bocznym. Włącz rozszerzenie „motywów użytkownika”, jak pokazano na zrzucie ekranu poniżej. Upewnij się, że przełącznik „rozszerzeń” jest włączony u góry.

Po zakończeniu tego kroku, zamknij i ponownie uruchom ponownie aplikację. Teraz będziesz mógł zmienić motyw GS na karcie „Wygląd”.

Tworzenie niezbędnych plików do dostosowywania motywów

Aby dostosować istniejący motyw, musisz stworzyć nowy motyw GS, który opiera się na oryginalnym motywie. W ten sposób możesz zmienić tylko wybrane części motywu, nie zmieniając całego motywu. Każda nietknięta część oryginalnego motywu będzie przechowywana tak, jak jest. Uruchomienie poniższych poleceń utworzy nowy niestandardowy motyw o nazwie „Mytheme” w katalogu $ Home.

$ mkdir -p ~//.Tematy/Mytheme/Gnome-Shell/
$ touch ~/.motywy/mitu/gnome-shell/gnome-sell.CSS

Możesz użyć dowolnego edytora tekstu, aby wprowadzić własne dostosowania w „Gnome-Shell.plik CSS ”utworzony przez uruchamianie powyższego polecenia. Po wprowadzeniu wymaganego kodu możesz wybrać motyw „Mytheme” w menu rozwijanym w aplikacji poprawki, jak wyjaśniono w pierwszej sekcji tego artykułu. Zauważ, że będziesz musiał wylogować się i zalogować się, aby zmiany weszły. Alternatywnie możesz również nacisnąć i wprowadzić „R” w oknie wejściowym wyskakującego, aby ponownie załadować powłokę gnome.

Znalezienie podstawowego pliku CSS

Jeśli chcesz użyć oryginalnego pliku CSS jako odniesienia, najpierw musisz go znaleźć i wyodrębnić. Tematy innych firm mogą bezpośrednio zawierać „gnome-powłokę.plik CSS ”, ułatwiając użycie jako podstawy do dostosowywania CSS. Jednak domyślne pliki systemowe mogą zawierać „gnome-shell-theme.Zamiast tego pliki gresource ”. Można znaleźć domyślny motyw systemu GS znajdujący się na ścieżce „/usr/share/gnome-shell/motyw”. W tym katalogu znajdziesz plik Gresource w innym folderze tego samego, co nazwa domyślnego motywu systemowego. W najnowszej wersji Ubuntu znajdziesz plik Gresource na ścieżce „/usr/share/gnome-sell/motyw/yaru”. Skopiuj plik Gresource do innego folderu i uruchom następujące polecenie:

$ gresource lista gnome-shell-theme.Gresource

Po wprowadzeniu powyższego polecenia otrzymasz następujące dane wyjściowe:

/org/gnome/shell/motyw/yaru-dark/gnome-shell-high-contrast.CSS
/org/gnome/shell/motyw/Yaru-Dark/Gnome-Shell.CSS
/org/gnome/shell/motyw/yaru/gnome-shell-high-contrast.CSS
/org/gnome/shell/motyw/yaru/gnome-sell.CSS
…
…
…

Czwarta linia na powyższym wyjściu podaje właściwą ścieżkę do pliku CSS. Aby go wyodrębnić, uruchom polecenie w następującym formacie:

$ gresource Extract Gnome-Shell-Theme.Gresource/org/gnome/shell/motyw/yaru/gnome-sell.CSS
> Wyjście.CSS

Możesz teraz odwołać się do „wyjścia.Plik CSS ”uzyskany powyżej i użyj go jako podstawy do dostosowywania. Niektóre przykłady dostosowywania CSS są wymienione poniżej. Te przykłady nie obejmują wszystkich przypadków użycia, ale dadzą ci podstawowy pomysł, jak postępować. Zwróć uwagę, że nie zostanie podane żadne wyjaśnienie dla wymienionych poniżej zasad CSS, ponieważ są one poza zakresem tego artykułu. Aby uzyskać więcej informacji, możesz zapoznać się z dokumentacją referencyjną CSS z W3Schools lub Mozilla.

Zmiana właściwości czcionek motywu systemowego

Poniższy kod zmieni właściwości czcionki domyślnego motywu systemowego. Styl czcionki zostanie zmieniony na Noto Sans, a rozmiar czcionki zostanie zmieniony na 12 pt.

scena
Font-Family: Noto Sans, Sans-Serif;
Rozmiar czcionki: 12pt;

Jeśli używasz zewnętrznego motywu GS, może być konieczne zaimportowanie jego pliku CSS najpierw, określając pełną ścieżkę, jak pokazano w poniższym przykładzie:

@Import URL („Ścieżka/do/motyw.CSS ”);
scena
Font-Family: Noto Sans, Sans-Serif;
Rozmiar czcionki: 12pt;

Jeśli plik CSS nie jest dostępny do importowania, możesz wyodrębnić go z pliku Gresource, jak wyjaśniono powyżej.

Zmiana koloru tła panelu

Aby zmienić kolor tła panelu na czerwony, użyj następującego kodu:

#płyta
kolor tła: czerwony;

Zmiana szerokości przełącznika

Użyj poniższego kodu, aby zmienić szerokość przycisków przełączania:

.przełącznik
szerokość: 100px;

Wniosek

Dzięki pewnej wiedzy na temat zasad i właściwości CSS możesz łatwo dostosować prawie wszystkie aspekty motywu GS. Ważne jest jednak zlokalizowanie prawidłowego bazowego pliku CSS, aby użyć go jako odniesienia i uniknąć dużo zgadywania.