Gnome-Shell-Theme aus Gnome-Classic-Theme erstellen

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

Gnome Shell Theme mit Sass bearbeiten

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.

Gnome Shell 3.16 Theme bearbeiten

Die Theme Dateien zur Abänderung der Standardtheme für die Gnome Shell liegen jetzt nicht mehr als css Datei auf dem Rechner. Sie sind jetzt in den Code integriert. Das erschwert eine Abänderung der Standardtheme.

Es ist trotzdem möglich:

  1. Git-Core installieren: sudo zypper install git-core
  2. Dateien laden: git clone –recursive https://github.com/GNOME/gnome-shell
  3. Die Datei gnome-shell.css aus den kopierten Daten (liegen bei mir im Homeverzeichnis unter  /home/benutzername/gnome-shell/data/theme) nach /home/user/.themes/neuer_themenname/gnome-shell.css kopieren
  4. Die dort liegende Datei gnome-shell.css entsprechend abändern.
  5. Das neue Theme mit Gnome Tweak Tool aufrufen.

Ich benötige im Grunde 3 Variationen:

  • für helle Hintergründe eine Theme mit hellem Panel
  • für dunkle Hintergründe ein transparentes Theme
  • Ein universelles Theme mit dunklerem Panel (ähnlich dem Original)

So sind drei Themen entsanden:

Was habe ich in der css Datei geändert (am Beispiel Gnome316hell):

Dabei wurde je nach Farbe des Panel die Schriftfarbe, die Schriftfarbe wenn sich die Maus darüber befindet und die Schriftfarbe bei Aktivierung mit der Maus geändert.

Beim Suchbegriff Panel im Abschnitt /* TOP BAR */

/* TOP BAR */
#panel {
  /*background-color: transparent;*/
background-color: #eeeeec;

  font-weight: bold;
  height: 1.86em; }
  #panel.unlock-screen, #panel.login-screen, #panel.lock-screen {
    background-color: transparent; }
  #panel #panelLeft, #panel #panelCenter {
    spacing: 4px; }
  #panel .panel-corner {
    -panel-corner-radius: 6px;
    -panel-corner-background-color: #eeeeec;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent; }
    #panel .panel-corner:active, #panel .panel-corner:overview, #panel .panel-corner:focus {
      /*-panel-corner-border-color: rgba(250,235,215, 1)*/;
-panel-corner-border-color: #eeeeec}
    #panel .panel-corner.lock-screen, #panel .panel-corner.login-screen, #panel .panel-corner.unlock-screen {
      -panel-corner-radius: 0;
      -panel-corner-background-color: transparent;
      -panel-corner-border-color: transparent; }
  #panel .panel-button {
    -natural-hpadding: 12px;
    -minimum-hpadding: 6px;
    font-weight: bold;
/*   color: #ccc;*/

color: #555753;
    transition-duration: 100ms; }
    #panel .panel-button .app-menu-icon {
      -st-icon-style: symbolic;
      margin-left: 4px;
      margin-right: 4px; }
    #panel .panel-button:hover {
      color: #173}
    #panel .panel-button:active, #panel .panel-button:overview, #panel .panel-button:focus, #panel .panel-button:checked {
      background-color: rgba(0, 0, 0, 0.01);
      box-shadow: inset 0 -2px 0px #256ab1;
      color: #256ab1; }

und für das Dashboard (transparentes linkes Dock):

* DASHBOARD */
#dash {
  font-size: 9pt;
  color: #eeeeec;
  /*background-color: #2e3436;*/
background-color: transparent;
  padding: 4px 0;

 

 

und für den durchsichtigen Hintergrund der Arbeitsflächenumschalter:

 

 

workspace-thumbnails {
  color: #eeeeec;
  /*background-color: #2e3436;*/
background-color: transparent;
  border: 1px solid rgba(238, 238, 236, 0.2); }
Fertig

 

 

Meine lieblings Extensions für die Gnome Shell

Meine lieblings Extensions sind:

  • User themes

    wir benötigt um komfortabel Themes einzubinden

  • Place Status Indicator

    bringt im obigen Panel die persöhnlichen Ordner zum Vorschein

  • Applications Menu

    installiert im obigen Panel eine Startleiste für Programme

  • Dash to Dock

    beeinflußt das Verhalten des linken Gnome Dash Startmenüs

  • Removable Drive Menu

    zeigt alle eingebundenen, flexiblen Laufwerke im obigen Panel an

Installiert werden diese am einfachsten über das Gnome-tweak-tool und dem installierten FirefoxPlugin Gnome Shell Integration.

Desktop Anwendungs Starter auf der Gnome Shell

Um Auf der Gnome Shelle Anwendungsstarter zu erstellen muß als erstes das gnome-tweal-tool installiert sein.

Dort aktiviert man die Möglichkeit Symbole auf der Arbeitsfläche zu plazieren. Einige kann man auch gleich auswählen.

Um einen individuellen Starter zu erzeugen erstelle und speichere ich eine Vorlage mit folgenden Inhalt im Home Ordner Vorlagen:

[Desktop Entry]
Version=1.0
Encoding=UTF-8
Name=Neuer_Starter
GenericName=
Comment=
Exec=
Icon=/usr/share/icons/hicolor/scalable/apps/gnome-panel-launcher.svg
Terminal=false
Type=Application
StartupNotify=false
Name[de]=Neuer_Starter
GenericName[de]=
Comment[de]=

Die Datei erhält den Namen „Starter_Vorlage.desktop“. Rechte Maustaste auf die Datei, Eigenschaften und als Programm ausführen aktivieren.

Jetzt kann man einen individuellen Starter erstellen.

Rechtcklick auf den Desktop, Neue Datei erstellen, „Starter_Vorlage“ auswählen, Namen vergeben, speichern.

Die Eigenschaften der Datei aufrufen – also Rechtsklick auf die Datei, Eigenschfaten auswählen und die notwendigen Felder eintragen.

Fertig!

Autostart Programme unter Gnome Shell

Falls jemand dieses Einstellungsmöglichkeit vermisst?

Einfach im Terminal eingeben:

gnome-session-properties

Dort kann man die Autostart Programme eintragen.

Falls der Pfad zum Programmstarter vergessen wurde – einfach eingeben:

which <Programmname>

Als Ergebnis erhält man den Ort (oder die Orte) der ausführabren Datei.

Gnome Shell Theme anpassen

Dank der Verwendung der css Sprache zur Gestaltung der Theme des Desktops sind Anpassungen leicht möglich.

Als erstes möchte ich das Panel durchsichtig haben:

Das Standardtheme wird durch die Datei gnome-shell.css beschrieben und liegt im Pfad “/usr/share/gnome-shell/theme/. Diese ändern wir nun. Im Bereich Panel ändern werden die Boxeigenschaften geändert von:

/* Panel */
#panel {
   background-color: black;
   font-weight: bold;
   height: 1.86em;
}

nach:

/* Panel */
#panel {
    color: #ffffff;
    font-weight: bold;
    height: 1.86em;
    background-color: rgba(0,0,0,0.20); 
}

Dann setze ich die kleine Rundung links oben auf den Radius 0 im Bereich:

.panel-corner {
    -panel-corner-radius: 0px;
    -panel-corner-background-color: black;
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent;
}

Alternativ könnte man auch die obigen Farbparameter verwenden.

.panel-corner {
    -panel-corner-radius: 6px;
    -background-color: rgba(0,0,0,0.20);
}

Als zweites möchte ich noch die Iconen Größe im Anwendungs Übersichtsmodus ändern.

Dazu suche ich in der selben Datei den Abschnitt:

/* Application Launchers and Grid */
.icon-grid {
    spacing: 36px;
    -shell-grid-horizontal-item-size: 118px;
    -shell-grid-vertical-item-size: 118px;
}
.icon-grid .overview-icon {
    icon-size: 96px;
}

