Neu JTL Template und Themes CSS Chaos

[froot]

Könnte mir mal jemand BITTE erklären wie das mit den Templates und Themes und so funktioniert?
Ich finde das Ganze extrem hochtrabend, komplex und irgendwie unlogisch und komme einfach nicht zurecht.
Ich mach ja viel mit CSS für andere Kunden aber was sich JTL- Shop da ausgedacht hat sucht seinesgleichen.
Und sonderlich zeitsparend und einfacher macht es einem das Leben nicht, also wozu überhaupt?

Es gibt Templates und Templates- Cache (der Ordner templates_c, ist das der der gelöscht wird wenn ich Templates-Cache lösche?)
Es gibt also Templates und Child-Templates. Ich verstehe dass man im Child-Template-Ordner nur jede Dateien hat die die Datei im Parent-Template-Ordner überschreiben soll.
Dann gibt es Themes und dort gibt es einen base-Ordner, was macht der? Es ist natürlich anzunehmen, dass das ähnlich funktioniert, sehe es aber nicht.
Dann gibt es einen sass-Ordner, was macht der??
Dann gibt es _crit.css und .map und .save und .scss?

Und dann gibt es noch das JTL-Theme-Editor-Plugin, was macht das genau? Bearbeitet dass die Dateien die im File-System liegen? Ist nämlich wie so vieles auch nicht wirklich intuitiv…
Links sehe ich dort checkboxes neben den verschiedenen Files und wenn ich draufklicke um es anzusehen wird es sofort kompiliert?
Dort seh ich auch _footer.scss ohne checkmark und ausgegraut und ich kann es mir nicht ansehen.

Und dann gibt es noch die Template-Einstellungen wo ich gewisse Farben definieren kann und irgendwie wird das immer ignoriert, ich nehme an das ist ein Bug aber sicher bin ich mir nicht.

Und es gibt noch so viel mehr hier zu wissen, die template.xml, die Bootstrap.php, es scheint alles so unnötig kompliziert.

Was ist gern hätte ist meine eigene CSS anwenden (custom.css), die immer angewendet werden soll, wo muss die liegen? Macht überhaupt dass Sinn mit einer eigenen CSS-Datei oder soll ich die bearbeiten die JTL verwendet?
Und dann bräuchte ich jeweils eine CSS für verschiedene Themes (zB. zu Weihnachten) wo (zurzeit) lediglich ein paar andere Farben und so definiert sind. Wie soll ich da vorgehen?

Oder ich hab einfach selber hier ein Durcheinander und normalerweise funktioniert es super? kA

Bin für Hilfe sehr dankbar.

EDIT: Ahja, nochwas: Wenn ich im Browser mal ein HTML-Element inspiziere um ausfindig zu machen wo sich die angewendete CSS-Regel befindet, und dort steht "(index):44", heißt das, das ist irgendwo inline definiert? Wenn ja, dann wo ist das inline? Wo ist zB. für den footer die Datei? Ich frage weil in footer.tpl sehe ich keinerlei inline-CSS-Regeln…

 

[css-umsetzung]

Hört sich jetzt blöd an, ist aber nicht so gemeint.
Ich glaube wir müssen da bei dir ganz am Anfang anfangen.

Das sind eine Menge Fragen die sich nicht alle, auf die schnelle beantworten lassen.

Template cache leeren bedeutet das du die cache Dateien in deinem child Template Ordner im temlates_c löschst.
Wenn du ein Element im Browser überprüfst, und was von index:blabla siehst, dann handelt es sich um css, welches über die critical_css eingebunden wurde, Diese Datei wird nicht wie üblich zum laden eingebunden, sondern deren Styles kommen direkt, bevor die Elemente der Seite im body geladen werden, damit sorgt man dafür (wenn man es richtig angeht), dass der CLS im günstigsten Fall null ist. Das ist also wichtig.

Du kannst deine custom.css weiterhin verwenden, diese liegt im theme Ordner von deinem Child. Wenn du aber den CLS beachten möchtest (und das solltest du) dann ist deine custom eigentlich nur dafür geeignet, Farben zu ändern.

Das base ist im Grunde das Grundgerüst für den Shop, erst die sass Dateien im jeweiligen Theme sorgen für die unterschiede.
du solltest nicht den Theme Editor und die Funktion im Template verwenden, sondern dich auf eines beschränken, die Einstellungen im Template (sass und Variablen) machen für mich nur Sinn wenn ich kein Child Template habe.
Habe ich ein Child, dann definiere ich andere Farben über die _variables.scss

