Neues Template erstellen

Aufbau und Konventionen

Wenn du ein neues Template für deine Website bauen möchtest, musst du dich an ein paar Konventionen halten, damit pinion mit deinem Template arbeiten kann. Diese sind im folgenden genauer erklärt.

Zu Beginn musst du im Ordner "templates" einen neuen Ordner für dein Template anlegen. Gib dem Ordner den Namen, den dein Template erhalten soll. In dem Ordner kann eine info.ini angelegt werden, in der du deinem Template noch eine Beschreibung und weitere Daten angeben kannst. Du kannst dich hierbei an der info.ini des basic-templates orientieren. Es besteht auch die Möglichkeit, deinem Template ein Symbol bzw. Vorschaubild zu geben. Dieses muss in der Größe  240x180px als icon.png in deinem Template-Ordner abgelegt werden.

Für das Styling des Templates müssen verschiedene Seiten- und Modul-Templates angelegt werden. In diesen Templates können jeweils verschiedene Template-Variationen definiert werden, zwischen denen bei jeder einzelnen Seite und jedem Inhaltselement hin- und hergeschalten werden kann. In jeder Template-Variation (und zuerst in jedem Ordner "standard") muss eine php-Datei mit dem Namen _main.php vorhanden sein, die die komplette Struktur der Seite bzw. des Moduls und die Template-Variablen enthält. Neben dieser kannst du die Ordner "css" und "js" anlegen, in die du CSS- und JS-Dateien legen kannst. Diese werden dann automatisch importiert.

Wichtig: Wenn du ein neues Modul anlegst, wird automatisch das Styling der Template-Variation "standard" verwendet. Sollte kein "standard" vorhanden sein, greift pinion auf die Template-Variation zurück, die direkt im Modul definiert ist.

Seiten-Templates

Lege zuerst ein Seiten-Template an, in der die Grundstruktur der Seite definiert ist. Dazu erstellst du in deinem Template-Ordner einen Ordner mit dem Namen "page". In diesem wird empfohlen, zuerst einen Ordner "standard" zu definieren, der das Styling für deine Standard-Seite enthält.

Lege hier nun die _main.php an und füge in diese deine komplette Seitenstruktur ein (also alles was in einem normalen html-file im body steht).

areas anlegen

Areas sind Bereiche, in denen pinion Inhalt einfügen kann. Damit pinion also Inhalt in dein Seiten-Template rendern kann, müssen Areas definiert werden. Dies geschieht mit der Area-Funktion:

Wichtig: Wenn du mehrere Template-Variationen anlegst, solltest du darauf achten, dass gleiche Areas in den Varitionen auch die gleichen Namen haben, da über den Namen der Area festgelegt wird, welcher Inhalt in sie gerendert wird. Wenn du zwischen Templates hin- und herschaltest, die nicht die gleichen Areas besitzen, wird Inhalt, der in diesen Areas definiert ist, nicht mehr gerendert und ist nicht sichtbar.

pageVars

pageVars sind Variablen für Seiten, die in deinen Templates verwendet werden können und anschließend im Frontend verändert werden können. So kannst du z.B. die Hintergrundfarbe deines Templates über einen ColorPicker im Frontend regeln.

pageVars werden in der info.ini deiner Template-Variation (also in templates->tempaltename->page->standard->info.ini) definiert:

info.ini im page-Ordner
    [code]
    [variables]
    color = "#554433"
    [/code]
    oder
     [Code]
    [variables]
    color[editor] = "input.ColorPicker"
    color[value] = "#ffffff"
    [/code]

Wenn die pageVars dann noch im Template eingebaut werden, können vielerlei Styling-Einstellungen direkt im Frontend verändert werden:

    [Code: pageVars in _main.php]

Im Frontend können die pageVars dann mit einem Klick auf das Bearbeiten-Symbol der Seite verändert werden. Wenn du im Bearbeiten-Modus der Seite bist, kannst du eine Gruppe namens "Variables" aufklappen, in der die pageVars gelistet werden. Hier kannst du deine pageVars verändern.

[Screenshot pageVars verändern und hinzufügen)

Du hast auch die Möglichkeit direkt im Frontend neue pageVars hinzufügen, die du dann im Template verwenden kannst.

Modul-Templates

Du kannst für jedes Modul verschiedene Template-Variationen anlegen, das standardmäßig ausgewählte Template-Variation heißt auch hier "standard". Hierzu musst du in deinem Template-Ordner für jedes Modul einen Ordner mit dem Modulnamen anlegen, der wiederum die _main.php für die Modul-Struktur und die Ordner "css" und "js" mit den jeweiligen Stylesheet und JS-Dateien enthält.
        
Wenn für ein Modul keine Template-Variation in deinem Template angelegt wird, greift pinion (wie beim seiten-Tempalte) auf das Standard-Template zurück, das direkt im Modul definiert ist.

andere Template-Variation aufrufen

um die Template-Variation eines Inhaltselements zu ändern musst du in der Bearbeitungs-Leiste auf den Tempalte-wechseln-Symbol klicken. Es erscheinen alle möglichen Variationen deines Tempaltes, die du für dieses Modul definiert hast. Klicke auf die gewünschte Variante und pinion tauscht das Styling sofort aus.

Tipp: Wenn du nicht ganz sauber gestylt hast, kann es sein, dass sich das Styling der vorherigen Variation auf das neue Styling auswirkt, da das Stylesheet noch geladen ist. Lade in diesem Fall die Seite einfach neu und schaue, ob dein Styling dann korrekt ist

Template hochladen

Um Webseiten, die mit pinion erstellt werden, einfach und vielfältig stylen zu können,haben wir das Ziel eine Reihe schöner und unterschiedlicher Templates zur Verfügung zu stellen. Wenn du mitmachen möchtest und dein Template anderen zur Verfügung stellen möchtest hast du folgende Möglichkeiten:
- Benutze das folgende Upload-Formular.
- oder schicke das gezippte Template an template@pinion-cms.org

Bitte achte darauf, dass du Namen, Versionsnummer und Beschreibung in die info.ini schreibst und dass der komplette Template-Ordner gezippt ist. Es wäre schön, wenn du auch ein Template-Symbol bzw. Vorschaubild erstellen würdest