KDE-Oberfläche gestalten

Aus EasyLinux 03/2007

KDE-Oberfläche gestalten

Fensterdekoration selbst gemacht

Unter KDE gibt es viele Wege, das Erscheinungsbild der Oberfläche zu ändern. Mit dem Programm Dekorator gestalten Sie sogar die Dekoration Ihrer Fenster von Grund auf selbst.

KDE bietet zahlreiche Möglichkeiten, das Aussehen der Arbeitsoberfläche einzustellen. Sie können einzelne sichtbare Komponenten, wie den Hintergrund, Symbole, Farben oder die Fenster verändern. Grundlegend für das Anpassen des Aussehens der Fenster ist üblicherweise ein vorgefertigtes KDE-Theme, das Sie als Fensterdekoration installieren. Da die grafischen Elemente des Desktops möglichst wenig Systemleistung in Anspruch nehmen sollen, ist der Nutzer gezwungen, die Themes zu programmieren und sie danach zu einem installationsfähigen Binärpaket zu kompilieren. Wenn Sie ohne Programmierkenntnisse dennoch selbst Teile des Fensters gestalten wollen, hilft Ihnen das Programm Dekorator tatkräftig.

Fensterdekorationen sind im Grunde kleine Programme, die dem Fenstermanager von KDE, Kwin, erklären, in welcher Art er Fensterrahmen anzeigt. Der Vorteil von Dekorator liegt darin, dass es Pixmap-basierte Themes laden kann, die nicht kompiliert werden müssen. Pixmap-basiert bedeutet hierbei, dass die Dekorations-Themes auf Grafikdateien beruhen. Dekorator verwendet also vom Nutzer erstellte Grafiken im PNG-Format, um Fensterrahmen, Titelleiste und Knöpfe darzustellen. Eines wird dadurch schnell klar: Sie benötigen keine Kenntnisse einer Programmiersprache, um das Aussehen der Fenster zu verändern. Es reichen ein wenig Kreativität und grundlegende Kenntnisse eines Grafikprogramms.

Vorbereitungen zum Dekorieren

Dekorator arbeitet mit Themes, die als tar.gz– oder tar.bz2-Archive vorliegen und deren Name immer auf -theme endet. Die Archive enthalten drei Ordner: deco, masks und buttons. In deco befinden sich die Grafiken, die den Rahmen des Fensters inklusive Titelleiste erzeugen. Masks enthält Grafiken, mit deren Hilfe das Programm einzelne Pixel von der Dekoration abzieht, um z. B. abgerundete Fensterecken zu erzeugen. Im Verzeichnis buttons liegen die Grafiken für die Fensterknöpfe, beispielsweise schließen, maximieren und minimieren.

Zunächst installieren Sie das Programm. Dazu finden Sie auf der Heft-DVD die jeweiligen Pakete für Ihre Distribution und eine Installationsanleitung. Dekorator fügt sich nach dem Einspielen in das KDE-Kontrollzentrum ein, das Sie über die Eingabe von kcontrol in einem Schnellstartfenster ( [Alt]+ [F2] ) aufrufen. Unter Erscheinungsbild / Fensterdekoration wählen Sie im Scroll-down-Menü DeKorator aus. Auch für Dekorator gibt es fertige Themes, eine kleine Auswahl befindet sich ebenfalls auf der Heft-DVD. Weitere Themes finden Sie auf der Webseite von KDE-Look [1].

