Header & Footer anpassen

Shopware 5 Themes & Design
1

Hallo,

ich möchte gern den Header & Footer anpassen. Wenn Ihr mal auf www.steinemann-shop.de schaut, dann seht Ihr

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

 

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)

 

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

 

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

 

Danke Euch schon mal! =)

2

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

Uwe

1 „Gefällt mir“
3

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.

4

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

1 „Gefällt mir“
5

Ok, habe alle anpassungen soweit gut hinbekommen.

 

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?

 

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

6

In der footer.less die Linkfarbe anpassen

7

Habe ich schon, ändert sich nichts :frowning:

 

so schaut meine footer.less aus:

 

.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;
}

 

8

hast du sie auch in deine all.less eingebunden?

9

Die Farbanweisung musst du für footer–bottom setzen

1 „Gefällt mir“
10

Ändert nichts, habe es so eingefügt:

 

.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 …

11

Probier mal so aus

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

 

1 „Gefällt mir“
12

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.

1 „Gefällt mir“
13

@hds schrieb:

Probier mal so aus

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

 

Super - hat geklappt, vielen Dank!.

 

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
            }
        }
    }
}

 

14

*push*