Layout Autohaus 5: Zweites Logo für Hauptmenü

Edelbauer

Hallo,

bei folgendem Layout wird das Logo im Header beim Scrollen automatisch nochmals im darunter befindlichen Hauptmenü angezeigt:

https://content.zeta-producer.com/layouts/autohaus-5/index.html

An und für sich ein schöner Effekt.

Frage 1

Unsere Logoschrift ist weiß. Die weiße Hintergrundfarbe des Hauptmenüs ist ebenfalls weiß (was wir so beibehalten möchten).

Somit ist unser Logo im Hauptmenü unsichtbar (weiß/weiß).

Leider bietet diese Vorlage keine Möglichkeit ein weiteres (andersfärbiges) Logo hochzuladen.

Wir würden so etwas in der Art benötigen wie:
Upload Header Logo1: "logo-xl-white.png"

Upload Menü Logo2: "logo-small-black.png"

Besteht die Möglichkeit die Vorlage an dieser Stelle per CSS bzw. via Script für den Upload eines zweiten Logos zu erweitern?

Oder gibt es dafür in Zeta eine spezielle Funktion/Trick?

Frage 2

Wir würden gerne im gelben Header eine rote bottom Line 4px hinzufügen (s. Anhang)?

Wie lässt sich das realisieren? In den Darstellungs- und Layoutoptionen habe ich leider nur Basic Formatierungsparameter gefunden. Viell. über Menü Erweitert -> Attribute?

Falls es sich bei dem gelben Headerblock um einen Divcontainer handelt müsste ich nur wissen wo in Zeta der rote bottom line tag hinzuzufügen wäre.

Danke im Voraus für die Hilfestellung.

elch

Salut Edelbauer

Da ich 'was ähnliches gebastelt habe, hier mein Vorschlag:

Belasse mal "logo-small-black.png" wie es ist.

Erstelle eine neue Grafik "logo-xl-white.png" für den "Header"-Bereich.

Jetzt etwas CSS: Gehe in Zeta-Producer zu "Einstellungen" -> "CSS" und füge folgendes ein ...

CSS

<style>
/* kein Logo in Header */
#webdescription {display: none !important;}
/* end */
</style>

Mit "OK" schliessen.

Dann zu "Einfügen an"

Danach im Banner-Bereich mittels Widget "Bild" "logo-xl-white.png" einfügen.

Gegebenenfalls mit dem Grid-System das Bild in die gewünschte Grösse ziehen und allenfalls zentrieren (Darstellung -> Reihe - zentrieren).

Zum Schluss noch das Bild-Widget öffnen.

"Bei Klick auf Bild" mit der Start-Seite verlinken.

Fertig.

Abstände gegen oben und unten können, wie in jeder (Container-)Reihe auch, angepasst werden mittels "Darstellung".

Den gewünschten roten Balken unten reiche ich noch nach. Sollte einfach sein. Will ich jedoch kurz noch ausprobieren.

Bis bald

elch

elch

...

Ja. Ich habe keine Nebenwirkung festgestellt:

Code mit Linie unten in Rot (-Beispiel).

CSS

<style>
/* kein Logo in Header */
#webdescription {
display: none !important;
}

/* Linie unten */
#banner {
border-bottom: 6px solid #ff0000; /* px und #Farbwerte anpassen */
}
</style>

Alles anzeigen

Gute Zeit und viel Erfolg.

Viele Grüsse

elch

elch

Ach, Ich habe vergessen:

Eventuell musst Du dem Container im Banner-Bereich noch eine Hintergrundfarbe zuteilen (also Dein Orange, bzw. Gelb) und den Container auf "Randlos" stellen.

Und füge "logo-small-black.png" als Logo ein. Dieses erscheint dann nur in der Navigation.

Viele Grüsse

elch

Edelbauer

Hallo elch,

sry für die späte Antwort. Ich hatte viel zu tun.

DANKE für deine Anleitung. Ich habe sie soweit verstanden und 1:1 nachgebaut.

Leider habe ich vergebens versucht drei Probleme zu lösen:

Problemstellung 1: Zwei Bannerreihen - zwei Hintergrundfarben

Wie du in Screen "logo_backend.jpg" sehen kannst, verwenden wir bereits eine Bannerreihe mit Kontaktdaten (auf jeder Seite/Subseite sichtbar).

