Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

[ecompheus]

nein, ich bin genau nach der Beschreibung hier vor gegangen > also alles per .css, an den less Dateien (welche kompiliert werden) müssten, nichts geändert
> o.k. dannn wird der Eintrag in die .css wohl so nichts bringen...

... aber gibt es eine andere Möglichkeit diese Variable an zu passen / überschreiben?

... und warum werden die beiden anderen Einträge s.o. nicht?

Danke für Rückmeldung im voraus.

 

[Xantiva]

CSS kennt keine Variablen. Wenn Du nun für ein Template viele Style-Angaben hast, aus Gründen der Übersicht sogar noch über mehrere CSS-Dateien verteilt, dann ist z. B. das ändern einer Farbe eine fehlerträchtige Angelegenheit. Du musst alle Stellen finden und korrigieren. Da kommt LESS ins Spiel. Das erweitert CSS um Variablen, Mixins, usw. Da die Browser das aber nicht verstehen, brauchst Du den LESS-Compiler, der aus den LESS Dateien eine CSS Datei macht.

https://de.wikipedia.org/wiki/Less_(Stylesheet-Sprache)

Am besten einmal in einem Test- Shop ausprobieren. Das Kompilieren auf dem Server kannst Du mit dem Plugin "EVO Theme-Editor" machen.

 

[ecompheus]

@Xantiva
habe nun einen 4.04 Testshop mit einem evo child template und die less files vom evo-child example genommen, Änderungen eingetragen, kompiliert.. funktioniert.

> zum einem, muss man dann aber wissen welche Variable wofür steht...
> zum anderen, die Entscheidung mit dem child-template wurde aufgrund der Updatesicherheit gewählt.. jetzt habe ich die momentan aktuellen less files (die ja einigen Inhalt haben und die bootstrap generieren) im Template > diese werden dann ja in Zukunft nicht mehr aktualisiert (da im Child)... da habe ich Bedenken was ein paar Versionen weiter passiert ))

Hoffe einigermaßen verständlich ausgedrückt auf jeden Fall erstmal danke für die Tipps

 

[css-umsetzung]

musst du ja nicht, du kannst ja auch einen import machen.

Du startest in deiner eigenen theme.less ja mit
[at]import "../../../../Evo/themes/base/less/base.less";

Das heisst du holst dir zuerst die Basisdaten rein, alles was danach kommt, ist dann ja das was du sowieso individuell machen möchtest.

Ich habe das in meinem Child so eingerichtet, dass ich über die Template Verwaltung auf einen Überwachungs-, schlaf- und aktiv Modus schalten kann, damit das less im Zweifelsfall neu compiliert wird.
so hat man das dann ganz gut unter Kontrolle.

der Überwachungsmodus, regelt nur meine eigenen angelegten less Dateien in meinem Theme, wenn ich ein Update mache weiß ich ja, dass ich das einmalig auf den aktiven Modus schalten muss, damit die Bootstrap neu angelegt wird.

 

[ecompheus]

ah, o.k . Falls ich das richtig verstehe. Nach einem Update der Shopversion wird durch den Import [at]import "../../../../Evo/themes/base/less/base.less"; meine theme.less ebenfalls "geupdatet".
Dass heisst, man sollte sicherheitshalber auch nach jedem Update sein Theme neu kompilieren.
Was ist denn, wenn bei neuer Version Variablen hinzu kommen bezgl. der variables.less, kann man diese auch durch ein Importeintrag direkt mit "updaten" oder werden dann die selbst angepassten Einträge wieder überschrieben?
Sorry wg. Frage, jedoch fehlt mir irgendwie noch der AHA Effekt

 

[css-umsetzung]

base.less ist ja das grundsätzliche, das ist das, was dann bei einem Update durch JTL auch erweitert wird, wenn es erforderlich ist.
alles was du dann in deinem eigenem theme.less machst oder mit deinen eigenen Variablen, ist dann ja dein eigenes Ding.

Ich nehme mir der Einfachheit, das theme.less und zusätzlich die Variablen vom Evo Theme und baue darauf auf, damit ich das Rad nicht neu erfinden muss.
um das einigermaßen getrennt zu haben, erstelle ich mir noch eine layout.less, die auch auf die variablen.less zugreift, diese wird dann ganz gesondert als layout.css gerendert und als letztes eingebunden, da ist dann alles drin was ich für mich anders haben möchte, außerdem dauert es dann auch nicht so lange, wenn man im Entwicklermodus ist, in less schreibt und sich alles ständig ändert.

Der Shopbesitzer selbst hat dann noch eine custom.css, da man ihm ja nicht zumuten kann, seine styles in less zu schreiben.

