Logo im Vordergrund

[nikezzz]

Hallo,

ich habe erfolgreich das Eclipse X mit Contao 4.9 installiert und schon einige Anpassungen im Theme Designer vorgenommen.

Bei der Platzierung des Logos habe ich ein kleines Problem:


Ich habe das Logo mit dem Theme Designer hochgeladen und es wird auch angezeigt. Allerdings wird das Logo von der TopBar und dem Slider verdeckt/beschnitten.


Wie kann ich das Logo in den Vordergrund stellen, damit es nicht verdeckt wird sondern die anderen Elemente verdeckt?

Zur Referenz: http://eclipse.columbus-verlag.de/de


Vielen Dank schon Mal im Voraus

[Tim]

Hi,
ergänze mal in der customize.css (files/cto_layout/css/customize.css)

 [COLOR=#333333][FONT=Monaco][SIZE=11px] .header .mainmenu li.float_left.floatbox, .header .mainmenu li.float_right.floatbox {[COLOR=#0045aa]line-height[/COLOR]:[COLOR=#5d8f00]inherit[/COLOR];}
 [/SIZE][/FONT][/COLOR]

Dann wächste die Höhe mit dem Logo mi

[nikezzz]

Hi,

Danke, habe ich gerade gemacht. Wird auch größer allerdings nur geringfügig - also nicht groß genug. Siehe Link oben.


Wobei das eigentlich nicht das ist, was mir vorgegeben ist.
Vorgabe ist: Das Logo soll im Vordergrund über Topbar und dem Slider stehen.

Muss man das Logo vielleicht woanders einbinden um das erreichen zu können?

[Tim]

Die Größe wird nun durch die Größe des Logos definiert (einstellbar im ThemeDesigner).

Das Logo soll quasi als erstes Element in der Seite sein? Dafür muss das Logo aus dem Kopfbereich in den body Top-Bereich wandern und die Elemente darin nach unten verschieben.

[nikezzz]

Verstehe. Wenn ich das Logo in den Top Bereich setzen will, wo füge ich das Logo dann am Besten ein?
Als Frontend Modul im Theme oder in der .css Datei des Themedesigners oder ganz woanders?

[Tim]

Die Position des Frontend Moduls in den Seitenlayouts. Daraufhin muss ggf. eigenständig das CSS entsprechend angepasst werden nach den eigenen Wünschen.

[nikezzz]

Alles klar, das Logo habe ich jetzt soweit im Top-Bereich drin. In welcher CSS Datei definiere ich jetzt am Besten die Positionierung und Skalierung?

[Tim]

Nutze dafür die mitgelieferte customize.css (files/cto_layout/css/customize.css). Diese gilt als updatesicher und wird als letzte CSS-Datei eingebunden.

[nikezzz]

So, das hat jetzt soweit geklappt mit dem stylen. Leider funktioniert nun jetzt das MMenu im Header nicht mehr bzw. lässt sich nicht mehr anklicken und auswählen.
Ich vermute Mal weil das Logo davor sitzt? Kann ich hier irgendetwas definieren, was das MMenu wieder normal funktionieren lässt?

[Tim]

Definiere das display block für die Suche nicht via !important sondern wie vorher als MediaQuery, damit es in der Mobilen Ansicht ausgeblendet ist und den Schalter für das Menü nicht überlagert.

[nikezzz]

Oh bei Mobiler Ansicht war ich noch gar nicht. Aber Danke habe es gleich gefixt.

Nein mein Problem ist in der Desktop Ansicht (Bild anbei): Ich habe hier das Logo wie oben beschrieben in der Topbar jetzt korrekt platziert, sodass es eben über dem Header noch zu sehen ist. Leider funktioniert aber hier nun nicht mehr das MMenu, heißt ich kann die Menüpunkte Globen, Kartenbilder, etc. nicht anwählen und die Untermenüs gehen auch nicht auf.

Was kann ich hier machen, damit das trotz dem Logo in dieser Position funktioniert?
(Momentan ist das Logo so nur in der Home Seite eingebunden, soll später aber natürlich auch bei den anderen Seitenlayouts so gemacht werden.)

[Tim]

Das wird so nicht funktionieren (auch nicht mit z-index!). Das Logo darf nun nicht mehr im Laoyutbereich top_section liegen, weil es damit diesen Bereich aufbläht und der Bereich das Menü überlagert. Das Logo muss in den Seitenlayouts in den Kopfbereich wandern und darin neu positioniert werden.

[nikezzz]

D.h. also ich kann das ganze nicht in der Topbar lassen, da sonst das MMenu nicht mehr funktioniert.
Ich kann aber auch nicht das Logo im Headerbereich so positionieren, dass es aussieht wie auf dem Bild oben, da das Logo im Headerbereich sich dann immer hinter der Topbar versteckt.

Das einzige was ich machen kann, ist das Logo zu splitten und den Text-Teil in die Topbar zu setzen und den Bildteil in den Header. Hab ich das so richtig verstanden oder noch etwas übersehen?

[Tim]

Schau dir das mal selbst in der Entwickler-Konsole von Chrome an. Dann siehst du wie das Logo den Top-Beriech aufbläht und damit alles überdeckt, was darunter liegt.
Setzt du den Menü-Bereich per z-index über den Top-Bereich wird die weisse Fläche das Logo überlagern.

Das Logo muss also im gleichen Bereich liegen wie die Navi und darin absolut positioniert werden.

Logo splitten wird ebenfalls unsauber, weil die obere Kante des Logos hinausragt.

[nikezzz]

Ok verstanden, habe ich jetzt so umgesetzt - sieht soweit gut aus. Danke :-)

Jetzt habe ich nur noch 2 Probleme:

1. Der Language Switcher ist jetzt natürlich unter dem Header - kann ich hier diesen wieder nach vorne bringen oder ggfs. ander darstellen? (Quer z.B.?)
2. Beim hovern über das Menü, verdeckt das Menü das Logo. Gibt es hier eine Möglichkeit das Logo immer an vorderster Stelle darstellen zu können?