Gradient als Hintergrund im Header und Footer verwenden (gelöst)

Shopware 6 (German) Themes & Design
1

Hallo,

ich mochte den Hinttergrund des Headers und Footers als Farbverlauf der in die Hintergrundfarbe des Bodys übergeht anpassen.

Body

Background = #333

der Verlauf soll in #333 enden.

Hier mal ein Muster Code

background: rgba(0,51,50,1);
background: -moz-linear-gradient(left, rgba(0,51,50,1) 0%, rgba(1,56,235,1) 10%, rgba(1,56,235,1) 50%, rgba(1,56,235,1) 99%, rgba(1,56,235,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,51,50,1)), color-stop(10%, rgba(1,56,235,1)), color-stop(50%, rgba(1,56,235,1)), color-stop(99%, rgba(1,56,235,1)), color-stop(100%, rgba(1,56,235,1)));
background: -webkit-linear-gradient(left, rgba(0,51,50,1) 0%, rgba(1,56,235,1) 10%, rgba(1,56,235,1) 50%, rgba(1,56,235,1) 99%, rgba(1,56,235,1) 100%);
background: -o-linear-gradient(left, rgba(0,51,50,1) 0%, rgba(1,56,235,1) 10%, rgba(1,56,235,1) 50%, rgba(1,56,235,1) 99%, rgba(1,56,235,1) 100%);
background: -ms-linear-gradient(left, rgba(0,51,50,1) 0%, rgba(1,56,235,1) 10%, rgba(1,56,235,1) 50%, rgba(1,56,235,1) 99%, rgba(1,56,235,1) 100%);
background: linear-gradient(to right, rgba(0,51,50,1) 0%, rgba(1,56,235,1) 10%, rgba(1,56,235,1) 50%, rgba(1,56,235,1) 99%, rgba(1,56,235,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003332', endColorstr='#0138eb', GradientType=1 );

ich finde einfach keinen Ansatzpunkt wo ich ansetzen kann, ich habe das Theme vom Standard Theme bereits abgelitet, in SW 5 waren die Themes leicht zu finden.

Muss ich in twig, js oder php eingreifen, wo kann ich die Dateien finden. Ich denke mal ich muss in Vendor suchen. Arbeite derzeit mit Filezilla und da gibt es keine Textinhalt suche, sonst hätte ich schonmal versucht Codeschnipsel zu finden.

Änderungen die bspw. mit dem Webentwickler Tool von Firefox mache werden ja ausgegeben, es macht aber keinen Sinn in die all.css einzugreifen, weil die ja im Cache liegt.

 

Danke

2

Moin Siggit,

Die Custom-Themes werden als Plugins entwickelt. Du müsstest quasi auf per ssh-Konsole in deinem Shopware-Installation-Root-Verzeichnis bin/console theme:create ausführen. Dadurch wird ein Theme-Plugin in custom/plugins erstellt.

Dort findest du unter src/Resources/app/storefront/src/scss die Datei override.scss. Dort solltest du den Background anpassen können.

Nicht vergessen das Theme auch zuzuweisen.

 

Storefront erweitern:

https://docs.shopware.com/en/shopware-platform-dev-en/how-to/extending-storefront-block

Custom CSS/SCSS

https://docs.shopware.com/en/shopware-platform-dev-en/how-to/storefront-assets

(Das alles stimmt, wenn ich die Doku richtig verstanden habe)

 

Gruß evo

1 „Gefällt mir“
3

Danke werde ich probieren.

4

Hallo,

 

ich komme nicht weiter, habe mir putty installiert um per SSH auf den Server zugreifen zu können. Klappt soweit.

Das Problem ist wenn ich den Befehl

bin/console theme:create

ausführe kommt sofort eine Fehlermeldung  No such file or directory, es scheint als ob der Befehl create nicht vorhanden ist oder das Verzeichnis nicht gefunden wird.

Habe es auch so probiert,

php bin/console theme:create

Beispiel Commandozeile: (uiserver):u123456789:~$

Ich hätte da eher einen Syntaxfehler vermutet.

Der Webspace liegt bei IONOS.

Danke

 

5

Habe jetzt erstmal den Support kontaktiert, ich vermute es liegt an den Servereinstellungen.

6

reicht wenn du ins Verzeichnis deiner Shopware-Installation wechselst und bin/console theme:create ausführst (ohne php am Anfang).

Wenn du dann allerdings einen Fehler bekommst, hast du ein Rechteproblem um auf die Daten zuzugreifen.

1 „Gefällt mir“
7

Hallo,

danke für deine Antwort, ich bekomme zwar einen Fehler ausgegeben, es ist aber ein Syntax Fehler.

Bin ins Root Verszeichnis gewechselt.

Habe es so probiert

bin/console theme create

bin/console theme:create

Es kommt bei beiden ein Syntaxfehler.

Parse error: syntax error, unexpected T_STRING, expecting T_CONSTANT_ENCAPSED_STRING or '(' in /homepages/XX/dXXXXXX/htdocs/mein-Verzeichnis/bin/console on line 4

In Zeile 4 der console steht

use PackageVersions\Versions;

Was mach ich da noch falsch?

Danke

 

8

Hallo,

habe jetzt noch ein paar interessante Sachen gefunden, führt leider auch nicht zum Erfolg.

etwas älter

Habe jetzt auch nochmal den Support von IONOS kontaktiert, wenn keiner eine Lösung hat muss ich vielleicht zurück zu Shopware 5, da ich das Theme nur sehr begrenzt anpassen kann.

Auf dem Server läuft PHP 7.3.1.6. auch mit php7316 bin/console theme:create ging es nicht.

Danke

 

9

Hier die Lösung bei IONOS

Console starten und auf dem Server anmelden

dann falls die Dateien des Shops nicht  liegen bspw. mit cd mein-shop ins Shopverzeichnis wechseln

dann wird der absolute Pfad zum Webspace benötigt diesen findet man im Kundencenter unter Webhosting und dann unter Webspace nutzen

Ordner auswählen und dann oben auf Pfad klicken, das ist der absolute Pfad zum Webspace

danach in der console bspw.(je nach php Version)

/usr/bin/php7.3-cli /kunden/homepages/XX/dXXXXXXXXX/htdocs/mein-shop/bin/console theme:create

Them Namen vergeben Bsp: MeinTheme besser ist vor den Namen noch einen Prefix zu setzen Bsp. ShoMeinTheme (bitte Vorgaben beachten erlaubte Zeichen)

ausführen es wird ein Theme Verzeichnis im Verzeichnis /custom/plugins/ angelegt

als nächstes muss das Theme noch installiert und aktiviert werden, das kann im Admin gemacht werden oder geich über die Console

/usr/bin/php7.3-cli /kunden/homepages/XX/dXXXXXXXXX/htdocs/mein-shop/bin/console plugin:install --activate

noch den cache leeren

usr/bin/php7.3-cli /kunden/homepages/XX/dXXXXXXXXX/htdocs/mein-shop/bin/console cache:clear

Falls das nicht klappt, kann der Rest im admin unter Einstellungen\Plugins\meine Plugins installiert und aktiviert werden

den Rest der Einrichtung kann man hier nachlesen: