Eigenes Theme erstellen

Dieses Tutorial wurde freundlicherweise von Martin Hense zu Verfügung gestellt.

Du möchtest ein neues CSS-Theme für das simple, standardbasierte Slideshowsystem S5 erstellen? Und du hast auch schon eine Vorstellung davon, wie es aussehen soll? Super, dann steht dir nichts mehr im Weg!

  1. Entwurf deines Themes
    1. Hintergrundfarben
    2. Farbverläufe
    3. Hintergrundgrafiken
    4. Schrifttypen
    5. inhaltliche Grafiken
    6. Kompression der Grafiken
  2. Visuelle Struktur
    • Hauptbereich
    • Kopfzeile
    • Fußzeile
    • Folie
  3. Umsetzung des Entwurfs
    • Hintergrundbilder im Hauptbereich
    • Hintergrundbild zwischen Hauptbereich und Kopf-/Fußzeile
    • Hintergrundbilder für weitere XHTML-Elemente

Wenn du nur vage Ideen hast, findest Du hier Hilfe dabei, deinen geistigen Entwurf Schritt für Schritt zu konkretisieren. Anschließend mache ich die Struktur der Folien deutlich, die du am S5 mit CSS ändern kannst, und zeige bei der Umsetzung, wie sich etliche Hintergrundbilder gleichzeitig realisieren lassen.

Ich gehe im Folgenden davon aus, daß Du den Umgang mit den verschiedenen CSS-Elementen und -Attributen kennst und sie im Zweifelsfall in SelfHTML oder der CSS-Spezifikation nachzuschlagen weißt.

Doch noch keine Idee zu einem Theme? Dann schaust du dir vielleicht fertige Präsentationen an. Wenn dir das Googlen keine Erleuchtung bringt, kannst du Dich ja von bereits existieren Präsentationsprogrammen inspirieren lassen; es soll da was im Office-Paket geben … aber nichts kopieren, das kann Ärger geben!
Ein Auditorium, das hauptsächlich an harten Fakten interessiert ist, wird wahrscheinlich einen simplen und schnörkellosen Präsentationsstil vorziehen, während ein Vortrag vor einem enthusiastischen Publikum ruhig etwas verspielter sein kann. Passe den Stil der Darstellung dem Inhalt der Präsentation an.

Entwurf deines Themes

Zunächst solltest du deine Vorstellungen in einem Grafikprogramm konkretisieren. Welches du dazu nimmst, ist mir egal, Hauptsache, du kannst damit nach Deinen Wünschen umgehen. Ohne Grafikprogramm oder Kenntnisse hierin kannst du die folgenden Schritte natürlich auch direkt am CSS probieren, und manch einer wird sowieso beides nebeneinander vorziehen.