Jetzt installieren Sie ein Dekorator-Theme. Dabei gehen Sie wie folgt vor:

  1. Wählen Sie im Reiter Themes den Knopf Install New Theme (Neues Theme installieren). Es öffnet sich ein Fenster, in dem Sie den Pfad zum Theme-Archiv angeben. Alternativ dazu browsen Sie auf der Heft-DVD in das Verzeichnis, das die Themes enthält. Dazu klicken Sie auf den Ordnerknopf rechts neben der Eingabezeile.
  2. Die Auswahl eines Themes in Form eines tar.gz– oder tar.bz2-Archivs bestätigen sie mit einem Klick auf OK. Die dadurch installierte Dekoration erscheint jetzt im Feld Theme-Name (Themenname). Wenn das klappt, fahren Sie mit Punkt 3 fort. Sollte dies nicht der Fall sein, entpacken Sie das Archiv von Hand in Ihr Home-Verzeichnis unter .kde/share/apps/deKorator/themes. Jede Dekoration besitzt hier einen Ordner, der ebenfalls auf -theme endet. Am einfachsten benutzen Sie dafür den Konqueror. Beachten Sie, dass es sich um einen versteckten Ordner handelt: Aktivieren Sie im Konqueror den Punkt Versteckte Dateien anzeigen im Menü Ansicht. Es kommt vor, dass Themes nicht den Konventionen von Dekorator entsprechen. In diesem Fall erscheint sinngemäß die Fehlermeldung, dass das Theme kein gültiges Format besitzt. Ein Grund ist der falsche Dateiname. Wenn Sie also eine solche Fehlermeldung erhalten, entpacken Sie das Theme in den Themes-Ordner und benennen den neuen Ordner um, so dass dieser mit -theme endet. Wählen Sie jetzt Dekorator erneut als Fensterdekoration aus, damit das Programm Ihren Themes-Ordner und somit die installierten Dekorationen erneut einliest.
  3. Markieren Sie ein Theme und aktivieren Sie es durch einen Klick auf Set Theme Paths (Einstellen des Themes-Ordners) und auf Anwenden.

Die Funktionen von Dekorator

In den Reitern Misc, Colors und Knöpfe finden Sie viele Möglichkeiten, die aktive Dekoration an ihre Wünsche anzupassen (Abbildung 1). Im Folgenden erklären wir einige dieser Funktionen, um Ihnen einen ersten Einblick zu geben. Die vielen anderen Optionen probieren Sie am besten nach dem Prinzip “learning by doing” aus. Sie kommen dann schnell hinter die Wirkung bei der Fensterdarstellung. Als Unterstützung haben wir in der Tabelle Übersetzungen die noch offenen englischen Begriffe ins Deutsche übersetzt.

Tabelle 1: Übersetzungen

Reiter Misc:
Text Shadow Text schattieren
Use shadowed text Benutze schattierten Text
Use menu button image instead of the app icon Nutze den Menü-Knopf anstelle des Programm-Knopfes
Ignore app icon colorizing Ignoriere das Einfärben des Programm-Knopfes
Close window by double clicking the menu button Schließe das Fenster bei Doppelklick auf den Menü-Knopf
Show bottom border when window is shaded Zeige den unteren Rahmen des Fensters, wenn es schattiert ist
Reiter Colors:
Colorize frames Färbe die Rahmen ein
Colorize buttons Färbe Knöpfe ein
Hover Effects Effekte, die Dekorator ausführt, wenn die Maus sich über den Knöpfen befindet
Use buttons animation Animiere die Knöpfe
Animate Effect Animationseffekt
Hover and Press Effect Effekte beim Daraufzeigen oder Anklicken mit der Maus
Colorizing Method Art und Weise der Einfärbung
Reiter Knöpfe:
Use custom buttons colors Benutze die individuell eingestellten Farben für die Knöpfe

Die Checkboxen Colorize Frames (Fensterrahmen einfärben) für das Vordergrund- ( Active) oder das Hintergrundfenster ( Inactive) bewirken, dass sich das aktive Fenster von den übrigen farblich abhebt. Die Knöpfe wechseln ebenfalls ihre Farbe, sobald Sie den Mauszeiger darüber bewegen. Aktivieren Sie dazu die Option Use buttons animation (Nutze Knopf-Animation).

Abbildung 1: In den Einstellungen legen Sie grundlegende Funktionen für Fensterleiste und Knöpfe fest.

Abbildung 1: In den Einstellungen legen Sie grundlegende Funktionen für Fensterleiste und Knöpfe fest.

Im Reiter Misc (Verschiedenes) verändern Sie die Bestandteile der Titelleiste, also die Ausrichtung des Fenstertitels, die Formatierung des Titeltextes oder die Knöpfe. Dabei unterscheidet Dekorator wiederum zwischen Vordergrund- und Hintergrundfenster. Verändern Sie die Werte für X und Y unter der Überschrift Pressed Buttons Shift (Verschiebung bei gedrücktem Knopf), damit die Fensterknöpfe beim Draufklicken um genau diese Pixelwerte “hüpfen”.

Die Farben der Fensterknöpfe stellen Sie im Reiter Knöpfe ein. Aktivieren Sie die Checkbox Use custom buttons colors und wählen Sie eine Farbe für einen beliebigen Fensterknopf. Um die Änderungen zu übernehmen und sichtbar zu machen, klicken Sie auf Anwenden.

Ein eigenes Theme erstellen

Wenn Sie mehr verändern wollen, als es die Grundfunktionen zulassen, gehen Sie einen Schritt weiter und modifizieren die Grafiken eines Dekorator-Themes. Alles, was Sie dazu benötigen, ist ein Grafikprogramm, mit dem Sie die PNG-Dateien bearbeiten. Dazu nutzen Sie am besten Gimp: Vielleicht kennen Sie schon einige Grundfunktionen dieses Programms. Bevor Sie schöpferisch tätig werden und ein vorgefertigtes Theme Ihren Vorstellungen anpassen, zeigen wir Ihnen, an welchen Positionen des Fensters das Programm die Grafiken anordnet. In Abbildung 2 sehen Sie am Beispiel der Titelleiste, wo Dekorator die PNG-Dateien verwendet. Der linke und rechte Rahmen bestehen aus einer Zusammensetzung mehrerer Grafiken. Welche das sind, erfahren Sie ganz praktisch am folgenden Beispiel: Es gibt Ihnen einen ersten Einblick, wie Sie die Grafiken verändern und welche Auswirkungen das auf die Dekoration hat. Mit ein wenig Einfallsreichtum gelingt es, interessante Themes zu erstellen.

Abbildung 2: In dieser Grafik sehen Sie, an welcher Stelle Dekorator welche Grafiken für die Titelleiste anordnet.

Abbildung 2: In dieser Grafik sehen Sie, an welcher Stelle Dekorator welche Grafiken für die Titelleiste anordnet.

Der Fensterrahmen

Als Ausgangsbasis installieren Sie das Test-Theme easylinux1-theme.tar.gz von der Heft-DVD und aktivieren es. Die Fensterdekoration sieht etwas klobig und mausgrau aus. Darum verringern Sie zuerst die Breite der linken, unteren und rechten Rahmen. Dazu öffnen Sie in Gimp die Dateien für die rechte Seite, also topRightCornerBg.png, topRightFrameBg.png, MidRightFrameBg.png und bottomRightFrameBg.png und analog dazu die vier Dateien für der linke Seite. Zur Erinnerung: die Dateien befinden sich im Home-Verzeichnis unter .kde/share/apps/deKorator/themes/easylinux1-theme/deco/. Öffnen Sie auch noch die fehlenden Grafiken für den unteren Teil des Rahmens inklusive der zwei Ecken ( leftBottomFrameBg.png, midBottomFrameBg.png und rightBottomFrameBg.png).

Der einfachste Weg, den Rahmen zu verjüngen, ist es, die Grafiken in Höhe und Breite anzupassen. In Gimp wählen Sie dazu im Bildmenü jeder geöffneten Grafik Bild / Bild skalieren und verändern beim rechten und linken Rahmen jeweils nur die Breite. Das erreichen Sie, indem Sie das Kettensymbol deaktivieren und danach den Wert von 8 auf 5 Pixel ändern. Allein bei der Grafik für den unteren Rahmen ( midBottomFrame.png) ändern Sie nur die Höhe.

