Des K(aiser)s neue Kleider

KDE Themes Workshop, Teil 2

01.10.2000
Dass KDE die Fähigkeit besitzt, recht schnell mittels sogenannter Themes sein Äußeres zu ändern, dürfte inzwischen hinreichend bekannt sein. Diese Serie beschreibt, wie man eigene Themes erstellt. 

Im ersten Teil dieser Trilogie zu KDE-Themes haben wir uns auf die Startleiste, die Hintergrundbilder und die Icons gestürzt. Schauen wir uns zunächst einmal den roten Faden dieser Artikelserie an.

  • Startleiste
  • Hintergrundbild
  • Icons
  • Fenster-Knöpfe
  • Fenster-Titelleiste
  • Fenster-Rahmen
  • Systenklänge
  • Farbschema
  • KFM Einstellungen Offensichtlich geht es im hier vorliegenden Teil 2 des Workshops um die Gestaltung der Fenster. Damit Ihnen der Einstieg nicht allzu schwer fällt, fangen wir kein neues Listing an, sondern erweitern hier lediglich das Listing 1, das Sie in Teil 1 bereits kennengelernt haben. Wundern Sie sich also nicht, wenn Sie am Ende dieses Artikels eine eclipse.themerc auffinden, die die ersten beiden Teile abdeckt.

Weiter geht's …