Wie man das am Ende angeht, muss jeder für sich entscheiden, wenn ich nur für mich selbst als Shopbesitzer ein Template machen würde, würde ich vermutlich alles über die custom.css regeln um allen Problemen aus dem Weg zu gehen.

 

[Xantiva]

... wenn ich nur für mich selbst als Shopbesitzer ein Template machen würde, würde ich vermutlich alles über die custom.css regeln um allen Problemen aus dem Weg zu gehen.

Dann kannst Du aber auch nicht mehr auf die Variablen zugreifen und musst alle Farbwerte direkt angeben, oder?

 

[css-umsetzung]

Richtig, dass ist dann der Nachteil.

 

[Proceed]

Hallo, danke erstmal für diese auführliche Anleitung.
Ich habe per Google Chromes "untersuchen" herausgefunden, an welcher Stelle ich im CSS etwas ergänzen muss, damit im Header eine Grafik erscheint.
Mir ist nur nicht klar in welche Datei ich folgendes einfügen müsste, und wie ...
Normalerweise würde ich ja einfach den Code ergänzen und wenn alles passt läuft die Sache, hier habe ich ein leeres Dokument, ich verstehe immer noch nicht ganz welche Datei für was ist und vorallem welche Abgeändert werden dürfen und welche nicht, als ich in Knaeckebrot eingefügt habe, kam die Warnung, dass Bootstrap editiert wird und ich war mir nicht sicher ob ich fortfahren soll

