Eigene Less-Dateien

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.

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 Likes

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. 

@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 Like

Kompiliert habe ich es nicht neu. Danke :wink:

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

1 Like

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

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