Templatevorlagen erstellen
Assets in die Seitenstruktur einbinden
Die eben erstellten Assets sind aber auf der Seite noch nicht sichtbar, da sie innerhalb eines Templates eingebunden werden müssen.Um ein Asset im Template auszugeben, wechseln Sie auf den Reiter Seitenstruktur.
Über das Tag wird auf das erste Asset zugegriffen. Die einfachste Art alle drei Assets aus der eben erstellten Assetvorlage auszugeben, ist das Einfügen des Folgenden Codes in das HTML-Eingabefeld.
ASSET1
ASSET2
ASSET3
Hier kann mit HMTL, CSS und Smarty die Assets beliebig eingebunden werden.
Templatevorlagen erstellen
Die Anordnung der Assets kann auch extern in einer Templatedatei abgelegt werden.Legen Sie dazu eine Templatedatei templatebeispiel.tpl im Ordner \templates\kb_redspark\modules\cms\pagecontent an. Füllen Sie diese mit dem folgenden Code:
<h1></h1>
<div style="float: left; margin-left:10px;"></div>
<div></div>
<div class="clear"> </div>
Diese bindet vorher definierten ins Template ein und formatiert Asset1 als Überschrift. Weiterhin werden das Bild (Asset2) und der Text (Asset3) mit einem Abstand von 10px nebeneinander ausgegeben.
Wenn die Datei angelegt ist, kann sie unter dem Reiter Seitenstruktur unter dem Dropdownfeld Templatevorlage ausgewählt werden. Wählen Sie dort den Eintrag templatebeispiel aus.
Speichern Sie die Seite ab und schauen Sie sich die Vorschau an.
CSS einbinden
Um ein CSS File einzubinden muss lediglich eine CSS-Datei in den Ordner \templates\kb_redspark\styles kopiert werden. Alle Dateien unterhalb dieses Ordner werden automatisch ins System eingebunden. Um alle CSS-Dateien besser zu strukturieren, sind auch Ordnerstrukturen unterhalb des Ordners möglich.Alle Dateien werden zu einer CSS-Datei zusammengefasst und zur Performanceverbesserung statifiziert.
Javascript einbinden
Alle Javascriptdateien werden unter dem Ordner \templates\kb_redspark\javascript abgelegt.Legen Sie eine Javascriptdatei an und speichern Sie diese in o.g. Ordner an.
Das Javascript muss dann noch eingebunden werden. Üblicherweise wird es über folgenden Code in das Headertemplate header.tpl unter templates\kb_redspark\modules\page einbunden.
{createlinkjs files='javascript.js'}
