Neu bootstrap.css kompilieren

[Ugenmeister]

Hallo zusammen.

Ich brauche mal eure Hilfe bitte. Folgende Situation:
Ein neuer Kunde, den ich übernehmen soll, hat einen JTL- Shop in der Version 4.06.6, sein Template allerdings in der Version 4.04. Es gibt folgende FTP-Struktur (ftp.jpg). Im Shop-Backend hat der Kunde "Benutzerdefinierte Template-Dateien verwenden? (veraltet, bitte Child-Templates nutzen)" auf JA stehen; was mich schon etwas irritiert, da ja ein eigenes Child angegelgt ist.

Ich möchte nun CSS-Anpassungen vornehmen, welche ich normalerweise im Theme-Editor mache. Hier finde ich das Theme "custom" in der Dropdown-Auswahl. Und jetzt kommt mein eigentliches Problem:
1. In der Datei /themes/custom/custom.css sind Anpassungen von meinem Vorgänger gemacht worden. Diese Anpassungen finde ich aber NIRGENDS im Theme-Editor.
2. Wenn ich die custom.css im Theme-Editor kompilieren möchte, erhalte ich den Fehler "File `../../base/les/base.less` not found. in theme.less".

Und somit kriege ich die bootstrap.css nicht kompiliert.
Ich steig da momentan nicht ganz durch, wo ich ansetzen könnte. Vielleicht kann mir jemand helfen bitte?
Vielen Dank!

Gruß

 

[css-umsetzung]

In der custom.css sind ja eigentlich keine compilierbaren Inhalte, dort steht pures css drin.
Diese wird wird wenn sie in der xml eingetragen ist automatisch eingebunden.

 

[Ugenmeister]

Okay. Aber in der custom.css stehen Einträge, die ich auch im Frontend sehe. Aber nirgendwo im custom-Theme im Theme-Editor. Wenn ich neue Einträge im custom-Theme mit dem Theme-Editor mache, wird die bootstrap.css ja nicht erstellt (durch den Kompilier-Fehler) und somit greifen meine Anpassungen auch nicht.

 

[css-umsetzung]

Das ist ja auch richtig, im theme editor siehst du ja nur Daten der .less Dateien, du kannst dort also gar keine custom.css Dtaei sehen, ich hab das eben vorsichtshalber mal probiert, da ich selten in diesem Editor drin bin bzw. nicht auf solche Dinge achte.

Die Daten von der custom.css landen auch nicht in der bootstrap.css sondern es wird einzeln geladen oder wnen du das theme auf minifizieren gestellt hast mit allen anderen css Dateien zusammengefasst, z.B. : asset/cssTheme.css,plugin_css?v=4.06

wenn du einen Compile Fehler hast dann liegt es daran das die Pfade in deiner theme.less Datei nicht stimmen.

Das wäre das ja in einem Evo Template:

@import "../../base/less/base";
@import "variables";

So würde das in einem Child aussehen müssen:

@import "../../../../Evo/themes/base/less/base";

Hier zur Dokumentation:

http://docs.jtl-shop.de/de/latest/shop_templates/eigenes_theme.html#theme-less

 

[Ugenmeister]

Stimmt, es war wirklich das hier im Theme-Editor: @import "../../base/less/base"; Somit ist Problem 2 schon mal gelöst. Vielen Dank!

Sorry wenn ich so dämlich frage wegen den CSS-Dateien. Aber ich arbeite NUR im Theme-Editor und mit sind die anderen Schritte (so wie du das machst) nicht bekannt. Hat das Vorteile? Wie machst du das dann genau?
Mist, jetzt hab ich den Pfad korrigiert im Theme-Editor und somit wurde meine bootstrap.css neu erstellt. Jetzt hab ich eine leichte Design-Verschiebung im Frontend (Verdammt). Kann ich das rückgängig machen?
Aber wo und wie mach ich dann meine CSS-Anpassungen? Anscheinend ist die custom.css ja die richtige Datei dafür oder? Wenn ich aber hier Anpassungen mache, greifen die nicht (trotz mehrmaligem Cache-Löschen überall).

 

[css-umsetzung]

Das kannst du leider nicht Rückgängig machen, vermutlich hat jemand damals einfach die theme Dateien und die Bootstrap aus einem Theme vom Evo genommen und in das Child Theme kopiert, das könntest du dir aus einer alten Shop Version zurück holen aber das wäre der falsche Weg, du möchtest es am Ende ja vernünftig haben.

Der beste Weg wäre aus meiner Sicht, die Probleme nun über die theme.less oder in der custom.css zu beheben.

Die custom.css hat den Vorteil das ich das nicht ständig neu compilen muss und der normale Shop Besitzer wäre mit der less Geschichte auch überfordert.

Anpassungen in der custom.css sollten immer greifen aber dazu muss der Browser- Cache gelöscht werden um diese zu sehen.

 

[Ugenmeister]

Prima, hast mir schon viel geholfen. Vielen Dank dafür!
Also wenn ich das nun richtig verstanden habe, kann ich - sollte ich NICHT mit dem Theme-Editor arbeiten - alle Anpassungen in der /templates/meintheme/themes/custom/custom.css eintragen, ja? Und es muss dann auch nichts kompiliert werden.
Ich habe testweise mal eine einfache CSS Regel eingetragen, Browsercache und Shop- Cache mehrmals geleert, andere Browser genommen, aber meine CSS-Regel greift nicht (hab auch mit !important probiert).

Hier ist die template.xml von dem Template:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>MeinTheme</Name>
    <Author>Kunde</Author>
    <URL>https://www.Kundendomain.de</URL>
    <Version>4.04</Version>
    <ShopVersion>404</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Live Template</Description>
    <Settings>
        <Section Name="Allgemein" Key="general">
            <Setting Description="test" Key="test" Type="select" Value="N">
                <Option Value="Y">Ja</Option>
                <Option Value="N">Nein</Option>
            </Setting>
        </Section>
        <Section Name="Theme" Key="theme">
            <Setting Description="Theme" Key="theme_default" Type="select" Value="mytheme">
                <Option Value="custom">MeinTheme</Option>
            </Setting>
            <Setting Description="Hintergrundbild (überschreibt die vorhandene Standard-Evo-Einstellung)" Key="background_image" Type="select" Value="">
                <Option Value="background">Mein Hintergrundbild</Option>
            </Setting>
        </Section>
    </Settings>
    <Minify>
    <CSS Name="custom.css">
            <File Path="themes/custom/bootstrap.css"/>
            <File Path="css/mytemplate.css"/>
            <File Path="../Evo/themes/base/offcanvas-menu.css"/>
            <File Path="../Evo/themes/base/pnotify.custom.css"/>
            <File Path="../Evo/themes/base/jquery-slider.css"/>
            <File Path="themes/custom/custom.css"/>
        </CSS>
    </Minify>
    <Boxes>
        <Container Position="right" Available="1"></Container>
    </Boxes>
</Template>

Irgendwo liegt noch der Wurm drin oder ich mach einen Denkfehler.

 

[css-umsetzung]

Du solltest das minifizieren mal deaktivieren, damit du siehst ob deine custom.css überhaupt geladen wird.

Wenn das minifizieren aktiv ist, dann prüft der Shop ob eine der eingebundenen css Dateien, also auch die custom.css modifiziert wurde, ist das so wird das neu eingebunden.
Ich weiß nicht wonach die Prüfung geht, ich vermute das es anhand des File Datums geregelt wird, wenn das nach dem Ändern nicht erneuert wird, wäre das eine Erklärung.

Daher teste das mal zuerst ohne minifizierung, dann kannst du das ja im Browser sehen Beispiel mit Chrome:

 

[Ugenmeister]

Jetzt steig ich so langsam durch. Danke für deine Unterstützung und Hilfe! Hast mir sehr geholfen!!!

Gruß

 

[FPrüfer]

Hallo,
vlt. nochmal zum Verständnis (oder zur kompletten Verwirrung ). Die custom.css ist nur ein zusätzlicher Weg um ein Theme zu "Customizen".

Um das CSS für dein Template zu verändern, gibt es zwei Möglichkeiten:
1. Du trägst alle Änderungen direkt in die custom.css deines Themes (in /themes/custom/custom.css) ein. Oder
2. Du legst in /themes/custom/less eine eigene theme.less an und definierst deine Änderungen dort. Nach jeder Änderung musst du dann (z.B. mit dem Evo-Theme Editor Plugin) aus den .less Dateien die bootstrap.css neu kompilieren.

Die bootstrap.css wird automatisch erstellt und sollte nicht direkt verändert werden. Änderungen werden nur über die .less Dateien und neukompilieren eingetragen. Die custom.css wird vom Shop NACH der bootstrap.css geladen und bietet daher die Möglichkeit vordefinierte Styles wieder zu überschreiben, ohne die bootstrap.css neu kompilieren zu müssen. Da Less einige Vorteile gegenüber einfachem Css bietet, solltest du beim grundsätzlichen Styling eines Themes den Weg über Less gehen und die custom.css für kleinere Anpassungen dem Shopbetreiber überlassen.

 

[Ugenmeister]

Guten Morgen FPrüfer.

Die custom.css wird vom Shop NACH der bootstrap.css geladen

- DAS HIER war ein entscheidender und wichtiger Hinweis für mich.
Auch alles andere war verständlich erklärt und hilft mir weiter! 1000 Dank für die Unterstützung, die ich erfahren durfte!

Gruß