Header - Top-bar Farbe ändern

Hallo Leute, ich komme einfach nicht weiter… Ich habe mit ein eigenes Theme angelegt mit entsprechenden less Dateien. Footer und Header habe ich erfolgreich farblich verändert, jedoch hängt es jetzt nur noch an der top-bar. In welcher Datei muss ich konkret die Farbe ändern? header.less oder doch container (habe ich versucht, jedoch keine Änderung). Wenn in header.less, wo genau dort? Habe schon hier im Forum ein paar Beiträge angeschaut. Alles allerdings ohne Erfolg… Hoffe auf Hilfe. Danke vorab =)

https://developers.shopware.com/designe … ource-maps https://developer.chrome.com/devtools

Gibt es eine Möglichkeit diese Funktion auch mit Firefox-Firebug zu aktivieren? Die less-Dateien werden bei mir nur in chrome angezeigt aber leider nicht im firebug…

https://www.google.de/webhp?sourceid=ch … rce%20maps https://hacks.mozilla.org/2014/02/live- … per-tools/

In der Alpha von Firebug 3.0 geht es wohl auch: https://getfirebug.com/releases/firebug/3.0/ Viel Erfolg!

Hallo, danke für die antworten. Diese haben mir allerdings nicht weitergeholfen =( Ich weiss, dass die Datei container.less zu ändern ist laut DevTool… Wenn ich jetzt die Farbe änder, wird aber nicht nur der obere Bereich im Header, sondern gleich der komplette containerBereich (bsw. Hintergrund Artikellisting) mit geändert. Wie kann ich jetzt sagen, dass nur der obere Teil eine andere Farbe haben soll…?

Hallo, um welchen Bereich handelt es sich genau? Kannst du einen Screenshot machen und den Bereich markieren den du meinst? Dann kann ich dir auch genau sagen welchen Code du anpassen musst.

Ich empfehle dir erst einmal HTML+CSS Grundlagen … Wenn .container innerhalb .header liegt, dann darfst du natürlich nicht global .container eine Farbe geben. Ist ja logisch … CSS 1x1. Also wäre es .header { .container { background:red; } } Gebe also nur .container in .header die Hintergrundfarbe Rot.

Hallo, um die Hintergrundfarbe der Top-Bar zu ändern muss diese zweimal hinterlegt/abgeändert werden. Und zwar in der Klasse “top-bar” und in der enthaltenen “container” Klasse, aber eben nur jene container Klasse, welche in der top-bar enthalten ist. Z.b. so in less (korrekte Datei header.less): .top-bar { background: #000; .container{ background: transparent; } } } oder so in CSS: .top-bar, .top-bar .container { background: #000; } Viele Grüße, Steffi

1 Like

Hallo, ein Screenshot von dem Problem wäre auch sehr hilfreich. Dann können wir auch konkreten Code anbieten zur Lösung des Problems :slight_smile:

@steffiiiii schrieb:

Hallo,

um die Hintergrundfarbe der Top-Bar zu ändern muss diese zweimal hinterlegt/abgeändert werden. Und zwar in der Klasse „top-bar“ und in der enthaltenen „container“ Klasse, aber eben nur jene container Klasse, welche in der top-bar enthalten ist.

Z.b. so in less (korrekte Datei header.less):

.top-bar { background: #000; .container{ background: transparent; } } }

So wie oben ändert sich die Farbe für komplette container, und nicht nur für top-bar. Ich habe die Farbe des top-bares wie folgt geändert.

.top-bar { background: #000; }

.container{ background: transparent; }