Modulares Design

Durch das modulare Design kann eine HTML Struktur innerhalb von Typo3 aufgebaut werden. Dadurch können z.B. Bootstrap Elemente nachgebaut werden,um darin Typo3 Content Elemente und andere Plugins verwenden zu können.

Im Beispiel: Bootstrap Panels mit Elementen der Shop Extension darin.

Weitere Einstellungen im Container Element

Plugin Options

Ein Container ohne weitere Einstellungen in den Plugin Options nimmt die gesamte Breite des übergeordneten Elements ein. Es ist keine Höhe vordefiniert. Jeder dieser Container hat die Klasse "ws-wrap".

Diesem Container kann eine Custom Class mitgegeben werden. Die anderen Klassen die vergeben werden können (fullwidth class, Container Class) wirken sich erst aus, wenn die jeweilige Option aktiv ist.

 

Option Full Width

Wenn diese Option aktiv ist, wird um den Container mit der Klasse "ws-wrap ( + Custom Class)" ein Container mit der Klasse "ws-fullwidth" gelegt. Dieser Container nimmt die gesamte Seitenbreite ein.

Mit der Einstellung fullwidth class, kann auch diesem Container eine eigene Klasse mitgegeben werden.

 

Option Container

Wenn diese Option aktiv ist, wird um den Container mit der Klasse "ws-wrap ( + Custom Class)" ein Container mit der Klasse "container" gelegt. Dieser Container entspricht dem Bootstrap Standard.

Mit der Einstellung Container Class, kann auch diesem Container eine eigene Klasse mitgegeben werden.

Wenn beide Optionen aktiv sind, wird der Container mit der Klasse "fullwidth" um den Container mitder Klasse "container" und um den Container mit der Klasse "ws-wrap" gelegt

Mehrspaltige Grid Elemente

Zusätzlich zum Container können auch mehrspaltige Grid Elemente im Backend definiert werden. Diese Elemente entsprechen dem Bootstrap Standard.

In den Plugin Options lassen sich die Breitenverhältnisse für die jeweiligen Spalten und Gerätegrößen einstellen. Unter custom classes können eigene Klassen für jede Spalte und Klassen für die übergeordnete row definiert werden.

 

Standard Elemente und Klassen

Bei einer Standardinstallation, werden einige Seiten und Elemente erstellt und Klassen vordefiniert. Um eine Seite wird immer ein <div> Element mit der Klasse "ws-basic" oder "ws-landing" gelegt (kann in den Seiteneinstellungen unter Appearance angepasst werden).

Im Pagetree unter resources werden die Seiten header, footer und widgets erstellt.

header

Die Seite unterteilt sich in die Bereiche Header und Top-Area. Diese Bereiche werden auf der Seite dann jeweils in einen Container mit der Klasse "ws-header" und "ws-toparea" gerendert.

 

footer

Die Seite unterteilt sich in die Bereiche Sub-Feature und Main. Diese Bereiche werden auf der Seite dann jeweils in einen Container mit der Klasse "ws-bottomarea" und "ws-footer" gerendert.

 

Alle anderen Content-Seiten sind unterteilt in die Bereiche Sub-Feature und Main. Diese Bereiche werden auf der Seite dann jeweils in einen Container mit der Klasse "feature-content" und "main-content" gerendert. Diese Container nehmnen die gesamte Breite des Bildschirms ein und rendern um den eingefügten Inhalt immer einen Bootstrap Container.

 

 

Nach diesen Elementen wird die Seite widgets gerendert. Darin Enhaltene Elemente können zum Beispiel als mitlaufende Widgets rechts oder links definiert und formatiert werden. Ein Beispiel ist der Back to top Button rechts unten.

Accordion

Das Accordion ist ein eigenes Grid Element für Typo3. Dieses erlaubt beispielsweise das Einfügen von viel Inhalt, der durch Überschriften geteilt ist. Diese Überschriften sind klickbar, und der Inhalt klappt darunter aus.

Alle Elemente, die in diesem Accordeon Element liegen, werden als eigene Überschrift gezählt. Diese Überschrift holt sich Typo3 aus dem Titel des Elements. Hierbei klappt immer nur das aktuelle Accordion aus

Erstes Element des Akkordeon

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zweites Element des Akkordeon

Drittes Element des Akkordeon

Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Slider Element