Inhaltsbereich anpassen

In den Basis-Layouts und dem hier im Beispiel verwendeten Layout ist das Partial area.html für den Inhaltsbereich standardmäßig bereits enthalten. Für das aktuelle Beispiel sollen die Überschriften, die Hyperlinks und die Button-Darstellung etwas angepasst werden. Außerdem sollen im Inhaltsbereich maximal nur noch 2 Spalten eingefügt werden können.

Damit die Darstellung des Inhaltsbereichs etwas deutlicher wird, Können Sie einfach etwas Blindtext einfügen. Siehe dazu auch die Live-Demo.

1. Inhaltsbereich in der Seitenvorlage anpassen

Passen Sie in der Seitenvorlage default.html beim Partial area.html den Parameter maxColumns mit dem Wert 2 an.

Markup

<div id="content">
	<$= system.partial("area.html", "Standard", "2") $>
</div>

Der Anwender kann nun im Inhaltsbereich maximal 2 Spalten erstellen, also zwei Widgets nebeneinander anordnen.

2. CSS für den Inhaltsbereich anpassen

Passen Sie in der Datei styles.css die CSS-Stile für die Überschriften h1 h2 h3 den Links a und den Button .button folgendermaßen an:

CSS

h1, h2, h3 {
	margin: 10px 0 20px;
	font-size: 1.5em;
	font-weight: normal;
	color: #45b202;
}
a {
	color: #45b202;
	text-decoration: none;
}
.button {
	display: inline-block;
	padding: 6px 8px;
	color: #ffffff;
	background-color: #45b202;
}
.button:hover {
	text-decoration: none;
	background-color: #399500;
}

3. Aktuelle Darstellung des Layouts

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind die Anpassungen am Layout sofort sichtbar.

Wie Sie sehen sind die Überschriften und Links farblich angepasst. Fügen Sie auf einer Seite nun das Widget Button ein, damit Sie auch diese Anpassungen nachvollziehen können. Fügen Sie außerdem noch eine zweite Spalte ein. Danach können Sie testen, ob es möglich ist eine dritte Spalte einzufügen. Wurde das Partial area.html richtig angepasst sollte dies jedoch nicht möglich sein.