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

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.683
242
Leipzig
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Hallo,
ich habe zu dem ganzen auch eine Frage. Ich habe gelesen oder gehört das man auch einfach das EVO komplett kopieren kann (also den Inhalt) und in das Evo-Child einfügen. Das habe ich getan.
Habe aber nie änderungen gesehen, nun dank Hilfe in dem unten stehenden Beitrag, und letztendlich diesem Beitrag, habe ich es so angepasst das es zumindest schonmal sichtbar wird. Nun, nur eben nicht komplett.

Ich möchte kein komplett eigenes Theme erstellen, kann ich gar nicht, ich möchte nur mein genutztes "Cerulean" etwas anpassen, vorallem Farben und mal Spaltenbreite etc. und dieses natürlich updatefähig halten.
Deswegen habe ich es eben auch nur kopiert.
Nun scheint da was falsch zu sein, was zu fehlen oder zuviel zu sein.
Diese Anleitung hier, wenn ich ehrlich bin, verstehe ich das mit den zwei Themes nicht, oder ist das die einzige Möglichkeit und ich muß das genauso machen?
Oder ist das so wie ich es gemacht habe eigentlich komplett für die Tonne?

hier in dem Beitrag habe ich davon schon berichtet: http://forum.jtl-software.de/templa...ird-aber-nicht-genutzt-wo-ist-der-fehler.html

Ne ne ist nicht für die Tonne.
Ich habe nur die groben Züge beschrieben wie man ein eigenes Template anlegen kann. Um tatsächlich ein komplett eigenes Template zu machen zu wollen, müssten größere Veränderungen getätigt werden, vorallem in der *.xml.
Die meisten hier (ich eingeschlossen) nutzen diese einfache Variante um die vorhandenen Templates für den eigenen Geschmack anzupassen. Und das läuft fast alles über die eigene *.css und die Dateien ala header.tpl, footer.tpl, attributes.tpl in den entsprechenden Ordnern.
Ich empfehle dir, nur die wichtigsten Daten in dein Template zu packen und nicht alles.
Das was du anders haben willst kommt in dein Template, sonst nix. Also deine eigene css, header.tpl, attributes und co.
 

Bart70

Gut bekanntes Mitglied
18. Februar 2015
380
1
Filderstadt
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Ne ne ist nicht für die Tonne.
Ich habe nur die groben Züge beschrieben wie man ein eigenes Template anlegen kann. Um tatsächlich ein komplett eigenes Template zu machen zu wollen, müssten größere Veränderungen getätigt werden, vorallem in der *.xml.
Die meisten hier (ich eingeschlossen) nutzen diese einfache Variante um die vorhandenen Templates für den eigenen Geschmack anzupassen. Und das läuft fast alles über die eigene *.css und die Dateien ala header.tpl, footer.tpl, attributes.tpl in den entsprechenden Ordnern.
Ich empfehle dir, nur die wichtigsten Daten in dein Template zu packen und nicht alles.
Das was du anders haben willst kommt in dein Template, sonst nix. Also deine eigene css, header.tpl, attributes und co.

Hallo,

ich hab das soweit hinbekommen nun habe ich die EIGENE FELDER in EVO geändert laut Beschreibung Eigene Felder hinzufügen.

So wie mache ich das dass die Eigene Felder in Zukunft Update Sicher bleibt die template.xml bezieht sich doch auf EVO und die ist doch nicht Update-Sicher. Müsste ich nicht die template.xml auf [h=4]EvoChild Example verweisen und dort die Änderung durchführen.[/h]

 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.683
242
Leipzig
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Eigene Felder werden nicht in der xml hinterlegt.

Die Einbindugn im Shop4 erfoglt für die Artiel ansicht:
templates/Evo-Child/productdetails/details.tpl
oder einer der andern tpl im Odner productdetails.
Wenn du im Odner Evo-Child nicht Productdetails findes must du die aus dem Evo Ordner kopiern.

Das heisst, du packst deine eigenen Felder in die details.tpl und speicerst es in "deinTemplate/productdetails/details.tpl" und das ist updatesicher.
 

Bart70

Gut bekanntes Mitglied
18. Februar 2015
380
1
Filderstadt
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Eigene Felder werden nicht in der xml hinterlegt.



Das heisst, du packst deine eigenen Felder in die details.tpl und speicerst es in "deinTemplate/productdetails/details.tpl" und das ist updatesicher.

Hallo holzpuppe,

wie immer DANKE für die TOLLE INFOS ich kann Mein Template nun auswählen, das einzigste was nicht angezeigt wird ist der backround. Ich denke hab das doch richtig gemacht, also auf dem Root Mein Template->themes->IhrTheme und dann die Datei background.jpg rein gepackt.

Es müsste doch angezeigt werden.

MfG
 

Bart70

Gut bekanntes Mitglied
18. Februar 2015
380
1
Filderstadt
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Ich möchte euch eine kleine Anleitung (relativ einfach) zur eigenen Erstellung eures Templates anbieten.
Leider ist derzeit die offizielle Anleitung für die meisten nicht wirklich nachvollziehbar bzw. verwirrend. (Stand: 10.12.2015)

Das Hauptaugenmerk bei dieser Anleitung liegt bei: Updatesicherheit!
JTL soll Updates machen können ohne das man danach stundenlang Dateien vergleichen, ändern und suchen muss. (Der Händler ist faul und hat andere Sachen zu tun! ;))

Als Grundlage nehmen wir hier das neue EVO-Template und verlinken einfach auf die entsprechenden Dateien, ohne diese selbst anzufassen.
Bevor hier wild auf das JTL4 geupdated wird macht euch bitte einen Testshop. Es ist dank JTL ja eine Community-Edition möglich (max. 500 Artikel).

Man braucht 2 Programme um alles einzustellen. Diese sollten aber schon bekannt sein. (Filezilla für den upload FTP und Notepad++ für Bearbeitung der css, xml, hmtl, php und co)

Wenn ihr alles frisch eingerichtet habt geht via FTP in eurem Testshop in den Ordner "templates". Da erstellt ihr einen neuen Ordner mit dem Namen "Templatename".
In diesen Ordner einen weiteren erstellen mit dem Namen "css".
Damit auch das Favicon und euer Background funktioniert, in den Ordner "Templatename" einen Ordner "themes" mit den Unterordnern "base", "smoerebroed" und "knaeckebrot" erstellen.
In "smoerebroed" und "knaeckebrot" jeweils euer background.jpg hochladen.
In "base" den Ordner "images" anlegen und da die favicon.ico und favicon.png ablegen. Man kann auch den ganzen Ordner "base" aus dem Evo/themes/ kopieren.

Es sollte dann so aussehen:
Den Anhang 17261 betrachten

Für eine bessere Übersicht erstellt diese Ordnerstruktur auch auf eurem PC. Das ist dann auch einfacher mit dem Upload.
Da erstellt ihr eine neue Datei namens "template.xml" im Ordner "Templatename". Öffnet Diese mit dem Notepad++ und kopiert folgenden Text rein:

HTML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Templatename</Name>
    <Author>der Autor</Author>
    <URL>http://www.deineseite.de</URL>
    <Version>4.01</Version>
    <ShopVersion>401</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Beschreibung deines Templates!</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="Knusperbrot" Key="knusperbrot" Type="select" Value="smoerebroed">
                <Option Value="smoerebroed">smoerebroed</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="knaeckebrot">
                <Option Value="smoerebroed">smoere</Option>
                <Option Value="knaeckebrot">knaecke</Option>
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="smoerebroed.css">
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/kross.css"/>
        </CSS>
        <CSS Name="knaeckebrot.css">
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/knackig.css"/>
        </CSS>
    </Minify>  
    <Boxes>
        <Container Position="left" Available="0"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="0"></Container>
        <Container Position="bottom" Available="0"></Container>
    </Boxes>
</Template>
Speichern und in den Ordner "Templatename" hochladen.
Jetzt erstellt ihr noch 2 Dateien:
1. knackig.css
2. kross.css

In diese Dateien könnt ihr eure css-Anpassungen des Evo-Themes speichern.

Eigentlich war es das schon an der Stelle.

Ab ins Backend eures Testshops dort kurz nochmal den Cache löschen und dann unter Template eure Template aktivieren.
Entsprechend alles einstellen, wie gewünscht und alles schick!


Die Namen können/sollten von euch nach Wunsch geändert werden.
In dieser xml habe ich 2 eigene Themes eingetragen, für die die vlt. Ostern, Weihnachten etc. unterschiedliches Aussehen haben möchten. Da reicht dann ein einfacher switch im Backend.
Wer das nicht möchte, sollte im Minify-Block und im "2." Theme Block entsprechend löschen.


Nochmal eine Erklärung welcher Ausdruck was bedeutet:

HTML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Templatename</Name>               //Der Name des Ornder wo sich euer Template befindet
    <Author>der Autor</Author>                     // Auf wessen Mist ist das ganze gewachsen?
    <URL>http://www.deineseite.de</URL>              //Link zu eurem Shop
    <Version>4.01</Version>                      //so lassen vlt. nach einem Update hier die entsprechende Version nachtragen
    <ShopVersion>401</ShopVersion>              //so lassen vlt. nach einem Update hier die entsprechende Version nachtragen
    <Parent>Evo</Parent>                  //Welches Theme wird verwendet. Man kann hier jedes vordefinierte Theme nehmen, also bootstrap, cerulean, cosmo, etc.
    <Preview>preview.png</Preview>                   //Man kann ein Vorschaubild des Themes oder was auch immer hinterlegen. Sieht man nur im Backend unter Template
    <Description>Beschreibung deines Templates!</Description>         //Eine Beschreibung deines Themes
    <Settings>
        <Section Name="Allgemein" Key="general">                                        
            <Setting Description="test" Key="test" Type="select" Value="N">       //FINGER WEG!
                <Option Value="Y">Ja</Option>                                              //FINGER WEG!
                <Option Value="N">Nein</Option>                                          //FINGER WEG!
            </Setting>                                                                            
        </Section>                                                                              
        <Section Name="Theme" Key="theme">                                        
            <Setting Description="Knusperbrot" Key="knusperbrot" Type="select" Value="smoerebroed">   //Der Name wie euer Theme heissen soll
                <Option Value="smoerebroed">smoerebroed</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="knaeckebrot">       //unter Value tragt ihr euer vorausgewähltes Theme ein
                <Option Value="smoerebroed">smoere</Option>                                   //Der Name wie euer Theme1 heissen soll dahinter ist der Name wie er im Backend angezeigt wird
                <Option Value="knaeckebrot">knaecke</Option>                                  //Der Name wie euer Theme2 heissen soll dahinter ist der Name wie er im Backend angezeigt wird
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="smoerebroed.css">                                    //Der Name eueres Theme1 mit den Links auf welches "Grundtheme" es sich bezieht und wo eure angepasste css liegt
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/kross.css"/>
        </CSS>
        <CSS Name="knaeckebrot.css">                                     //Der  Name eueres Theme2 mit den Links auf welches "Grundtheme" es sich  bezieht und wo eure angepasste css liegt
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/knackig.css"/>
        </CSS>
    </Minify>  
    <Boxes>                                                               //Welche Boxen sollen angezeigt werden?
        <Container Position="left" Available="0"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="0"></Container>
        <Container Position="bottom" Available="0"></Container>
    </Boxes>
</Template>


Hallo,

warum wird bei mir wenn ich genau nach dieser Anleitung gehe der Favicon und Background nicht angezeigt, im Backend wähle ich MEIN TEMPLATE aus, als Tehme Bootstrap, Hintergrundbild Custom Ihr eigenes Hintergrundbild etc. aktiviere, alles da, auser Favicon und background.jpg

Gruß
 

karlchen

Aktives Mitglied
13. Juli 2010
58
0
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Hallo liebes Forum,

wir versuchen ebenfalls ein eigenes Theme zu erstellen, haben die template.xml auch soweit angepasst. Offenbar ist aber irgendwo ein Fehler drin, denn es funktioniert überhaupt nicht.
Wir haben derzeit einen Testshop Version 4.03 laufen ( Wawi Version 1.0.10.1).

Bildschirmabdruck 1:
Bildschirmabdruck1.jpg
Abdruck 2:
Bildschirmabdruck3.jpg

Unsere template.xml:
Bildschirmabdruck2.jpg

Herzlichen Dank für eure Hilfe.

karlchen
 

Anhänge

  • Bildschirmabdruck1.jpg
    Bildschirmabdruck1.jpg
    64,9 KB · Aufrufe: 242
  • Bildschirmabdruck2.jpg
    Bildschirmabdruck2.jpg
    69,4 KB · Aufrufe: 125
  • Bildschirmabdruck3.jpg
    Bildschirmabdruck3.jpg
    60,2 KB · Aufrufe: 251
  • Bildschirmabdruck2.jpg
    Bildschirmabdruck2.jpg
    94,7 KB · Aufrufe: 242

muenster

Sehr aktives Mitglied
25. September 2012
1.825
39
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Erstmal einen eigenen Child Ordner anlegen ;) Siehe ersten Beitrag

Hier mal die Ordner von uns:
template.JPG

Code:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Templatename</Name>
    <Author>der Autor</Author>
    <URL>http://www.moda-store.de</URL>
    <Version>4.03</Version>
    <ShopVersion>4.03</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Beschreibung deines Templates!</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="Standard" Key="standard" Type="select" Value="weihnachten">
                <Option Value="weihnachten">weihnachten</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="weihnachten">
                <Option Value="weihnachten">weihnachten</Option>
                <Option Value="standard">Standard</Option>
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="weihnachten.css">
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/weihnacht.css"/>
        </CSS>
        <CSS Name="standard.css">
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/standard.css"/>
        </CSS>
    </Minify>
    <Boxes>
        <Container Position="left" Available="1"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="1"></Container>
        <Container Position="bottom" Available="1"></Container>
    </Boxes>
</Template>
 

Anhänge

  • template.JPG
    template.JPG
    16,9 KB · Aufrufe: 171

muenster

Sehr aktives Mitglied
25. September 2012
1.825
39
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Sorry gerade gesehen, das nicht alle Unterordner offen sind:
template2.JPG
 

Anhänge

  • template2.JPG
    template2.JPG
    19,2 KB · Aufrufe: 164

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
6.639
1.583
Berlin
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Ich habs noch nicht getestet, ob es gehen würde, denn ich würde nie mit Leerzeichen im Name oder sonstigen attributfeldern arbeiten.
 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.683
242
Leipzig
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

@Karlchen
Dein Theme sollte direkt im Ordner Templates liegen und nicht als Unterordner eines anderen Themes.

Code:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Karlchen</Name>
    <Author>Karlchen</Author>
    <URL>http://nocheintragen!</URL>
    <Version>4.02</Version>
    <ShopVersion>402</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Das Karlchen Prinzip!</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="Karlswahl" Key="Karlswahl" Type="select" Value="karl">
                <Option Value="grosserKarl">grosserKarl</Option>
            </Setting>
        <Section Name="Theme" Key="theme">
            <Setting Description="Theme" Key="theme_default" Type="select" Value="theme-karlchen">
                <Option Value="theme-karlchen">karlchen</Option>
            </Setting>
        </Section>
    </Settings>
    <Minify>
        <CSS Name="karlchen.css">
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
        <File Path="css/karlchen.css"/>
        </CSS>
    </Minify>  
    <Boxes>
        <Container Position="left" Available="1"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="1"></Container>
        <Container Position="bottom" Available="1"></Container>
    </Boxes>
