Die Experten für Shopware Plugins

Helpcenter

CSS (LESS) & JS Anpassungen

Um das Styling anzupassen gibt es zwei Möglichkeiten, entweder mit CSS oder LESS.

Mehr dazu hier:

https://developers.shopware.com/designers-guide/css-and-js-files-usage/


Kompilieren

Wenn Sie die LESS/Js Dateien in Ihrem Custom Theme mit Grunt kompilieren möchten, müssen Sie Grunt im Bootstrap Theme starten.

Navigieren Sie über das Terminal (Mac) in den Ordner SwfResponsiveTemplate/Themes und führen den Befehl „grunt“ aus.

Beachten Sie, dass Grunt Ihre Dateien nur dann automatisch erfassen werden kann, wenn Ihr Theme Name auf CustomTheme endet. 

Der Unterschied zwischen Grunt und Shopware Backend Compiler ist, dass Grunt bei Änderungen automatisch kompiliert, während das Kompilieren über das Backend selbst angestoßen werden muss. Zudem kann über Grunt nicht der Cache geleert werden, dafür ist die Kompilierung mit Grunt in der Regel deutlich schneller. 


Hilfsklassen

Im Bootstrap Theme gibt es im LESS haben wir sogenannte Hilfsklassen für Abstände generiert, die Sie in Ihren Templates verwenden können und unter frontend/_public/less/_components/spaces.less einsehen können. 

Beispiel:

mbl = margin bottom large = margin-bottom: 20px

mbl-hd = margin bottom large hd = margin-bottom: 20px nur auf HD (768px bis 1023px)

pan = padding all none = padding: 0px

 Zudem gibt es noch die Möglichkeit, den Bootstrap cols mit Klassen im Template, also ohne die equal-height Funktion, die gleiche Höhe zu geben. Diese finden Sie unter frontend/_public/less/_components/columns.less

Responsive Breakpoints

Da mit Shopware 5 insgesamt 5 Breakpoints eingeführt wurden, hat conexco das Bootstrap Framework ebenfalls um einen Breakpoint erweitert.

XS     = 0px         =>     479px

SM     = 480px     =>     767px

HD     = 768px     =>     1023px

MD     = 1024px     =>     1259px

LG     = 1260px     =>     X

Die zugehörigen Variablen werden in frontend/_public/vendors/less/bootstrap/variables.less gesetzt und bauen folgendermaßen auf: @swf-screen-{breakpoint}-{min/max} also z.B. @swf-screen-hd-min

 

Demo

Live Demo gefällig? Unser Demoshop steht für sie bereit.

Zur Demo wechseln

Support

Ihre Frage konnte nicht beantwortet werden? Kein Problem, wir unterstützen Sie gerne.

Support Ticket erstellen