… erst einmal mit Wiederholung. Im ersten Teil habe ich den zentralen KDE Designmanager kthememgr [http://5] vorgestellt und bin auf die Bedeutung der Datei eclipse.themerc eingegangen. Dieses Wissen ist grundlegend für die komplette Artikelserie und somit auch für die folgenden Arbeitsschritte. Sollte bei Ihnen das Wissen um diese zentralen Punkte bereits etwas verblasst sein, dann empfehle ich Ihnen, vor dem Weiterlesen dieses Artikels Ihre Kenntnisse im Linux-User 9/2000 noch einmal etwas aufzufrischen.

Neue Kleider brauchen neue Knöpfe

… neue Fenster auch. Um neue Fensterknöpfe festzulegen, fügen wir zwei weitere Abschnitte an unsere eclipse.themerc an. Der erste legt fest, welche Bildchen verwendet werden sollen und der zweite definiert, wie diese angeordnet werden sollen. Die entsprechenden Parameter für die Definition der Bildchen finden Sie in Tabelle 1 (vgl. Zeilen 041 bis 047 in Listing 1). In diesem Abschnitt befinden sich außerdem noch die Angaben zum Aussehen der Titelleiste. Unter "Titelleiste" versteht man übrigens den Teil eines Fernsters, der den Fensternamen anzeigt. Die dabei möglichen Parameter sind ebenfalls in Tabelle 1 zu finden.

Tabelle 1: Bildchen für Fensterknöpfe

Abschnittsbezeichner [Window Titlebar]
Bildchen für Knopf zum Schließen des Fensters CloseButton=Dateiname
Bildchen für Knopf zum maximalen Vergrößern des Fensters MaximizeButton=Dateiname
Bildchen für Knopf zum Herstellen der Originalgröße des Fensters MaximizeDownButton=Dateiname
Bildchen für Knopf zum Minimieren des Fensters MinimizeButton=Dateiname
Bildchen für Knopf zum Anheften des Fensters StickyButton=Dateiname
Bildchen für Knopf zum Aufheben der Haftwirkung des Fensters StickyDownButton=Dateiname
Titel-Hintergrundbild für das aktivierte Fenster TitlePixmapActive=Dateiname
Titel-Hintergrundbild für nicht aktivierte Fenster TitlePixmapInactive=Dateiname
Soll hinter dem Titeltext das Titel-Hintergrundbild verwendet werden? PixmapUnderTitleText=yes / no
Soll die Titelleiste des aktiven Fensters schattiert dargestellt werden? TitleFrameShaded=yes / no
Ausrichtung des Textes in der Titelleiste TitleAlignment=left / middle / right

Da KDE von Haus aus Farbverläufe unterstützt, werden in unserem eclipse-Theme keine Titel-Hintergrundbilder angegeben. Ich muss den ungeduldigen Leser allerdings auf den dritten Teil dieser Serie vertrösten, da ich erst dort näher auf das Farbschema eingehen möchte.

Die Anordnung der Fensterknöpfe wird im Abschnitt [Window Button Layout] festgelegt. Man muss dort den fünf möglichen Knöpfen bestimmte Funktionen zuweisen. Es stehen dabei folgende Funktionsbezeichner zur Verfügung:

  • MenuEin Klick auf diesen Knopftyp öffnet ein Menü, in dem man diverse Manipulationsfunktionen für dieses Fenster findet. (z. B. Verschieben des Fensters auf einen anderen virtuellen Desktop)
  • StickyEin Klick auf diesen Knopftyp heftet das Fenster an, so dass es auf allen virtuellen Desktops sichtbar ist.
  • OffAuf diese Weise wird ein Knopf weggeschaltet.
  • CloseEin Klick auf diesen Knopftyp schließt das entsprechende Fenster.
  • MaximizeEin Klick auf diesen Knopftyp vergrößert das Fenster bis zur maximalen Ausdehnung.
  • IconifyEin Klick auf diesen Knopftyp bewirkt, dass das Fenster auf dem aktuellen Desktop nicht mehr angezeigt wird. Es wird jedoch nicht geschlossen, sondern nur ausgeblendet. Man kann es entweder durch die Tastenkombination ALT+TAB oder durch einen Klick auf den Eintrag in der Taskleiste wieder sichtbar machen.

Der entsprechende Abschnitt in unserer eclipse.themerc (vgl. Zeilen 048 bis 054 in Listing 1) hat die in Tabelle 2 dargestellte Struktur.

Tabelle 2: Funktionsdefinition der Fensterknöpfe

Abschnittsbezeichner [Window Button Layout]
erster Fensterknopf von links ButtonA=Funktion
zweiter Fensterknopf von links ButtonB=Funktion
dritter Fensterknopf von links ButtonC=Funktion
erster Fensterknopf von rechts ButtonD=Funktion
zweiter Fensterknopf von rechts ButtonE=Funktion
dritter Fensterknopf von rechts ButtonF=Funktion

Prinzipiell kann man die kleinen Bildchen auf die selbe Weise erzeugen, wie die Icons aus Teil 1. Daher gehe ich an dieser Stelle nicht noch einmal ausführlich darauf ein. Mittels des Firetext-Plugins von The Gimp [http://4] lässt sich viel pixelige Arbeit sparen, wenn man, wie wir an dieser Stelle, entsprechende Feuerbildchen haben will. Für die Bildchen in der Titelleiste von Fenstern können Sie mit dem genannten Tool die folgenden Zeichen "verbrennen":

  • Der Menüknopf wird von den KDE-Anwendungen mit einem Minibild des großen Icons belegt.
  • CloseButtonHierfür eignet sich besonders ein großes "X".
  • MaximizeButtonVergrößerungen werden in der Regel mit nach oben spitz zulaufenden Bildern (z. B. Pfeil) in Bezug gesetzt, also nehmen wir hierfür einfach mal das "Exponent"-Zeichen "^".
  • MaximizeDownButtonDa mit diesem Knopf ja die Originalgröße eines Fensters wieder hergestellt wird, kann man dafür einen Unterstrich "_" verwenden. Ich fand diesen zu gerade und habe mich daher für die Tilde "~" entschieden.
  • MinimizeButtonFür diesen Knopf reicht es aus, den "Maximieren"-Knopf um 180° zu drehen.
  • StickyButtonZum Anheften kann man ein großes "O" benutzen …
  • StickyDownButton… und zum Lösen ein kleines. Die Größe der Fensterbildchen sollte 20×20 Pixel nicht überschreiten.
Abbildung 1: Titelleiste im Standard-KDE-Look
Abbildung 2: Titelleiste mit Theme

Welche Auswirkungen die in diesem Abschnitt gemachten Änderungen haben, können Sie anhand der Abbildungen 1 und 2 bestaunen.

Neuer Anstrich für den Fensterrahmen

Wie Sie sich sicherlich schon denken können, ist auch für die Fensterrahmen ein eigener Abschnitt (vgl. Zeilen 055 bis 063 in Listing 1) in der Konfigurationsdatei vorgesehen. Die entsprechenden Einträge können Sie Tabelle 3 entnehmen.

Tabelle 3: Fensterrahmen

Abschnittsbezeichner [Window Border]
Bildchen für oberen Fensterrand shapePixmapTop=Dateiname
Bildchen für unteren Fensterrand shapePixmapBottom=Dateiname
Bildchen für linken Fensterrand shapePixmapLeft=Dateiname
Bildchen für rechten Fensterrand shapePixmapRight=Dateiname
Bildchen für obere linke Fensterecke shapePixmapTopLeft=Dateiname
Bildchen für obere rechte Fensterecke shapePixmapTopRight=Dateiname
Bildchen für undere linke Fensterecke shapePixmapBottomLeft=Dateiname
Bildchen für untere rechte Fensterecke shapePixmapBottomRight=Dateiname

Auch bei der Erstellung der einzelnen Rahmenfragmente kann uns das Firetext-Plugin von Gimp wieder hilfreiche Dienste leisten. Der Umgang mit diesem Werkzeug, sollte für Sie mittlerweile schon fast blind möglich sein ;-). Also wieder nur ein paar Tipps, die bei der Erstellung der Fensterrahmen hilfreich sind.

Ein Fensterrahmen besteht, wie aus Tabelle 3 hervorgeht, aus 8 Teilen. Fangen wir mit dem einfacheren an und nehmen uns die geraden Stücke vor. Dabei ist zu beachten, dass KDE diese Einzelstücke solange aneinanderreiht bis diese Reihe zusammen mit den Ecken die ganze Fensterbreite bzw. -Höhe abdeckt. Sind die geraden Stücke zu lang, kommt es dazu, dass der Rahmen größer als das Fenster ist. Um dies zu verhindern, wählen wir für die Stücke in Längsrichtung die Breite 1 Pixel. (Für den rechten und den linken Rand beträgt dann die Höhe 1 Pixel.)

Wir erzeugen uns also eine "angezündete" Linie, indem wir den Unterstrich "_" mit dem Firetext-Plugin von Gimp bearbeiten, und schneiden uns nach dem Hineinzoomen ein Stück der Breite 1 Pixel heraus. Damit der Rand am Ende nur nach außen "Flammen" zeigt, sollten Sie darauf achten, dass Sie beim Herausschneiden auch nur die untere Hälfte nehmen. Abbildung 3 zeigt, wie dieses Randstück aussehen könnte.

Abbildung 3: Unteres Randstück 1300% vergrößert

Die anderen geraden Randstücke werden einfach durch Drehen erzeugt. Diese Funktion finden Sie bei Gimp folgendermaßen:

  • Rechtsklick in das Bild
  • Bild/Transformationen/Rotieren Wir erzeugen also durch sukzessives Drehen um jeweils 90° die restlichen geraden Randstücken.

Doch nun zu den Ecken. Um die rechte untere Ecke, die in Abbildung 7 dargestellt ist, zu erstellen, schneiden wir aus unserem brennenden Unterstrich "_" ein etwas größeres Stück heraus (Wieder nur halb!). Dieses kopieren wir (CTRL+C), erzeugen eine neue transparente Datei (CTRL+N) und fügen es in diese ein (CTRL+V). Nun wird die Kopie so gedreht, dass die "Flammen" nach rechts außen zeigen.

Das Ergebnis sind zwei Teile, die nur noch zusammengesetzt werden müssen. Gimp hat die schöne Eigenschaft, dass neu zu erzeugende Dateien als Standardgröße grundsätzlich die Werte (x und y) annehmen, die das Bild hat, welches sich gerade im Zwischenspeicher befindet. Wir kopieren also wieder eines der beiden Teile in den Zwischenspeicher (CTRL+C) und erzeugen eine neue transparente Datei (CTRL+N). Dabei setzen wir die Ausdehnung des zu erzeugenden Bildes sowohl in x- als auch in y-Richtung auf den größeren der beiden eingetragenen Werte. Nun wird die Kopie in die neue Datei eingefügt und an den entsprechenden Rand geschoben. Das Gleiche geschieht mit dem anderen Teilstück. Das Ergebnis dieser Bemühungen finden Sie in Abbildung 4.

Damit das Ganze wie eine Ecke aussieht, müssen die Farbstreifen, die eine Richtung vorgaukeln, umgebogen werden. Dazu können Sie einen einfachen Trick verwenden. Kopieren Sie, wie in Abbildung 5 und 6 gezeigt, den Teil, der keine feste Richtung vortäuscht, einfach so um, dass eine Ecke ensteht.

An dieser Stelle möchte ich Sie dazu ermutigen, hin und wieder einfach mal was Neues auszuprobieren. Ein bisschen Probieren kann erstaunliche Ergebnisse erzielen.

Abbildung 4: Rechte untere Ecke (Zwischenschritt 1) 800% vergrößert
Abbildung 5: Rechte untere Ecke (Zwischenschritt 2) 1300% vergrößert
Abbildung 6: Rechte untere Ecke (Zwischenschritt 3) 1300% vergrößert
Abbildung 7: Rechte untere Ecke 1000% vergrößert

Die restlichen Ecken (linke obere, linke untere und rechte obere) lassen sich recht einfach dadurch erzeugen, dass wir aus der soeben erstellten rechten unteren Ecke wieder das rechte untere Eckstück herausschneiden und mittels Drehen in die noch fehlenden Stücke verwandeln. Als Beispiel dazu können Sie die linke untere Randecke in Abbildung 8 betrachten.

Abbildung 8: Linke untere Ecke 1000% vergrößert

Fensterputz beendet

Was haben wir bisher erreicht? Zusätzlich zu den Arbeiten aus Teil 1 haben wir nun noch unseren Fenstern neue Bildchen verpasst, den Fensterrahmen verschönt und die Titelleiste der Fenster verändert, wenn letzteres auch noch nicht vollständig. Die Unterschiede sehen Sie deutlich, wenn Sie sich die Abbildungen 9 und 10 betrachten.

Abbildung 9: Fenster im Standard-KDE-Look
Abbildung 10: Fenster mit Theme

Gut, gut, ich habe etwas geschummelt. Wie das Farbschema angepasst wird, sehen wir später. Ich habe es nur deshalb schon verwendet, weil unsere Bildchen und unser Rahmen mit den Standardfarben nicht gerade toll aussehen.

Nun nur noch das eclipse/-Verzeichnis wieder mit

tar cvf eclipse.tar eclipse/

in ein TAR-Archiv zusammenfassen, dieses mit

gzip eclipse.tar

komprimieren und das bisher Erreichte bewundern. Dazu starten wir den kthememgr, entfernen den alten eclipse-Eintrag und fügen unser neues Paket hinzu. Jetzt nur noch auf OK klicken und staunen ;-).

