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.2 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

Container (Quelle: getbootstrap.com)

	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%

Grid (Quelle: getbootstrap.com)

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12

Beispiel:

Abstände

Wir unterscheiden zwei unterschiedliche Abstände:

Padding - Abstand innerhalb eines Elements (zwischen Inhalt und Rand)
Margin - Abstand außerhalb eines Elements (zu anderen Elementen)

Die Klassen werden im Format {Eigenschaft}{Seiten}-{Größe} für xs und {Eigenschaft}{Seiten}-{Breakpoint}-{Größe} für sm, md, lg, xl und xxl benannt.

Wobei Eigenschaft eine der folgenden ist:

m - für Klassen, die den Außenabstand (margin) festlegen
p - für Klassen, die den Innenabstand (padding) festlegen

Wobei Seiten eine der folgenden ist:
t - für Klassen, die margin-top oder padding-top festlegen
b - für Klassen, die margin-bottom oder padding-bottom festlegen
s - (start) für Klassen, die margin-left oder padding-left in LTR und margin-right oder padding-right in RTL festlegen
e - (end) für Klassen, die margin-right oder padding-right in LTR und margin-left oder padding-left in RTL festlegen
x - für Klassen, die sowohl *-left als auch *-right festlegen
y - für Klassen, die sowohl *-top als auch *-bottom festlegen
leer - für Klassen, die einen Abstand oder Innenabstand auf allen 4 Seiten des Elements festlegen

Wobei Größe eine der folgenden ist:
0 - für Klassen, die den Abstand oder Innenabstand durch Einstellen auf 0 beseitigen
1 - (standardmäßig) für Klassen, die den Abstand oder Innenabstand auf $spacer * .25 festlegen
2 - (standardmäßig) für Klassen, die den Abstand oder Innenabstand auf $spacer * .5 festlegen
3 - (standardmäßig) für Klassen, die den Abstand oder Innenabstand auf $spacer festlegen
4 - (standardmäßig) für Klassen, die den Abstand oder Innenabstand auf $spacer * 1.5 festlegen
5 - (standardmäßig) für Klassen, die den Abstand oder Innenabstand auf $spacer * 3 festlegen
auto - für Klassen, die den Abstand auf auto festlegen.

Beispiele:
p-3 Padding auf allen 4 Seiten
mt-4 Margin Top

Lösung:
Wir definieren in T23SB Config den Abstand des Footers nach oben mit einem Margin Top; mt-5

Speichern und Cache löschen.

Ergebnis:

Breite von Elementen (width) (Quelle: getbootstrap.com)

<div class="w-25 p-3">Width 25%</div>
<div class="w-50 p-3">Width 50%</div>
<div class="w-75 p-3">Width 75%</div>
<div class="w-100 p-3">Width 100%</div>
<div class="w-auto p-3">Width auto</div>

8. Anlegen voneines weiteren AdministratorenAdministrators

Unter Umständen soll an einer Schule ein weiterer Backend-Benutzer angelegt werden.

Backend-Benutzer → + Neuen Backend-Benutzer anlegen

Das Anlegen eines Administrator-Benutzers mit vollen Rechten ist schnell erledigt:

Der Zugriff muss noch aktiviert werden.

9. Anlegen von Redakteuren

Manchmal ist es empfehlenswert, für Redakteure Benutzer mit eingeschränkten Rechten und eingeschränkten Funktionen anzulegen. Dies dient vor allen Dingen auch einem übersichtlicheren und eingeschränkten Backend.

9.1 Backend-Benutzergruppe "Redakteure"

Zu diesem Zeck legen wir eine neue Backend-Benutzergruppe an.

Nun geben wir an, welche Seitentypen für Redakteure zulässig sind. In diesem Fall dürfen nur Seiten vom Typ Standard angelegt werden.

Die Tabellenberechtigungen setzen wir je nach Bedarf auf Lesen & Schreiben. Empfehlung:
Seite, Datei, Dateisammlung, Backend-Layout, Seiteninhalt, Artikel

Zulässige Felder werden auch nach Bedarf inkludiert. Standardmäßig hat ein Redakteur weniger Zugriff. Empfehlung: so (leer) belassen.

Explizit erlaubte Feldwerte

Nun definieren wir, welche Module die Mitglieder der Redakteurs-Gruppe sehen können:
Seite, Anzeigen, Liste, Dateiliste

Anschließend geben wir die entsprechenden Freigaben an:

Redakteure erhalten den Zugang zum kompletten Seitenbaum (Root, Weltkugel, ID=1)
Redakteure erhalten Zugriff zu bestimmten Ordnern unserer Datei-Struktur

Hierzu definieren wir zwei Verzeichnisfreigaben an (+ Zeichen): website-assets und schule

Die zweite Verzeichnisfreigabe "schule" funktioniert wie oben beschrieben, nur eben mit dem Ordner "schule".

Theoretisch könnten wir auch den gesamten fileadmin-Pfad freigeben.
Wir wollen aber nicht, dass Redakteure auf alle Datei-Ordner (T3SB, etc.) Zugriff haben.

Am Ende aktivieren wir noch den Zugriff für diese Backend-Benutzergruppe:

9.2 Backend Benutzer

Nun wird ein neuer Backend-Benutzer angelegt und der Gruppe "Redakteure" hinzugefügt.

Allgemein
Admin(!) deaktivieren, Benutzername und Passwort festlegen. Gruppe "Redakteure" zuweisen(!)

Sprache einstellen

Persönliche Daten
optional

Modul-Berechtigungen
nicht bearbeiten (leer lassen)

Freigaben
Haken bei Datenbankfreigaben und Verzeichnisfreigaben setzen, ansonsten unbearbeitet lassen.

Zugriff
Aktiviert

9.3 Berechtigungen

Noch hat die Gruppe "Redakteure" keinen Zugriff auf die einzelnen Seiten. Dies ändern wir, indem wir Berechtigungen verteilen:

In diesem Fall haben die Redakteure auch die Berechtigung Seiten zu löschen und neu anzulegen.
Wichtig: Gruppe "Redakteure" angeben, Tiefe: Rekursiv anwenden auf alle Ebenen, danach speichern.

Anschließend leeren wir den Cache, loggen uns aus und melden uns als Redakteur an.
Alternativ zum Logout können wir auch testweise innerhalb des Admin-Accounts andere User testen:

Ergebnis
Der Benutzer "test-redakteur" hat ausschließlich die Module Seite, Anzeigen und Liste. Er kann nur den Seitentyp "Standard" anlegen, hat Zugriff auf den gesamten Seitenbaum.

Der Benutzer "test-redakteur" kann sämtliche Inhaltselemente anlegen:

Der Benutzer "test-redakteur" hat unter "Dateiliste" Zugriff auf die beiden Ordner "website-assets" und "schule"

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.2 Jumbotron (Header)

6. Schriftarten

7. Bootstrap CSS-Klassen

8. Anlegen voneines weiteren AdministratorenAdministrators

9. Anlegen von Redakteuren

9.1 Backend-Benutzergruppe "Redakteure"

9.2 Backend Benutzer

9.3 Berechtigungen