Also habe ich durch Klick auf das bottom Plussymbol des Kontaktbanners eine weitere Reihe darunter als Typ "Widget" -> "Bild" hinzugefügt.

Das Problem: Wir benötigen zwei Hintergrundfarben.

Bannerreihe1 "Kontaktdaten": Background - weiß (#ffffff)

Bannerreihe2 "logo-xl-white.png": Background - grün (#435744)

Leider läßt sich unter Menü "Darstellung" nur die Spalten-Hintergrundfarbe global festlegen.

Frage 1: Ist es möglich, pro Reihe eine Hintergrundfarbe zu deklarieren?

Problemstellung 2: Kein zentriertes Logo

Wie du in der "logo_frontend.jpg" sehen kannst, wird das Logo nicht zentriert obwohl ich die "Horizontale Spalten-Ausrichtung" nach deiner Vorgabe auf "zentriert" eingestellt habe.
Bin diesbezüglich ratlos. Hast du eine Verdacht bzw. Idee?!

Ferner ist der Container nicht "fullscreen", so wie im orig. Layout. Wäre schöner als der abgegrenzte grüne Balken. (Container auf "randlos" hat leider auch nichts bewirkt)

Frage 2: Lässt sich das in Zeta einstellen? Falls ja, wo und wie?

Problemstellung 3: Verknüpfung auf allen folgenden Seiten funkt. nicht

Wie in "link_backend.jpg" + "link_frontend.jpg" ersichtlich, habe ich die Verknüpfung des grünen Containers auf alle vier weiteren Seiten gelegt.
Leider wird mir der Container nur auf der Startseite korrekt angezeigt. Bei allen anderen Menüs fehlt das Logo und die Kontaktbanner-Reihe wird doppelt angezeigt.
Frage 3: Was mache ich falsch bzw. was habe ich übersehen?

Die gute Nachricht zum Schluss:

Ich habe die "logo-small-black.png" als Logo im Layout eingefügt. Funktioniert einwandfrei (siehe "logo_small black.jpg").

Liebe Grüße

Edelbauer

elch

Salut Edelbauer

Problemstellung 1: Zwei Bannerreihen - zwei Hintergrundfarben

Trenne die Reihen, bzw. die beiden Widgets, indem Du den äusseren (markierte) Button betätigst https://docs.zeta-producer.com/reihen-bearbeiten.html#a4738

Gehe dann in der unteren Reihe auf "Darstellung"

Reihe "Hier beginnt neuer Conatiner

Container "Hintergrundfarbe wählen.

"Randlos" anhaken

Zurück zum oberen Conatiner

Hintergrundfarbe wählen

"Randlos" anhaken

mehr folgt

elch

Problemstellung 2: Kein zentriertes Logo

Auf ausreichende (Original-) Grösse des Bildes achten.
Grafik mit Grid-System zurechtziehen https://docs.zeta-producer.com/das-grid-syste…ehen.html#a3221

Reihe -> Horizontale Spalten-Ausrichtung auf "Zentriert"

Problemstellung 3: Verknüpfung auf allen folgenden Seiten funkt. nicht

Das Verknüpfen der Container funktioniert sicher ...

Viel Erfolg und viele Grüsse

elch

Edelbauer

Hallo elch,

vielen Dank abermals für deine prompten Antworten!

So schnell bin ich leider (noch) nicht

Ich habe deine Ausführungen (danke auch f. d. Links) wiederum relativ erfolgreich umgesetzt und dabei viel gelernt:

Problemstellung 1: Zwei Bannerreihen - zwei Hintergrundfarben

GELÖST

Problemstellung 2: Kein zentriertes Logo

GELÖST

Problemstellung 3: Verknüpfung auf allen folgenden Seiten funkt. nicht

Zitat

Zitat: "Das Verknüpfen der Container funktioniert sicher ..."

Dein Wort in Gottes Ohr. Auf Localhost funkt. es nämlich nach wie vor nicht.

Zwecks Offline Testing wäre dies für mich von großer Hilfe.

Zeta Bug? (Wir benutzen die Exress Version)

Nach aktuellen Stand haben sich noch zwei PS ergeben:

Problemstellung 4: Container individuelle Höhenanpassung

Nachdem Container 1 viel zu hoch war habe ich mich mit den Außenabständen gespielt.

Ich weiß nicht ob dies die richtige Option war. Eigentlich will ich den Container nicht verschieben, sondern beide Höhen verringern. Bevorzugt benutzerdefiniert. Kann man da auch via CSS nachhelfen?

Siehe:

Container 1 - Header.jpg

Container 2 - Logo.jpg

Problemstellung 5: Suche rechtsbündig

Ich habe die Suche im Layout auf Position "Im Menü" (default: unten) gestellt, denn sie gehört praktischerweise in das Menü.

Schöner wäre es wenn sich die Suche in der Menüleiste rechtsbündig platzieren ließe und das Menü linksbündig bleibt (was es ja schon ist).

Lässt sich dies via CSS realisieren?

Siehe:

Frontend 3 - Suche.jpg

Lieben Gruß

Edelbauer

elch

Hallo Edelbauer

Problemstellung 3: Verknüpfung auf allen folgenden Seiten funkt. nicht

Siehe "Container verknüpfen": https://docs.zeta-producer.com/verknuepfungen…egen.html#a6356

Unter Umständen die zuvor geänderten Aussenabstände - des Containers oder der Reihe - zurückstellen/löschen, dann die Verknüpfung erstellen und danach die Aussenabstände wieder wie gewünscht anpassen. (Die im unteren Beispiel visualisierten "Bedienelemente" können durch das Verringern der Aussenabstände mittels Minus-Werte, zumindest im oberen Container ausser Reichweite / ausserhalb der Bedienbarkeit gelangen)

Problemstellung 4: Container individuelle Höhenanpassung

Wahrscheinlich kannst Du mehr bewirken, wenn Du die Aussenabstände der Reihe anpasst?

Problemstellung 5: Suche rechtsbündig
Ohne dies weiter zu "untersuchen": Ich glaube nicht, das dies so einfach geht, da "die Suche im Menü" Teil der Navigation ist und sich nicht so einfach und ohne "Nebenwirkungen punkto Funktion und Dartellung" herauslösen lässt.

Eine gute Zeit.

Viele freundliche Grüsse

elch

Edelbauer

Hallo elch,

aktueller Stand wie folgt:

Problemstellung 3: Verknüpfung auf allen folgenden Seiten funkt. nicht

Außenabstände zurückgesetzt. Beide Container neu verknüpft.

Die Kontaktzeile wird korrekt angezeigt, das Logo ist "unsichtbar", auch im Browser (localhost).

Noch 'ne letzte Idee?

Problemstellung 4: Container individuelle Höhenanpassung

GELÖST

Ich habe es hinbekommen.

Bei der Kontaktzeile: Container -> Außenabstand

Beim Logo: Reihe -> Außenabstand

Problemstellung 5: Suche rechtsbündig
TEILGELÖST

Ich habe versucht ein unsichtbares (ausgeblendetes) Menü zu erstellen welches nicht verknüpft ist um die Suche nach rechts zu "drängen".

Hat natürlich nicht geklappt, da das Menü natürlich nicht angezeigt wird.

Zusätzlich wäre es schön gewesen wenn man das Suchfeld etwas breiter einstellen könnte. Diese Option gibt es im "Layout" leider nicht.

Naja, wir werden wohl damit leben müssen.

Liebe Grüße

Edelbauer

elch

Hallo Edelbauer

Zitat

Problemstellung 3: Verknüpfung auf allen folgenden Seiten funkt. nicht

Es ist wichtig, dass Du jeweils die beiden Container verknüpfst - nicht die Reihe(n)! Nur bei der Verknüpfung der Container werden auch die zugeordneten Hintergrundfarben miteinbezogen.

Vorgängig bestehende Verküpfungen von Reihen (etc.) wieder löschen.

Und noch einen Randbemerkungs-Tipp:

Erstelle vorzugsweise zuerst die Verküpfungen der Container und ändere erst danach beim "Ursprungs-Container" die Aussenabstände der Reihe(!). (siehe Beitrag)

Alles Gute und viele Grüsse

elch

Edelbauer

Hallo elch

Zitat

Problemstellung 3: Verknüpfung auf allen folgenden Seiten funkt. nicht

Sry, du hattest recht. Ich habe übersehen, dass sich im Reihenkontextmenü direkt darunter die Containerverknüpfungen befinden.

Ich bin wie folgt vorgegangen:

1. Reihenverknüpfungen gelöscht

2. Aussenabstände auf default (0, 0) zurückgesetzt

3. Beide Container testweise nur mit Menü "Über uns" verknüpft u. (vorerst) keine Aussenabstände gesetzt

Nun zeigt sich folgendes Bild:

Bei Navigation zu "Über uns" vertauscht Zeta die beiden Container (1. Reihe Logo, 2. Reihe Kontaktzeile) und es taucht ein merkwürdiger "Banner-Bereich" auf.

Was übersehe ich?

elch

Salut Edelbauer

Du bist der Lösung nahe

Während des Verknüpfens des Containers, in welchem sich Dein Logo/Schriftzug befindet, wähle im unteren Auswahlfeld die entsprechende Positionierung.

Der "merkwürdige Banner-Bereich" ist ein "Bedienelement" welches ermöglicht an besagter Stelle weitere, von der Verknüfpung jedoch unabhängige Elemente einzufügen. Dieser "Platzhalter" ist nur auf der Arbeitsfläche sichtbar, jedoch nicht in der Browser-Vorschau und nicht in der veröffentlichten Form.

Viel Erfolg!

Und viele Grüsse

elch

(Nachtrag: Das Bedienfeld/der Platzhalter bleibt bestehen, auch wenn "Einfügen" auf "aus" steht)

Edelbauer

Hallo Elch,

DANKE für den entscheidenden Hinweis die Positionierung während des Verknüpfens des Containers auszuwählen.

Ich habe es hinbekommen.

Die Minuswerte bei den Aussenabständen muss ich noch anpassen. Dies ist eine große Spielerei weil sich die Container ständig verschieben.

Ich habe noch keine kausale Logik erkennen können wie sich die Minuswerte zu den Containern verhalten.

Eine kurze Frage zum Footer-Bereich:

Wir können die "Zusatz-Links" so nicht gebrauchen und wollen eine eigene Fusszeile mit Copyright erstellen.

Deshalb habe ich die Zusatz-Links sowie Copyright über Einstellungen ausgeblendet.

Nun nur Problemstellung:

Im "Footer-Bereich" gibt es nur eine Reihe. Ich kann keine weiteren hinzufügen (die Plussymbole fehlen).

In der "Darstellung" gibt es ebenso keine weiteren Auswahl- bzw. Markierungsmöglichkeiten.

Irgendwie scheint der gesamte Footerbereich quasi "fest" im Layout verankert zu sein.

Wie füge ich im Footerbereich einen Container mit mehreren Reihen ein?

elch

Salut Edelbauer

Stelle "Einfügen" auf "an" (1).

Widgets einfügen. (2)

(Leere Inhaltsbereiche anzeigen)

Bitte eröffne für weitere Fragen ein neues Thema - der Übersicht zuliebe.

Eine gute Zeit. Und viele Grüsse

elch

Edelbauer

Hallo elch,

ich habe unseren Footer über Widgets einfügen nun fertig.

Ein kleines Problemchen mit der Zentrierung besteht jedoch noch:

Ich schaffe es nicht, Container 1 (Logo) zu zentrieren.

Sobald ich die rechte dicke Rahmenlinie zur Grafik ziehe, verkleinert mir Zeta die Grafik und sie ist unscharf.

Irgendwie scheinen die Spaltenabstände des Grids in zu großen Schritten zu springen.

Lässt sich das "schmaler ziehen" der Spalte (Artikel) ein kleineren Schritten einstellen? (siehe roter Pfeil Footer-zentrieren01.jpg)

Bzw. kann man im Widget (Typ "Bild") die Größe des Logos (350x57px) fest angeben? (wie bei Layout -> Logo)

Gruß

Edelbauer

ps: Wie färbe ich eigentlich in einem Artikel einen mailto-link in einer anderen Farbe ein als im globalen Layout hinterlegt?

Edelbauer

Alles selbst gelöst.

Thread kann geschlossen werden.

Layout Autohaus 5: Zweites Logo für Hauptmenü

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?