TYPO3 Download: CSS Style Sheets Navigation, Formulare, Slider

Wenn man TYPO3 als Content Management System für seine Webseite einsetzt, steht man als Entwickler in der Pflicht, ein Frontend für diese Webseite aufzubauen. Meist greift man als erfahrener Entwickler auf bestimmte Frameworks und eigene Repositories aus früheren Projekten zu. Immer mal wieder gibt es neue Anforderungen, für die man nach Lösungen suchen muss. Mit diesem Kapitel der Webseite der Agentur IBK bieten wir nun einen TYPO3 Download für mehrere CSS Dateien an, mit denen unsere Webseiten aufgebaut sind. Weiter unten auf dieser Seite finden Sie Style Sheets für verschiedene, die Sie als Vorlage für den Aufbau Ihrer Seiten nutzen können.

Root CSS: Style Sheet als Basis für alle Formatierungen

Um eine gesamte Webseite zu formatieren, kann man alle Elemente in einer einzigen CSS-Datei speichern. Für kleinere Projekte ist dies sinnvoll. Sobald die Webseite jedoch weitere Elemente enthalten soll, die Aufwand im Frontend erfordern, sollte man sich überlegen, diese in einzelne Dateien auszulagern und per TypoScript in die Seite zu laden. Beispiele dafür sind das Einfügen einer Bildergalerie, von Formularen oder auch einfach die Navigation der Webseite.

Ebenso Sinn macht es bei der technischen Konzeption des Webseite, dass man standardisierte Angaben, auf die alle Style Sheets zugreifen, in eine eigene Datei auslagert und diese vor allen anderen CSS-Dateien einlädt. Dies lässt sich beim TypoScript der TYPO3 Webseite hervorragend zentral regeln. Damit hat man alle Angaben zu Farben und bestimmten Schrifttypen zentral abgelegt und muss nicht lange nach der richtigen Stelle suchen. 

Als Beispiel bieten wir Ihnen hier eine Root CSS Datei zum Download, mit der alle Farben einer gesamten Webseite zentral gesteuert werden:

Download Root CSS für Farben im Style Sheet

CSS für Navigation mit Navbar Bootstrap 4

Das Bootstrap Framework ist seit Jahren etabliert, um eine responsive Navigation in einer Webseite aufzubauen. Mit Bootstrap 4 ist es einfacher geworden, das Frontend für eine Navbar zu gestalten.

Hier eine Vorlage für ein Style Sheet einer Bootstrap 4 Navbar als ZIP-Datei:

Download CSS-Datei für Bootstrap 4 Navbar

Weitere Informationen zur Bootstrap 4 Navbar:

TYPO3 Tutorial:  Navigation mit Bootstrap 4 und TypoScript

 TypoScript Navigation mit Bootstrap 4 Navbar im IBK Wiki

CSS für Mega Menu mit Bootstrap 4

Ein Mega Menu mit Bootstrap erlaubt es dem Frontend Entwickler einer Webseite, ein Menu mit mehreren Ebenen zu gestalten, dass mit einem Mausklick öffnet. Den Quelltext dazu erzeugt man mit TypoScript oder über den VHS Viewhelper im TypoScript Setup einer TYPO3 Webseite. Die Formatierung richtet sich im Detail danach, welche Elemente man in die einzelnen Ebenen einfügt, um das eigene Layout umzusetzen. Den grundsätzlichen Aufbau der HTML-Struktur mit CSS-Klassen gibt die Dokumentation von Bootstrap 4 vor.

Hier bieten wir eine ZIP-Datei zum Download mit der Formatierung für ein Mega Menu:

CSS-Datei für ein Mega Menu mit Bootstrap 4

Weitere Informationen zum Mega Menu mit Bootstrap 4:

TYPO3 Tutorial mit TypoScript für ein Mega Menu mit Bootstrap 4

TypoScript für ein Bootstrap 4 Mega Menu im IBK Wiki

Style Sheet für ein Mega Menu mit Bootstrap 4 im IBK Wiki

Google Fonts lokal speichern

