So ändern Sie die Stileigenschaften von GNOME-Shell-Designs

GNOME Shell (GS) Themes hängen stark von CSS ab, um verschiedene Elemente der Shell zu gestalten. Eine typische CSS-Datei, die in einem GS-Theme enthalten ist, kann Tausende von Eigenschaften haben. In diesem Artikel werden einige Konzepte behandelt, mit denen Sie vorhandene GS-Themes optimieren können, indem Sie ein neues Thema erstellen, das Werte von den ursprünglichen Themen übernimmt original. Wenn Sie ein wenig mit der Funktionsweise von CSS vertraut sind, können Sie auf den unten aufgeführten Beispielen aufbauen, um fast jeden Aspekt eines GS-Themes zu ändern.

Aktivieren von benutzerdefinierten GNOME-Shell-Designs

Ubuntu lässt zusammen mit vielen anderen GNOME-basierten Distributionen standardmäßig keine benutzerdefinierten Designs zu. Um Benutzerdesigns zu laden, müssen eine GS-Erweiterung und ein verstecktes Tweaks-Dienstprogramm installiert werden. Sie können die erforderliche Erweiterung und das GNOME-Optimierungstool in Ubuntu installieren, indem Sie den folgenden Befehl ausführen:

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

Starten Sie die App „Tweaks“ über den Anwendungs-Launcher und gehen Sie in der Seitenleiste zur Registerkarte „Erweiterungen“. Aktivieren Sie die Erweiterung "User Themes", wie im Screenshot unten gezeigt. Stellen Sie sicher, dass der Schalter "Erweiterungen" oben aktiviert ist.

Wenn Sie mit diesem Schritt fertig sind, schließen Sie die Tweaks-App und starten Sie sie erneut. Jetzt können Sie das GS-Thema auf der Registerkarte "Erscheinungsbild" ändern.

Erstellen der erforderlichen Dateien für die Theme-Anpassung

Um ein vorhandenes Thema anzupassen, müssen Sie ein neues GS-Theme erstellen, das auf dem ursprünglichen Thema aufbaut. Auf diese Weise können Sie nur ausgewählte Teile des Themas ändern, ohne das gesamte Thema zu ändern. Alle unberührten Teile des Originalthemas bleiben unverändert. Wenn Sie die folgenden Befehle ausführen, wird ein neues benutzerdefiniertes Thema namens „mytheme“ in Ihrem $HOME-Verzeichnis erstellt.

$ mkdir -p ~/.themen/mytheme/gnome-shell/
$ berühren ~/.themen/mytheme/gnome-shell/gnome-shell.CSS

Sie können einen beliebigen Texteditor verwenden, um Ihre eigenen Anpassungen in die „Gnome-Shell“ einzugeben.css“-Datei, die durch Ausführen des obigen Befehls erstellt wurde. Nachdem Sie den erforderlichen Code eingegeben haben, können Sie das Thema „Mytheme“ im Dropdown-Menü der Tweaks-App auswählen, wie im ersten Abschnitt dieses Artikels beschrieben. Beachten Sie, dass Sie sich ab- und wieder anmelden müssen, damit die Änderungen wirksam werden. Alternativ können Sie auch drücken und geben Sie „r“ in das Popup-Eingabefeld ein, um die GNOME-Shell neu zu laden.

Finden der CSS-Basisdatei

Wenn Sie die Original-CSS-Datei als Referenz verwenden möchten, müssen Sie sie zuerst finden und extrahieren. Themes von Drittanbietern können direkt eine "Gnome-Shell" enthalten.css“-Datei, die die Verwendung als Basis für die CSS-Anpassung erleichtert. Standardsystemdateien können jedoch "gnome-shell-theme" enthalten.gresource“-Dateien stattdessen. Sie finden das Standard-GS-Theme des Systems im Pfad „/usr/share/gnome-shell/theme“. In diesem Verzeichnis finden Sie die gresource-Datei in einem anderen Ordner, der dem Namen des Standard-Systemdesigns entspricht. In der neuesten Ubuntu-Version finden Sie die Gresource-Datei im Pfad „/usr/share/gnome-shell/theme/Yaru“. Kopieren Sie die Ressourcendatei in einen anderen Ordner und führen Sie den folgenden Befehl aus:

$ Ressourcenliste gnome-shell-theme.Ressource

Nach Eingabe des obigen Befehls erhalten Sie folgende Ausgabe:

/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
…
…
…

Die vierte Zeile in der obigen Ausgabe gibt den richtigen Pfad zur CSS-Datei an. Führen Sie zum Extrahieren einen Befehl im folgenden Format aus:

$ Ressourcenextrakt gnome-shell-theme.gresource /org/gnome/shell/theme/Yaru/gnome-shell.CSS
> Ausgabe.CSS

Sie können sich nun auf die „Ausgabe“ beziehen.css“-Datei, die Sie oben erhalten haben, und verwenden Sie sie als Basis für die Anpassung. Einige Beispiele für CSS-Anpassungen sind unten aufgeführt. Diese Beispiele decken nicht alle Anwendungsfälle ab, geben Ihnen aber eine Grundidee für die weitere Vorgehensweise. Beachten Sie, dass die unten aufgeführten CSS-Regeln nicht erläutert werden, da sie den Rahmen dieses Artikels sprengen würden. Weitere Informationen finden Sie in der CSS-Referenzdokumentation von W3Schools oder Mozilla.

Ändern der Schrifteigenschaften des Systemdesigns

Der folgende Code ändert die Schrifteigenschaften des Standard-Systemdesigns. Der Schriftstil wird auf Noto Sans und die Schriftgröße auf 12 pt geändert.

Bühne
Schriftfamilie: Noto Sans, serifenlos;
Schriftgröße: 12pt;

Wenn Sie ein GS-Theme eines Drittanbieters verwenden, müssen Sie möglicherweise zuerst die CSS-Datei importieren, indem Sie den vollständigen Pfad angeben, wie im folgenden Beispiel gezeigt:

@import url("Pfad/zum/Thema.css");
Bühne
Schriftfamilie: Noto Sans, serifenlos;
Schriftgröße: 12pt;

Wenn eine CSS-Datei zum Importieren nicht verfügbar ist, können Sie sie wie oben beschrieben aus der Ressourcendatei extrahieren.

Ändern der Panel-Hintergrundfarbe

Verwenden Sie den folgenden Code, um die Hintergrundfarbe des Bedienfelds in Rot zu ändern:

#panel
Hintergrundfarbe: rot;

Ändern der Breite des Kippschalters

Verwenden Sie den folgenden Code, um die Breite der Umschaltflächen zu ändern:

.Kippschalter
Breite: 100px;

Fazit

Mit etwas Wissen über CSS-Regeln und -Eigenschaften können Sie fast alle Aspekte eines GS-Themes leicht anpassen. Es ist jedoch wichtig, die richtige CSS-Basisdatei zu finden, um sie als Referenz zu verwenden und viele Vermutungen zu vermeiden.