Entwicklung & Design

Workshop TemplaVoilà Teil 2: Eigene Content-Elemente erstellen

Nachdem der Workshop in T3N Nr. 13 gezeigt hat, wie Templates erstellt und gemappt werden, geht es diesmal darum, eigene Content-Elemente zu konzipieren. Mit Hilfe von TemplaVoilà ist es sehr einfach, diese zu erstellen und dem Redakteur zur Verfügung zu stellen.

HTML und CSS

Wie bereits in Teil 1 werden auch in diesem Workshop ganz einfache und kurzgehaltene Vorlagen verwendet. Prinzipiell können die verschiedenen Bereiche und Content-Elemente beliebig erweitert und mit CSS gestaltet werden. Sämtliche Dateien und Listings in diesem Workshop finden Sie über den am Ende des Artikels abgedruckten Softlink auf der T3N-Website.

Als erstes Content-Element erstellen Sie einen zweispaltigen Container, der es ermöglicht, Standard-Content-Elemente in zwei Spalten zu platzieren. Das HTML-Template besteht aus einem umschließenden Container, der wiederum zwei Div-Container enthält. Diese innen liegenden Container werden dann über CSS so formatiert, dass sie nebeneinander stehen.

HTML-Vorlage (zweispalten-50-50.html)
<html>
<head>
<title>Zwei Spalten</title>
<link href="mainstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="zweispaltencontainer">
	<div class=“linke-spalte“> </div>
	<div class=“rechte-spalte“></div>
	<div class=“clearer“></div>
</div>
</body>
</html>

Listing 1

CSS-Vorlage (mainstyle.css)
.zweispaltencontainer .linke-spalte{
float:left;
width:50%;
}

.zweispaltencontainer .rechte-spalte{
float:left;
width:50%;
}

.clearer{
float:none;
clear:both;
}

Listing 2

Die HTML-Datei muss, wie auch das Page-Template, im Fileadmin-Ordner auf dem Server Ihrer TYPO3-Installation in einem Unterverzeichnis mit dem Namen „templates“ bereitgestellt werden. Die CSS-Definitionen werden einfach dem vorhandenen Stylesheet hinzugefügt. Sind die Daten bereitgestellt, können Sie diese im nächsten Schritt mit Hilfe von TYPO3 und TemplaVoilà ansprechen.

Content-Element für „2 Spalten“ erstellen

Wechseln Sie im Backend zunächst in das Modul „Filelist“. Dort navigieren Sie zu Ihrem Template-Verzeichnis und klicken mit der Maus auf das Icon links neben dem HTML-Template „zweispalten-50-50.html“. In dem kleinen Aufklappmenü wählen Sie den untersten Punkt „TemplaVoilà“.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Uwe Urbann

Super Artikel, sehr verständlich erklärt, vielen Dank! War genau das was ich gesucht hatte. Die flexiblen Content Elemente sind ja wirklich eine feine Sache!

Nur ein Hinweis: ich hatte den HTML-Code direkt aus dem Artikel übernommen (konnte den Softlink nicht finden). Und da sind die Anführungszeichen bei den inneren div-Containern nicht die „richtigen“, sondern werden (zumindest auf dem Mac) als typographische Anführungszeichen übernommen. Dadurch funktioniert das Mapping nicht und es kommt zu einer Fehlermeldung!

jo.tischer
jo.tischer

Der artikel ist fein, aber doch schon alt?
Das ist meine DS XML „Bildüberschrift“:

1

ROOT
Select the HTML element on the page which you want to be the overall container element for the template.

array

Bilderheadline

input_g

Bilderheadline

input
48
trim

Alt-Tag der Headline

input

1

Alt-Tag der Headline

input
48
trim

Da ist von „Typoscript“ oder GIF nichts zu sehen. Weiß jemand warum?

jo.tischer
jo.tischer

1

ROOT
Select the HTML element on the page which you want to be the overall container element for the template.

array

Bilderheadline

input_g

Bilderheadline

input
48
trim

Alt-Tag der Headline

input

1

Alt-Tag der Headline

input
48
trim