css-Dateien - Wo?!

Wo verstecken sich denn in SW5-Responsive die css-Dateien? Ich finde unter ‚/themes/Frontend/Responsive/‘ gar keinen css-Ordner. Wo sind die?

Es gibt keine. Anstatt reines CSS wird jetzt LESS verwendet. Steht auch alles im Theme Startup Guide.

Also ich steig da jetzt nicht mehr durch! Hat jetzt mit dem Update, Artikelbilder, usw. alles wunderbar geklappt. Doch jetzt sollte ich einfach diverse Einstellungen im Layout machen und sollte dazu ein eigenes Theme haben um meine eigenen Dateien und Layouts anzupassen. In der SW4 hat man einfach ein Template kopiert und auf Basis dessen seine Änderungen gemacht. Im Theme-Manager habe ich jetzt ein eigenes Theme auf Basis des Responsive erstellt. Aber das war’s auch schon. Ich weiß jetzt einfach nicht, wie ich die gewünschten Dateien in mein Theme bekomme und vor allem wohin. Wenn ich mit dem Firebug meine Seiten kontrolliere, erscheint immer ein css-Pfad. Ich kann diesen aber nirgends entdecken, sondern nur less-Pfade. Mit der genannten Anleitung in Englisch steige ich auch nicht so recht durch, aufgrund dessen ich so meine Schwierigkeiten habe. Kann mir jemand helfen, wenigstens zu erklären, wie ich anfangen muß mit dem erstellen eigener Layouts und Dateien? Wenn ich das erfahren würde, könnte ich auch weiter machen. Bitte dringen um Hilfe.

Schau mal hier habe ich bspw. erklärt, wie man bspw. das Suchfeld heraus nimmt. Das sollte dir eigentlich weiter helfen. Du musst dich aber natürlich schon selbst mit LESS & Co einmal auseinander setzen. Bzgl. deiner Englisch Kentnisse: Es gibt auch Google Translate, welches die Seite übersetzt: https://translate.google.com/translate? … p-guide%2F Zwar nicht perfekt, aber zumindest sollte man mit ein wenig Verständnis und Eigeniniative den Inhalt verstehen.

Danke! Hat mir jetzt schon sehr viel weitergeholfen. Wie mache ich es jetzt mit dem Kopieren der Less-Dateien? Wohin?

… Man kann dir nicht jeden Schritt abnehmen, schaue doch bitte auch einmal ein wenig selbst. Dieser Artikel sollte dir weiterhelfen.

Danke! Jetzt hat es ‘Klick’ gemacht. Hast Du es gehört?! Man muß mir nicht jeden Schritt abnehmen. Ich brauchte nur den richtigen Ansatz, damit ich weiß wo es lang geht. Entschuldige bitte die Fragerei, aber ich konnte den Ansatz anders nicht finden.

Wenn es jetzt klappt, prima. Du musst dich auch nicht für die Fragerei entschuldigen, dafür ist ein Forum ja da. Dennoch denke ich, dass man hier und da auch einfach mal selbst schauen sollte wie man weiter kommt. Sonst wäre das “Programmieren” oder eher die Anpassung ja total langweilig nicht wahr ? :x

Noch eine kleine Frage habe ich. Ich versuche nun schon die ganze Zeit, auf der Artikeldetailsseite den Abstand zwischen ‘Artikel-Nr.:’ und der angezeigten Nummer zu verkleinern. Habe hierzu die ‘/staging/themes/Frontend/MeinTheme/frontend/_public/src/less/_modules/detail.less’ vom ResponsiveTheme hineinkopiert und folgende Änderung gemacht: [quote] // Product base information .product–base-info { .unitize-margin(10, 0); .unitize(font-size, 14); .entry–label { .unitize-margin(0, [color=red]2[/color], 0, 0); width: 35%; display: inline-block; } }[/quote] In der ‘/staging/themes/Frontend/MeinTheme/frontend/_public/src/less/_modules/all.less’ habe ich auf ‘@import “modules/detail”;’ verwiesen. Es funktioniert aber nicht. Was mache ich denn falsch?

Cache geleert ? Schau es dir am besten mit den Entwicklertools im Chrome an oder Firebug in Firefox. Es kann gut sein, dass du hier auch noch den entsprechenden Viewport angeben musst. *EDIT* Ja wenn du dir das ganze einmal in den Entwicklertools anschaust: @media screen and (min-width: 48em) .product--details .product--base-info .entry--label { margin: 0px 8px 0px 0px; margin: 0rem .5rem 0rem 0rem; } Richtig wäre also: .product--details { .product--base-info { .entry--label { width:20%; } } } @media screen and(min-width: @tabletViewportWidth) { .product--details { .product--base-info { .entry--label { .unitize-margin(0, 2, 0, 0); } } } } Und ggf. für andere Viewports natürlich auch. Und die all.less kommt nicht in den _modules Ordner sondern direkt im Root vom less Ordner. themes/Frontend/MeinTheme/frontend/\_public/src/less/all.less

Hat jetzt geklappt! Kann man für die updatesicheren Less-Dateien die Less-Datei aus dem Responive komplett kopieren und dann anpassen oder macht es Sinn, nur die Änderungen in die Datei einzufügen? Es ist für mich mittels den Entwicklertools schwer herauszufinden an welcher Stelle die Änderungen gemacht werden sollen, da keine Zeilenangaben mehr angezeigt werden, wie es vorher bei den SW4-Dateien war. Oder gibt es da einen Trick?

Ich würde mir wenn möglich nur den nötigen Teil raus kopieren. Denn sons wird ja praktisch alles doppelt und dreifach kompiliert und irgendwann hast du wohl eine 1 MB grosse CSS Datei :slight_smile: Ich nutze PHPStorm hier muss ich eigentlich nur nach der entsprechenden Class suchen, dann spukkt PHPStorm die entsprechenden Suchergebnisse aus.