Direkt zum Hauptinhalt

VOBS Typo3 Templates | Administration

Vorarlberger Standardschulinstallation
Verfasser: Kuno Sandholzer und Alex Zoppel		 © 2025 IT-Regionalbetreuer Vorarlberg
6900 Bregenz, Römerstraße 14
Alle Rechte vorbehalten

Diese Dokumentation ist eine Ergänzung zur "VOBS Typo3-Templates | Quickstart Redakteure"-Dokumentation. Sie ist für Seiten-Administratoren gedacht und soll einen Überblick über verschiedene Einstellungsmöglichkeiten bieten.

Änderungen am Template erfordern mitunter Expertenwissen.

1. Aufbau der VOBS-Templates

Sämtliche VOBS-Templates nutzen das Plugin t3sbootstrap.

Seitenstruktur des Templates:

ROOT (1) /*Startpunkt der Seite, Verweis auf erste Unterseite, erhält dann den Schulnamen)*/
  -HOME (2) /*Startseite, im Menü unsichtbar*/
  -UNSERE SCHULE (3)
    ---Leitbild
    ---Angebot
    ---Klassen
    ---Team
    ---Organisatorisches
    ---Elternverein
  -GALERIE (4)
  -SERVICE (5)
    ---Lernmaterialien
    ---Berufsorientierung
    ---Downloads
  -TERMINE (6)
    ---Termine Detail
      (optional: ---Jahresübersicht)
      (optional: ---Schularbeiten)
  -KONTAKT (7) /*optional, im Menü unsichtbar*/
  -INHALTSELEMENTE (8) /*Demo INHALTSELEMENTE - optional und individuell, im Menü unsichtbar*/
  -ZUSATZ 2 (9) /*optional und individuell, im Menü unsichtbar*/
  -FOOTER (10) /*im Menü unsichtbar*/
    ---Impressum
    ---Datenschutz
    ---Sitemap
    ---Suche
  -EXTRAMENU (11) /*Menütrennung -> Bsp. Main-Nav Extra Row oder Seitenspalte, unsichtbar*/
    ---E-Mail
    ---Telefon
  -AKTUELLES (12) /*im Menü unsichtbar*/
    ---Aktuelles Detail
    ---Archiv
    ---Archiv Single
  -Datenbanken
    ---termine-db
    ---news-db

Onepage 
Wurde ein Onepage-Template gewählt, sind trotzdem alle Seiten vorhanden. Außer „Root“, „Home“ und „Footer“ wurden alle übrigen Seiten deaktivert. 

2. Individuelle Template-Anpassungen

Grundsätzlich können an drei Punkten individuelle (Design-)Anpassungen vorgenommen werden:  

2.1 T3S Bootstrap -Grundeinstellungen

T3SB Config → Root (Weltkugel) → Edit this configuration
Grundlegende Einstellungen, welche vom Plugin T3SBootstrap am Template vorgenommen werden können.
Eine Änderung erfordert zwingend das Speichern und das Löschen des Caches.

image.png

image.png

2.2 T3S Bootstrap - Custom SCSS

T3SB Config → Root (Weltkugel) 
Überschreiben von vorkompilierten Bootstrap Klassen
Eine Änderung erfordert zwingend das Speichern und das Löschen des Caches.

image.png

2.3 Custom CSS im Modul "Dateiliste"

Dateiliste → website-assets → #template#-custom.css
Individuelle und kleinere Anpassungen diverser CSS Definitionen 

image.png

3. Seiteneigenschaften

Seite → Root (Weltkugel) → Seiteneigenschaften bearbeiten → Erscheinungsbild

image.png

Die hier vorgenommenen Einstellungen werden auf den gesamten Seitenbaum übernommen.
Voreinstellung: Einspaltig und 100% Breite (no container). Hiermit ist der Standard für Full-Width Elemente (volle Seitenbreite, 100%) gesetzt. 

image.png

Damit der Standard für die Inhaltselemente trotzdem in einem Container angezeigt wird, wird das Erscheinungsbild der Inhaltselemente standardmäßig auf Container gesetzt:
Seite → Root → Seiteneigenschaften bearbeiten → Ressourcen → Seiten-TSconfig 

# pages: container oder container-fluid
TCAdefaults.pages.tx_t3sbootstrap_container = container (default)
# tt_content: container, container-fluid oder container-fluid px-0
TCAdefaults.tt_content.tx_t3sbootstrap_container = container

Ergebnis:
Im Reiter Erscheinungsbild ist Container auf „container“ gesetzt.  
Im Falle eines Full-Width-Inhaltselements wird hier „no container“ angegeben. 

Standardmäßig haben Seiten also (vererbt von der Root-Seite) ein einspaltiges Layout. Das Backend sieht entsprechend aus:

image.png

Für Seiten mit Unterseiten stellen wir bei der Hauptseite in den Seiteneigenschaften ein zweispaltiges Layout ein. Dieses Layout wird auf alle Unterseiten vererbt.
image.png

Zudem wird in der Sidebar ein Inhaltselement angelegt, welches alle Unterseiten der Hauptseite als Menü anzeigt. Auch dieses Inhaltselement (Menü) wird standardmäßig auf alle Unterseiten vererbt.

Das Backend sieht entsprechend aus:

image.png

Das Ergebnis im Frontend:

image.png

4. Dateistruktur

Ein großer Vorteil von Typo3 ist das Dateimanagement. Wie auf einem PC können Daten in Ordnern angelegt und verwaltet werden. Ein Vorschlag für eine sinnhafte und übersichtliche Dateistruktur für eine Schule kann eine Einordnung in Schuljahre sein. 

image.png

schule →  

Upload von Bildern, Fotos und Dokumenten nach Jahren sortiert

 

T3SB →  

alle Dateien für das Template. Sollte unangetastet bleiben!

 

user_upload →  

inhaltsbezogene Uploads

 

website-assets → 

zur Verfügung gestellte Hintergründe, Icons, Fotos und Schriftarten template-custom.css und Logo 

image.png

image.png

Inhalt des Footers: Schuldaten / Menü mit Unterseiten (Impressum, Datenschutz, Sitemap, Suche) / Copyright-Hinweis

image.png

5.1 Jumbotron (Header)

Im Inhaltsbereich „Jumbotron“ der Root-Seite (id=1) angelegte Inhalte werden auf alle Seiten vererbt. image.png

Wird Dieser Headerbereich beispielsweise nur auf der Startseite benötigt, so wird er aus dem Root entfernt und bei der Home-Seite eingefügt. Prinzipiell kann jede Seite ein individuelles Jumbotron-Element beinhalten.

Jumbotron-Einstellungen in der T3SB Config:

image.png

Jumbotron bei VOBS-Templates:

  • Hintergrundbild (Inhaltselement Background-Wrapper) mit 100% Breite (no container) 
  • Höhe von Jumbotron: Erscheinungsbild → Image → Padding (20 rem) 
  • Transparente Wellen im unteren Bild-Bereich werden in der custom.css definiert (svg-Daten)
    Dateiliste → website-assets → #template#-custom.css

    image.png



nach oben