Mache am besten einen Screenshot von S5 in Deinem Lieblingsbrowser (unter Windows geht das mit der Druck-Taste), füge ihn in Dein Grafikprogramm ein und nimm ihn als Grundlage für deine Änderungen; so hast du gleich eine Vorstellung davon, wieviel Platz dir ungefähr zu Verfügung steht und wie Text und Grafiken miteinander wirken. Mache dir evtl. auch einen weiteren Screenshot von einer S5-Folie ganz ohne Text oder entferne den Text mit deinem Grafikprogramm. So kannst du später leichter andere Textstile und -Farben einfach über Dein Programm einfügen.

  1. Zunächst solltest du mit den Hintergrundfarben zu spielen. Hiermit legst du auch schon die grundsätzliche „Stimmung“ fest, die das Theme vermitteln wird. Ersetze die bestehenden Farben (von Kopf- und Fußzeile sowie Präsentationshintergrund) durch andere, bis sie dir in ihrer Kombination gefallen. Vielleicht sollen die Kopf- oder Fußzeile auch die gleiche Farbe wie der Hauptbereich bekommen; Die Abgrenzungen zwischen diesen Bereichen kannst du durch Linien (auch in weiteren Farben) deutlicher machen.
  2. Probiere nun evtl. leichte Farbverläufe aus (horizontal oder vertikal), sowohl in der Kopf- und Fußzeile wie im Hauptbereich.
    Denke daran, daß der Text dabei immer lesbar bleiben muß und das wichtigere Element bleiben sollte, egal an welcher Position er sich später befinden mag; ändere hierzu evtl. die Textfarbe.
  3. Als besonderes Schmankerl kannst du jetzt noch Grafiken in den Hintergrund einbauen. Orientiere Dich hierbei auch am Inhalt der zukünftigen Präsentation; ein Referat über die leckersten Kuchenrezepte kann selbst mit Kuchenstücken oder Backutensilien verziert werden, ein Vortrag über Tiefseeforschung verlangt schon fast nach schwimmendem Getier.

    Zu beachten ist, daß für Kopfzeilen-, Hauptbereich- und Fußzeilenhintergrund nur jeweils eine Graphik verwendet werden kann. Zusätzlich sind weitere Hintergrundgrafiken im Prinzip bei allen HTML-Elementen wie den Überschriften möglich.
    Bedenke, daß die Grafiken nicht vom Text ablenken sollen. Abstrahiere hier, benutze vielleicht nur Schatten von Gebäck statt der Gegenstände an sich, oder füge geometrische Objekte ein, einfache oder zusammengesetzte, Wellenlinien beispielsweise bei unserer Tiefseepräsentation. Probiere auch hier wieder andere Farben aus und spiele mit verschiedenen Graden von Transparenz oder Transparenzverläufen. Grafiken sollten fast mit der Hintergrundfarbe verschmelzen, wenn sie direkt hinter dem Text stehen; platziere kontrastreichere Objekte mehr am Rand oder den Ecken.
    Auch hier können Kopf- und Fußzeile wieder eigene Grafiken bekommen, aber vorsicht, weniger ist oft mehr!
  4. Jetzt bleibt noch der Schriftstil. Wenn du dein Theme nicht unbedingt allgemein zugänglich machen willst, sind dir bei der Wahl der Schriftart natürlich fast keine Grenzen gesetzt. (Fast, weil manche Type einfach nicht besonders Lesbar ist.) Ansonsten solltest du dich auf die Entscheidung zwischen einem serifenlosen Schrifttyp und einem mit Serifen beschränken. (Serifen sind kleine Häkchen an den Enden der Buchstaben.) Als da wären Times New Roman (Windows und MacOS) unter den meistverbreiteten Serifenschriftarten, sowie Verdana, Arial (Windows und MacOS) und Helvetica (MacOS) unter den meistverbreiteten serifenlosen Schriftarten. Hinzuweisen wäre außerdem noch auf die diktengleiche Schriftart Courier (Mac) bzw. Courier New (Windows), die eine Art Sondertyp darstellt.

    Schriftarten mit Serifen sind bei gedrucktem Text besser zu lesen, während serifenlose Schriftarten auf Bildschirmen leichter zu erfassen sind. Eine Präsenation ist von diesen Einschränkungen allerdings nahezu befreit, weil die Schrift in der Regel ausreichend groß gewählt wird.
    Natürlich kannst du für die Überschriften einen anderen Typ verwenden als für den Haupttext; serifenlose Schriften und solche mit Serifen lassen sich besonders gut kombinieren. Eine tabellarisch aufbereitete Übersicht über die Verbreitung von Schrifttypen auf den Betriebssystemen gibt Philip Shaw in seinen Combined font survey results.
  5. Wenn nun alles steht, kannst du auch evtl. inhaltlichen Grafiken in deinem Präsentationslayout testen, wie Photos oder Diagramme, die zum Informationsmaterial gehören werden. Passe sie in ihrer Größe und Farbgebung hier an Deinen Screenshot an.
    Desweiteren kannst du auch noch weitere, symbolhafte Grafiken erzeugen, die du später allein zur Auflockerung oder Strukturisierung in den Fließtext einbaust, z. B. eigene Listenpunkte oder ähnliches. Bedenke auch hier, daß sie nicht nur an einer bestimmten Position zu Hintergrund und Umgebung passen sollten, sondern möglichst überall, weil du nicht vorhersagen kann, wohin sie im Textverlauf (und unter verschiedenen Auflösungen etc.) verschoben werden.
  6. Zum Schluß wäre es schön, wenn du aus Deinen Entwürfen möglichst kleine GIF-, JPG- oder PGN-Dateien machen könntest. Bei Farbverläufen genügt ein kleiner Ausschnitt über die Verlaufsrichtung, der dann durch den Webbrowser verfielfacht wird; hier ist in der Regel das JPG-Format kleiner.

Visuelle Struktur

