Eigentlich sollte es gar nicht so schwer sein, mit dem templatr ein individuelles Design zu erstellen. Mit ein bisschen rumexperimentieren, wird man das gewünschte Resultat schneller erreichen können, als mit seitenlangen Erklärungen. Ich will mal versuchen, das Wesentlichste zu erklären.

Die Abschnitte auf der linken Seite zeigen schon einmal die einzelnen Schritte, die für die Erstellung des Templates notwendig sind. Während der Erstellung des Templates kann man ohne Probleme zwischen den Abschnitten wechseln. Es geht nichts verloren.

Mit dem ersten Schritt Abschnitt wird das Layout, also die Seitenaufteilung festgelegt. Es gibt welche mit “Sidebar” und einer “Extrabar” und es gibt welche, die nur eine “Sidebar” enthalten. Die “Sidebar” wird in der Anzeige gelb dargestellt und die “Extrabar” rot. Das Grün steht für den Contentbereich. Das Dunkelblau für den Header (oberen Bereich) und das helle Blau für den Footer (unterer Bereich). Mit den Pfeilen kannst Du das Layout wechseln, und mit einem Klick auf die Anzeige wird das ausgewählte Layout auf die Vorschau und das Template angewendet. Das Layout kann auch nachträglich jederzeit gewechselt werden.

Im zweiten Abschnitt können Hintergrundbilder und Logos dem Template hinzugefügt werden. Die Bilder können später im “Designer” den gewünschten Elementen hinzugefügt werden (Dazu später mehr). Es können Bilder in den Formaten GIF, JPG, PNG und BMP hinzugefügt werden. Remotebilder (Bilder, die über eine Url erreichbar sind) können zur Zeit nicht hinzugefügt werden. Wenn Du Bilder in deinem Design verwenden möchtest, dann ist es am besten, wenn Du diese noch vor dem designen in einem Rutsch auf den Server hoch lädst, um dich nachher im Designer auf das Wesentliche konzentrieren zu können.

Im dritten Abschnitt, der Designer, kannst Du das Aussehen der einzelnen Seitenelemente festlegen. Es kann alles nach belieben verändert werden, was man sich vorstellen kann. Also alles das, was man auch mit einem normalen HTML-Editor verändern kann. Um ein Element, eine Klasse (Gruppe von Elementen des gleichen Typs) oder ein HTML-Tag auszuwählen, gibt es zwei Möglichkeiten. Man kann über die Auswahlboxen, die sich über der Vorschau befinden, das gewünschte Element auswählen. Oder man kann einfach in der Vorschau auf das gewünschte Element klicken. Verwendet man die zweite Möglichkeit, wird der Bereich den das Element einnimmt, je nach Typ mit einer Farbe (gelb) hinterlegt. Ist es eine Klasse oder ein HTML-Tag, werden auch die Elemente des gleichen Typs farblich hinterlegt. Genauso wird auch das sogenannte “Elternelement” farblich (blau) hinterlegt. Man kann sich so recht schnell orientieren und bekommt ein Gefühl für die Zusammenhänge. Als zusätzliche Hilfe werden unter den Auswahlboxen noch einmal die Zusammenhänge der ausgewählten Elemente dargestellt.

Jedes Element kann nun verändert werden, indem man eine Aktion auswählt. Wähle hier aus, was du verändern möchtest. Ob die Schriftart (Font), den Rand (Border), den Hintergrund (Background) usw. usf. Mit der Auswahl einer Aktion öffnet sich ein eingebetteter Dialog mit entsprechenden Eingabefelder. Auch hier sollten die meisten Möglichkeiten selbsterklärend sein. (Eine genaue Beschreibung, mit den einzelnen Optionen ist im Moment in Arbeit) Sollte etwas nicht so verständlich oder einleuchtend sein, einfach mal mit den Möglichkeiten experimentieren. Es geht nichts kaputt

Die Änderungen werden mit einem Klick auf den Schalter “Save” gespeichert. Die Änderungen werden sofort sichtbar.

Der vierte und letzte Schritt ist der Download. Ja, das wars schon. Wenn Du mit deinem Design zufrieden bist, dann kannst du es hier nun als ZIP-Datei downloaden. Diese ZIP-Datei muss entpackt werden, und in das Templateverzeichnis Deiner Anwendung kopiert werden.

Solltest Du das Design nur mal in Deiner Anwendung testen wollen, oder später mal überarbeiten wollen, so gibt es auch hier Möglichkeiten. Dein Design wird bis zu 30 Tagen auf unserem Server gespeichert. Solltest Du innerhalb dieser 30 Tage das Design noch einmal überarbeiten wollen, musst du nichts weiter tun, als den templatr in Deinem Browser noch einmal aufzurufen. Du kannst dann genau dort weiter machen, wo Du aufgehört hast.

Es ist auch kein Problem, zwischendurch einmal einen Refresh der Seite durchzuführen. Die Einstellungen bleiben immer erhalten.