Ein eigenes Logo einfügen

Wenn Sie ein eigenes Layout für sich oder einen Kunden erstellen, dann möchten Sie vermutlich auch ein passendes Logo verwenden. Dazu müssen Sie die Logo-Datei in den Ordner assets des Layouts kopieren und die Seitenvorlage default.html, sowie ggf. die CSS-Datei styles.css anpassen.

Nachfolgend wird das Vorgehen hierfür beipielhaft erklärt.

1. Logo in Assets-Ordner einfügen

Speichern Sie die nachfolgende Logo-Grafik mein-logo.png via Rechtsklick und fügen diese in den Assets-Ordner \Mein eigenes Layout\assets ein.

2. Seitenvorlage anpassen

In der Seitenvorlage default.html ist bereits ein Logo-Abschnitt vorhanden. Damit das neue Logo richtig referenziert wird, muss der Dateiname des Logos angepasst werden. Ändern Sie im <img>-tag den Dateiname in mein-logo.png um.

Markup

<div id="logo">
	<a href="<$= project.url $>"><img src="<$= page.pathToRoot $>assets/mein-logo.png" alt="<$= project.url $>" /></a>
</div>

Der Platzhalter <$= project.url $> wird beim Rendern der Seite in Zeta Producer mit der öffentlichen Web-Adresse ersetzt, welche Sie in der FTP-Konfiguration angegeben haben. Der Platzhalter <$= page.pathToRoot $> wird durch den relative Pfad der Seite zum Stammordner der Website ersetzt.

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 das neu eingefügte Logo auf der Website angezeigt.