Header Darstellung ändern

Hallo,

ich verwende das Responsive Design und möchte das Theme so anpassen, daß ich anstelle des Logos ein Bild mit dem Logo verwende welches einen größeren Teil des Header ausfüllen soll.

Die Suche möchte ich unter der Top Navigation platzieren. CSS Source Map ist bereits aktiviert und ich habe auch schon Änderungen an den Less Dateien vorgenommen.

Ich möchte ebenfalls noch den Hintergrund und die Schriftfarben anpassen wie im Bild 2 (nicht mehr weiß sondern ein grau und passende Schriftfarbe), den Hintergrund des Inhaltes sowie des Footer Bereiches anpassen.

Danke

Ausgangssituation

Ziel

…ja dann binde doch mal Dein Logo im Thememanager in dieser Größe ein! Dann noch ein wenig CSS und Du bis da, wo Du hin willst… Wink

Ohje, da muss auch das Suchfeld umgebaut werden. Da wird mit nur CSS nicht reichen :slight_smile:

Evtl. nicht ganz, aber da kann man schon ebbis mache… Wink

  • möchte das Theme so anpassen
  • Suche möchte ich unter der Top Navigation platzieren
  • möchte ebenfalls noch den Hintergrund und die Schriftfarben anpassen

Das ist ja alles schön und gut, aber was ist jetzt die Frage? Oder sollen jetzt die Forum-Leser das übernehmen?

Wo ist aktuell das Problem?

Hallo,

Danke für die Antworten. Habe mich wahrscheinlich nicht korrekt ausgedrückt was ich machen möchte.

ich versuche das Theme so ähnlich umzubauen wie im Bild zu sehen ist. Einen Teil kann ich in der Farbkonfiguration des Themes anpassen und den Rest über Less Datein.Die Position des Suchfeldes (div) muss ich sicherlich erst mal über ein tpl verändern und dann über .less steuern.

  1. wie bekomme ich das Suuchfeld an diese Postition

  2. Den body bg habe ich schon eingestellt mir geht es um die Anpassungen wie im Bild zu sehen.

  • Hintergrundfarbe / Schriftfarbe Header (Footer soll die selben Farben haben wie der Header)
  • Farbe und Hintergrund aktive Seite
  • Hintergrund Content + Rahmen Content

Danke

Empfehle als Einstiegspunkt https://developers.shopware.com/designers-guide/. Wenn du lieber schaust als liest https://www.udemy.com/course/shopware-template-training-basic/.

Gruß

Matt

1 „Gefällt mir“

Danke,

gibt den Guide auch auf Deutsch?

 

Ich befürchte nicht. Das Video gibt es aber auf Deutsch und Englisch.

Gruß

Matt

1 „Gefällt mir“

Danke dir.

Werde ich schon noch finden Wink.

Hallo,

habe jetzt eine Lösung gefunden, die leider so nicht funktioniert, da die Einstellungen nicht ins Frontend übernommen werden.

Habe es erstmal mit dem Footer getestet.

ich habe in meinem Theme (habe das auch im Responsive direkt probiert) folgendes gemacht.

Bei den Themes im Theme Manager habe ich CSS Source Map erstellen aktiviert.

dann im /themes/Frontend/Mein-Theme/frontend/_public/src/less/ eine all.less erstellt

@import "_modules/footer";

dann im /themes/Frontend/Mein-Theme/frontend/_public/src/less/_modules/ eine footer.less erstellt (zum Testen Hintergrund schwarz)

.footer-main {
background: #000;
}

es wird weiterhin die footer.less aus dem Responsive geladen. Ändere ich dort den Wert von #FFF auf #000 wird dieser ebenfalls nicht ins Frontend übernommen.

Den Cache habe ich auch geleert und Firefox und Edge getestet.

Hat jemand eine Idee wie ich da weiter komme, daß es ins Frontend übernommen wird.

Theme neu kompiliert hast du auch?

Normalerweise kommt in die all.less zunächst der Import für modules.less im gleichen Verzeichnis:

@import "modules";

und in diese dann erst der Import der einzelnen Module. Möglicherweise macht das einen Unterschied, hab’s nicht ausprobiert.

@import "_modules/footer";

Gruß

Matt

1 „Gefällt mir“

Danke hat so erstmal geklappt. das steht jetzt in der all.less

@import "modules";
@import "_modules/footer";

ich habe die modules.less aus dem Responsive Theme in das Verzeichnis kopiert in dem die all.less liegt.

Vielleicht hast du noch einen Tipp wie ich das Suchformular unterhalb der Top Navigation platzieren kann.

 

Hallo,

zwei Anmerkungen:

(1). LESS ist kein Smarty, das heißt, man kann keine LESS-Dateien „überschreiben“ oder ähnliches, alle LESS-Dateien und dessen Code aus dem Responsive Theme werden also auch immer mit geladen.

(2). Das dümmste, was man machen kann, ist etwas 1 zu 1 aus dem Responsive- oder Bare-Theme zu kopieren. Warum? Na weil es ja durch die Shopware Vererbung automatisch schon da ist und man somit doppelten Code erzeugt oder Blöcke dauerhaft überschreibt und somit auch mögliche Änderungen von Shopware in diesen.

Grüße

Sebastian

@Siggit schrieb:

Vielleicht hast du noch einen Tipp wie ich das Suchformular unterhalb der Top Navigation platzieren kann.

Das ist ne größere Operation. Am besten hier beginnen:

https://developers.shopware.com/designers-guide/theme-startup-guide/

Gruß

Matt 

1 „Gefällt mir“

Hallo.

Habe es jetzt so hinbekommen, die Mobile Ansicht passt auch.

habe mir nur die Less Dateien angepasst die ich brauche und nur die Code Zeilen eingefügt die ich brauche.

Danke dir nochmal.