Aufmacher Artikel

Des K(aiser)s neue Kleider

KDE Themes – Teil 1

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

Das K Desktop Environment (kurz: KDE) [http://1] ist zusammen mit GNOME inzwischen zum Quasi-Standard unter den graphischen Oberflächen für Linux avanciert. In dieser Serie wollen wir daher die Fähigkeit von KDE, mit Hilfe sogennannter Themes sein Aussehen verändern zu können, etwas näher betrachten. Ich erkläre Ihnen dazu anhand des Themes "eclipse" [http://2] Schritt für Schritt, welche Möglichkeiten Sie als kreativer Nutzer haben, Ihren KDE auf Ihre Bedürfnisse zuzuschneidern. Weiterhin werde ich auf nützliche Tools eingehen, die das Erstellen eigener Themes erleichtern. Man möge mir verzeihen, wenn ich nicht auf alle Programme eingehe, die hier und da verwendet werden könnten. Auch kann ich nicht garantieren, dass ich auch wirklich jeweils alle Einstellmöglichkeiten erwähnen werde. Das in den Artikeln dieser Serie angebotene Wissen bildet aber eine solide Grundlage zur Entwicklung eigener Ideen. Weiterführende Literatur finden Sie unter [http://3].

KDE 2

Dieser Artikel bezieht sich auf die letzte stabile Version von KDE (1.1.2). Ich kann Ihnen leider nicht genau sagen, in wie weit Themes dieser KDE-Version zu denen von KDE 2 kompatibel sein werden. Probieren geht aber bekanntlich über studieren.

Die meisten aufgeführten Tools sind standardmäßig auf den gängigen Linuxdistributionen enthalten (ich verwende übrigens SuSE 6.4). Sollte dies wider Erwarten bei Ihnen nicht der Fall sein, können Sie den Quellcode aus dem Internet (die entsprechenden Adressen sind angefügt) herunterladen und diesen dann kompilieren. Dieser Vorgang dürfte in der Regel distributionsunabhängig nach demselben Schema ablaufen (Kasten: Installieren von Tools).

Installieren von Tools

  • Dekomprimieren gepackter Archive
  • Datei hat Endung .tar.gz, dann entpacken mit gunzip DATEINAME
  • Datei hat Endung .tar.bz2, dann entpacken mit bunzip2 DATEINAME Es entsteht eine Datei mit der Endung .tar
  • Archiv auflösen (tar xvf DATEINAME)
  • Wechseln in das entstandene Verzeichnis (cd VERZEICHNISNAME)
  • Konfigurieren des Übersetzungsprozesses (./configure)
  • Starten des Übersetzungsprozesses (make)
  • Installieren des übersetzen Programmes (make install) Für den letzten Schritt sind übrigens root-Rechte (su mit anschließender Passwort-Angabe) erforderlich. Alternativ können Sie das Programm auch im entsprechenden Unterverzeichnis mit ./PROGRAMMNAME starten.

Woran kann gedreht werden?

Die Vielzahl von Einstellmöglichkeiten, die KDE zur Verfügung stellt, lässt sich in folgende Gruppen unterteilen:

  • Startleiste
  • Hintergrundbild
  • Desktop-Icons
  • Fenster-Knöpfe
  • Fenster-Titelleiste
  • Fenster-Rahmen
  • Systemklänge
  • Farbschema
  • KFM Einstellungen

Diese Artikelserie läuft über drei Ausgaben. Im vorliegenden ersten Teil beschäftigen wir uns mit der Startleiste, dem Hintergrundbild und den Desktop-Icons.

Los gehts

Zuerst legen wir ein Unterverzeichnis an, in dem wir alle zu unserem Theme gehörenden Dateien sammeln. Dies geschieht mit mkdir eclipse. Nach dem Wechseln in dieses Unterverzeichnis (cd eclipse) können wir die zentrale Konfigurationsdatei erzeugen. Dies kann mit einem beliebigen Texteditor geschehen (z.B. mit kwrite eclipse.themerc). Die Konfigurationsdatei soll am Ende dieses Kurses aus mehreren Abschnitten bestehen. Am Anfang steht der Abschnitt [General], in dem man, wie die Bezeichnung unschwer erraten lässt, generelle Informationen ablegt (vgl. Listing 1, Zeilen 001 bis 006). Dieser Abschnitt enthält die Informationen, die in Tabelle 1 aufgeführt sind.

Tabelle 1: Kopf einer Theme-Konfigurationsdatei

Abschnittsbezeichner [General]
Name des Themes name=Themename
Autor des Themes author=Autorname
eMail-Adresse des Autors email=eMailadresse
Homepage des Themes homepage=Homepage
Beschreibung des Themes description=Beschreibung
Version des Themes version=Versionsnummer

Dass diese Angaben nicht vollständig sein müssen, wird offensichtlich, wenn man das Beispiel (Listing 1) anschaut. Hier fehlt der Eintrag der Homepage.

Bunter Balken, oder Startleiste mit Theme

Es ist allgemein recht beliebt, die Startleiste mit einem Farbverlauf zu belegen. Prinzipiell ist aber auch die Verwendung jeder beliebigen anderen Graphik möglich. Inwieweit so etwas aber sinnvoll ist, obliegt dem Geschmack jedes einzelnen. In unserem Beispiel soll "nur" ein Farbverlauf verwendet werden.

Um schöne Farbverläufe zu erstellen, benutzen Sie am besten das Bildverarbeitungsprogramm "The Gimp" [http://4]. Dabei gehen Sie am besten folgendermaßen vor:

  • Starten von "The Gimp" (gimp)
  • Erzeugen einer neuen Datei ([CTRL]+N oder über das entsprechende Menü)
  • Breite = 1 Pixel, Höhe = 60 Pixel (ist zwar größer als nötig, stört aber nicht)
  • Einstellen der Farben 1 und 2 (Abbildung 1)
  • durch Doppelklick auf die entsprechende Farbe erhält man den Farbauswahldialog (Abbildung 2)
  • Um konsistent zu unserem Beispiel zu bleiben, definieren wir die Farbe Nummer 1 im Feld "Hex Triptel" durch #b0a48eund Farbe 2 durch #696154.
  • Vergrößern unseres Bildchens
  • Auswählen des Vergrößerungstools durch Linksklicken auf das entsprechende Icon (Abbildung 1)
  • Linksklicken auf unser neues Bildchen bis es groß genug ist
  • Benutzen des Farbverlaufstools
  • Auswählen des Farbverlauftools durch Linksklicken auf das entsprechende Icon (Abbildung 1)
  • Linksklicken am oberen Ende unseres neuen Bildchens
  • Bei gedrückter Maustaste Maus nach unten bewegen
  • Maustaste loslassen
  • Datei Speichern
  • Rechtsklicken in unser Bildchen
  • Datei / Speichern unter
  • Dateiname panel.xpm eingeben
  • Auf OK klicken
Abbildung 1

Abbildung 1: The Gimp: Vorder- und Hintergrundfarbe

Abbildung 2

Abbildung 2: The Gimp: Farbauswahldialog

Da wir uns noch in dem entsprechenden eclipse-Verzeichnis befunden haben, sollte darin nun die Datei panel.xpm aufgetaucht sein. Anderenfalls müssen wir sie noch dorthin kopieren. Nun nur noch den entsprechenden Abschnitt (vgl. Zeilen 011 und 012 in Listing 1) in die Konfigurationsdatei eintragen und fertig ist unsere neue Startleiste. Der Vollständigkeit halber befindet sich dieser Abschnitt noch einmal in Tabelle 2.

Tabelle 2: Startleiste

Abschnittsbezeichner [Panel]
Hintergrundbildchen der Startleiste background=Dateiname

Die Abbildungen 3 und 4 bezeugen die wundersame Wandlung der Startleiste, wenn sie in das Theme einbegriffen wird. Auch hier wurde wieder geschummelt. Schließlich haben wir noch keine neuen Icons definiert. Wie das geht, sehen wir später.

Abbildung 3

Abbildung 3: Startleiste im Standard-KDE-Look

Abbildung 4

Abbildung 4: Startleiste mit Theme

Das Hintergrundbild

Die Wege zu einem digitalen Bild können so verschieden sein (Scannen, Rendern, Malen etc.), dass wir an dieser Stelle nicht auf alle eingehen können. Es werden hier nur wesentliche Gesichtspunkte besprochen, die bei der Konfiguration des Hintergrunds eine Rolle spielen. Prinzipiell unterscheidet man, ob der Hintergrund aus einem einzigen großen Bild, aus einer Farbe bzw. einem Farbwerlauf oder aus kleinen gekachelten Bildern besteht.

Als Beispiel für die letztere Variante soll die Datei wood1.jpg (Abbildung 5) angegeben werden, welche standardmäßig zu KDE 1.1.2 gehört. Sie bildet gekachelt das Muster in Abbildung 6.

Abbildung 5

Abbildung 5: wood1.jpg

Abbildung 6

Abbildung 6: wood1.jpg gekachelt

Unser Beispiel-Theme verwendet eine einzelne Hintergrundgrafik, die auf die entsprechende Bildschirmgröße gestreckt wird. Damit dieses ohne Verzerrung der Seitenverhältnisse funktioniert, müssen solche Bilder eine Größe besitzen, die ein Vielfaches der Bildschirmauflösung ist. Es empfehlen sich folgende Maße:

  • 640 × 480
  • 800 × 600
  • 1024 × 768
  • 1152 × 864
  • usw. In der Theme-Konfigurationsdatei stehen die in Tabelle 3 aufgelisteten Parameter zur verfügung, um das Hintergrundbild zu manipulieren. (vgl: Zeilen 007-010 in Listing 1) Dabei sind folgende Modi zur Anordnung des Hintergrundbildes zulässig:
  • Tiled (Abbildung 7) Das Hintergrundbild wird gekachelt dargestellt, beginnend oben links.
Abbildung 7

Abbildung 7: Hintergrundbild gekachelt

*

Mirrored (Abbildung 8)Das Hintergrundbild wird oben links auf den Bildschirm gelegt. Wenn dann der Bildschirm noch nicht ausgefüllt ist, wird das Bild an seinen Kanten gespiegelt.

Abbildung 8

Abbildung 8: Hintergrundbild gespiegelt

*

CenterTiled (Abbildung 9)Das Hintergrundbild wird, ausgehend von der Bildschirmmitte, gekachelt dargestellt.

Abbildung 9

Abbildung 9: Hintergrundbild zentriert gekachelt

*

Centred (Abbildung 10)Das Hintergrundbild wird in der Bildschirmmitte dargestellt.

Abbildung 10

Abbildung 10: Hintergrundbild zentriert

*

CentredBrick (Abbildung 11)Das Hintergrundbild wird in der Bildschirmmitte vor einer "Backsteinmauer" dargestellt.

Abbildung 11

Abbildung 11: Hintergrundbild zentriert vor Mauer

*

CentredWarp (Abbildung 12)Das Hintergrundbild wird in der Bildschirmmitte dargestellt, wobei Perspektivlinien eingezeichnet werden.

Abbildung 12

Abbildung 12: Hintergrundbild zentriert mit Perspektive

*

CentredMaxpect (Abbildung 13)Das Hintergrundbild wird, ausgehend von der Bildschirmmitte, auf Bildschirmgröße angepasst dargestellt. Dabei werden die Höhe und die Breite gleichmäßig verändert. Dadurch kann es dazu kommen, dass das Hintergrundbild nicht den ganzen Bildschirm abdeckt.

Abbildung 13

Abbildung 13: Hintergrundbild zentriert und symmetrisch skaliert

*

SymmetricalTiled (Abbildung 14)Das Hintergrundbild wird symmetrisch zur Bildschirmmitte gekachelt

Abbildung 14

Abbildung 14: Hintergrundbild gekachelt

*

SymmetricalMirrored (Abbildung 15)Das Hintergrundbild wird symmetrisch zur Bildschirmmitte gespiegelt

Abbildung 15

Abbildung 15: Hintergrundbild gekachelt

*

Scaled (Abbildung 16)Das Hintergrundbild wird an die Bildschirmgröße angepasst.

Abbildung 16

Abbildung 16: Hintergrundbild auf Bildschirm eingepasst

  • TopRight (Abbildung 17)Das Hintergrundbild wird in der rechten oberen Bildschirmecke angezeigt.
Abbildung 17

Abbildung 17: Hintergrundbild rechts oben

  • TopLeft (Abbildung 18)Das Hintergrundbild wird in der linken oberen Bildschirmecke angezeigt.
Abbildung 18

Abbildung 18: Hintergrundbild links oben

  • BottomRight (Abbildung 19)Das Hintergrundbild wird in der rechten unteren Bildschirmecke angezeigt.
Abbildung 19

Abbildung 19: Hintergrundbild rechts unten

  • BottomLeft (Abbildung 20)Das Hintergrundbild wird in der linken unteren Bildschirmecke angezeigt.
Abbildung 20

Abbildung 20: Hintergrundbild links unten

Tabelle 3: Hintergrund

Abschnittsbezeichner [Display]
Soll für alle virtuellen Desktops der gleiche Hintergrund gelten? CommonDesktop=true / false
Hintergrundbild des ersten virtuellen Desktops Wallpaper0=Darteiname
Anordnung des Hintergrundbildes des ersten virtuellen Desktops WallpaperMode0=Modus

Alternativ zu einem einheitlichen Hintergrund für alle virtuellen Desktops kann man für jeden einzelnen ein eigenes Hintergrundbild festlegen. Dazu verwenden Sie den Eintrag CommonDesktop=false und können dann für die einzelnen Bilder und Modi durch Wallpaperx=Dateiname bzw. WallpaperModex=Modus angeben. Dabei ist x die Nummer des entsprechenden Desktops, ausgehend von der Null.

Ist keine Hintergrundgrafik angegeben, dann wird die Hintergrundfarbe bzw. der Hintergrundfarbverlauf verwendet, der im Farbschema definiert ist. Wie das geht, sehen wir später.

Viele, viele bunte Icons

Es gibt ähnlich viele Wege zur Icon-Erstellung wie zur Gewinnung von Hintergrundbildern. Der offensichtlichste besteht in der Verwendung eines Icon-Editors. Hierbei empfiehlt sich kiconedit [http://5] (Abbildung 21)

Abbildung 21

Abbildung 21: kiconedit

Da mir das pixelweise Editieren der Icons zu mühselig ist, greife ich hierfür aber lieber wieder auf "The Gimp" und dessen Skriptfähigkeit zurück. Bei unserem Beispiel-Theme kam das Feuerlogo-Skript (Abbildung 22) zum Einsatz. Man gehe folgendermaßen vor:

  • Starten von "The Gimp" (gimp)
  • Starten des Feuerlogo-Skriptes über Xtns / Erzeuge / Logo / Feuerlogo
Abbildung 22

Abbildung 22: The Gimp Feuerlogo-Skript

  • Einstellen einer schönen :-) Schriftart und eines sinnvollen Textes (Beispiel ist Helvetica/34/fett und ein "e" wie eMail oder eclipse)
  • OK drücken
  • Es ensteht das in Abbildung 23 gezeigte brennende "e"
Abbildung 23

Abbildung 23: Das brennende "e"

  • Der Übersicht halber die Ansicht vergrößern (Farbverlauf für Startleiste)
  • Mit der Tastenkombination [CTRL+M] die sichtbaren Ebenen zusammenfügen
  • Mit dem Auswahltool (gestricheltes Viereck im Gimp-Hauptfenster) das brennende "e" markieren
  • Mit der Tastenkombination [CTRL+C] den Bereich kopieren
  • Mit der Tastenkombination [CTRL+N] eine neue Grafik erzeugen (Dabei wird die Größe automatisch auf das kopierte brennende "e" eingestellt.) Wichtig: In dem Dialog einen transparenten Hintergrund einstellen.
  • Mit der Tastenkombination [CTRL+V] das brennende "e" in die neue Grafik einfügen
  • Rechtsklick auf die neue Graphik und mit Bild / Skalieren diese auf 34×34 Pixel vergößern. Dabei ist darauf zu achten, dass die "Kette", wie in Abbildung 24 dargestellt, getrennt ist, da sonst nur symmetrische Größenänderungen möglich sind.
Abbildung 24

Abbildung 24: Skalieren mit The Gimp

  • Neue Zeichnung als e.xpm speichern Schon haben wir unser erstes Icon. Ich bitte um Verständniss, dass ich nicht auf alle in "eclipse" enthaltenen Icons eingehe. Dies währen einfach zu viele.

Drei Wochen später… Nachdem nun so um die Tausend Icons gemalt oder "ge-gimp-ed" worden sind, müssen sie in unsere Konfigurationsdatei eingetragen werden. Die dafür vorgesehenen Abschnitte heißen [Icons] (vgl. Zeilen 013 bis 019 in Listing 1) und [Extra Icons] (vgl. Zeilen 020 bis 040 in Listing 1). Die Parameter des erstgenannten Abschnitts befinden sich in Tabelle 4.

Tabelle 4: Icons

Abschnittsbezeichner [Icons]
Das K auf der Startleiste PanelGo=Dateiname
Knopf zum Beenden auf der Startleiste PanelExit=Dateiname
Knopf zum Sperren des Bildschirms auf der Startleiste PanelKey=Dateiname
Heimatverzeichnis Home=Dateiname
Papierkorb Trash=Dateiname
voller Papierkorb TrashFull=Dateiname

Der Abschnitt [Extra Icons] ist, wie im Listing 1 unschwer zu erkennen, eine Aufzählung verschiedener Icons. Die Icon-Namen sind identisch zu denen der Icons, die ersetzt werden sollen. Die Original-Icons befinden sich im KDE-Verzeichnis (bei SuSE unter /opt/kde/share/icons).

Alles in eine Kiste

An dieser Stelle haben wir unser Pensum für den ersten Teil unserer Trilogie geschafft. Was muss noch getan werden, damit Sie die Zwischenergebnisse Ihrer Arbeit bewundern können? Es gibt zwei Möglichkeiten, die gewünschten Parameter im System zu ändern. Zum einen können Sie sämtliche Änderungen manuell durchführen. Das bedeutet aber:

  • Editieren diverser Konfigurationsdateien
  • Kopieren diverser Grafik- und Sound-Dateien
  • Manuelle Anpassung der Farbpalette

Gerade in der Entwicklungsphase, in der man verschiedene Varianten probieren möchte, sind diese Schritte nervig. Der zweite, komfortablere Ansatz ist die Verwendung des KDE Designmanager kthememgr [http://6] (Abbildung 25). Dieser kopiert die notwendigen Dateien und nimmt auch die erforderlichen Editieraufgaben automatisch vor. Dazu müssen Sie die entsprechenden Dateien und

eineKonfigurationsdatei (THEME_NAME.themerc) in ein mit gzip komprimiertes TAR-Archiv packen. Dieses kann dann von kthememgr benutzt werden. Folgendes Vorgehen erfüllt den gewünschten Zweck:

  • Wechseln in das Verzeichnis, in dem sich unser eclipse-Verzeichnis befindet
  • Archivieren des gesamten Verzeichnisses in einer Datei (tar cvf eclipse.tar eclipse/)
  • Packen des Archivs (gzip eclipse.tar)
Abbildung 25

Abbildung 25: Der KDE Thememanager

Nun wird der KDE Designmanager in einem Terminal oder dem Programmstarter ([ALT]+[F2]) mit dem Befehl kthememgr gestartet. Selbstverständlich kann auch das Startmenü verwendet werden. Abbildung 25 zeigt das Hauptmenü dieses Programms. Über den Knopf Hinzufügen... importieren wir unser Theme, das daraufhin in der Liste erscheint. Mit einem beherzten OK übernehmen wir nun das zu einem Drittel fertige Theme.

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 diese bei erneutem Verwenden des Themes wieder vorhanden sind.

Listing 1

eclipse.themerc

[General]
name=eclipse
author=Hagen Hoepfner
email=Hagen.Hoepfner@gmx.de
description=A dark sun for KDE (made with gimp and its Firetext-plugin)
version=0.3
[Display]
CommonDesktop=true
Wallpaper0=bg.jpg
WallpaperMode0=Scaled
[Panel]
background=panel.xpm
[Icons]
PanelGo=go.xpm:mini-go.xpm
PanelExit=exit.xpm
PanelKey=key.xpm
Home=kfm_home.xpm
Trash=kfm_trash.xpm
TrashFull=kfm_fulltrash.xpm
[Extra Icons]
Extra1=kfind.xpm
Extra2=image.xpm
Extra3=sound.xpm
Extra4=aktion.xpm
Extra5=kwrite.xpm
Extra6=folder.xpm
Extra7=kcontrol.xpm
Extra8=kdehelp.xpm
Extra9=kmail.xpm
Extra10=kfm_refresh.xpm
Extra11=folder_open.xpm
Extra12=3floppy_mount.xpm
Extra13=3floppy_unmount.xpm
Extra14=5floppy_mount.xpm
Extra15=5floppy_unmount.xpm
Extra16=core.xpm
Extra17=document.xpm
Extra18=input_devices_settings.xpm
Extra19=kab.xpm
Extra20=kvt.xpm

Glossar

Themes

Unter einem 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.

Desktop Environment

Unter Linux existieren mehrere grafische Desktop-Umgebungen (die bekanntesten sind CDE, KDE, GNOME). Im Gegensatz zu reinen Windowmanagern, mit denen Desktopumgebungen fälschlicher Weise oft gleichgesetzt werden, stellen diese in der Regel zusätzliche Funktionalität wie Drag & Drop, Session-Management und eine Panel-Leiste bereit.

Scannen

Beim Scannen handelt es sich um ein Verfahren, bei dem Fotos oder Zeichnungen, die auf Papier vorliegen, mit Hilfe eines an den Computer angeschlossenen Zusatzgerätes (Scanner) als digitale Bilder in den Computer übertragen werden.

Rendern

Beim Rendern werden mit Hilfe von speziellen Programmen Bilder im Computer aus Drahtgittermodellen berechnet.

gekachelten Bildern

Bei gekachelten Hintergründen nutzt man Symmetrieeigenschaften von Bildern aus. Diese bewirken, dass die Übergänge beim Aneinanderreihen eines Bildes fließend werden. D. h. ordnet man mehrere solcher Bilder neben- und übereinander an, so entsteht der Eindruck einer geschlossenen Fläche.

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 einzelnen Archivdatei 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.

hagen_jenny.jpg
Tip a friend    Druckansicht beenden Bookmark and Share
Kommentare