Umgestallten der TOP Navigation

Hallo zusammen, habe mal wieder eine Baustelle :slight_smile: Würde gerne meine TOP Navigation etwas Umstylen. Kann mir jemant sagen wo ich die .CSS bzw .LSS dazu finde? Mit Firebug komme ich auch nicht wirklich weiter :frowning: Ich würde diese so änlich machen wollen wie hier bei diesem Shop

Da gibt es Plugins für. Z.B.: http://store.shopware.com/devpr68930095712/topbar.html

[quote=“Tanny”]Da gibt es Plugins für. Z.B.: http://store.shopware.com/devpr68930095712/topbar.html[/quote] Ich meine eigentlich die Hauptnavigation nicht eine Topbar. Sorry habe ich wohl falsch ausgedrückt

Dann guck mal in die _modules/main-navigation.less

Auch dafür gibt’s ein Plugin: http://store.shopware.com/dreisc00829/i … nsive.html Gruß Rolf

Hallo, der gesamte Container ist “.navigation-main” - 100% Bildschirmbreite Da wird die Farbe geändert. Das

  • Element ist .navigation–entry In welcher LESS das steht ist ja relativ egal: im eigenen Theme unter _modules die eigene main-navigation.less erstellen und in der all.less mit @import “_modules/main-navigation” einbinden. Die Ordner / Namesstruktur im eigenen Theme muss nicht eingehalten werden, erleichtert aber die Übersichtlichkeit Beispiel all.less // collecting all less files @import "\_components/navigation"; @import "\_variables/variables"; @import "\_variables/typography"; @import "\_components/storytelling"; @import "\_components/masterpayment"; @import "\_components/payment"; @import "\_modules/instockbadget.less"; @import "\_components/headertext"; @import "\_components/detail"; main-navigation.less /\* changes main navigation colors \*/ .navigation-main { background: #303440; border-bottom: 16px solid @brand-primary; } .navigation-main .navigation--link { color: #FFFFFF ; } Gruß Matthias

ups…doppelpost

Sieht so eigentlich alles richtig aus… Bau in die main-navigation.less mal folgendes ein: .test--less { color: @dasgibtesnicht; } Dann sollte beim kompilieren des Themes ein Fehler kommen, da die Variable nicht definiert ist… (ungetestet). Auch sollte ein Fehler kommen, wenn ein Plugin fehlerhaft ist. Den Fall hatte ich am Samstag im Support für einen Pluginkunden. Da war es dann aber nicht mein Plugin sondern eines zur erweiterten linken Menüleiste in den Kategorien… Hüstel, hüstel… laut Quellcode bist du mit dem Shop noch auf „Responsive“ und nicht auf Theme „Hifibau“… :shock:

ich test nicht im Liveshop sondern in einer Testumgebung. Der in einem geschüztem Verzeichnis liegt. [quote]Hüstel, hüstel… laut Quellcode bist du mit dem Shop noch auf “Responsive” und nicht auf Theme “Hifibau”[/quote] Wenn Du das auf den Liveshop beziehst, im Backend ist aber der HB, als hifibau aktiv [quote]Bau in die main-navigation.less mal folgendes ein: 1 .test–less {#newline# color: @dasgibtesnicht;#newline# }#newline#[/quote] habe ich gemacht, fehler bleibt aber aus. mhhh hier ist der Wurm drin :frowning:

[quote=„hifibau“]Hallo zusammen, habe mal wieder eine Baustelle :slight_smile: Würde gerne meine TOP Navigation etwas Umstylen. Kann mir jemant sagen wo ich die .CSS bzw .LSS dazu finde? Mit Firebug komme ich auch nicht wirklich weiter :frowning: Ich würde diese so änlich machen wollen wie hier bei diesem Shop[/quote] Hallo Josef, ich habe mal das ganze auf deiner Seite durchgespielt und es müssten folgende Eintrage geändert werden. .navigation-main .js--menu-scroller--list {background: #000;} @media screen and (min-width: 48em) .navigation-main .navigation--link { background: #000; border-right: 1px solid #FFF; color: #FFF;} Die Farben musst du dir natürlich anpassen und gegebenenfalls die Radien auf null setzen. dann Schau noch mal hier https://developers.shopware.com/designe … ource-maps Wenn du das in deinem Testshop machst bekommst du mit Firebug die genaue less-Datei angezeigt in der der Eintrag zu finden ist und so siehst du auch ob die Less geladen wird.

[quote].navigation-main .js–menu-scroller–list {background: #000;} @media screen and (min-width: 48em) .navigation-main .navigation–link { background: #000; border-right: 1px solid #FFF; color: #FFF;}[/quote] und das kommt dann in meine „main-navigation.less“ ist das korrekt ?

Ja, genau. Aber eigentlich sollte die 48em durch @tabletViewportWidth ersetzt werden.

[quote=“hifibau”][quote].navigation-main .js–menu-scroller–list {background: #000;} @media screen and (min-width: 48em) .navigation-main .navigation–link { background: #000; border-right: 1px solid #FFF; color: #FFF;}[/quote] und das kommt dann in meine “main-navigation.less” ist das korrekt ?[/quote] Ist eigentlich egal in welcher less das steht, aber von der Übersichtlichkeit ist die main-navigation.less schon die richtige. Ich habe mir jetzt angewöhnt dahinter noch mein Kürzel zu schreiben, also in deinem Fall main-navigation-hb.less und diese dann in die all.less so eingebunden dann sehe ich besser ob meine less auch geladen wird. all.less @import "\_modules/main-navigation-hb"; [quote=“bluewolf”]Ja, genau. Aber eigentlich sollte die 48em durch @tabletViewportWidth ersetzt werden.[/quote] ja Matthias, da hast du recht hatte es nur bei Firebug rauskopiert.

habe ich eingebaut…leider auch hier keine änderung am Navigation :frowning: Ist der pfad der main-navigation.less korrekt? [quote]/themes/Frontend/Hifibau/frontend/_public/src/less/_modules[/quote] und die all.less liegt hier [quote]/themes/Frontend/Hifibau/frontend/_public/src/less[/quote]

[quote=„hifibau“]habe ich eingebaut…leider auch hier keine änderung am Navigation :frowning: Ist der pfad der main-navigation.less korrekt? [quote]/themes/Frontend/Hifibau/frontend/_public/src/less/_modules[/quote] und die all.less liegt hier [quote]/themes/Frontend/Hifibau/frontend/_public/src/less[/quote][/quote] Die Pfade sind eigentlich korrekt. dann Schau noch mal hier https://developers.shopware.com/designe … ource-maps Wenn du das in deinem Testshop machst bekommst du mit Firebug die genaue less-Datei angezeigt in der der Eintrag zu finden ist und so siehst du auch ob die Less geladen wird.

Von hier sieht das alles richtig aus. Ansonsten FTP / Backend via PM zum nachschauen :wink: Gruß Matthias

Schreibrechte gesetzt? Wenn ich eine Datei anlege und die abspeichere, muss ich anschließend die Dateiberechtigung setzen. Danach Themecache löschen und dann klappt das auch. :wink:

Hallo Petra, ja die Schreibrechte sind gesetzt. @Matthias Du hast Post @Uwe so sieht das bei mir in Firebug aus