Entfernen von Themes

Leider ist kthememgr nicht in der Lage, Themes sauber zu löschen. Daher müssen die einzelnen Bildchen vor dem Wechseln des Themes von Hand gelöscht werden. Dies geschieht durch die drei Befehle:

rm ~/.kde/share/icons/* -rf
rm ~/.kde/share/apps/kwm/pics/*
rm ~/.kde/share/apps/kpanel/pics/* -rf

Keine Angst, der Designmanager behält eine Kopie der Dateien, so dass sie beim erneuten Verwenden des Themes wieder vorhanden sind.

Listing 1

eclipse.themerc

001 [General]
002 name=eclipse
003 author=Hagen Hoepfner
004 email=Hagen.Hoepfner@gmx.de
005 description=A dark sun for KDE (made with gimp and its Firetext-plugin)
006 version=0.3
007 [Display]
008 CommonDesktop=true
009 Wallpaper0=bg.jpg
010 WallpaperMode0=Scaled
011 [Panel]
012 background=panel.xpm
013 [Icons]
014 PanelGo=go.xpm:mini-go.xpm
015 PanelExit=exit.xpm
016 PanelKey=key.xpm
017 Home=kfm_home.xpm
018 Trash=kfm_trash.xpm
019 TrashFull=kfm_fulltrash.xpm
020 [Extra Icons]
021 Extra1=kfind.xpm
022 Extra2=image.xpm
023 Extra3=sound.xpm
024 Extra4=aktion.xpm
025 Extra5=kwrite.xpm
026 Extra6=folder.xpm
027 Extra7=kcontrol.xpm
028 Extra8=kdehelp.xpm
029 Extra9=kmail.xpm
030 Extra10=kfm_refresh.xpm
031 Extra11=folder_open.xpm
032 Extra12=3floppy_mount.xpm
033 Extra13=3floppy_unmount.xpm
034 Extra14=5floppy_mount.xpm
035 Extra15=5floppy_unmount.xpm
036 Extra16=core.xpm
037 Extra17=document.xpm
038 Extra18=input_devices_settings.xpm
039 Extra19=kab.xpm
040 Extra20=kvt.xpm
041 [Window Titlebar]
042 CloseButton=close.xpm
043 MaximizeButton=maximize.xpm
044 MaximizeDownButton=maximizedown.xpm
045 MinimizeButton=iconify.xpm
046 StickyButton=pinup.xpm
047 StickyDownButton=pindown.xpm
048 [Window Button Layout]
049 ButtonA=Menu
050 ButtonB=Sticky
051 ButtonC=Off
052 ButtonD=Close
053 ButtonE=Maximize
054 ButtonF=Iconify
055 [Window Border]
056 shapePixmapTop=wm_top.xpm
057 shapePixmapBottom=wm_bottom.xpm
058 shapePixmapLeft=wm_left.xpm
059 shapePixmapRight=wm_right.xpm
060 shapePixmapTopLeft=wm_topleft.xpm
061 shapePixmapTopRight=wm_topright.xpm
062 shapePixmapBottomLeft=wm_bottomleft.xpm
063 shapePixmapBottomRight=wm_bottomright.xpm

Glossar

Theme

Unter Theme versteht man ein Sammelsurium verschiedener audio-visueller Elemente, welche sich auf ein gemeinsames inhaltliches Thema beziehen. Beispielsweise kann man als Fan einer Rockgruppe ein digitalisiertes Foto seiner Lieblingsband als Hintergrundbild mit Teilen ihrer Musikstücke als akkustische Signale zu einem Theme zusammenfassen.

Anheften des Fensters

Durch die sticky-Option eines Fensters kann erreicht werden, dass dieses Fenster auf allen virtuellen Desktops erscheint.

virtuellen Desktop

KDE bietet die Möglichkeit, mehrere "Schreibtischplatten" (Eins, Zwei, Drei, Vier,…) gleichzeitig zu nutzen. Auf Desktop Eins kann beispielsweise ein Texteditor gestartet sein, während auf Desktop Drei ein Webbrowser läuft. Durch Hin- und Herschalten der verschiedenen virtuellen Desktops steht Ihnen wesentlich mehr Desktop-Platz für Ihre gestarteten Programme zur Verfügung.

Taskleiste

Die Taskleiste zeigt die laufenden Anwendungsprogramme an. Durch Klicken auf die jeweiligen Einträge kann zwischen den verschiedenen offenen Programmen hin- und hergewechselt werden.

Zwischenspeicher

Der Zwischenspeicher wird beim Kopieren innerhalb eines Programmes verwendet. Wird ein Text oder ein Bild mit CTRL+C kopiert, dann wird die Kopie zuerst im Zwischenspeicher angelegt und kann dann aus diesem mit CTRL+V in eine andere Datei eingefügt werden.

TAR-Archiv

tar ist ein Programm, welches ursprünglich dazu gedacht war, Datensicherungen auf ein Bandlaufwerk durchzuführen. Es bietet aber auch die Möglichkeit, mehrere Dateien in einer einzigen zusammenzufassen. Bei diesem Vorgang wird jedoch keine Datenkompression durchgeführt. Um Platz zu sparen, werden solche Archive gewöhnlich noch mit gzip oder b2zip komprimiert.

Der Autor

Hagen Höpfner ist Informatikstudent an der Otto-von-Guericke-Universität Magdeburg. In seiner Freizeit ist er begeisterter Vater und spielt Gitarre in einer Rockband (http://www.gutefrage.de).

LinuxCommunity kaufen

Einzelne Ausgabe
 
Abonnements
 

Ähnliche Artikel

Kommentare