Linux, Grafik und Fotos

Um ein Thema für die Gnome Shell zu programmieren müsste man deutlich mehr Arbeitz in das Thema stecken als eine Thema, welches in den Helleigkeitsverhältnissen ähnlich bleibt. Also z.B. Helle Menüschrift auf dunklem oder durchsichtigem Grund. Bei einem hellen Theme müsset man dies und auch die Menüs komplette ändern.

Ein wenig schneller geht die Anpassung, wenn die die gnome-classic.css Datei zur Anpassung verwendet. Diese beinhaltet alle Anpassungen des Classic Modus als auch der Gnome Shell. Diese Datei befindet sich im Verzeichnis /usr/share/gnome-shell/theme/.

Allerdings muß vorher auch der Classic Modus installiert werden. Unter Opensuse erfolgt das mit dem Begfehl:

sudo zypper in gnome-shell-classic

Dann kopiert man die Datei gnome-classic.css unter das folgende Verzeichnis /home/.themes/wunschname/gnome-shell/. Das Thema „wunschname“ kann später über das Gnome-Tweak Tool eingeschalten werden. Als nächstes bennent man die Datei in gnome-shell.css um.

Anschließend Theme mit dem „wunschname“ im Gnome-Tweak-Tool auswählen – Fertig. Jetzt ist das Classic-Theme ein Gnome-Shell-Theme.

Ich habe anschließen optionale Änderungen ausgeführt. Diese unterteilen sich in Änderungen im Classic Bereich und im Gnome Shellbereich (Übersichtstaste gedrückt bzw. Maus in der linken Ecke).

Gnome Shell Änderungen:

1.) linkes Startermenü transparent machen

/* DASHBOARD */
#dash {
  font-size: 9pt;
  color: #eeeeec;
  background-color: transparent;            /*geaendert - linkes Startmenue*/

2.) Im rechten Arbeitsplatzmenü den Hintergrund Transparent machen

.workspace-thumbnails {
  color: #eeeeec;
  background-color: transparent;            /*geaendert - rechter Workplace Swichter*/
  border: 1px solid rgba(238, 238, 236, 0.2); }

3.) Im Übersichtsmodus das obere Panel  Transparent machen. Die entsprechend zu ändernden Werte sind unter dem Punkt #panel: overview zu finden.

/* Overrides */
#panel {
  font-weight: normal;
  background-color: rgba(255,255,255,0.65);         /*geaendert - oberes Panel von Classic*/
  background-gradient-direction: none;             /*geaendert von certikal auf none*/
  background-gradient-end: #e0e0e0;
  border-top-color: #666;
  /* we don't support non-uniform border-colors and
     use the top border color for any border, so we
     need to set it even if all we want is a bottom
     border */
  border-bottom: 1px solid #666;
  app-icon-bottom-clip: 0px; }
  #panel:overview {                    /*geändert*/
    background-color: transparent;            /*geändert*/
    background-gradient-end: transparent;        /*geändert*/
    border-top-color: transparent;            /*geändert*/

Änderungen im Gnome Classic Modus

Es erfolgte eine Änderung der Hintergundfarbe des obigen Top Panels von heller Vollfarbe auf auf ein duchsichtiges weiß ohne Farbverlauf.

4.) An gleicher Stelle sind diese zu ändernden Punkte zu finden:

/* Overrides */
#panel {
  font-weight: normal;
  background-color: rgba(255,255,255,0.65);         /*geaendert - oberes Panel von Classic*/
  background-gradient-direction: none;             /*geaendert von certikal auf none*/

Fertig!

Zusatz – aus der fertigen gnome-shell.css kann man auch ein hübsches Gnome-Classic Them erstellen! Einfach die Datei umbenennen in gnome-classic.css und wieder zurück kopieren in das Verzeichnis /usr/share/gnome-shell/theme/.

Das Theme ist auch fertig zum Download

Zur Bearbeitung der Gnome Shell Theme wird jetzt Sass (Syntactically Awesome Stylesheets) verwendet. Dies ist sicher für die Entwickler eine große Erleichterung, liegen doch zentrrale Konfigurationsdateien in einzelnen sccs Dateien vor. Dabei ist Sass eine Art Vorstufe zur Erzeugung der eigentlichen css Dateien. Arbeitsschritte können in den scss Dateien gespeichert werden. Erst wenn mit dem Syntax von Sass eine css erzeugt wird liegt das Arbeitsergebnis vor und kann für eine Gnome Shell Theme getestet werden.

Als erstes muß Sass installiert werden. Das geht unter Opensuse sehr leicht:

sudo zypper install ruby2.1-rubygem-sass

anschließend :

sudo gem install sass

Damit liegt die Entwicklungsumgebung vor.

Jetzt holen wir uns die aktuelle Entwicklungsumgebung vom Git Repository ind das Verzeichnis gnome-shell unseres Homeverzeichnisses.:

git clone --recursive https://github.com/GNOME/gnome-shell

Im Homeverzeichnis unter /gnome-shell/date/theme liegen nun unsere sccs Dateien. Das Ziele eines neuen Themes ist die Erstellung einer gnome-shell.css Datei. Eine derartige Datei liegt dort bereits vor und könnte direkt bearbeitet werden. Anschließend kopiert man die Datei in das Verzeichnis /theme/Themenname/gnome-shell/ – Fertig ist ein neues Theme.

Sass kann nun verwendet werden um aus den vorliegenden scss Dateien genau dies css Datei zu erzeugen. Folgender Test (in diesem Verzeichnis) macht genau das:

sass gnome-shell.scss gnome-shell.css

Bisher hatten wir an den scss Dateien noch nicht geändert – es liegt also eine gleich gnome-shell.css Datei vor (vorausgesetzt Sass wurde richtig installiert und der Prozess wurde vollständig und erfolgreich abgeschlossen). Damit könnte man eine erfolgreiche Installation von sass also auch gleich testen.

Jetzt schauen wir uns die gnome-shell.scss Datei genau an und sehen, dass die Konfiguration sämtlich aus dem Unterverzeichnis gnome-shell-sass importiert wurde.

Ich passe meistens die Farben des Panels (obere Leiste), des Dashboard (linkes Dock) und des Dashboard an.

Dafür benötige ich die scss Datei welche die Farbe festlegt _color.scss und die scss Datei welches die Farbstruktur _common.scss beschreibt. Beide zusammen ergeben nach der Umwandlung mittels Sass die eigentliche css Datei welche Farben und Struktur unseres neuen Themes beschreiben wird.

Der Vorteil von Sass zeigt sich hier ganz deutlich. Ändere ich die Hintrergrundfarbe $bg_color in der Datei _color.scss werden nach der Übersetzung in die css Datei alle Hintergrundfarben, welche in der Datei _common.scss durch $bg_color beschrieben wurden, geändert. Je mehr ich also von derartigen gleichenVariablen Gebrauch mache, um so mehr spare ich einzelne Farbbeschreibungen – desto einheitlicher wird der Desktop (allerdings auch).

Um meine kleinen Farbänderungen an der Standard Theme durchzuführen ändere ich die Color Datei _color.scss . Ich füge in der Datei _common.scss für das Panel noch eine zusätzlich Variable für die Hintergrundfarbe ein. Die Gnomemacher haben diese fest in der Strukturdatei auf black gesetzt – das wollte ich gern flexibler gestalten. Sollte man ein helles Panel bevorzugen ist die Änderung der Textfarbe ebenfalls notwendig. Dafür müssetn dann auch noch zusätzliche Variablen eingefügt und Farben festgelegt werden.

So – ich hoffe, ich habe das Prinzip einfach beschreiben können.