Einfache Template Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 1

Templates sind kaum wegzudenken, wenn es um die Website-Erstellung mit TYPO3, WordPress oder Co. geht. Ein Sitepackage ist eine Extension, die eben solch ein Template in TYPO3 bereitstellt. Wie du ein Sitepackage relativ einfach selbst erstellst, zeige ich dir in dieser neuen Blogreihe. Doch zunächst erfährst du mehr über das Bootstrap Framework. 

  1. Was ist das Bootstrap Package?
  2. Highlight-Funktionen
    1. Spalten
    2. Footer selbst ändern
    3. Spezielles Backend-Layout
  3. Content Elemente
  4. Theme-Einstellungen
  5. Teil 2: So erstellst du dein eigenes Sitepackage

Was ist das Bootstrap Package?

Als ich 2011 bei Mittwald angefangen habe, hatte ich noch keine Ahnung davon, wie man ein Template erstellt, geschweige denn eine Extension schreibt. Ich musste dafür die TYPO3 Sprache TypoScript lernen. Einige Zeit später bin ich auf Fluid umgestiegen. Alles gar nicht so easy. Doch seitdem es das Bootstrap Package von Benjamin Kott gibt, ist die Erstellung relativ einfach. Der Funktionsumfang und die Möglichkeiten haben mich so sehr begeistert, dass ich es dir gerne im Detail vorstellen möchte.

Wie der Name des Sitepackage verrät, basiert das komplette Frontend des Themes auf dem Bootstrap Framework. Das gibt dir die Möglichkeit, es sehr einfach (um vorhandene Funktionen) zu erweitern und Veränderungen vorzunehmen.

Mit dem Bootstrap Package kannst du dein eigenes Sitepackage für TYPO3 erstellen – Philipp von Mittwald erklärt dir, wie es geht.

Screenshot: www.bootstrap-package.com

Highlight-Funktionen

Im ersten Teil der Reihe möchte ich dich von meinen Highlight-Funktionen des Packages begeistern. Denn das Bootstrap Framework hält über 600 Konfigurationsmöglichkeiten für dich bereit. Die ganzen Einstellungsmöglichkeiten machen es Einsteigern leicht, schnell Erfolge zu sehen und eine Seite aufzubauen. Ebenso erfahren Fortgeschrittene eine enorme Arbeitserleichterung.

An dieser Stelle sei schon mal ein großer Dank an Benjamin Kott für seine ganze Arbeit, die in das Sitepackage geflossen ist, ausgesprochen!

Spalten

Mit dem Bootstrap Package kannst du über das Backend Layout mehrere Spalten auf einer Seite anlegen und für mehr Übersicht deiner Seite sorgen. Über die Seiteneigenschaften > Erscheinungsbild kannst du die gewünschten Spalten für die jeweilige Seite auswählen.

Schaffe dank der Spalten mehr Übersicht auf deiner Website.

Für mich als ehemaliger Redakteur ein richtiges Hidden Feature: Redakteure können den Footer mit Inhalten füllen und verändern. Denn: Der Footer wird immer von der Hauptseite vererbt oder eben von einer Unterseite, die ebenfalls Inhalte in der Footer-Section hat.

Spezielles Backend-Layout

Ein weiteres Highlight: Für die Startseite gibt es ein spezielles Backend-Layout, das noch weitere Bereiche enthält, die du später mit Inhalten füllen kannst und so flexibler bist als nur mit Spalten.

Content Elemente

Kommen wir zu den Content Elementen (CE). Zu den üblichen hält das Bootstrap-Framework noch weitere bereit, z. B. Cards, Carosul, Accordion, Tab oder Panel. Um den Rahmen des Blog-Beitrags nicht völlig zu sprengen, werde ich auf diese jedoch nicht weiter eingehen.

Was ich dir aber mitgeben möchte: Du kannst bei jedem Content Element die Hintergrundfarbe oder ein Hintergrundbild hinterlegen. Bei den Farben wird direkt auf die im Theme verwendeten Farben wie primary, secondary, light und dark zugegriffen. Weitere Effekte wie Parallax, Filter oder Fade sind ebenso möglich.

Du hast bei jedem Content Element in Boostrap die Möglichkeit individuelle Layout-Einstellungen vorzunehmen.

Über die Rahmen und Abstände kannst du ein CE vollflächig auf einer Seite ausspielen. So wurde beispielsweise das Carousel auf der Startseite der Demo realisiert. ;)

Theme-Einstellungen

Neben den vielen Einstellungsmöglichkeiten, die du bei den Content Elementen hast, gibt es auch welche für das Theme. Beispielsweise kannst du mit dem Konstanten-Editor über 120 Optionen konfigurieren und das Layout deiner Website verändern – von der Navigation (Menü) über das Logo bis hin zum Header sind dir so gut wie keine Grenzen gesetzt. 

Der Konstanten-Editor beim Bootstrap Package bietet dir über 120 Layout-Einstellungsmöglichkeiten.

Teil 2: So erstellst du dein eigenes Sitepackage

Das war's erst mal. Wenn du nun auch so begeistert bist wie ich und ein Projekt mit dem Bootstrap Package umsetzten möchtest, verschafft dir die Demo einen Überblick über den massiven Funktionsumfang. ;-) Möchtest du einen tieferen Blick in das Package werfen, kannst du dir über den Extensionmanager in einer leeren TYPO3 Installation das Introduction Package installieren. 

Doch vielmehr lohnt es sich, bis zu meinem nächsten Artikel am 28.10.20 zu warten. Dort zeige ich dir, wie genau du dein eigenes Sitepackage erstellest, das auf dem Bootstrap Package basiert.

Kommentar hinzufügen

    Notwendige Cookies akzeptieren
    Notwendige Cookies
    Diese Cookies sind für die korrekte Anzeige und Funktion unserer Website ein Muss, ob sie dir schmecken oder nicht. Sorry.
    Analyse
    Diese Cookies ermöglichen uns die Analyse deiner Website-Nutzung. Nur so können wir deine Suche nach einem geeigneten Tarif zur besten machen.
    Marketing
    Diese Cookies teilen wir. Unsere Partner (Drittanbieter) und wir verwenden sie, um dir auf deine Bedürfnisse zugeschnittene Werbung zu unterbreiten.