TemplaVoilá

Allgemeines

Dient nicht der Erweiterung der Funktionalität bestehender TYPO3-Sites, sondern der Erhöhung der Produktivität und der Vereinfachung der Erstellung von TYPO3-Sites

Oberfläche zum Einbinden von HTML-Vorlagen (Mapping)

Datenstruktur (DS) und Template-Objekt (TO)

Installation

TemplaVoilá Installation Login Backend

http://localhost/typo3/typo3/backend.php

Admin Tools: Ext Manager

Installation

Oben: Setting Enable extensions without review (basic security check)

Häckchen setzen Random auswählen Mit update bestätigen unten

Installation

Static Info Tables installieren ExtManager Import Extensions (oben) List or look up all extensions Static info tables Look up Die oberste auswählen Import update

Installation

Import extensions (oben) List or look up all extensions TemplaVoilá eingeben Mit look up bestätigen TemplaVoilá unter Miscellaneous auswählen Install extension anklicken

Installation

Dependency Error:

Import now (opens a new window, wenn es nötig, mehrmals)

Mapping

Anlegen eines SysOrdners: Eine normale Seite erstellen Auf Standard Vorlage Die Seite Templates benennen Im Seitenbaum auf die neue Seite klicken und zur

Bearbeitung den Stift wählen Unter Standard SysOrdner wählen

Mapping

Eine neue Seite anlegen, Home benennen Im Seitenbaum auf die Seite klicken, den Stift

auswählen Unter Optionen, bei Allgemeine Datensatzsammlung

auf Ordner klicken Im geöffneten Fenster Templates auswählen

Mapping

Ein Template für Home anlegen Web – Template – create template for new site Im Bereich Info/Modify auf das Stiftsymbol neben

Setup klicken#Default PAGE object:page = PAGEpage.10 = USERpage.10.userFunc = tx_Templavoila_pil->main_page

Mapping

HTML-Vorlage und andere notwendige Dateien herunterladen und im fileadmin in Templates positionieren

Datei – Dateiliste – Templates Eine HTML-Datei als Vorlage nehmen, das Icon

HTML anklicken TemplaVoilá auswählen

Mapping

Dem Bereich ROOT den Body-Tag zuweisen Auf Map Inner (exclude tag) Set

Mapping

Headline field_headline – Add Title: Headline Mapping instructions: Hier wird der Seitentitel

eingesetzt Sample Data: Beispielüberschrift Editing Type: TypoScript Object Path Object path: lib_headline

Mapping

Add - Map <div>-Container mit id=headline wählen INNER(Exclude Tag) – Set

Speichern Save as Voila1 – create TO and DS

Mapping

SysOrdner anschauen Web – Liste – Templates Icon TO anklicken, TemplaVoilá auswählen

Anlegen neuer Bereich ist hier nicht möglich

Mapping

Auf DS klicken – Bearbeiten Es wird die Datenstruktur im XML-Format

angezeigt Fortführen des Mappingvorgangs Datei – Dateiliste- Fileadmin - .html Templavoila – Load – voila1 – load data structure

Mapping

field_inhalt -Add Title : Inhalt der Seite Editing Type: Content Elements – Add Map – INNER (Exclude Tag) Analog: field_nav mit TypoScript Object Path:

lib.nav field_spalte_rechts, Editing Type: Content elements Save as

Mapping

Zuweisen der TemplaVoila-Datenstruktur an die Startseite

Web – Seite – Home – Stift Seiten – Datenstruktur: voila1 Benutze Vorlagendesign: voila1 <Template> Unterseiten: voila1 Unterseiten: voila1

Mapping

Einbinden der Stylesheetdatei Web – Liste – Templates TO – TemplaVoila Bei Select HTML header parts ein Häckchen setzen Auch bei Meta-Tag und Stylesheet-Link Set Save

Mapping

Headline-Bereich Web-Template – Setup Vor der Definition des PAGE Objekts eingeben: lib.headline = TEXT lib.headline.value = {page:title} lib.headline.insertData = 1 lib.headline.wrap = <h1> | <h1> Speichern

Mapping

Einbinden des Menüs Web – Template lib.nav = HMENU

lib.nav.1 = TMENUlib.nav.1 {expAll = 1wrap = <u1 id=“mainnav“> | </u1>NO.wrapItemAndSub = <li> | </li>}

Mapping

Anlegen weiterer Seiten: Web – Funktionen - Home Mehrere Seiten erzeugen

Mapping

Inhalte einfügen Web – Seite – Home Auf Icon neben Inhalt der Seite klicken Normalen Text auswählen – einen beliebigen Text

einfügen - Speichern Analog bei Spalte rechts Als Inhalt nur Bilder wählen Speichern

Mapping

Vielen Dank für Ihre Aufmerksamkeit