Eigene Less-Dateien

Shopware 5 Themes & Design
1

Ich möchte ein paar Änderungen am Design vornehmen. Dafür werden vor allem eigene CSS-Klassen erstellt.

Wie sollte ich jetzt genau vorgehen? Stimmt meine Vorgehensweise?

  1. Die all.less vom Parent-Theme rüber kopieren
  2. LESS-Datei wie z.B. eigene.less erstellen
  3. In die neue all.less per @import-Regel meine eigene.less einfügen
  4. Alle neuen CSS-Regeln in die eigene.less einfügen

Falls nicht, würde ich mich über eure Unterstützung freuen.

2

Hallo,

der empfohlene Weg wäre beispielsweise hier zu finden: Example: Custom listing page im Bereich " Styling".

Prinzipiell musst du nur innerhalb deines eigenen Themes:

  1. im Pfad „themes\Frontend\ DEIN_THEME \frontend_public\src\less“ die Datei " all.less" anlegen

  2. Diese Datei " all.less" bspw. mit dem Inhalt füllen:

    @import ‚styles‘;

  3. im Pfad „themes\Frontend\DEIN_THEME\frontend_public\src\less“ die Datei " styles.less" anlegen

  4. Die Datei styles.less mit den entsprechenden CSS-/LESS-Anweisungen füllen.

Beste Grüße

Sebastian

2 „Gefällt mir“
3

Vielen Dank für deine Antwort. Dann bin ich gar nicht so falsch gelegen.

LESS ist für mich neu. Ich kann doch dann in meine eigene LESS-Datei einfach auch eine CSS-Anweisung einfügen, oder?

h1 {
border-bottom: 1px solid #eee;
}

Habe das eben getestet. Aber irgendwie wird nichts am Design verändert. 

4

@stebdesigner schrieb:

Habe das eben getestet. Aber irgendwie wird nichts am Design verändert. 

Cache gelöscht und Themes neu kompiliert?

Hier noch paar Informationen zu Less, hat mir zum Anfang sehr geholfen. > http://www.lesscss.de

Gruß Uwe

1 „Gefällt mir“
5

Kompiliert habe ich es nicht neu. Danke :wink:

6

Schau mal hier: https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen

1 „Gefällt mir“
7

Hallo,

du kannst dich auch für einen Beitrag bedanken Wink.

Ja klar kannst du in einer LESS-Datei auch CSS-Anweisungen schreiben - schlussendlich werden die LESS-Anweisungen ja auch in CSS umgewandelt. Die Anweisung:

h1 {
     border-bottom: 1px solid #eee;
}

ist natürlich auch sehr „niedrig priorisiert“ - das heisst, wenn die h1 beispielsweise alle eine CSS-Klasse haben und der CSS-Klasse in der Basis-Shopware-CSS-Datei die Eigenschaft schon zugewiesen ist, wird natürlich diese verwendet und deine ist zu „niedrig priorisiert“. Alternativ hilft sicher auch erstmal ein Löschen des Caches.

Beste Grüße

Sebastian

8

Ich sag trotzdem auch so nochmal Danke  Wink

Jetzt funktioniert alles. Das mit der h1-Überschrift war nur ein kurzes Beispiel. Genau genommen hab ich die Klasse  .custom-page–content .custom-page–tab-headline genommen.

Viele Grüße

Stefan