Webname und Slogan anpassen

In Zeta Producer gibt es in den Website-Einstellungen ein Feld für den Website-Name und einen -Slogan. Der Website-Name wird bereits im Layout ausgegeben. Im aktuellen Beispiel soll unterhalb des Website-Name auch ein kleiner Slogan stehen. Des Weiteren soll der Website-Name auch eine zum Logo passende Farbe erhalten.

1. Seitenvorlage anpassen

In der Seitenvorlage default.html ist bereits ein Abschnit für den Website-Name mit dem Attribut-Platzhalter #attribute(web_name) vorhanden. Für die Anzeige eines Slogans fügen Sie einfach den Attribut-Platzhalter #attribute(web_name_slogan) ein.

Markup

<div id="webname">
	<a href="<$= project.url $>">#attribute(web_name)</a>
	<br /><span id="slogan">#attribute(web_name_slogan)</span>
</div>

Attribute sind einfache Name-Werte-Paare, welche unter anderem auch mit Benutzeroptionen verknüpft sind.

2. Slogan in Zeta Producer eingeben

In Zeta Producer können Sie nun über das Menü Website | Einstellungen einen kleinen Slogan eingeben.

Hinweis: Natürlich können Sie anstatt der Attribut-Platzhalter auch direkt den Website-Name und den Slogan in die Seitenvorlage einfügen.

3. CSS für Webname und Slogan anpassen

In der Datei styles.css sind bereits der CSS-Stil #webname für den Website-Name vorhanden. Diesen müssen Sie wie folgt anpassen und einen CSS-Stil #slogan für den Slogan hinzufügen.

CSS

#webname {
	float: left;
	margin-top: 40px;
}
#webname a {
	display: inline-block;
	margin-bottom: 5px;
	font-size: 1.5em;
	color: #45b202;
}
#slogan {
	font-size: 1.2em;
}

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 wird nun der Website-Name mit einer zum Logo passenden Farbe zusammen mit dem Slogan neben dem Logo dargestellt.