SPIP und die Stylesheets

Wo befindet sich die Definition dieser Stylesheets?

Unmittelbar nach der Installation von SPIP mit den standardmäßig gelieferten Templates befindet sich die Definition der Stylesheets in der folgenden Datei:

-  spip_style.css

Sie können diese Stile modifizieren (das sollten Sie sogar tun!). Sie verwenden zu diesem Zweck aber besser Ihre eigene CSS-Datei, damit Ihre Ergänzungen nicht per Überschreibung gelöscht werden, wenn Sie eine neue SPIP-Version installieren. Außerdem können Sie selbstverständlich Stil-Definitionen auf die übliche Weise direkt in Ihre Templates aufnehmen.

Merken Sie wohl: Der Begriff «Stylesheet» (oder «Cascading Style Sheets», CSS) ist keine Eigenheit von SPIP, es handelt sich dabei vielmehr um einen Web-Standard. Zu diesem Thema gibt es eine Vielzahl von weiteren Dokumentationen; ziehen Sie beispielsweise die Seite des W3C über dieses Thema zu Rate.

Um den weiteren Ausführungen des vorliegenden Artikels folgen zu können, sollten Sie nun unbedingt die Datei «spip_style» mit einem Texteditor öffnen.

Die Hypertext-Links

Die beiden ersten Definitionen erlauben die Modifizierung des <a>-Tags durch die Stile für «a» und «a:hover»; in ganz klassischer Weise beeinflussen sie die Darstellung der Links auf Ihrer Webseite (die Links werden ohne Unterstreichung dargestellt, und die «hover»-Variante regelt das Verhalten der Links beim Überstreichen mit dem Mauszeiger).

Es folgen drei Definitionen für SPIP-eigene typographische Abkürzungen: «a.spip_in», «a.spip_out» und «a.spip_url».

-  a.spip_in betrifft die Links innerhalb Ihrer eigenen Site. Zum Beispiel:

Dies ist ein [interner Link->article1177]

-  a.spip_out betrifft die Links, die aus Ihrer Site hinausführen. Zum Beispiel:

