VOBS Typo3 Templates | Administration

Vorarlberger Standardschulinstallation
Verfasser: Kuno Sandholzer und Alex Zoppel

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.

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.

2.3 Custom CSS im Modul "Dateiliste"

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

3. Seiteneigenschaften

Seite → Root (Weltkugel) → Seiteneigenschaften bearbeiten → Erscheinungsbild

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.

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:

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

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:

Das Ergebnis im Frontend:

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.

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

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

5.12 Jumbotron (Header)

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

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:

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

6. Schriftarten

Beim Einbinden von Schriftarten / Web-Fonts ist zwingend darauf zu achten, dass diese lokal eingebunden werden und nicht von externen Seiten geladen werden.

Aus diesem Grund sind bei den VOBS-Templates folgende Schriften bereits vorinstalliert:
Dateiliste → website-assets → vobs-fonts

Diese Schriftarten werden über die Datei vobsfonts.css bereitgestellt:
Dateiliste → website-assets → vobsfonts.css

Hier ist es wichtig, die NICHT verwendeten Schriftarten in der CSS-Datei auszukommentieren (mit /* und */), damit nicht alle Schriftarten geladen werden und so die Seitenperformance negativ beeinträchtigt wird:

/* 
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vobs-fonts/montserrat-v25-latin-700.eot');
  src: local(''),
       url('vobs-fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'),
       url('vobs-fonts/montserrat-v25-latin-700.woff2') format('woff2'),
       url('vobs-fonts/montserrat-v25-latin-700.woff') format('woff'),
       url('vobs-fonts/montserrat-v25-latin-700.ttf') format('truetype'),
       url('vobs-fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg');
}
*/

Weitere Schriftarten lokal einbinden
Schriftarten müssen in den Formaten eot, woff, woff2, ttf und svg vorliegen.
Der Google Web Fonts Helper bietet hier Unterstützung: gwfh.mranftl.com
1. Google Font auswählen
2. Style auswählen (Regular, optional empfohlen 300,500,700)
3. CSS-Code kopieren und in vobsfonts.css einbinden
4. Font-Dateien herunterladen und in den Ordner vobsfonts uploaden
5. Auf korrekten Dateipfad in der vobsfonts.css achten

7. Bootstrap CSS-Klassen

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

VOBS Typo3 Templates | Administration

1. Aufbau der VOBS-Templates

2. Individuelle Template-Anpassungen

2.1 T3S Bootstrap -Grundeinstellungen

2.2 T3S Bootstrap - Custom SCSS

2.3 Custom CSS im Modul "Dateiliste"

3. Seiteneigenschaften

4. Dateistruktur

5. Footer und Jumbotron (Header)

5.1 Footer

5.12 Jumbotron (Header)

6. Schriftarten

7. Bootstrap CSS-Klassen