VOBS Typo3-Templates | Quickstart-Guide
| Vorarlberger Standardschulinstallation Verfasser: Kuno Sandholzer und Alex Zoppel |
© 2025 IT-Regionalbetreuer Vorarlberg 6900 Bregenz, Römerstraße 14 Alle Rechte vorbehalten |
1 Einleitung
Um Schulen und schulnahen Organisationen ein sinnvolles Werkzeug für die Gestaltung ihres Webauftrittes zur Verfügung stellen zu können, beschäftigen wir uns seit 2005 mit TYPO3.
TYPO3 ist ein CMS ("Content Management System") und ist sehr vielseitig einsetzbar. Es deckt die meisten Features, die eine moderne Webseite bieten soll, ab.
Content-Management-Systeme trennen Inhalt, Struktur und Layout von Dokumenten und integrieren die Bearbeitung und Pflege von Dokumenten in einen definierten Arbeitsablauf (Workflow). Das hat für Redakteure den Vorteil, dass sie sich ganz auf die Pflege und Aktualisierung von Texten konzentrieren können, ohne sich um das Layout, die Einbindung in ihre Seite oder andere technische Aspekte kümmern zu müssen.
Die folgende Anleitung bietet einen grundlegenden Einblick in die wichtigsten Funktionen von Typo3. Dieses Skript bezieht sich im Wesentlichen auf die vom VOBS bereitgestellten Templates.
CHECKLISTE FÜR EINE VOBS-VORLAGE AN DEINER SCHULE: https://vobs.at/cms
| 1. TEMPLATE | 2. FORMULARE | 3. WEBPLATZ |
| Du hast für deine Schule bereits eines unserer Templates (Webseiten-Vorlage für das CMS – Content Management System TYPO3) ausgesucht? | Du hast bereits die beiden notwendigen Formulare unterzeichnet und an unseren Webmaster (webmaster@vobs.at) retourniert? | Nach einer kurzen Einrichtungszeit erhältst du von unserem Webmaster einen Web-Platz mit Zugangsdaten inklusive deines gewünschten Templates. |
Dein Web-Platz ist temporär und nur für dich einsehbar. Du kannst dir mit der Bearbeitung also so lange Zeit lassen, wie du benötigst. Wenn deine Schule bereits eine (alte?) Seite am Laufen hat, bleibt diese so lange bestehen, bis du die neue Webseite aktivieren lässt.
2 Typo3: Aufbau und Benutzeroberfläche
2.1 Anmeldung / Login
Der Zugriff ist nur berechtigten Personen (Administratoren, Webautoren und Redakteuren) gestattet. Sie benötigen einen Benutzernamen und ein Passwort mit einer entsprechenden TYPO3-Berechtigung.
Ein gutes Passwort
• mindestens 12 Zeichen
• Groß- und Kleinbuchstaben
• Sonderzeichen und Ziffern
• sollte nicht in Wörterbüchern vorkommen
• beinhaltet keine Namen oder Tastaturmuster
Die Anmeldung in das Backend von Typo3 erfolgt über meinedomain.at/typo3
Backend
meinedomain.at/typo3
Im Backend von TYPO3 („hintere Seite“) können Webseiten erstellt und bearbeitet sowie Inhalte eingepflegt und bearbeitet werden.
Frontend
meinedomain.at
Im Frontend von TYPO3 („vordere Seite“) wird die Webseite dem Betrachter angezeigt.
2.2 Backend
2.2.1 Benutzerleiste
Anpassung Ihres eigenen Benutzerkontos: Sprache, Ansichten, persönliche Daten und Passwort ändern.
Ein- und Ausklappen der Modulleiste
Frontend- und Gesamtcache leeren (Zwischenspeicher leeren um Änderungen im Frontend zu sehen)
2.2.2. Modulleiste
 |
Für Redakteure sind vor allem die Modulgruppen „Web“ und „Datei“ wichtig:
Das Modul „Liste“
Modulgruppe Datei Das Modul „Dateiliste“ |
2.2.3 Navigationsleiste (Seitenbaum)
 |
