CSS Beispiele für TYPO3 Webseiten

Style Sheet Beispiele für Navigation und Inhaltselemente

TYPO3 bringt im Gegensatz zu Wordpress keine eigenen Themes mit sich, In den meisten Fällen kann man das Layout der Webseite komplett selbst aufbauen. 

Oft kommt dabei ein Framework wie Bootstrap zum Einsatz. Damit lässt sich mit wenig Zeitaufwand eine responsive Navigation gestalten. Das CSS können Sie selbst anpassen.

Aber auch die Inhaltselemente von TYPO3, Bilder und Slider können Sie mit Ihrem Style Sheet selbst gestalten. Wir haben Ihnen einige Beispiele aus der Arbeit unserer Agentur zusammengestellt.

CSS Beispiele

Einige Beispiele für die Nutzung von Style Sheets in einer TYPO3 Webseite: Hintergrundbilder, Inhalte der Webseite mittig ausrichten und weitere Bausteine in CSS.

Navigation mit Bootstrap 3

Bootstrap hat sich in den vergangenen Jahren als Quasi-Standard für die Gestaltung responsiver Webseiten etabliert. Es ist recht leicht, ein Menu im Header der Seite zu gestalten, dass bei kleinen Endgeräten mit der Hand ebenso zu bedienen ist wie auf Desktop Rechnern mit der Maus.

CSS für Bootstrap 4 Navigation

Bootstrap stellt eine recht einfache Möglichkeit bereit, eine individuell gestaltete Navigation mit mehreren Ebenen für eine Webseite zu gestalten. Dazu braucht es die Einbindung eines TypoScript und einer kurzen JavaScript Konfiguration. Mit Hilfe eines Style Sheet lassen sich diese Inhalte nun formatieren.

Formulare Bootstrap 3

Twitter Bootstrap bringt in seiner Standard Konfiguration schon eine Menge Möglichkeiten zur Gestaltung des Frontend mit sich. Nicht jedem gefallen allerdings die Gestaltung von Rahmen und Farben. Hier ein paar Tipps, Tricks und Kniffe, wie man das Frontend individualisieren kann.

CSS Layouts für den Slick Slider

Der Slick Slider von Ken Wheeler erfreut sich großer Beliebtheit. Dieser auf jQuery basierende Slider ist einfach zu konfigurieren und gut dokumentiert. Wir schilder Ihnen einige Formatierungen für den Einsatz des Slick Slider in einer TYPO3 Webseite.

Frontend Inhaltselemente für TYPO3

TYPO3 bietet als Standard eine Reihe von Inhaltselementen an, mit denen sich das Layout für Text und Medien bei der Eingabe gestalten lassen. Da diese über mehrere Standards verfügen, lassen sich diese Elemente mit wenig Aufwand auch mit einem eigenen Frontend versehen. Einige CSS Beispiele schildern wir Ihnen in unserem Wiki.

Frontend für Powermail Formulare

Hier finden Sie einige Beispiele für CSS, wie Sie die Eingabefelder der beliebten Extension Powermail gestalten können. Es gibt zudem noch die Möglichkeit, für das Backend von Powermail Konstanten zu überschreiben, um Formulare als Standard einspaltig zu machen.

Google Fonts lokal einbinden

Das Layout einer Webseite lässt sich mit Google Fonts hervorragend aufpeppen. Allerdings hat diese Verhaltensweise einen gravierenden Nachteil: Man gibt die IP-Adresse eines Besuchers seiner Webseite immer an Google weiter. In Zeiten der DSGVO nicht das beste Verhalten. Es gibt einen Trick: Mit ein wenig Aufwand lassen sich Google Fonts lokal einbinden.

Flex Layout

Ein Beispiel für ein Flex Layout, um Elemente mit wenig Aufwand im CSS auszurichten.

Thomas Berscheid ⧉ 07.08.2020