Hauptbereich
Der Hauptbereich Der Teil zwischen Kopf- und Fußzeile jeder Folie (im weiteren Verlauf einfach Hauptbereich genannt) existiert als solcher nicht im HTML und ist daher auch nicht explizit durch CSS zu verändern. Durch Änderungen am Körper, den Folien oder Kopf- und Fußzeile lassen sich Effekte aber auch implizit nur auf diesen Teil anwenden.
Kopfzeile
div#header
Die Kopfzeile Obwohl die Kopfzeile der Folien nicht wirklich (XHTML-)Inhalte enthält, ist sie für die korrekte Darstellung sehr wichtig und kann einen eigenen Hintergrund erhalten.
Fußzeile
div#footer
Die Fußzeile Die Fußzeile der Folien enthält die Kontrollelemente sowie evtl. weiteren Text und kann natürlich auch per CSS verändert werden
Folie
.slide
Die Seite Die Folien (oder Präsentationsseiten) enthalten den jeweiligen Folieninhalt, das heißt Überschrift, Texte, Listen, Tabellen, Bilder etc. Für sämtliche Folien einer Präsentation gilt eine CSS-Klasse, .slide, jede einzelne Folie der Präsentation kann aber individuelle CSS-Eigenschaften erhalten, so Folie 0 beispielsweise durch das Individualformat #slide0.

Umsetzung des Entwurfs

Alle erzeugten Grafiken speicherst du im /ui-Ordner von S5, wo sich auch die Stylesheets befinden. Als Grundlage für die Änderungen am CSS nimmst du dir am besten das Default-Theme pretty.css von Eric A. Meyer vor, das bei S5 dabei ist, und öffnest diese Datei in einem Text-Editor. Gleichzeitig öffnest du die Präsentation in deinem Webbrowser, um deine Änderungen am CSS überprüfen zu können.

Hintergrundbilder im Hauptbereich

Ein Hintergrundbild im Hauptbereich Für Hintergrundbilder, die im Hauptbereich der gesamten Präsentation erscheinen sollen, kannst Du sowohl dem HTML-Element body als auch der Klasse .slide Eigenschaften zuweisen. Somit stehen hier maximal zwei Hintergründe (plus ein weiterer für individuelle Folien) zur Vewendung frei.

Da sowohl der body der Präsentation als auch die Folien über dem Hauptbereich beginnen, muß ein Hintergrundbild, welches in der obere linke Ecke des erscheinen soll, dementsprechend unter der Kopfzeile positioniert werden. Da die Kopfzeile 3em hoch ist, sähe eine entsprechende CSS-Anweisung so aus:
background: #fff url(mybackground.jpg) 0 3em no-repeat;

Ein Hintergrundbild am unteren Rand des Hauptbereichs Soll das Hintergrundbild am unteren Rand des Hauptbereichs platziert werden (also direkt an der Grenze zur Fußzeile), muß etwas getrickst werden — kein Element und keine Klasse endet genau hier. Die Lösung ist, das Hintergrundbild dem unteren Rand des body zuzuweisen und im Bild selbst unten einen Rand zu lassen, der genauso hoch ist wie die Fußzeile.
Die Fußzeile darf dann ihre Höhe natürlich nicht mehr verändern und muß mit div#footer { height: 36px; } auf eine gewünschte Höhe festgelegt werden, während der Körper folgende Eigenschaften bekommt:
background: #fff url(mybackground.jpg) right bottom no-repeat;

Hintergrundbild zwischen Hauptbereich und Kopf-/Fußzeile

Ein Hintergrundbild zwischen Hauptbereich und Kopf-/Fußzeile Überschreitet das Hintergrundbild die Strukturgrenzen, gibt es zwei Möglichkeiten.

Hintergrundbilder für weitere XHTML-Element

Hintergrundbild der Präsentationsüberschrift Im Prinzip kann jedem in der Präsentation auftauchendem HTML-Element ein eigenes Hintergrundbild zugewiesen werden. Damit immer das komplette Bild sichtbar ist, muß dem entsprechenden Element evtl. eine feste Höhe und Breite zugewiesen werden. Der Inhalt des Elements selbst wird dann per padding auf diesem Hintergrundbild positioniert.
Für einen Hintergrund der Präsentationsüberschrift auf Folie 0 wären beispielsweise ungefähr folgende Zuweisungen zu verwenden:

#slide0 h1 {
padding: 60px 10px;
text-align: right;
height: 281px;
background: transparent url(pixelslide0bg.gif) no-repeat;
}