Dort verkleiner ich die Iconen Größe von 96 auf 82. Den Abstand könnte man mit dem Paramter spacing beeinflussen – mache ich nicht.

Als drittes ändere ich noch die Farbe der Popup Menüs, das Logout Menüs und die ALT+F2 Dialogboxaus dem Panel. Ich suche:

/* PopupMenu */
.popup-menu-boxpointer {
    -arrow-border-radius: 8px;
    -arrow-background-color: black;
    -arrow-border-width: 2px;
    -arrow-border-color: #a5a5a5;
    -arrow-base: 24px;
    -arrow-rise: 11px;
}

Dann füge ich nach “-arrow-background-color:..” die Zeile ein:

-arrow-background-color: rgba(0,0,0,0.80);

Für das LogOut Menü suche ich den Bereich /* End Session Dialog */ und setzte dort ebenfalls die Zeile:

background-color: rgba(0,0,0,0.80);

zusätzlich ein. Fertig sieht dieser Bereich dann so aus:

/* End Session Dialog */
.end-session-dialog {
    spacing: 42px;
    background-color: rgba(0,0,0,0.80); /*neu*/
   }

Ebenso im Run Menü. Das sieht dann so aus:

.run-dialog {
    border-radius: 16px;
    background-color: rgba(0,0,0,0.80);  /*neu*/
    padding-right: 21px;
    padding-left: 21px;
    padding-bottom: 15px;
    padding-top: 15px;
}

Fertig!

Wenn alles fertig ist ALT+F2 drücken, rt eingeben und Enter. Die Shell neu gestartet. Nun sollte alles funktionieren.

Beim nöchsten Gnome Update ist allerdings alles wieder weg! UND sollte ich einen Fehler machen startet die Shell nicht mehr. Deshalb ist es besser ein Verzeichnis im Homeverzeichnis anzulegen /home/.themes/mytheme/gnome-schell/ und alle Dateien VOR deren Änderung aus dem Verzeichnis /usr/share/gnome-shell/theme/ in dieses neue Verzeichnis zu speichern.

Nun “gnome-tweak-tools” und die “user-theme-extension” installieren und aktivieren. Dann kann man dort das neue User Theme “mytheme” auswählen und aktivieren.

Die Änderung der Theme erfolgt wir oben beschrieben aber eben in diesem Verzeichnis. Dann startet die Gnome Shell auch nach einem Fehler noch im Standardtheme und bei Gnome Shell Updates wird dein Theme nicht überschrieben.

Folgende Lesezeichen sind noch interessant:

  • .popup-menu-boxpointer (Hintergrundfarbe der Popupmenüs)
  • .popup-combo-content (Hintergrundfarbe)
  • #panel (Hintergrundfarbe Panelleiste oben)
  • .panel-corner (die runden Ecken von der Panlleiste)
  • /*Overview*/ .workspace-thumbnails-background (Hintergrund der dynamischen Arbeitsflächen)
  • /*Overview*/ #overview regelt die Fläche nach drücken der Super Taste, um einen hellen Fläche zu bekommen könnte man einfügen: background-color: rgba(128,128,128,0.2);
  • /*Dash*/ #dash (linkes Menü z.B.: Hintergundfarbe durchsichtig und Rahmen dazu)
  • .workspace-swichtcher… (Design von STRG+ALT+UP/DOWN)
  • .icon-grid (Absatnd der Anwendungsiconen im Übersichtsmodus)
  • .icon-grid .overview-icon (Größe der Anwendungsiconen im Übersichtsmodus)
  • .popup-menu-content (Hintergrundfarbe)
  • .switch-list (ALT+TAB Funktion)
  • .run-dialog (ALT+F2 Dialog)
  • .end-session-dialog (Design des Beenden Dialoges)
  • unter /*Message Tray*/ .notification ist der untere Notizendialog designt