Frontend in TemplaVoilà visualisieren

So funktioniert's

Das HTML-Markup des TemplaVoilà-Moduls (genauer gesagt der TemplaVoilà Datenstrukturen) lässt sich beliebig konfigurieren und das eröffnet die große Gestaltungsmöglichkeiten.

Öffne dafür die Datenstruktur, die du bearbeiten möchtest (im Sysfolder "Storage Folder") in der Listenansicht. Dort gibt es das Feld XML der Datenstruktur, in dem die Ausgabe beeinflussen kannst. Innerhalb des Tags <meta> kannst du z.B. Folgendes selbst einfügen:

XML für alternative Ausgabe im TV-Modul

<beLayout>
  <![CDATA[
    <table style="width:785px;border-collapse:collapse;border:0;background-position:-40px 0;background-image:url('http://www.example.de/fileadmin/backend/top.jpg');background-repeat:no-repeat;">
      <tbody>
        <tr style="height:116px;">
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr style="background-position:-40px 0;background-image:url('http://www.example.de/fileadmin/backend/middle.jpg');">
          <td style="padding-left:130px;width:375px;vertical-align: top;">###field_content###</td>
          <td style="padding-right:10px;background: transparent; vertical-align: top;">###field_subcontent###</td>
        </tr>
        <tr style="background-position:-40px 0;background-image:url('http://www.example.de/fileadmin/backend/bottom.jpg');height:69px;">
          <td colspan="2">&nbsp;</td>
        </tr>
      </tbody>
    </table>
  ]]>
</beLayout>

In diesem Fall wird eine Tabelle benutzt, wie es standardmäßig bei TemplaVoilá der Fall ist. Du kannst das HTML aber auch vollkommen frei selbst gestalten. Schreibe innerhalb des CDATA-Bereichs einfach was du möchtest.

Die mittlere Zeile (das zweite <tr>) ist der interessante Teil. Hier wurden in die beiden Spalten die Marker ###field_content### und ###field_subcontent### eingetragen, die nachher durch die TemplaVoilá Eingabeelemente ersetzt werden. Wie die Felder in deinem Setup heißen hast du der Erstellung der Datenstruktur festgelegt, bzw. kannst du auch im XML unterhalb des Tags <el> nachsehen.

Background Images richtig erstellen

Rufe das Frontend auf, entferne die Inhalte auf den Flächen die TemplaVoilá besetzen soll mit Firebug und mache einen Screenshot. Falls du Firebug nicht benutzt, kannst du die Inhalte natürlich auch herausretuschieren.

Wahrscheinlich musst du den Screenshot etwas herunterskalieren und/oder beschneiden um ihn in das vermutlich schmalere TemplaVoilá-Modul einzupassen.

Nach der Skalierung ist zu empfehlen das Layout in Kopf, Mitte und Fuß zu teilen, da du im Ergebnis eine flexible Höhe brauchst.

Lade die Slices hoch und binde Sie als background-images in die Inline-Styles des TV-HTML ein.

Jetzt wirst du vermutlich noch ein wenig an den Abständen spielen müssen bis alles ordentlich aussieht.

Trackback link
Tags: templavoila, usability, typo3
Views: 19

2 Kommentar(e)

Diesen Kommentar kommentieren

Felix Oertel

16.08.2009

18:08

sicher nützlich

Ich muss sagen, dass ich wirklich froh bin, dass ich mich nicht mit sowas rumschlagen muss. :-) Als reiner Extension-Entwickler bin ich weit weit weg vom Seitenlayout. Grüße, Felix PS: Du könntest die Kommentarbox ruhig ein bisschen größer machen. :-)

http://www.foertel.com

Sebastian Gebhard

20.08.2009

09:20

Ist erledigt

Die Eingabefelder sind jetzt größer ;)
Ich versuch auch hin und wieder im Bereich TYPO3-Development zu posten, der ja für dich wahrscheinlich interessanter ist.

http://www.sgtypo3.de