In der mittleren Spalte stellt das Backend die Struktur der Website dar. Die Struktur ist als Baum aufgebaut.
|
Seiten / Ordner ausklappen
Seiten und Ordner können mit dem Pfeil-Symbol ein- und ausgeklappt werden, wenn sich darunter Ordner oder Unterseiten befinden. 
Seiten / Ordner verschieben
Per Drag & Drop können Sie Seiten und Ordner verschieben. Klicken und Ziehen Sie mit gedrückter Maustaste dazu die Seite oder den Ordner an die gewünschte Position und lassen dann los. Wenn Sie die STRG-Taste während des Verschiebens gedrückt halten, wird die Seite kopiert.
Weitere Optionen
Wenn Sie mit der rechten Maustaste auf eine Seite oder einen Ordner klicken (oder mit der linken Maustaste auf das Icon), erhalten Sie folgende Optionen: Ansehen, Bearbeiten, Info, Verlauf / Rückgängig, Seitenaktionen 
2.2.4 Arbeitsfläche / Detailansicht
Aufbau der Web-Seite. Details siehe → 2.2.8 Inhalte verwalten
2.2.5 Dateien verwalten
Es gibt grundsätzlich zwei Möglichkeiten, Dateien hochzuladen:
- Inhaltsbezogene Uploads (user_upload): Bilder und/oder Dokumente werden direkt beim Anlegen eines Inhalts hochgeladen. Typo3 sichert diese Dateien dann in einem Unterordner des Ordners user_upload.
Wichtig: Diese Variante wird NICHT empfohlen! - Geplanter Upload in expliziter Dateistruktur vor Anlegen eines Inhaltselements. Um größtmögliche Transparenz bei mehreren oder zukünftigen Redakteuren zu gewährleisten, wird diese Variante empfohlen:
Dateiliste → Ordnerstruktur → Dateien hochladen oder erstellen (entweder über Dateien hochladen oder Drag&Drop) oder Ordner erstellen
2.2.6 Exkurs: Stapelbearbeitung von Bildern mit Irfanview
Dateigrößen
Fotos und Dokumente sollten vor dem Upload „webtauglich“ gemacht werden.
Empfehlung für Fotos: Lange Seite: zw. 1200px und 1600px, Empfehlung für Bilder ganze Breite (Bsp. Header): 2000px
Maximale Dateigröße: < 200kb
Dokumente (Bsp. pdf): Speichern für Webansicht (Bilder werden so komprimiert)
„Irfanview“ ist ein mächtiges Bildbearbeitungs-Tool. Die Funktion „Stapelbearbeitung“ bietet die Möglichkeit Bilder und Fotos sehr schnell, einfach und effizient umzuwandeln.
Beispiel: Umbenennen und Größenänderung mehrerer Fotos
- Ordner mit Bildern auswählen
- „Alle hinzufügen“ oder Bilder auswählen und „Hinzufügen“
- Verzeichnis zum Speichern der bearbeiteten Bilder auswählen
Beispiel: „Aktuelles Verzeichnis verwenden“ und in diesem den Unterordner „_bearb“ anlegen. - Passenden Namen geben?! ### wird durch Nummerierung ersetzt.
- Spezial-Optionen setzen
In diesem Beispiel:
- Sechs „zu große“ Fotos werden umgewandelt
- Über die Spezial-Option „Größe ändern“ wird die lange Seite auf 1200px gesetzt, die Seiten bleiben „Proportional“ im richtigen Verhältnis
- Die Fotos werden über Name
- Workshop_Carmen_### alle gleich umbenannt und nummeriert (_001, _002,…)
- „Starten“: Die Fotos werden umgewandelt und im Unterordner „_bearb“ gesichert. - Batch-Bearbeitung starten
2.2.7 Dokumente
Empfehlung:
- PDF anstatt Word-Dokumente
- PDF für Web (auf Dateigröße achten)
2.2.8 Inhalte verwalten
Beim Pflegen von Inhalten empfiehlt es sich, Backend und Frontend in zwei Tabs offen zu halten. Noch komfortabler sind zwei Bildschirme, wobei auf dem einem das Backend und auf dem anderen das Frontend dargestellt wird.
Tab 1 bzw. Bildschirm 1: Backend
Tab 2 bzw. Bildschirm 2: Frontend
Nach gespeicherten Änderungen im Backend (und anschließendem Löschen des Caches) kann im Frontend-Tab mit der Taste F5 bzw. der Tastenkombination SHIFT+F5 die Seite aktualisiert werden.
Nach einem Klick auf die zu bearbeitende Seite werden alle Inhaltselemente angezeigt.
- Ein Mouse-Over auf das Icon des Inhaltselements zeigt die ID des Inhaltselements
- Ein Klick auf das Icon zeigt das Kontextmenü an
- Stift: Inhaltselement bearbeiten
- Schieberegler: Inhaltselement aktivieren (im Frontend sichtbar) / deaktivieren (im Frontend unsichtbar)
Mit Drag&Drop können Inhaltselemente an eine andere Position verschoben werden
3 Neue VOBS-Vorlage - Los geht’s!
Bevor du mit der Einpflege allgemeiner Inhalte beginnst, sind zwei wichtige Schritte zu machen:
3.1 Schuldaten korrigieren
Klicke zum Bearbeiten immer auf die gewünschte Seite bzw. das zu bearbeitende Element (Stift).
Schuldaten und Verantwortliche(n) auf der Impressum-Seite
Kontakt E-Mail-Adresse auf der Datenschutz-Seite
3.2 Eigenes Schul-Logo einbinden
Empfehlung:
- Formate .png oder .svg (Transparenz möglich)
- Breite ~ 200 Pixel / Höhe ~ 80 Pixel oder Seitenverhältnis von etwa 5:2
- Name: frei wählbar (zum Beispiel: mshb-logo.svg, vsho-logo.png)
Logo Upload: Dateiliste → website-assets
Neues Logo zuweisen
T3SB Config → Seitenwurzel (Weltkugel) → Edit this Configuration
Größen des Logos definieren
TypoScript → Seitenwurzel (Weltkugel) → Info/Bearbeiten → Konstanten
Eingabe bei einem svg-Logo:
svg: Es ist ausreichend EINE Seite zu definieren. Das Logo wird in korrektem Seitenverhältnis ausgegeben. (Angaben in Pixel px)
Eingabe bei einem png-Logo:
Wir empfehlen, das Logo bereits bei der Vorbereitung in korrektem Seitenverhältnis hochzuladen und sowohl die Breite (width) als auch die Höhe (height) anzugeben (Angaben in Pixel px)
3.3 Seitentitel bearbeiten
Am Anfang sehen wir im Tab die Benennung der Seite nach dem gewählten Template:
- Umbenennung im Seitenbaum: Seite → Seitenwurzel (Weltkugel) → Seiteneigenschaften bearbeiten
- Umbenennung der Seite: Sites → Bearbeiten (Stift) → Titel der Webseite ändern → Speichern
4. Cache leeren
Nach jeder gespeicherten Änderung empfehlen wir den Seiten-Cache zu leeren. Um Änderungen im Frontend korrekt anzuzeigen, muss nach dem „Speichern“ der Zwischenspeicher (Cache) geleert werden.
5. Redaktionelle Arbeiten
5.2 Neue Seite erstellen
Mit Drag&Drop (Seiten-Icon) kann eine neue Seite an der gewünschten Position erstellt werden. Eine so neu erstellte Seite ist am Anfang deaktiviert (nicht sichtbar). Ist die Seite fertig bearbeitet, wird diese aktiviert und somit im Frontend sichtbar gemacht.
5.3 Inhaltselemente erstellen
Modul Seite → Seite auswählen → "+ Neuen Inhalt erstellen" an gewünschter Position auswählen. Üblicherweise geschieht dies im Bereich "Content.
Exemplarisch für die meisten Inhaltselemente: Auf der Seite „Galerie/2025-26“ wird an oberster Stelle ein neues Inhaltselement „Text und Bilder“ angelegt. 3 Bilder, 3spaltig
In den meisten Fällen werden Elemente aus dem Reiter „Typischer Seiteninhalt“ erstellt. In diesem Fall genügt ein Klick auf „Text & Bilder“
Das Inhaltselement vom Typ „Text und Bilder“ öffnet sich.
Reiter "Allgemein"
Über- und Unterüberschrift können eingegeben oder leer bleiben.
- Typ: Vordefinierte CSS-Klassen (Standard: h2)
- Ausrichtung: Links – Mitte – Rechts (Standard: Links)
- Link: Überschrift kann mit einem Link (intern, extern, Mail, etc.) versehen werden
- Display headings: Zusätzliche vordefinierte CSS-Klassen display-1 bis display-6
- Header Extra Class: Eigene vordefinierte CSS-Klassen oder Bootstrap-Klassen:
- Text: Eingabe des Textes mit vielen Formatierungsmöglichkeiten
Reiter "Bilder"
- Button "Dateien auswählen und hochladen": NICHT EMPFOHLEN!
Bilder werden direkt vom PC hochgeladen und inhaltsbezogen von TYPO3 im Ordner user_upload abgelegt. - Button "Bild hinzufügen":
Die Bilder wurden zuvor im Dateisystem (Dateiliste) in einem expliziten Ordner hochgeladen.
Nach einem Klick auf den Button "Bild hinzufügen" wird der entsprechende Ordner geöffnet und die gewünschten Bilder werden ausgewählt (Einzelne Bilder über das "+"-Zeichen, Mehrfachauswahl über Checkbox → Auswahl importieren).
Tipp: Sollen alle Bilder des Ordners hinzugefügt werden: Auswahl umkehren → Auswahl importieren
Ergebnis: Alle Bilder sind auf der Seite „aufgeklappt“ eingebunden. Jedes einzelne Bild könnte nun mit Beschreibungen und CSS-Klassen befüllt werden.
Jetzt ist ein guter Zeitpunkt um das erste Mal zu speichern!
Ergebnis: Die Bilder werden nun "eingeklappt" dargestellt.
Metadaten bearbeiten, Deaktivieren/Ausblenden, Löschen, Datei-Informationen, Drag&Drop (Reihenfolg ändern):
- Bildeinstellungen
- Galerieeinstellungen
Reiter "Erscheinungsbild"
Hier können weitere Optionen für die Darstellung des Inhaltselementes vorgenommen werden.
- Padding: Außenabstand
- Margin: Innenabstand
- Extra Class: Vordefinierte CSS-Klassen
- Container (vor allem bei einspaltigem Layout wichtig):
container (Standard):
no container: 100% Seitenbreite
Sind alle Bearbeitungen abgeschlossen, muss zwingend gespeichert werden.
Falls die Seite noch deaktiviert ist, machen wir sie nun sichtbar.
Anschließend löschen wir noch einmal den Cache und wechseln zum Front-End-Tab
Ergebnis:
