Hinweis: Sie können eigenes CSS auch direkt in Zeta Producer einfügen. Für kleiner CSS-Anpassungen empfehlen wir diese Vorgehensweise. Der Vorteil hierbei ist, dass Sie das Layout nicht kopieren müssen und somit weiter von unseren Layout-Updates profitieren.

1. CSS-Stile über das style-Attribut einfügen

CSS-Stile, die einem HTML-Element direkt über das style-Attribut zugewiesen werden, wirken sich nur auf das entsprechende HTML-Element aus.

Öffnen Sie die Datei default.html im Ordner templates/pages Ihres Layouts. Fügen Sie nun im gewünschten HTML-Element das style-Attribut mit Ihren CSS-Stilen ein.

Beispiel

<h1 style="font-size:18px; color:red;">
	<$= system.htmlEncode(page.title) $>
</h1>

Ergebnis: Die h1-Überschrift wird in der Schriftgröße von 18 Pixel und in der Farbe Rot angezeigt.

2. CSS-Stile über das style-Element einfügen

Das style-Element enthält globale CSS-Stile, die sich auf alle definierten Elemente auswirken und innerhalb des gesamten Dokuments gelten.

Öffnen Sie die Datei default.html im Ordner templates/pages Ihres Layouts. Fügen Sie im head-Bereich das style-Element mit Ihren CSS-Stilen ein.

Beispiel

<style type="text/css">
	body {
		font-family: Arial;
		background-color: gray;
	}
	h1 {
		font-size: 18px;
		color: red;
	}
</style>

Ergebnis: Für die Website wird global die Schriftart Arial und eine graue Hintergrundfarbe verwendet. Des Weiteren werden alle h1-Überschriften in der Schriftgröße von 18 Pixel und in der Farbe Rot angezeigt.

3. CSS über ein link-Element einfügen

Eine externe CSS-Datei enthält globale CSS-Stile und wird immer dann verwendet, wenn umfangreiche CSS-Stile definiert werden müssen, die sich auf alle HTML-Dokumente der Website auswirken sollen.

Erstellen Sie in Ihrem HTML-/CSS-Editor eine neue CSS-Datei, beispielsweise mit dem Namen layout.css. Fügen Sie in die CSS-Datei Ihre CSS-Stile ein und legen die Datei im Ordner assets ab.

Beispiel CSS

body {
	font-family: Arial;
	background-color: gray;
}
h1 {
	font-size: 18px;
	color: red;
}
h2 {
	font-size: 14px;
	color: blue;
}

Öffnen Sie die Datei default.html im Ordner templates/pages Ihres Layouts. Fügen Sie im head-Bereich das link-Element zu Ihrer externen CSS-Datei ein.

Beispiel

<link rel="stylesheet" type="text/css" href="<$= page.pathToRoot $>assets/layout.css" />

Ergebnis: Für die Website wird global die Schriftart Arial und eine graue Hintergrundfarbe verwendet. Alle h1-Überschriften werden in der Schriftgröße von 18 Pixel und in der Farbe Rot angezeigt, alle h2-Überschriften in der Schriftgröße von 14 Pixel und in der Farbe Blau.