Logogröße ändern / Farbe + Schriftfarbe im Header ändern

Shopware 5 Themes & Design
1

Hallo!

ich habe ein Anliegen bezüglich der Farbe im Header, Schriftfarbe und der Logogröße.

Kurz vorab: Ich bin kein Programmierer und mit fehlt leider auch die Basis an Wissen für CSS/LESS. Ich habe probiert, mich durch Turtorials durchzukämpfen. Leider nicht mit dem gewünschten Erfolg. Den Footer habe ich irgendwie hinbekommen, aber beim header verzweifle ich.

Ich weiß, dass das für einen Programmierer eine Sache von wenigen Minuten darstellt. Deswegen meine Bitte, ob mir hier jemand den benötigen Code und eine Anleitung zur Verfügung stellen könnte, um diese optischen “Probleme” zu lösen. 

Ich möchte: 

  • die Bereiche im Header und der Navigation (bar) im selben Grauton haben, wie ich es bis jetzt hinbekommen habe ( #404040). 

  • die Schriftfarbe soll bei den grünen Pfeilen (auch in der Top-Bar!) dann weiß sein

  • und das Logo soll etwas größer sein (genaue Größe möchte ich gerne selbst einstellen)

Ich gehe davon aus, dass das ganze dann auch bei der mobilen Ansicht direkt passt. (Dies war leider bei den letzten Stunden online Turtorials nicht der Fall und ich musste alles abbrechen)

Ich bedanke mich schon einmal im Voraus recht herzlich!

2

Bezüglich logogrösse und position gibts einige gute plugins im store.

 

3

Um die Umsetzung dessen was Du möchtest zu beschreiben, würde ein 2tes Wiki entstehen. Nimm das erste: Frontend Guides

 

4

Quick and Dirty…, ohne Gewähr!!! Am besten mal schnell ne eigene CSS Datei einbinden und testen…

.header-main,
.navigation-main,
.top-bar div.container.block-group {
    background: #404040;
}

.content-main,
.footer-main .footer--columns,
.footer-main .footer--bottom {
    background: white;
}

.navigation-main .navigation--link,
.navigation--entry.entry--service.has--drop-down {
    color: white;
}

.logo-main.block-group div.logo--shop.block a.logo--link picture img {
    margin-top: -20px;
    width: 300px !important; /* DEIN GEWÜNSCHTE GRÖSSE? */
    height: auto !important;
}

 

5

Murmeltier, vielen Dank! 

in welche Datei muss ich den code packen? header.less? 

6

Du musst dir am Server erst in deinem eigenen Template, nicht im original Template, die Datei anlegen. An die gleiche Stelle im Ordnerbaum wo die Datei im Original Template auch ist. Header.less scheint zu stimmen, jedoch musst du in der oberen Ordnerstruktur noch den Modulimport als Datei anlegen. Ebenfalls im eigenen Template.

Dann kannst du den Code einfügen.

Hier siehst du mal einen Thread von mir wo ich das genauer beschrieben hatte:

https://forum.shopware.com/discussion/41243/farbe-fuer-header-navileiste-footer-und-background-anpassen-fuer-newbies/

 

Viele Grüße

Matthias

 

1 „Gefällt mir“
7

Danke Matthias! deine Tipps im anderen Thread haben in der Tat geholfen. Diese Dateien hatte ich auch schon einmal alle angelegt. Aber wohl die Reihenfolge vom Code bzw. der Code an sich war mein Problem. 

8

Ich hatte doch geschrieben: Eigene CSS Datei anlegen!

Die kannst Du im Thememanager ganz einfach einbinden:

So musst Du nicht in den LESS Dateien rumfuhrwerken und das lästige Theme kompilieren entfällt somit auch!

LESS ist so unnötig wie ein Kropf, denn nach dem kompilieren kommt sowieso wieder nur CSS raus. Wink

1 „Gefällt mir“
9

Hallo Murmeltier,

Wo muss ich die Datei ablegen ?

Habe schon einige Pfade (css) ausprobiert, aber irgendwie scheints nicht zu klappen.

10

Ich habs über die Konsole gefunden: Die Datei muss ins root.