Suche anpassen

In den Basis-Layouts und dem hier im Beispiel verwendeten Layout ist das Partial searchfield.html enthalten. Dieses Partial ermöglicht über sogenannte named Parameter einige Anpassungen der Darstellung.

Im aktuellen Beispiel soll das Suchfeld einen grafischen Button verwenden. Außerdem soll die Breite und die Position angepasst werden.

1. Grafik für den Suchbutton in Assets-Ordner einfügen

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

2. Suche in der Seitenvorlage anpassen

Fügen Sie in der Seitenvorlage default.html dem Partial searchfield.html die Parameter "useImageButton":true und "buttonImageSrc":"assets/magnifier.png" hinzu.

Markup

<$= system.partial("searchfield.html", { "inlineEditing": false, "useImageButton":true, "buttonImageSrc":"assets/magnifier.png" }) $>

Da für eigene Layouts der Bearbeitungsmodus für das Suchfeld in Zeta Producer nicht benötigt wird, gibt es im Partial searchfield.html einen speziellen Parameter "inlineEditing": false. Der Parameter stellt eine Ausnahme dar und muss nicht zwingend vorhanden sein.

3. CSS für das Suchfeld anpassen

In der Datei styles.css sind bereits CSS-Stile für das Suchfeld vorhanden. Diese müssen Sie wie folgt anpassen:

CSS

#zpsearchform {
	float: right;
	margin-top: 40px;
	margin-bottom: 40px;
}
#zpsearchform input[type=text] {
	float: left;
	margin-right: 5px;
	width: 148px;
	padding: 5px 8px;
	font-size: 1.0em;
	color: #363b43;
	border: 1px solid #cbcbcb;
	-webkit-appearance: none;
}
#zpsearchform input[type=image] {
	width: 28px;
	height: 28px;
	border: 0;
}

4. 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 das Suchfeld mit einem grafischen Button angezeigt. Die Breite des Suchfeld und die Position sind ebenfalls angepasst.