Mit Google Fonts haben wir eine sehr beliebte Möglichkeit, um unsere eigene Webseite mit ausgefallenen Schriftarten aufzupeppen. Das Problem dabei ist oft der Datenschutz: Wenn jemand unsere Webseite besucht, werden die Fonts von einem Server von Google heruntergeladen und damit geht mindestens die IP-Adresse des Besuchers an Google heraus. Zudem verzögert dieser Zugriff den Aufbau der Webseite und sorgt für mehr Verbindungen des Browsers.

Es gibt jedoch eine Möglichkeit, diesem Dilemma zu entfliehen: Wenn Sie sich entschieden haben, welche Google Fonts Sie auf Ihrer TYPO3 Webseite verwenden wollen, können Sie diese als ZIP-Datei herunterladen und auf Ihrem Webserver ablegen. Über diese CSS Datei laden Sie diese Fonts dann in Ihre Webseite. Hier ein Fallbeispiel für den Code zum Einbindung lokal gespeicherter Google Fonts:

 Download CSS Datei zum Laden von Google Fonts

Weitere Informationen zu Google Fonts und zum lokalen Speichern in der eigenen Webseite:

 TYPO3 Tutorial Code Snippets: Google Fonts lokal speichern

Google Fonts lokal einbinden im IBK Wiki

Individuelles CSS für den Slick Slider in TYPO3

Der Slick Slider von Ken Wheeler erfreut sich bei der Gestaltung von Webseiten seit Jahren großer Beliebtheit. Dieser Slider ist einfach einzubinden und zu konfigurieren. Vor allem aber: Es gibt eine umfangreiche Dokumentation zum Slick Slider! Daher nutzen wir dieses CSS- und JavaScript-Framework für die Gestaltung animierter Effekte unserer TYPO3 Webseiten.

Das Layout des Slick Slider können Frontend Entwickler mit recht wenig Aufwand individuell gestalten. Die einfachsten Möglichkeiten beziehen sich darauf, Pfeile zum vorhergehenden bzw. nächsten Element und die Dots unterhalb des Bildes zu gestalten. Als Erweiterung lassen sich Elemente von Inhaltselementen aus TYPO3 so per CSS formatieren, dass sie über einem Bild liegen. Damit sind der grafischen Fantasie bei der Gestaltung einer Webseite kaum Grenzen gesetzt!

Ein Beispiel für die Gestaltung des Slick Sliders per Style Sheet finden Sie hier als ZIP-Datei:

CSS-Datei zum Slick Slider für TYPO3 zum Download

Weitere Informationen zum Slick Slider:

TYPO3 Download: JavaScript Code zur Konfiguration des Slick Slider

 CSS und TypoScript für die Einbindung des Slick Slider im IBK Wiki

Github Seite von Ken Wheeler: Download und Dokumentation Slick Slider

Powermail Formular per CSS in TYPO3 formatieren

Die Extension Powermail gehört zu den beliebtesten Erweiterungen in TYPO3, um Formulare für alle möglichen Zwecke und Anwendungen zu gestalten. Wenn man mit dieser Extension gearbeitet hat, versteht man diesen Boom: Von Haus aus bietet Powermail bereits jede Menge Funktionen, die man im täglichen Betrieb einer Webseite braucht. Dazu gehören nicht nur die reichhaltigen Eingabefelder, sondern auch die Fehlerkontrolle per JavaScript Framework im Browser und das umfangreiche Backend.

Von Haus aus bietet Powermail ein Frontend auf der Basis von Bootstrap. Darauf aufbauen kann man das Layout von Überschriften, Eingabefeldern, Formularelementen, Schaltflächen, Buttons, Texten und sogar der Fehlermeldungen individuell anpassen. Hier bieten wir Ihnen eine ZIP-Datei mit einer Beispielkonfiguration eines Style Sheets für Powermail an:

CSS-Datei mit Formatierung von Powermail Formularen

Weitere Informationen zur TYPO3 Extension Powermail:

 CSS für Powermail Frontend im IBK Wiki

TypoScript Constants für einspaltige Powermail Formulare im IBK Wiki

Informationen zu allen Style Sheets

Für alle oben stehenden Style Sheets gibt es in unserem TYPO3 Tutorial und unserem Wiki weitere Informationen: 

Einbindung von Style Sheets per TypoScript in TYPO3 Webseite

TypoScript HEAD Setup mit Einbindung CSS und JavaScript im IBK Wiki