# Header & Footer anpassen

**URL:** <https://forum.shopware.com/t/header-amp-footer-anpassen/45146>\
**Category:** Themes & Design\
**Created:** [10. April 2017 um 15:29 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146 "2017-04-10T15:29:38Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [10. April 2017 um 15:29 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/1 "2017-04-10T15:29:38Z")

</div>

Hallo,

ich möchte gern den Header & Footer anpassen. Wenn Ihr mal auf [www.steinemann-shop.de](http://www.steinemann-shop.de) schaut, dann seht Ihr

das z.B. im Footer in der mitte alles weiß ist.

&nbsp;

Mit welchen Formeln / Befehlen kann ich diese in den jeweiligen .less Datein anpassen?

(Ja, habe ein neues Theme angelegt und das ich die jeweilige .less anlegen muss)

&nbsp;

Genau so möchte ich für die Suchleiste, Merkzettel, Mein Konto und Warenkorb jeweils die Hintergundfarbe anpassen sowie den Rahmen (Border).

&nbsp;

Und kann man über die .less Datein auch punktuell die Schriftfarbe ändern?

&nbsp;

Danke Euch schon mal! =)

---

<div class="post-metadata">

**Author:** ![useg](https://avatars.discourse-cdn.com/v4/letter/u/df705f/32.png) [@useg](https://forum.shopware.com/u/useg)\
**Post date:** [10. April 2017 um 18:00 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/2 "2017-04-10T18:00:32Z")

</div>

Schau mal bei shopwareianer vorbei,&nbsp;da hat er es&nbsp;eigentlich auch für Anfänger gut beschrieben.  
[https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen](https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen)

Uwe

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [11. April 2017 um 10:07 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/3 "2017-04-11T10:07:30Z")

</div>

Ok Danke.

Warum kann ich eigentlich FireLESS als PlugIn nicht in Firefox hinzufügen? Also es ist installiert, aktiviert und neugestartet, aber irgendwie kann ich es nicht aufrufen.

---

<div class="post-metadata">

**Author:** ![useg](https://avatars.discourse-cdn.com/v4/letter/u/df705f/32.png) [@useg](https://forum.shopware.com/u/useg)\
**Post date:** [11. April 2017 um 10:32 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/4 "2017-04-11T10:32:44Z")

</div>

Firefox nutze ich schon sehr lange nicht mehr ich habe den Eindruck das es total langsam geworden ist, deshalb Google Chrome mit entsprechenden Plugin.

Uwe

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [21. April 2017 um 13:55 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/5 "2017-04-21T13:55:00Z")

</div>

Ok, habe alle anpassungen soweit gut hinbekommen.

&nbsp;

Das einzige was ich noch nicht habe, ist wie ich das Logo in der Mobil- & Tablet-Version mittig hinbekomme. Auch da habe ich schon viel gelesen und gestöbert und probiert, aber hat noch nichts funktioniert. Hat da noch jemand eine Idee?

&nbsp;

Genau so stört es mich, das gaaaanz unten im Footer " \* Alle Preise inkl. gesetzl. Mehrwertsteuer zzgl. [Versandkosten](http://steinemann-shop.de/versandbedingungen "Versandkosten") und ggf. Nachnahmegebühren, wenn nicht anders beschrieben " der Link “Versandkosten” eine andere Farbe hat als die Links darüber. Jemand eine Idee? =)

---

<div class="post-metadata">

**Author:** ![Momos](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Momos](https://forum.shopware.com/u/Momos)\
**Post date:** [21. April 2017 um 14:44 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/6 "2017-04-21T14:44:11Z")

</div>

In der footer.less die Linkfarbe anpassen

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [21. April 2017 um 15:33 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/7 "2017-04-21T15:33:18Z")

</div>

Habe ich schon, ändert sich nichts ☹

&nbsp;

so schaut meine footer.less aus:

&nbsp;

```
.footer-main {
    
     background: #571234;
     color: #f5f5f5;

.container {
     background: #571234;
     }

.navigation--link {
     color: #f5f5f5;
     }
	 
.footer-minimal{
     color: #f5f5f5;
     }

.column--headline {
     color: #f5f5f5;
     }

}

.footer-main .column--headline::after {
    font-size: 18px;
    font-size: 1.125rem;
    font-family: 'shopware';
    color: #f5f5f5;
    font-weight: 700;
    content: "\e68f";
    float: right;
}

.footer-minimal .footer--service-menu .service--list .service--link {
    padding: 8px 2px 8px 2px;
    padding: .5rem .125rem .5rem .125rem;
    display: inline-block;
	color: #f5f5f5;
    text-decoration: none;
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Momos](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Momos](https://forum.shopware.com/u/Momos)\
**Post date:** [21. April 2017 um 16:31 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/8 "2017-04-21T16:31:49Z")

</div>

hast du sie auch in deine all.less eingebunden?

---

<div class="post-metadata">

**Author:** ![Momos](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@Momos](https://forum.shopware.com/u/Momos)\
**Post date:** [21. April 2017 um 16:41 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/9 "2017-04-21T16:41:08Z")

</div>

Die Farbanweisung musst du für footer–bottom setzen

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [22. April 2017 um 08:53 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/10 "2017-04-22T08:53:30Z")

</div>

Ändert nichts, habe es so eingefügt:

&nbsp;

```
.footer-main {
    
     background: #571234;
     color: #f5f5f5;

.container {
     background: #571234;
     }

.navigation--link {
     color: #f5f5f5;
     }
	 
.footer-minimal{
     color: #f5f5f5;
     }

.column--headline {
     color: #f5f5f5;
     }
	 
.footer--bottom .navigation--link {
     color: #f5f5f5;
     }

}

```

oder auch so:

```
.footer-main {
    
     background: #571234;
     color: #f5f5f5;

.container {
     background: #571234;
     }

.navigation--link {
     color: #f5f5f5;
     }
	 
.footer-minimal{
     color: #f5f5f5;
     }

.column--headline {
     color: #f5f5f5;
     }
	 
.footer--bottom {
     color: #f5f5f5;
     }

}

```

Theme neugeladen, Cache geleert und auch STRG-F5. Ja in all.less ist alles eingefügt …

---

<div class="post-metadata">

**Author:** ![hds](https://avatars.discourse-cdn.com/v4/letter/h/bb73d2/32.png) [@hds](https://forum.shopware.com/u/hds)\
**Post date:** [22. April 2017 um 22:09 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/11 "2017-04-22T22:09:03Z")

</div>

Probier mal so aus

```
.footer-main a {
    color: #deine Farbe;
    text-decoration: none oder ändern wenn gewünscht;
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\
**Post date:** [23. April 2017 um 07:27 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/12 "2017-04-23T07:27:24Z")

</div>

Den zzgl. Versandkostenlink musst du in den Textbausteinen suchen und anpassen. So hatte ich das auch gemacht, wenn ich das jetzt noch richtig im Kopf habe.

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [24. April 2017 um 12:00 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/13 "2017-04-24T12:00:05Z")

</div>

> [@hds schrieb:](https://forum.shopware.com/profile/5430/hds "hds")
> 
> Probier mal so aus
> 
> .footer-main a {  
> color: #deine Farbe;  
> text-decoration: none oder ändern wenn gewünscht;  
> }

&nbsp;

Super - hat geklappt, vielen Dank!.

&nbsp;

Jetzt geht es weiter: wie kann ich das Logo in der Mobile- und Tabletversion so anpassen, das es etwas größer ist und vorallem mittig?

Der Code schaut derzeit so aus:

```
header-main {

    // Logo
    .logo-main {
        .logo--link {
            .unitize-height(800, 300); // Anpassen der Höhe, Angabe in px
        }
        // Smaller logo for mobile viewports
        .logo--shop {
            .unitize-height(800, 300); // Anpassen der Höhe, Angabe in px
        }
    }
}

@media screen and (min-width: @tabletViewportWidth) {
    // View für Tablets und Desktops
    .header-main {
        .logo-main {
            .logo--link {
                .unitize-height(300, 100); // 50 auf eure Höhe anpassen
            }
            .logo--shop {
                .unitize-height(300, 100); // 50 auf eure Höhe anpassen
            }
        }
    }
}

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [26. April 2017 um 15:30 UTC](https://forum.shopware.com/t/header-amp-footer-anpassen/45146/14 "2017-04-26T15:30:16Z")

</div>

\*push\*