# Header Darstellung ändern

**URL:** <https://forum.shopware.com/t/header-darstellung-andern/61437>\
**Category:** Themes & Design\
**Created:** [30. August 2019 um 12:31 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437 "2019-08-30T12:31:00Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Siggit](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Siggit](https://forum.shopware.com/u/Siggit)\
**Post date:** [30. August 2019 um 12:31 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/1 "2019-08-30T12:31:00Z")

</div>

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

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/0/015c999a09c78de8054654479f1cc6611611eb85.jpeg)

Ziel

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/4/4200d55216eb1aa744fd94a3b2d972f02ac97ff3.jpeg)

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [30. August 2019 um 12:34 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/2 "2019-08-30T12:34:08Z")

</div>

…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](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/b3785da0cbf2c8566cb535dcf55b2730b5224899.png "Wink")

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [30. August 2019 um 12:42 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/3 "2019-08-30T12:42:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [30. August 2019 um 12:45 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/4 "2019-08-30T12:45:23Z")

</div>

Evtl. nicht ganz, aber da kann man schon ebbis mache… ![Wink](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/wink.png "Wink")

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [30. August 2019 um 12:57 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/5 "2019-08-30T12:57:29Z")

</div>

> - 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?**

---

<div class="post-metadata">

**Author:** ![Siggit](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Siggit](https://forum.shopware.com/u/Siggit)\
**Post date:** [5. September 2019 um 07:36 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/6 "2019-09-05T07:36:38Z")

</div>

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

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/e/efa08a42360adfb226ddcbd19ecc8faf4806a89a.jpeg)

---

<div class="post-metadata">

**Author:** ![msslovi0](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@msslovi0](https://forum.shopware.com/u/msslovi0)\
**Post date:** [5. September 2019 um 09:46 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/7 "2019-09-05T09:46:23Z")

</div>

Empfehle als Einstiegspunkt&nbsp;[https://developers.shopware.com/designers-guide/](https://developers.shopware.com/designers-guide/). Wenn du lieber schaust als liest [https://www.udemy.com/course/shopware-template-training-basic/](https://www.udemy.com/course/shopware-template-training-basic/).

Gruß

Matt

---

<div class="post-metadata">

**Author:** ![Siggit](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Siggit](https://forum.shopware.com/u/Siggit)\
**Post date:** [5. September 2019 um 11:21 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/8 "2019-09-05T11:21:51Z")

</div>

Danke,

gibt den Guide auch auf Deutsch?

&nbsp;

---

<div class="post-metadata">

**Author:** ![msslovi0](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@msslovi0](https://forum.shopware.com/u/msslovi0)\
**Post date:** [5. September 2019 um 11:26 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/9 "2019-09-05T11:26:24Z")

</div>

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

Gruß

Matt

---

<div class="post-metadata">

**Author:** ![Siggit](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Siggit](https://forum.shopware.com/u/Siggit)\
**Post date:** [5. September 2019 um 12:17 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/10 "2019-09-05T12:17:43Z")

</div>

Danke dir.

Werde ich schon noch finden ![Wink](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/b3785da0cbf2c8566cb535dcf55b2730b5224899.png "Wink").

---

<div class="post-metadata">

**Author:** ![Siggit](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Siggit](https://forum.shopware.com/u/Siggit)\
**Post date:** [16. September 2019 um 07:36 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/11 "2019-09-16T07:36:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![msslovi0](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@msslovi0](https://forum.shopware.com/u/msslovi0)\
**Post date:** [16. September 2019 um 08:17 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/12 "2019-09-16T08:17:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Siggit](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Siggit](https://forum.shopware.com/u/Siggit)\
**Post date:** [16. September 2019 um 08:42 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/13 "2019-09-16T08:42:29Z")

</div>

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.

&nbsp;

---

<div class="post-metadata">

**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\
**Post date:** [16. September 2019 um 17:17 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/14 "2019-09-16T17:17:51Z")

</div>

Hallo,

zwei Anmerkungen:

(1). LESS ist kein Smarty, das heißt, man kann keine LESS-Dateien&nbsp;„ü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

---

<div class="post-metadata">

**Author:** ![msslovi0](https://avatars.discourse-cdn.com/v4/letter/m/b2d939/32.png) [@msslovi0](https://forum.shopware.com/u/msslovi0)\
**Post date:** [17. September 2019 um 16:21 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/15 "2019-09-17T16:21:48Z")

</div>

> [@Siggit schrieb:](https://forum.shopware.com/profile/28366/Siggit "Siggit")
> 
> 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/](https://developers.shopware.com/designers-guide/theme-startup-guide/)

Gruß

Matt&nbsp;

---

<div class="post-metadata">

**Author:** ![Siggit](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@Siggit](https://forum.shopware.com/u/Siggit)\
**Post date:** [19. September 2019 um 08:01 UTC](https://forum.shopware.com/t/header-darstellung-andern/61437/16 "2019-09-19T08:01:05Z")

</div>

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.

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/c/c2b61929e025be9ff0b1639055ebd1446ec656b9.jpeg)

Danke dir nochmal.