Dies ist ein [externer Link->http://www.uzine.net]

-  a.spip_url betrifft URL-Adressen, die zu Hypertext-Links transformiert werden. Zum Beispiel:

[->http://www.uzine.net]

(diese Abkürzung zeigt direkt die URL an, wobei der Hypertext-Link zu dieser Adresse inbegriffen ist; das sieht folgendermaßen aus: http://www.uzine.net).

Mit diesen drei Stilen wird vor allem das Ziel verfolgt, Links innerhalb der Site durch ihr graphisches Erscheinungsbild von Links zu anderen Sites unterscheidbar zu machen.

Die Zwischentitel

Die Zwischentitel werden durch die folgende Abkürzung erzeugt:

{{{Ein Zwischentitel}}}

Für sie wird der Stil h3.spip definiert. Dieser Stil ist zweifelsohne einer der wichtigsten, erlaubt er doch die Definition von Schriftgröße und Schriftart und der Positionierung von Zwischentiteln in den Artikeln: höchstwahrscheinlich werden Sie ihn Ihren graphischen und typographischen Vorstellungen anpassen wollen.

Per Voreinstellung ist dieser Stil folgendermaßen definiert:

h3.spip {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-weight: bold;
	font-size: 120%;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 1.5em;
	padding: 0em;
}

Beachten Sie besonders die Attribute margin und padding, mit denen man auf den Abstand der Zwischentitel zu den vorangehenden und nachfolgenden Absätzen Einfluß nehmen kann. Versäumt man es, hier explizite Regeln aufzustellen, sind die Chancen groß, daß die Zwischentitel zu eng am übrigen Text kleben oder zu weit von diesem im luftleeren Raum hängen (da hat jeder seinen persönlichen Geschmack).

Code und Rahmen

Die Code-Elemente, die durch die folgende Abkürzung definiert werden:

<code>Dies ist Code innerhalb des Textes</code>

werden durch den Stil .spip_code gesteuert. Sie werden kaum Verwendung dafür haben, wenn Sie nicht eine technische Dokumentation wie die vorliegende verfassen, wo häufig Programm-Code oder Namen von Dateien und Verzeichnissen zitiert werden.

Das Tag

<div class="base64" title="PGRpdiBjbGFzcz0icHJlY29kZSI+PHByZSBjbGFzcz0nc3BpcF9jb2RlIHNwaXBfY29kZV9ibG9jaycgZGlyPSdsdHInIHN0eWxlPSd0ZXh0LWFsaWduOmxlZnQ7Jz48Y29kZT4uLi4NCjwvY29kZT48L3ByZT48L2Rpdj4="></div>

wurde mit SPIP 1.3 eingeführt; es erlaubt die Darstellung von Quellcode in den für HTML-Formulare vorgesehenen mehrzeiligen Eingabefeldern (<textarea>; in diesem Falle in der readonly-Variante). Durch die Erhaltung von Leerzeichen in Einrückungen läßt sich der Code übersichtlicher darstellen, und die Entnahme von Text per «copy and paste» wird erleichtert. Der zugehörige Stil findet sich unter .spip_cadre und ist per Voreinstellung folgendermaßen definiert:

.spip_cadre { 
	width : 100%;
	background-color: #FFFFFF; 
	padding: 5px; 
}

Die Fußnoten der Seite

Die Fußnoten der Seite werden durch folgende Abkürzung definiert:

der Text[[eine Fußnote]]

Die zugehörige Stildefinition ist p.spip_note. Sie bleibt häufig unbenutzt, da die Fußnoten direkt im HTML-Code Ihrer Templates modifiziert werden können - im Zuge der Bearbeitung des Tags #NOTES.

Die Tabellen

Tabellen werden unter SPIP auf folgende Weise definiert:

| {{Name}} | {{Geburtsdatum}} | {{Geburtsort}} |
| Jacques | 5/10/1970 | Paris |
| Claire | 12/2/1975 | Belfort |
| Martin | 1/31/1957 | Klein-Mutz |
| Marie | 23/12/1948 | Perpignan |

was folgende Anzeige ergibt:

Eine Feineinstellung der Darstellung dieser Tabellen ist mittels der folgenden Stildefinitionen möglich:

table.spip {
}

table.spip tr.row_first {
	background-color: #FCF4D0;
}

table.spip tr.row_odd {
	background-color: #C0C0C0;
}

table.spip tr.row_even {
	background-color: #F0F0F0;
}

table.spip td {
	padding: 1px;
	text-align: left;
	vertical-align: center;
}

-  table.spip erlaubt die Modifizierung des allgemeinen Verhaltens der Tabelle (insbesondere ihrer Position: linksbündig, zentriert usw.);

-  table.spip tr.row_first definiert die «erste Zeile» der Tabelle (hier erhält sie eine gelbe Hintergrundfarbe; damit die «erste Zeile» als solche erkannt wird, muß man ihren Elementen durch doppelte Schweifklammern Fettdruck verordnen);

-  table.spip tr.row_odd für die Zeilen mit ungeraden Zeilennummern (wenn die «erste Zeile» die Nummer 1 erhält);

-  table.spip tr.row_even für die Zeilen mit geraden Zeilennummern;

-  table.spip td erlaubt die Modifizierung des Verhaltens der «Fächer» der Tabelle.

Mit der Wahl von verschiedenen Farben für «row_odd» und «row_odd» bewirkt man die Darstellung aufeinanderfolgender Tabellenzeilen in abwechselnden Farben (hier hellgrau und dunkelgrau).

Horizontale Trennlinien

Eine horizontale Trennlinie wird unter SPIP folgendermaßen definiert:

----

Für sie ist die Stildefinition hr.spip zuständig.

Fett- und Kursivschrift

Für Fett- und Kursivschrift gibt es folgende Abkürzungen:

Dieser Text {{ist fett}}, dieser Text {ist kursiv}

Eine Modifizierung ist über die Stildefinitionen b.spip und i.spip möglich. Hiervon wird aber kaum Gebrauch gemacht.

Die Absätze

Die von SPIP automatisch erzeugten Absätze (es genügt, wenn der Autor zwischen die Absätze Leerzeilen einfügt) können über die folgende Stildefinition modifiziert werden: p.spip.

Auch das wird wenig verwendet, da man das Verhalten der Textelemente direkt im HTML-Code beeinflussen kann.

Die Formulare

Im öffentlichen Bereich werden verschiedene Formulare benutzt: für die integrierte Suchmaschine, in der Schnittstelle für die Nachrichten der Foren, für das Login in den privaten Bereich usw.

Dazu gehören die folgenden Stildefinitionen: .forml, .spip_encadrer, .spip_bouton, .formrecherche.

Per Voreinstellung sind sie folgendermaßen definiert:

.forml { width: 100% ; background-color: #FFDDAA;}
.spip_encadrer { background-color: #EEEEEE; }
.spip_bouton { background-color: #FFCC00;}
.formrecherche { width: 100% ; background-color: #FFDDAA;}

-  .forml definiert die Textfelder der Formulare; hiermit stellt man die Größe und die Hintergrundfarbe dieser Felder ein;

-  .spip_encadrer; wenn es in einem Formular verschiedene Teilbereiche gibt, wird die Abgrenzung zwischen diesen Teilbereichen durch diesen Stil kontrolliert (man kann beispielsweise einen Rahmen für jeden Teilbereich oder bestimmte Abstände zur Umgebung verordnen);

-  .spip_bouton kann das Erscheinungsbild des Buttons modifizieren, mit dem das Formular abgeschickt wird;

-  .formrecherche modifiziert das Erscheinungsbild des «Suchen»-Feldes der Suchmaschine.

Zusammenfassung

Sie werden bemerkt haben, daß einige Stile per Voreinstellung ohne explizite Definitionen bleiben. Diese Stile sind nur als optionales Zubehör gedacht, falls ein Webmaster einmal mit sehr speziellen graphischen Effekten arbeiten möchte.

Als Faustregel: Stile, mit denen sich spektakuläre graphische Modifikationen auf einer Site durch einfache Definitionen bewirken lassen, sind die folgenden:

-  für die Links auf der gesamten Seite a und a:hover,
-  für die Zwischentitel h3.spip,
-  die Stile für die Formulare.