</Template>
Deine XML sollte so aussehen. Entsprechend dein Theme-Ordner noch einen Bindestrich rein und deine CSS in "karlchen.css" umbenennen.
Autor und URL ganz oben noch korrigieren.
Inwiefern der Hintergrundschnippsel funktioniert weiss ich nicht. Ich hab mein Background als "background.jpg" einfach in mein Theme hinterlegt. Im Backend dann noch eigenes Hintergrundbild auswählen. Das sollte funktionieren.
 

MLiebschner

Aktives Mitglied
19. Juni 2012
55
1
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Hallo,

funktioniert das Einbinden eigener js-Dateien im 4.03?

Also wie:

Code:
<JS Name="meinejs.min.js">
   <File Path="js/meinejs.min.js"/>
</JS>

Muss das ebenfalls unter <Minify>?

Gruß Maik
 

holzpuppe

Sehr aktives Mitglied
14. Oktober 2011
1.683
242
Leipzig
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Falscher Fehler unterlaufen:

Bitte im Block
Code:
<Section Name="Theme" Key="theme">             
<Setting Description="Karlswahl" Key="Karlswahl" Type="select" Value="karl">                 
<Option Value="grosserKarl">grosserKarl</Option>             
</Setting>         
<Section Name="Theme" Key="theme">             
<Setting Description="Theme" Key="theme_default" Type="select" Value="[COLOR=#ff0000]theme-karlchen[/COLOR]">                 
<Option Value="[COLOR=#ff0000]theme-karlchen[/COLOR]">karlchen</Option>

in "karlchen" umbenennen.

Die CSS muss genauso heissen wie das Theme.
 

karlchen

Aktives Mitglied
13. Juli 2010
58
0
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Danke für die hilfreichen Infos. Unser eigenes Template ist erstellt und es funktioniert.
So kann ja nun bei einem Update auch nichts mehr verloren gehen.

Vielen vielen Dank :)
 

lexos

Aktives Mitglied
16. Februar 2011
51
0
Pinneberg
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Moin,
welche Änderungen müssen denn beim Update auf 4.03 beachtet werden?
So wie das selbst erstellte Template jetzt ist, wird der Warenkorb nämlich nicht mehr angezeigt.
 

karlchen

Aktives Mitglied
13. Juli 2010
58
0
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Hallo,

das ist richtig. Wir tüfteln zwar gerade an anderen Dingen aber das der Warenkorb nicht mehr funktioniert ist uns auch schon aufgefallen.

Was muss man denn nun genau tun, damit man den Warenkorb wieder in Gang gesetzt bekommt?

(Wir arbeiten im Moment noch mit der Shop Version 4.03)

Danke für eure Hilfe.
 

Bart70

Gut bekanntes Mitglied
18. Februar 2015
380
1
Filderstadt
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Ich möchte euch eine kleine Anleitung (relativ einfach) zur eigenen Erstellung eures Templates anbieten.
Leider ist derzeit die offizielle Anleitung für die meisten nicht wirklich nachvollziehbar bzw. verwirrend. (Stand: 10.12.2015)

Das Hauptaugenmerk bei dieser Anleitung liegt bei: Updatesicherheit!
JTL soll Updates machen können ohne das man danach stundenlang Dateien vergleichen, ändern und suchen muss. (Der Händler ist faul und hat andere Sachen zu tun! ;))

Als Grundlage nehmen wir hier das neue EVO-Template und verlinken einfach auf die entsprechenden Dateien, ohne diese selbst anzufassen.
Bevor hier wild auf das JTL4 geupdated wird macht euch bitte einen Testshop. Es ist dank JTL ja eine Community-Edition möglich (max. 500 Artikel).

Man braucht 2 Programme um alles einzustellen. Diese sollten aber schon bekannt sein. (Filezilla für den upload FTP und Notepad++ für Bearbeitung der css, xml, hmtl, php und co)

Wenn ihr alles frisch eingerichtet habt geht via FTP in eurem Testshop in den Ordner "templates". Da erstellt ihr einen neuen Ordner mit dem Namen "Templatename".
In diesen Ordner einen weiteren erstellen mit dem Namen "css".
Damit auch das Favicon und euer Background funktioniert, in den Ordner "Templatename" einen Ordner "themes" mit den Unterordnern "base", "smoerebroed" und "knaeckebrot" erstellen.
In "smoerebroed" und "knaeckebrot" jeweils euer background.jpg hochladen.
In "base" den Ordner "images" anlegen und da die favicon.ico und favicon.png ablegen. Man kann auch den ganzen Ordner "base" aus dem Evo/themes/ kopieren.

Es sollte dann so aussehen:
Den Anhang 17261 betrachten

Für eine bessere Übersicht erstellt diese Ordnerstruktur auch auf eurem PC. Das ist dann auch einfacher mit dem Upload.
Da erstellt ihr eine neue Datei namens "template.xml" im Ordner "Templatename". Öffnet Diese mit dem Notepad++ und kopiert folgenden Text rein:

HTML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Templatename</Name>
    <Author>der Autor</Author>
    <URL>http://www.deineseite.de</URL>
    <Version>4.01</Version>
    <ShopVersion>401</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Beschreibung deines Templates!</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="Knusperbrot" Key="knusperbrot" Type="select" Value="smoerebroed">
                <Option Value="smoerebroed">smoerebroed</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="knaeckebrot">
                <Option Value="smoerebroed">smoere</Option>
                <Option Value="knaeckebrot">knaecke</Option>
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="smoerebroed.css">
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/kross.css"/>
        </CSS>
        <CSS Name="knaeckebrot.css">
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/knackig.css"/>
        </CSS>
    </Minify>  
    <Boxes>
        <Container Position="left" Available="0"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="0"></Container>
        <Container Position="bottom" Available="0"></Container>
    </Boxes>
</Template>
Speichern und in den Ordner "Templatename" hochladen.
Jetzt erstellt ihr noch 2 Dateien:
1. knackig.css
2. kross.css

In diese Dateien könnt ihr eure css-Anpassungen des Evo-Themes speichern.

Eigentlich war es das schon an der Stelle.

Ab ins Backend eures Testshops dort kurz nochmal den Cache löschen und dann unter Template eure Template aktivieren.
Entsprechend alles einstellen, wie gewünscht und alles schick!


Die Namen können/sollten von euch nach Wunsch geändert werden.
In dieser xml habe ich 2 eigene Themes eingetragen, für die die vlt. Ostern, Weihnachten etc. unterschiedliches Aussehen haben möchten. Da reicht dann ein einfacher switch im Backend.
Wer das nicht möchte, sollte im Minify-Block und im "2." Theme Block entsprechend löschen.


Nochmal eine Erklärung welcher Ausdruck was bedeutet:

HTML:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template>
    <Name>Templatename</Name>               //Der Name des Ornder wo sich euer Template befindet
    <Author>der Autor</Author>                     // Auf wessen Mist ist das ganze gewachsen?
    <URL>http://www.deineseite.de</URL>              //Link zu eurem Shop
    <Version>4.01</Version>                      //so lassen vlt. nach einem Update hier die entsprechende Version nachtragen
    <ShopVersion>401</ShopVersion>              //so lassen vlt. nach einem Update hier die entsprechende Version nachtragen
    <Parent>Evo</Parent>                  //Welches Theme wird verwendet. Man kann hier jedes vordefinierte Theme nehmen, also bootstrap, cerulean, cosmo, etc.
    <Preview>preview.png</Preview>                   //Man kann ein Vorschaubild des Themes oder was auch immer hinterlegen. Sieht man nur im Backend unter Template
    <Description>Beschreibung deines Templates!</Description>         //Eine Beschreibung deines Themes
    <Settings>
        <Section Name="Allgemein" Key="general">                                        
            <Setting Description="test" Key="test" Type="select" Value="N">       //FINGER WEG!
                <Option Value="Y">Ja</Option>                                              //FINGER WEG!
                <Option Value="N">Nein</Option>                                          //FINGER WEG!
            </Setting>                                                                            
        </Section>                                                                              
        <Section Name="Theme" Key="theme">                                        
            <Setting Description="Knusperbrot" Key="knusperbrot" Type="select" Value="smoerebroed">   //Der Name wie euer Theme heissen soll
                <Option Value="smoerebroed">smoerebroed</Option>
            </Setting>
            <Setting Description="Theme" Key="theme_default" Type="select" Value="knaeckebrot">       //unter Value tragt ihr euer vorausgewähltes Theme ein
                <Option Value="smoerebroed">smoere</Option>                                   //Der Name wie euer Theme1 heissen soll dahinter ist der Name wie er im Backend angezeigt wird
                <Option Value="knaeckebrot">knaecke</Option>                                  //Der Name wie euer Theme2 heissen soll dahinter ist der Name wie er im Backend angezeigt wird
            </Setting>
        </Section>
    </Settings>
        <Minify>
        <CSS Name="smoerebroed.css">                                    //Der Name eueres Theme1 mit den Links auf welches "Grundtheme" es sich bezieht und wo eure angepasste css liegt
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/kross.css"/>
        </CSS>
        <CSS Name="knaeckebrot.css">                                     //Der  Name eueres Theme2 mit den Links auf welches "Grundtheme" es sich  bezieht und wo eure angepasste css liegt
            <File Path="../Evo/themes/evo/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="../Evo/themes/evo/custom.css"/>
            <File Path="css/knackig.css"/>
        </CSS>
    </Minify>  
    <Boxes>                                                               //Welche Boxen sollen angezeigt werden?
        <Container Position="left" Available="0"></Container>
        <Container Position="right" Available="1"></Container>
        <Container Position="top" Available="0"></Container>
        <Container Position="bottom" Available="0"></Container>
    </Boxes>
</Template>


habe alles so gemacht funktioniert wunderbar, nun habe ich in der EVO Themes, bootstrap, less, theme.less einiges verändert farben Shop etc. wo lege ich jezt die theme.less ab bezüglich Update Sicherheit, muss ich unter Mein Template, temes, den Ordner bootstrap, less anlegen bzw.darin ablegen?.

MfG
 

lexos

Aktives Mitglied
16. Februar 2011
51
0
Pinneberg
AW: Guide- Wie erstelle ich ein eigenes Template/Theme mit JTL 4.0+

Bedeutet das, dass die Pfade in der template.xml entsprechend auf Evo-403 angepasst werden müssen?

Also so:
<CSS Name="karlchen.css"> <File Path="../Evo-403/themes/evo/bootstrap.css"/>

Der Template-Ordner sieht bei mir nach den Updates auf 4.03 und 4.031 so aus:
Ordnerstruktur.PNG
 

Anhänge

  • Ordnerstruktur.PNG
    Ordnerstruktur.PNG
    22,5 KB · Aufrufe: 67
