Newsbereich anpassen

Neben dem Inhaltsbereich ist im aktuellen Layout ein weiteres Partial area.html für den Newsbereich in der Seitenvorlage default.html enthalten.

Markup

<$ if ( page.anyAreaArticles("News") || (system.preview && system.showEmptyPreviewAreas) ) { $>
	<div id="news">
		<$= system.partial("area.html", "News", 1) $>
	</div>
<$ } $>

Die If-Abfrage bewirkt, dass der Newsbereich nur angezeigt wird, wenn mindestens ein Widget im Bereich vorhanden oder die Einfügen-Ansicht aktivieren ist.


Auf der Seite Navigation anpassen wurde der Newsbereich mit der Navigation getauscht und ist nun auf der linken Seite positioniert. Für das Beispiel soll der Newsbereich ähnlich der Navigation einfach etwas hervorgehoben werden.

1. CSS für den Newsbereich anpassen und erweitern

In der Datei styles.css ist bereits ein CSS-Stil für den Newsbereich vorhanden. Passen Sie das CSS wie folgt an, damit der Bereich deutlicher hervorgehoben wird:

CSS

#news {
	float: left;
	width: 200px;
	margin-right: 40px;
	margin-bottom: 40px;
}
#news .newsbox {
	margin-bottom: 10px;
}
#news h2 {
	margin: 0 0 1px 0;
	padding: 3px 6px;
	font-size: 1.0em;
	color: #ffffff;
	background-color: #45b202;
}
#news .newstext {
	padding: 3px 6px;
	background-color: #f0f0f0;
}

2. 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.

Falls in Ihrem Projekt noch kein Newsbereich dargestellt wird, können Sie wie im Online-Handbuch beschrieben, Inhalte in den leeren Bereich einfügen.

Wie Sie sehen wird der Newsbereich nun optisch etwas hervorgehoben.