Anders verhält es sich bei den PNG-Dateien für die linke bzw. rechte untere Ecke ( leftBottomFrameBg.png und rightBottomFrame.png). Diese passen Sie jeweils in Höhe und Breite auf 5 Pixel an. Dazu aktivieren Sie das Kettensymbol im Dialogfenster Skalieren und verändern die Werte. Speichern Sie abschließend alle Grafiken. Erst durch einen kleinen Umweg sehen Sie die Änderungen der Dekoration: Gehen Sie zurück ins KDE-Kontrollzentrum und rufen Erscheinungsbild / Fensterdekoration auf. Hier wählen Sie zuerst ein beliebiges anderes Dekorator-Theme aus und klicken auf Set Theme Paths und Anwenden. Danach wählen Sie erneut das Beispiel-Theme und aktivieren es. Dadurch liest Dekorator die Themes-Ordner deco, masks und buttons des easylinux1-themes erneut ein und verwendet die neuen Grafiken.

So wie Sie die Maße der Grafiken anpassen, haben Sie auch die Möglichkeit, die Bilder mit einer Farbe, einem Farbverlauf oder einem Muster zu versehen. Lassen Sie Ihrer Kreativität freien Lauf oder orientieren Sie sich an anderen Dekorator-Themes.

Transparenz

Ein weiteres Feature von Dekorator sind Masken. Sie erlauben es, bestimmte Bereiche des Themes durchsichtig zu machen. Masken sind ebenfalls Grafiken im PNG-Format, die aber nur weiße und schwarze Pixel besitzen. Diese legt das Programm über die vorhandenen Rahmengrafiken des Fensters. Dabei zieht Dekorator alle schwarzen Bereiche von der Fensterdekoration ab, sie erscheinen also durchsichtig. Anwendung findet die Funktion z. B. beim Abrunden der Fensterecken. Gehen Sie bei den unteren beiden Ecken wie folgt vor: Als Ausgangsbasis der Masken öffnen Sie die beiden Grafiken leftBottomFrameBg.png und rightBottomFrameBg.png. Füllen sie diese vollständig mit weißer Farbe. Danach zeichnen Sie einen Viertelkreis mit schwarzer Farbe, etwa wie in Abbildung 3. Benutzen Sie dazu den Bleistift mit Pixelgröße 1. Jetzt speichern Sie die Dateien unter den Namen buttomLeftCornerBitmap.png (für die linke untere Ecke) und buttomRightCornerBitmap.png (für die rechte untere Ecke) im Themes-Ordner unter masks ab. Ebenso einfach bearbeiten Sie die beiden oberen Ecken des Fensterrahmens. Die Masken heißen dafür topLeftCornerBitmap.png (für die obere linke Ecke) und topRightCornerBitmap.png (für die obere rechte Ecke). Damit Dekorator die Masken auch benutzt, ist es notwendig, im Reiter Paths die Checkbox Use Masks anzuklicken. Von Haus aus ist diese Funktion üblicherweise deaktiviert.

Abbildung 3: Das Bild zeigt eine Maske (hier eine abgerundete linke untere Fensterecke). Diese verwendet Dekorator, um Teile der Dekoration transparent zu machen.

Abbildung 3: Das Bild zeigt eine Maske (hier eine abgerundete linke untere Fensterecke). Diese verwendet Dekorator, um Teile der Dekoration transparent zu machen.

Titelleiste und Knöpfe

Die Titelleiste des Fensters ist der auffälligste Teil der Dekoration. Auch diese setzt sich aus PNG-Grafiken zusammen (Abbildung 2), die Sie mit wenigen Handgriffen selbst gestalten. Füllen Sie diese zum Beispiel mit einem vertikalen Verlauf oder geben Sie ihr ein Streifenmuster. Beachten Sie hierbei, dass alle Elemente der Titelleiste dieselbe Höhe besitzen. Öffnen Sie alle Grafikdateien der Titelleiste aus dem Beispiel-Theme easylinux1-theme. Somit brauchen Sie sich nicht um die Breite und Höhe zu kümmern. Ein gleichmäßiges Muster über die ganze Titelleiste hinweg erreichen Sie, indem Sie in jedem Element der Leiste exakt die gleiche Farbe bzw. den gleichen Farbverlauf verwenden. Natürlich ist es auch hier möglich, die Grafiken in der Höhe zu beschneiden, um eine dünnere Titelleiste zu erstellen. Speichern Sie die Grafiken und gehen Sie wie oben beschrieben vor, um das Theme erneut zu aktivieren.

Die Knöpfe der Fensterleiste behandelt Dekorator noch differenzierter. Das Programm unterscheidet zwischen drei Zuständen: normal (normaler Zustand), press (mit der Maus draufgeklickt) und hover (schwebend, die Maus zeigt darauf). Diesem Prinzip folgen die Namen der Ordner, welche die Knopfgrafiken in den jeweiligen Zuständen enthalten. Ein Beispiel: Der Schließen-Knopf liegt in drei Varianten vor. Im Normalzustand nutzt Dekorator die Datei buttonClose.png im normal-Ordner. Befindet sich die Maus über dem Knopf, wechselt das Programm die Grafik und verwendet aus dem hover-Ordner die Datei buttonCloseHover.png. Solange Sie auf den Schließen-Knopf drücken, zeigt Dekorator die Datei buttonClosePress.png aus dem Ordner press an. Zwei weitere wichtige Knöpfe tragen den Namen buttonMax.png (Maximieren) und buttonMin.png (Minimieren).

Passen Sie die Knöpfe nach Belieben an. Am einfachsten ist es, die bestehenden Grafiken zu verändern. Wenn Sie den Hintergrund der Grafiken in Gimp transparent machen, passen sich die Knöpfe gut in die Fensterleiste ein. Am Beispiel des veränderten Ausgangs-Themes, das jetzt wie easylinux2-theme gestaltet sein könnte, sehen Sie, wie innerhalb von wenigen Minuten neue Knöpfe entstehen (Abbildung 4). Wenn Sie sich etwas mehr Zeit nehmen, könnten die Ergebnisse wie im Theme easylinux3-theme aussehen (Abbildung 5). Viel Spaß und Erfolg beim Dekorieren ihrer Fenster!

Abbildung 4: Das nicht fertiggestellte easylinux2-theme zeigt, wie mit wenig Handgriffen ein eigenes Theme entsteht.

Abbildung 4: Das nicht fertiggestellte easylinux2-theme zeigt, wie mit wenig Handgriffen ein eigenes Theme entsteht.

Abbildung 5: Etwas mehr Aufwand erforderte das easylinux3-theme, das dafür aber auch eine ansehnliche Fensterdekoration ist.

Abbildung 5: Etwas mehr Aufwand erforderte das easylinux3-theme, das dafür aber auch eine ansehnliche Fensterdekoration ist.

Infos

[1] KDE-Look.org: http://www.kde-look.org Die Dekorator-Themes finden Sie unter Window Decorations / deKorator.

EasyLinux 03/2007 KAUFEN
EINZELNE AUSGABE
ABONNEMENTS
TABLET & SMARTPHONE APPS
E-Mail Benachrichtigung
Benachrichtige mich zu:

Hinweis: Dieser Artikel ist älter als ein Jahr, enthaltene Informationen sind möglicherweise veraltet.

0 Kommentare
Älteste
Neuste Beste Bewertung
Inline Feedbacks
Alle Kommentare anzeigen
Nach oben