@guen schrieb:
Die index.tpl sieht echt interessant aus. Ich glaube das ist genau das was ich suchte
Mit den templates bzw. tpl Dateien komme ich mittlerweile gut zurecht.
Habe aber noch große Schwierigkeiten mit der CSS/LESS Bearbeitung. 
Grundsätzlich vorab: Soll man jetzt die vorhandenen less Dateien aus dem Responsive-Layout ändern? Soll man dort CSS oder Less schreiben? Oder soll man eine neue CSS/LESS Datei machen und dann mit der all.less darauf verweisen? Warum ist das alles so kompliziert gemacht worden? Warum hat man nicht einfach css-Layouts die man ändern kann wie man will, das wäre imho vieel einfacher. Es ist erstmal eine riesen Fuselei, überhaupt herauszufinden, welche .class man bearbeiten muss.
Was bedeutet eigentlich Compiler Caching Deaktivieren? Änderungen an den Less-Dateien bekomme ich nur zu sehen, wenn dort der Harken drin ist. Dann dauert aber das Laden so lange. Dann lade ich die Datei hoch und dann geht gar nichts mehr, heißt ich sehe die Seite komplett ohne css.
Die Anleitungen less finden mit Source map etc. habe ich alle schon gelesen, komme damit aber überhaupt nicht zurecht.
Ich hoffe jemand kann mir hier irgendwie einen Tipp geben, wie ich da eine Struktur reinbekomme.
Vielen Dank im Voraus.
Guen
PS:
Eventuell schreibe ich mal ein Beispiel was ich machen wollte.
Der border-bottom im header wird - so vermutete ich - in der _components/header.less festgelegt:
border-bottom: 1px solid @brand-primary;
Ich wollte nun im header einfach mal Änderungen probieren, z.B. den border-bottom ändern usw., nichts Großes.
Dazu habe ich folgenden Code in die header.less geschrieben und in meinem neuen Theme in das Verzeichnis _components kopiert:
// Basic header
.header-main {
.unitize(padding-bottom, 0);
background: #fff;
border-bottom: 1px solid #ccc;
// Hide the currency and language switcher
.top-bar { display: none }
// Logo
.logo-main {
.unitize-padding(0, 0);
.logo--link {
.unitize-height(35, 16);
display: inline-block;
max-width: 100%;
}
// Smaller logo for mobile viewports
.logo--shop {
.unitize-height(35, 16);
width: 50%;
}
.logo--supportinfo { display: none; }
}
.header--navigation { position: relative; }
}
Die Datei in der all.less referenziert mit @import „_components/header.less“. Weil keine Änderung angezeigt wurde den Harken bei Compiler Caching Deaktivieren reingemacht. Nun wird mir die Seite ohne jegliches Layout angezeigt.
.