Das Erstellen der css Dateien über sass oder less ist die heutzutage übliche Variante wenn man mit großen css Dateien arbeitet, ich glaube nicht das du 130kb css Code schreiben möchtest, dass macht man eben heutzutage modular, so das für den Programmierer einfacher ist, Fehler zu finden oder im nachhinein Dinge zu ändern.
Die einzelnen Dateien werden dann über den compiler, in deinem Fall Theme Editor zusammengefasst.

über die Bootstrap kann ich mein Template um Funktionen erweitern ohne im Core rummurksen zu müssen, ist für dich nicht interessant, wenn du kein PHP kannst oder keine zusätzlichen Funktionalitäten benötigst.

Das war jetzt eine kleine Kurzfassung die dich hoffentlich etwas beruhigt .

 

[froot]

Danke erstmal, das hilft.

Wenn ich das also richtig verstehe, dann hab ich eine _crit.css in der ich alles anpasse, was vom default NOVA-Template abweicht, und zwar Layout, Typographie.
Theme-spezifische Sachen (zB. andere Farben oder Bilder zu Weihnachten) halte ich ausschließlich in css-Dateien im jeweiligen Theme-Ordner fest – oder?

Wenn das stimmt bleibt noch die folgende Unklarheit:

Das base ist im Grunde das Grundgerüst für den Shop, erst die sass Dateien im jeweiligen Theme sorgen für die unterschiede.

Wenn das nämlich so ist, warum liegt dann nochmal ein sass-Ordner im base-Ordner?
Ich glaube ich hab ein ziemliches Durcheinander, siehe Screenthot…



Werden irgendwelche Dateien eigentlich automatisch generiert? Was ist mit .original und .map und .scss ?

Danke für Deine Hilfe!

 

[froot]

hier noch ein Screenshot. Wie du siehst sind im Theme-Ordner ähnliche Dateien wie im sass-Unterordner.
Das ist wohl falsch?




Sollte es eher so aussehen: (?)

├── NOVAChild
│   └── themes
│       ├── base
│       │   ├── images
│       │   └── sass
│       │       ├── base.css // hier das Grundgerüst
│       │       ├── base.scss // oder hier
│       │       └── base_crit.css // oder hier?
│       │       └── base_crit.scss // oder doch lieber hier?
│       ├── normal
│       │   ├── images
│       │   └── sass
│       │       ├── normal.scss
│       │       └── normal_crit.scss // hier minimale Anpassungen wie Farben
│       └── xmas
│           ├── images
│           └── sass
│               ├── xmas.scss 
│               └── xmas_crit.scss // hier minimale Anpassungen wie Farben

 

[css-umsetzung]

also was dafür sorgen kann, dass dein Layout beim Aufbau nachträglich wackelt, z.B:
eine Box, die normalerweise 200px hoch und breit ist und du veränderst die auf 400x400, dann sollte so etwas in der critical stehen.

Farbänderungen eher in der normalen Datei.

Die Datein die in im Base stehen lässt du vorzugsweise unberührt, das gibt sonst bei jedem Update nur Chaos, versuche lieber das was du ändern möchtest über die critical, die _variables oder eben der normalen Sass Datei zu ändern.

Du darfst in den sass Dateien auch normales css Verwenden, wenn du mit den Dingen die dir sass bietet nicht vertraut bist.

Wenn du mit dem Theme Editor eine Datei speicherst, legt er die alte als .original an, das ist also nur ein Backup.

 

[froot]

Danke!
Ich bin allerdings gerade ein bisschen am Verzweifeln, hab alles aufgeräumt so wie besprochen, und jetzt suche und suche ich wo denn nun die CSS-Regel definiert ist die dennoch Probleme macht oder fehlt.
Anscheinend in xmas.css aber wenn ich schaue steht da nix. Cache geleert, neu kompiliert alles probiert.
Was bedeutet es wenn da in der Console steht: xmas.css, plugin.css?5.4
Heißt das, dass es dennoch über den JTL-Theme-Editor angepasst werden musst oder angepasst wurde?
Hättest du vielleicht kurz Zeit dir das anzuschauen? So rumraten ist echte Zeitverschwendung und man lernt nix dabei obwohl ich eh versuche es zu verstehen.

 

[css-umsetzung]

ja hab ich