header #header-branding {
    padding: 15px 0;
    background-color: transparent;
    background-image: url(http://...);
    min-height: 170px;
    min-width: 1520px;

liebe Grüße

 

[css-umsetzung]

background-image: url(http://...);
Das http:// ist nur nen Beispiel? immer daran denken, wenn der Shop dann über SSL aufgerufen wird, hast du die ersten Probleme.
Ich würde wenn das da kein Beispiel ist auch den kompletten css-Block nochmals überdenken, min-width:1520px ist ja mal ne krasse Ansage .

Warum verwendest du nicht die custom.css oder eine andere die du dir selbst einbindest?

 

[Proceed]

background-image: url(http://...);
Das http:// ist nur nen Beispiel? immer daran denken, wenn der Shop dann über SSL aufgerufen wird, hast du die ersten Probleme.
Ich würde wenn das da kein Beispiel ist auch den kompletten css-Block nochmals überdenken, min-width:1520px ist ja mal ne krasse Ansage .

Warum verwendest du nicht die custom.css oder eine andere die du dir selbst einbindest?

Ja das war nur ein Beispiel, habe schon gemerkt, dass das nichts wird mit dem Block, aber danke !

Mein Problem ist, dass ich nicht weiß wo ich Sachen editieren kann ohne das tatsächliche Template womöglich zu zerschießen .

Nehmen wir an der Block wäre in Ordnung, wohin müsste ich meine Änderung einfügen ?
Von Haus aus gibts ja das Child Template, so wie ich das verstehe eben um solche Änderungen zu testen, in welche Datei würde ich meinen Block einfügen müssen ?


Liebe Grüße

 

[css-umsetzung]

Also, es gibt das berühmte child Template, welches du in jeder Installation dabei hast.

Das entkernen so das alles was unnötig ist raus fliegt,
Und da bindest du dann dein eigenes css und wenn erforderlich, js ein.

Anhand der dort eingebundenen js und css Datei siehst du ja auch wie es geht.

 

[fre33o]

Hallo Leute,

also auch ich habe das Problem das ich nicht weis was ich genau wo ändern kann damit auch das passiert was ich gerne hätte. Ich würde das gerne anhand eines Beispiels mal machen.

1. Ich nutze ein Eigenes Template
2. Ich würde gerne das Shop Logo auf der Startseite von links, zentriert in die Mitte legen
3. Was ändere ich wie und wo damit das auch passiert

Ich hoffe man kann mir weiterhelfen. Ich würde einfach gerne die Seite komplett anders gestalten. Habe in Photoshop ein Screendesign erstellt was ich gerne so umsetzen würde.
Danke Euch

 

[martinwolf]

Hallo Leute,

also auch ich habe das Problem das ich nicht weis was ich genau wo ändern kann damit auch das passiert was ich gerne hätte. Ich würde das gerne anhand eines Beispiels mal machen.

1. Ich nutze ein Eigenes Template
2. Ich würde gerne das Shop Logo auf der Startseite von links, zentriert in die Mitte legen
3. Was ändere ich wie und wo damit das auch passiert

Ich hoffe man kann mir weiterhelfen. Ich würde einfach gerne die Seite komplett anders gestalten. Habe in Photoshop ein Screendesign erstellt was ich gerne so umsetzen würde.
Danke Euch

Ich denke da ist dieser Thread der Falsche um zum Ziel zu kommen. Da Du gezielt Fragen bzgl. Anpassungen hast, wäre entweder ein Thread unter Template Anpassungen oder gar eine Anfrage in der JTL Projektbörse anzudenken. Vermutlich eher zweiteres da man schon grundlegende Kenntnisse in Sachen HTML/CSS besitzen sollte um das selbst umzustezen. Geschweige denn auch die Tools kennen um mögliche Selektoren und Dateien zu ermitteln wo die Änderungen platziert werden sollten. Weiter wurden solche rudimentären Fragen, wie platziert man das Logo anders, zu dutzende in diesem Forum gestellt. Einfach auch mal die Suche bemühen, oder auch mal bei Google eine entsprechende Suche ausführen bringt garantiert einige Treffer die Deine Frage beantwortet.

 

[Desecrator]

Wie kann man denn angeben, dass das Template grundsätzlich breiter gezogen werden soll? Auf einem FHD-Schirm sind nur 3 Spalten Artikel zu sehen, viel zu groß. Es wäre daher erstens interessant, dass es grundsätzlich breiter wird - und dann noch mit 4-6 Artikeln in der Breite.

 

[netgmbh]

Wie kann man denn angeben, dass das Template grundsätzlich breiter gezogen werden soll? Auf einem FHD-Schirm sind nur 3 Spalten Artikel zu sehen, viel zu groß. Es wäre daher erstens interessant, dass es grundsätzlich breiter wird - und dann noch mit 4-6 Artikeln in der Breite.

Einfach in der variables.less im eigenen theme nach "Media queries breakpoints" & "Container sizes" suchen. Darunter sind 3 Bildschirmgrößen aufgelistet. Dort bei "Large screen" oder "wide Desktop" die "px" Zahl erhöhen bzw. anpassen.
Als Tipp weitere Bildschirmgrößen hinzufügen braucht größere eingriffe, also gar nicht erst versuchen.

Was die 2. Frage angeht stehe ich noch ebenfalls vor dem Problem. Es gibt hier einen Thread, aber der führt bei mir leider nicht zum Erfolg:
https://forum.jtl-software.de/threads/boxen-mit-mehr-als-3-artikeln.84757/

 

[M.Stickel]

Um mehr Artikel nebeneinander darzustellen muss "productlist/index.tpl" angepasst werden ( Childtemplate/ Bootstrap-grid-klassen).

 

[netgmbh]

Um mehr Artikel nebeneinander darzustellen muss "productlist/index.tpl" angepasst werden (Childtemplate/ Bootstrap-grid-klassen).

Eventuell auch eine Idee, wie die Einstellungen korrekt im Slick Slider übernommen werden, um mehr als 3 Artikel auf der Startseite für "Top Angebote", "Neu im Sortiment", usw. anzuzeigen?

Die Einträge sehen folgendermaßen aus:
Template.xml:

    <Settings>
        <Section Name="Theme" Key="theme">
            <Setting Description="Mein Theme" Key="theme_default" Type="select" Value="evo">
                <Option Value="net">Net Theme</Option>
            </Setting>
        </Section>
    </Settings>
    <Minify>
        <CSS Name="net.css">
            <File Path="../net/themes/net/bootstrap.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="css/net.css"/>
        </CSS>
        <JS Name="jtl.evo.js">
            <File Path="js/jtl.evo.js" override="true" />
        </JS>
    </Minify>

jtl.evo.js:

            /*
             * responsive slider (content)
             */
            $('.evo-slider:not(.slick-initialized)').slick({
                //dots: true,
                arrows: true,
                slidesToShow: 4,
                responsive: [
                    {
                        breakpoint: 480, // xs
                        settings: {
                            slidesToShow: 2
                        }
                    },
                    {
                        breakpoint: 768, // sm
                        settings: {
                            slidesToShow: 3
                        }
                    },
                    {
                        breakpoint: 992, // md
                        settings: {
                            slidesToShow: 4
                        }
                    }
                ]
            });
        },

Die Einstellungen werden leider dennoch nicht übernommen. Cache gelöscht, anderes template ausgewählt, wieder zurück gewechselt, erneut template cache gelöscht, browser cache gelöscht... leider nix.

EDIT:
Was ich soeben bemerkt habe, wenn man mit der Größe des Browser-Fensters spielt, werden für einen Bruchteil einer Sekunde am "breakpoint" 4 Artikel angezeigt, dann aber wieder 3.

Edit2:
Hat sich erledigt. Ich hatte fälschlicherweise die Vermutung, dass sich .js dateien genauso wie .tpl Dateien verhalten und die orginalen nicht geladen werden.