Ähnliche Themen
Titel Forum Antworten Datum
Neu Guide Upgrade JTL-Wawi - Ideen, Lob und Kritik 0
Neu Ameise - Logikfrage zum Import von Artikeln mit und ohne Varkombis gemäß Guide User helfen Usern - Fragen zu JTL-Wawi 0
Workflow Manuell HTML Request wie Server Antwort verarbeiten JTL-Wawi 1.7 0
Trackinglink enthält Hashtag - wie eingeben? JTL-Wawi 1.8 0
Neu Wie setzt Ihr eure Dev/Staging Umgebungen auf? Betrieb / Pflege von JTL-Shop 0
Neu Fehler: Sonderpreis falsch formatiert, wird nicht importiert; obwohl importiert genau wie exportiert User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie erstelle ich das richtige Layout für handy, Desktop etc Allgemeine Fragen zu JTL-Shop 0
Neu Wie gut ist die Datenbanksynchronisation? JTL-Wawi - Ideen, Lob und Kritik 4
Neu Wie kann ich im JTL-Shop einen Abwesenheitshinweis einstellen? Allgemeine Fragen zu JTL-Shop 1
Neu Artikelpreise Verknüpfen (ähnlich wie Stücklisten) User helfen Usern - Fragen zu JTL-Wawi 0
Neu Wie kann ich eine Inventurliste als Excel- oder csv-Datei erstellen? Gelöste Themen in diesem Bereich 3
Wie kann ich eine Benachrichtigung bei einem Wareneingang auslösen mit einer Mail über die Artikel die eingebucht wurden JTL-Wawi 1.8 2
Neu Conrad anbindung an JTL / eazy auction, aber wie? User helfen Usern - Fragen zu JTL-Wawi 4
[JTL-WAWI API] Wie funktioniert die Item-Image API? JTL-Wawi 1.8 0
Neu Wie kann ich die vergebene Coupons sehen. Welche Kunde welchen Copoun Allgemeine Fragen zu JTL-Shop 0
Neu Wie kann ich Alt-Texte für Bilder an Shopify senden? Shopify-Connector 2
Neu Wawi Artikelattribut = externer Link wie am besten darstellen beim Artikel? Allgemeine Fragen zu JTL-Shop 0
Neu Expressbearbeitung-Gebühr. Wie realisieren? Allgemeine Fragen zu JTL-Shop 1
Zusatzkosten wie Zölle JTL-Wawi 1.7 2
Neu Wie Wawi (Kundendaten) zurücksetzen User helfen Usern - Fragen zu JTL-Wawi 10
Neu [Umfrage] - Was hälst du von Updates - Innovativ oder aufwendig? Wie kann es besser gehen? Installation / Updates von JTL-Shop 0
Neu Wie Lizenz kündigen User helfen Usern - Fragen zu JTL-Wawi 13
Neu Wie funktioniert Individualproduktion / Einzelfertigung JTL-Plan&Produce - Ideen, Lob und Kritik 4
Neu Wie kann ich nicht mehr vorhandene ausländische USt-ID löschen? User helfen Usern - Fragen zu JTL-Wawi 1
Neu Kategoriebilder werden immer mit großem leeren Platz (wie für das 2.Bild) angezeigt Allgemeine Fragen zu JTL-Shop 6
Zusatzkosten wie Zölle JTL-Wawi 1.7 4
Neu 2 Mandanten 2 Datenbanken wie läuft es mim POS User helfen Usern 0
Neu Wie bekomme ich Statistik "Kunde/Artikelnummer/Menge/Netto-VK" auf Basis Rechnungspositionen? Arbeitsabläufe in JTL-Wawi 0
SQL ifGetPrice liefert nur netto Preise, wie komme ich an Brutto ran? JTL-Wawi 1.7 4
Neu Wie importiere ich die Zahlungs-ID für meine eigene benutzerdefinierte Zahlung, wie es andere Anbieter wie Paypal und Molli Payments in Shopware 6? Onlineshop-Anbindung 0
Neu Wie macht ihr das? Ebay Verkäufe automatisieren. Arbeitsabläufe in JTL-Wawi 3
Firmen- und E-Mail Einstellungen: Wie einrichten, wenn Firmenname (Impressum) anders ist als Shopname/Marke? JTL-Wawi 1.8 0

Ähnliche Themen