Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 14

Workshop TemplaVoilà Teil 2: Eigene Content-Elemente erstellen

    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à“.

  • Seite:
  • 1
  • 2
  • 3
  • 4
  • 7

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
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

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?

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!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden