Will man Webseite recht einfach auf mobilen Geräte wie iPhone, iPad, Android und co. darstellen, so nimmt jQuery Mobile hier viel Arbeit ab, wenn man sich im Gegensatz dazu mit Responsive Design beschäftigt. Alle HTML Elemente werden bestmöglich über jQuery für die entsprechenden Geräte aufbereitet, so dass die Webseite auf einem Smartphone dem Look-and-Feel einer nativen App des jeweiligen Gerätes sehr nahe kommt inklusive Home Button.
Dieses TYPO3 Template ist die Vorversion zu TYPO3 Template inklusive Typoscript zum Customizing. Es enthält ebenso eine komplette Seitenstruktur, komplettes Typoscript inklusive TSConfigs. Es ist alles allerdings etwas einfacher gehalten. Der Fußbereich besteht lediglich aus einem einfachem Menü und der Kopfbereich besteht nur aus einem Image Cycle Effekt, welcher die Bilder aus dem Media Field bezieht.
Eigentlich für den Themeforest Market habe ich ein Template für TYPO3 entwickelt, welches die dort üblichen Template- und Zusatzfeatues in TYPO3 mit zumeist Typoscript Boardmitteln abbilden kann. TYPO3 Templates als Tutorial und Ideeengeber findet man im Web so nicht, auch findet man bei Themeforest momentan Templates für viele CMS-Systeme leider nicht für TYPO3, ich hatte gehofft dieses scheint in irgendeiner Form eine "Marktlücke" zu sein, allerdings wohl nicht für die Jungs dort.
In TYPO3 erstellt man normalerweise Inhalte mit dem RTE Editor im Backend, dieser bietet viele Gestaltungsmöglichkeiten. Auch das setzen der Links mit Stiles geht wunderbar. So gibt es ein extra Dropdown Feld Stile (Style), welche aber doch per Standard erstmal recht mager ausfällt.
Wir können hier neue Auswahlmöglichkeiten über die RTE Config in der TSPage hinzufügen, die dann auch eigene CSS nutzen. Aber die eigentliche HTML Ausgabe kann nicht verändert werden.So ist es nicht sinnvoll möglich diese Links über CSS und ohne Javascript auch in älteren Browser als Button mit Icon zu designen.
![[node:vocab:6:term] [node:vocab:5:term]](/sites/default/files/240/typo3_frame_layout_wrap.png "[title]")
In TYPO3 gibt es zur Gestaltung von einzelnen Inhaltselementen diverse Felder meisten nutzt man hierfür die layout und section_frame Auswahlbox. So können hier beliebig viele und neue Elemente hinzugefügt werden. Was allerdings etwas umständlicher ist, ist nachher anhand der Felderauswahl die CSS-Klassen auszugeben. Für die bereits im Standard enthaltenen Felder steht bereits Typoscript zur Verfügung, für neue muss man manuell Hand anlegen.
![[node:vocab:6:term] [node:vocab:5:term]](/sites/default/files/239/typo3_body_tag.png "[title]")
In TYPO3 kann man über Typoscript eine BODY-Klasse setzen. Allerdings findet man dazu im Netz kaum "richtige Lösungen". Die meisten nutzen einfach page.bodyTagCObject.wrap um Klassen innerhalb des Body Tag zu setzen. Will man nun dynamisch mehrere Klassen zur Gestaltung nutzen z.B Pageid, Anzahl von Spalten und genutztes Layout, so wäre es sehr hilfreiche einfach eine Liste bzw. Array zu nutzen, dies geht allerdings nicht ganz so einfach bzw. die meisten Leute kennen diese Funktion (Typoscript approvements in TYPO3 >4) nicht.
Bis Typo3 4.4 musste man das Lightbox / Fancybox Feature für eine Klickvergrößerung (enlarge on click) noch per Erweiterung einbinden oder sich etwas über Typoscript zusammen stricken (Bildergallery ohne Erweiterung in Typo3 einbinden), um die vergrößerten Bilder nicht im üblich Popup anzeigen zu lassen. Ab der neueste Typo3 Version 4.5 kann man das ganze nun direkt mit onboard Mitteln lösen.
Mit Typo3 ist es nicht möglich direkt eine Bildergallery einzubinden ohne eine Erweiterung wie wt_gallery zu nutzen, die wieder extra installiert werden muss. Mithilfe ein paar kleinen Typoscript (en) bekommt man allerdings schöne Ergebnisse mit automatischem Verkleinern der Bilder, skalieren und croppen auf ein gleich großes Quadrat. Hierzu kann dann ganz einfach ein Inhalt vom Typ "Bilder-Element" auf der Seite eingebunden werden.
Breadcrumbs helfen nicht nur dem User auf einer Webseite zur Navigation und zum Darstellen von Menü- und Seitenstrukturen nach dem Motto: Wo bin ich gerade? Sie werden mittlerweile auch von Google erkannt und direkt in die Ergebnislisten mit eingebunden. Allerdings nur wenn es Google für nötig hält und sie richtig lesen kann.
Ähnlich wie mit Drupal (Dynamische Hintergrundbilder auf der Webseite mit Drupal) kann man auch relativ einfach in Typo3 unterschiedliche Hintergrundbilder für jede Webseite einblenden lassen und mit Effekten versehen. Dazu steht uns der GIFBUILDER zur Verfügung, wobei hiermit neben GIFs auch PNGs nutzen können, wenn wir die entsprechende Library aktivieren.
