Schulhomepages & Typo3
- VOBS Typo3-Templates | Quickstart Redakteure
- VOBS Typo3 Templates | Administration
- Typo3: Redakteur einrichten
- Typo3 VOBS-Templates: Kalender einbinden, Integration von Google-, Outlook- und .ics-Kalendern
- Typo3 - News (Aktuelles): Archiv einrichten
VOBS Typo3-Templates | Quickstart Redakteure
| 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.1 Seiteneigenschaften
Seite → Root (Weltkugel) → Seiteneigenschaften bearbeiten → Erscheinungsbild
Standardmäßig haben Seiten (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.
Das Backend sieht entsprechend aus:
Das Ergebnis im Frontend:
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 Standard Inhaltselemente
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:
5.4 Spezielle Inhaltselemente
5.4.1 Container - Columns (Spalten)
Der Inhaltstyp Columns (Spalten) ist ein Gestaltungselement, das auf jeder Seite eingefügt werden kann. Dabei wird der Anzeigebereich der Webseite in so viele Spalten aufgeteilt, wie ausgewählt werden (2, 3, 4 oder 6 Spalten).
Columns gehört zu den Container-Inhaltselementen. Container geben einen Rahmen vor, in dem andere Inhaltselemente eingefügt werden können. Der Container Columns gibt entsprechend Spalten vor.
Das Inhaltselement wird ausgewählt (in diesem Fall 3 Colums) und dann direkt gespeichert und geschlossen.
Ergebnis:
Diese Spalten werden im nächsten Schritt erst mit Inhalt gefüllt → "+ Neuen Inhalt erstellen" in der jeweiligen Spalte. Die Inhalte können dabei aus allen Inhaltstypen ausgewählt werden. Nach dem Anlegen der Inhaltselemente "Speichern" und "Schließen".
In diesem Beispiel enthalten die Spalten 1 und 3 jeweils ein Bild, während die Spalte 2 in der Mitte ein "Normales Textelement" enthält. Auf Mobilgeräten werden diese Spalten (von links nach rechts) im Normalfall von oben nach unten angezeigt. Wir achten darauf, dass alle Inhaltelemente aktiviert sind.
Ergebnis im Frontend:
Über den Bearbeiten-Stift des Elements "Colums" → Erscheinungsbild lassen sich unzählige Einstellungen vornehmen. Diese werden hier nicht näher erläutert.
5.4.2 Container - Card Wrapper
Cards bietet die hier dargestellte Möglichkeit, Personen, Teams oder auch Unterbereiche der Webseite grafisch herauszuheben. Um mit Cards zu arbeiten, muss im Backend zuerst ein „Card Wrapper“-Container erstellt werden:
Gegebenenfalls wird eine Überschrift eingefügt, anschließend direkt wieder "Speichern" und "Schließen".
Nun wird unser Card-Wrapper mit dem Inhaltselement / den Inhaltselementen "Bootstrap Card" befüllt. Dies ist in diesem Fall das einzig mögliche Inhaltselement. Es können beliebig viele Card-Elemente eingefügt werden.
Die Karten können vielfältig gestaltet und mit Effekten versehen werden.
Im Reiter „Content“ wird der Text eingegeben, der auf der Karte angezeigt werden soll. Dieser kann im Bereich „Text top“ (oben) oder „Text bottom“ (unten) eingegeben werden. Diese Ortsangaben haben je nach gewählter Kartenart (Group, Decks oder Columns) eine andere Auswirkung.
Im Reiter „Medien“ können bis zu zwei Bilder eingebunden werden, die je nach gewählter Kartenart dann angezeigt werden. Bei den Bildern können Extra-Klassen für den figure-tag (besondere Abstände bzw. Hover-Animationen) sowie für den img-tag (Darstellungsvarianten des Bildes) ausgewählt werden. Die Darstellung wie im Template wird durch Aktivieren von „Enable Profile Card“ im Reiter „Erscheinungsbild“ erreicht.
Wiederum können über das "Erscheinungsbild" von "Card Wrapper" unzählige Einstellungen vorgenommen werden.
Hiding / Display Elements: Hier wird angegeben, ob die Karten bei gewissen Bildschirmgrößen ausgeblendet, oder erst bei bestimmten Bildschirmgrößen eingeblendet werden sollen.
Groups, Decks, Columns or Slider: Unterschiedliche Anzeigemöglichkeiten der Cards. Wird ein bestimmtes Element ausgewählt, öffnen sich weitere Einstellungsmöglichkeiten.
Group / Grid Cards
Gruppierte Darstellung - ohne Zwischenräume bzw. mit Zwischenräumen (Grid Cards)
Masonry
In dieser Einstellung passt sich die Anzahl der in einer Zeile angezeigten Elemente an die verfügbare Breite an. Je schmaler der Bildschirm, umso weniger Karten werden nebeneinander angezeigt.
Slider
In der Einstellung Slider werden die Karten als horizontaler Slider angezeigt, durch den mit gedrückter Maustaste oder per Wischgeste (bei Touchscreens) durchgescrollt werden kann.
Ergebnis: mit Navigation (Pfeile) und Paginierung (Punkte im unteren Bereich)
Flipper
Bei MouseOver werden die Karten „gedreht“ und es werden weitere in den Karten angegebenen Inhalte angezeigt.
5.4.3 Container - Collapsible Container (Accordion)
Das Accordion eignet sich besonders für Aufzählungen. Es bietet die Möglichkeit, zu den einzelnen Items der Aufzählung weitere Informationen einblenden zu lassen.
Für das Accordion muss ein „Collapsible Container“ als Inhaltselement eingefügt werden. Gegebenenfalls Überschrift vergeben, danach wieder "Speichern" und Schließen.
Dieser Container wird für jeden gewünschten Eintrag in der Liste mit einem „Collapsible Element“ befüllt. Dies ist das einzige Inhaltselement, das bei einem Collapsible Container angeboten wird. 
Im Collapsible Element wird der Titel und allenfalls ein Bild dazu angeführt. Dies wird als „Überschrift“ des Accordion angezeigt. Innerhalb des Collapsible Element kann ein Inhalt eingefügt werden. Dieser Inhalt kann aus jedem Inhaltselement bestehen und wird angezeigt, sobald das entsprechende Element angeklickt wird.
5.4.4 Container - Tab Container
Der Container „Tabs“ erlaubt es, verwandte Inhalte in Tabulatoren darzustellen, wobei jeweils nur der ausgewählte Inhalt angezeigt wird. Dieses Verhalten ist aus den Ribbons der Office-Programme bekannt. Um einen Tab Container zu verwenden, muss diese Option bei den Containern der Inhaltselemente ausgewählt werden. Der Tab Container ist am unteren Ende der Optionen angegeben.
Neuen Tab Container anlegen:
Gegebenenfalls Überschrift eingeben, danach "Speichern" und "Schließen".
Neuen Inhalt erstellen: Tab Element
Diese Elemente können dann mit beliebigen Inhalten befüllt werden. VORSICHT! Alle Tabs benötigen zwingend einen Inhalt.
5.4.5 Container - Carousel
Mit einem Carousel kann ein animierter Wechsel zwischen verschiedenen Inhalten, beschränkt auf Texte und Bilder, umgesetzt werden. Dazu muss aus den Inhaltselementen der Carousel Container ausgewählt werden.
Gegebenenfalls Überschrift vergeben, danach "Speichern" und "Schließen".
Als Inhalt des Carousel Containers kann nur das Inhaltselement „BS Carousel“ ausgewählt werden. Das BS Carousel kann Bilder, Texte oder beides enthalten. Die Texte überlagern dabei den Bildinhalt.
Die Anzeige im Carousel kann durch verschiedene Einstellungen beeinflusst werden. Diese Einstellungen finden sich alle im Reiter „Erscheinungsbild“. Die wichtigsten kurz zusammengefasst:
Use Thumbnails as carousel-indicators: Unter dem Carousel werden kleine Vorschaubilder der anderen Carouselinhalte angezeigt.
Switch carousel from horizontal sliding to crossfade: Der Wechsel der Inhalte wird nicht als Sliding, sondern als Überblendung dargestellt.
Interval: Gibt die Einblendzeit eines Inhalts in Millisekunden an.
5.4.6 Container - Swiper
Der Swiper Container ist ähnlich dem Carousel. Beim Swiper können jedoch mehrere Inhaltselemente parallel angezeigt werden, die animiert durchlaufen werden können. Dabei kann je nach Bildschirmgröße angegeben werden, wie viele Elemente gleichzeitig nebeneinander dargestellt werden.
Außerdem kann, ähnlich wie beim Container Cards, Loop, Autoplay sowie eine Navigation eingeblendet werden.
Diese Einstellungen finden sich, wie auch bei den anderen Containern im Reiter „Erscheinungsbild“.
5.4.6 Container - Parallax Wrapper
Mit dem Parallax Wrapper kann ein Bild eingefügt werden, das sich scheinbar im Hintergrund beim Scrollen der Seite mit einer anderen Geschwindigkeit bewegt.
Im Reiter „Bilder“ des Inhaltselements wird das Bild ausgewählt, das „im Hintergrund“ dargestellt werden soll.
Im Reiter „Erscheinungsbild“ bestimmt der eingetragene Wert bei „Parallax effect speed.“ die Stärke des gewünschten ParallaxEffektes. Der Wert muss zwischen -1.0 und 2.0 liegen. Der Wert 1.0 bettet das Bild „normal“ in der Seite ein.
In den Parallax Wrapper können beliebige weitere Inhaltselemente eingefügt werden. Diese werden dann vor dem Bild platziert.
5.4.8 Nachrichten-System: News (Aktuelles)
Der Inhaltstyp Nachrichten (News) kann auf jeder Seite eingegeben werden. Oft wird hierfür eine explizite Seite (zum Beispiel „Aktuelles“) verwendet. Des Weiteren ist es notwendig für die Einzelansicht einer Nachricht eine Seite „Detail“ (ohne Inhalt) anzulegen. Optional können noch die Seiten „Archiv“ und „Archiv Single“ angelegt werden.
Die Datensätze des Nachrichten-Systems werden aufgrund der Übersicht in einem externen System-Ordner verwaltet und über das Modul „Liste“ gepflegt. Im Falle der VOBS-Templates ist es der Ordner news-db
Tipp: Die Seite „Aktuelles Detail“ sollte nicht im Menü erscheinen. Aus diesem Grund wird sie in den Seiteneinstellungen im Reiter „Zugriff“ aus dem Menü ausgeschlossen:
Das Anlegen eines Nachrichten-Inhalts erfolgt über "Nachrichten-System": News-Artikelliste (inkl. Detailansicht)
Nach dem Anlegen des Inhalts „Nachrichten-System“ müssen diverse Einstellungen vorgenommen werden. Es ist zu empfehlen, diese Einstellungen der Administration zu überlassen.
Erweiterungsoptionen → Einstellungen
Wir geben als Datenbank unseren System-Ordner news-db an:
Erweiterungsoptionen → Weitere Einstellungen
Hier geben wir das Verhalten für die Einzelnachrichten-Ansicht, die Listenansicht und den Zurück-Link an.
Hier stellen wir auch ein, wie viele Einträge pro Seite dargestellt werden sollen:
Erweiterungsoptionen → Vorlage
Einpflege und Bearbeitung von Artikeln (News):
Artikel (News) werden über das Modul „Liste“ angelegt und verwaltet bzw. gepflegt.
Liste → news-db → Neuen Datensatz erstellen → News System → Artikel
Kategorien Werden viele News verwaltet und eingepflegt, so ist unter Umständen das Anlegen von Kategorien sinnvoll. Neue Kategorien im Systemordner news-db erstellen (Beispiele: Ausflüge, Feste, Berufsorientierung,…). Bei vielen News-Datensätzen ist durch eine Kategorisierung eine differenzierte Darstellung möglich.
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.
Link zu den VOBS Typo3-Templates: https://vobs.at/cms
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-dbOnepage
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 = containerErgebnis:
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 |
5. Footer und Jumbotron (Header)
5.1 Footer
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 eines Administrators
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:
- Schieberegler bei Admin(!) ist aktiviert
- Benutzername und Passwort festlegen
- Sprache der Benutzeroberfläche einstellen
Der Zugriff muss noch aktiviert werden:
Speichern.
9. Anlegen von Redakteuren
Es ist empfehlenswert, für Redakteure Benutzer mit eingeschränkten Rechten und eingeschränkten Funktionen anzulegen.
Vorteile
- Backend für Redakteure viel übersichtlicher und damit "einfacher"
- Seiten-, Datei und Verzeichnis-Rechte können vordefiniert und ggf. eingeschränkt werden
- Es können keine ungewollten oder unliebsamen Veränderungen an Template oder Systemeinstellungen vorgenommen werden
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"
Typo3: Redakteur einrichten
| Vorarlberger Standardschulinstallation Verfasser: Kuno Sandholzer |
© 2025 IT-Regionalbetreuer Vorarlberg 6900 Bregenz, Römerstraße 14 Alle Rechte vorbehalten |
1. Vorbemerkungen
Manchmal ist es nützlich, auf einer Typo3-Seite neben dem Webmaster der Schule noch weiteren Personen den Zugriff auf das Backend der Homepage zu erlauben. Eventuell übernehmen Kollegen Teilbereiche der Webseite, oder, wie in diesem Beispiel, erhält der Elternverein Zugriff auf einen Unterbereich der Seite.
In dieser Anleitung wird das Einrichten einer Redakteursgruppe sowie das Anlegen eines zusätzlichen Backend-Benutzers erklärt.
Diese Teilberechtigungen können nicht nur für die Seitenstruktur, sondern auch für den Bereich der Dateiliste vergeben werden.
2. Erstellen der Dateifreigabe
Vorab muss eine Dateifreigabe erstellt werden, damit die Redakteure in der Dateiliste Dokumente ablegen können:
Dabei kann ein neuer Ordnerbereich erstellt werden oder ein bereits bestehender Ordner verwendet werden. In diesem Beispiel wurde ein Ordner „elternverein“ erstellt, der dann freigegeben wird:
Sollen die Redakteure auch direkt in den Inhaltselementen Bilder und Dateien hochladen und einbinden können, so muss der Bereich „user_upload“ zusätzlich als Freigabe eingerichtet und später eingebunden werden.
3. Backend-Benutzergruppe erstellen
Im Bereich „Backend-Benutzer“ wähle oben im Klappmenü „Backend-Benutzergruppe“ und klicke dann auf „+“, um eine neue Benutzergruppe für das Backend anzulegen. Das Erstellen einer neuen Benutzergruppe ist obligatorisch.
Der Benutzergruppe einen Namen geben…
… und anschließend im Reiter Zugriffsliste die notwendigen Berechtigungen erteilen:
Im Reiter „Freigabe und Arbeitsumgebungen“ die Seite bzw. die oberste Seite des Seitenbaums auswählen, auf die diese Redakteursgruppe Zugriff haben soll und weiters die am Anfang angelegte Verzeichnisfreigabe auswählen:
Am Ende diese Änderungen abspeichern.
4. Backend-Benutzer erstellen
Nun kann an dieser Stelle ein Backend-Benutzer eingerichtet werden. Dazu wähle im Klapp-Menü oben jetzt „Backend-Benutzer“ aus und klicke auf das „+“:
Gib einen Benutzernamen und ein Kennwort ein, wähle die Backend-Gruppe aus und aktiviere den Backend-Benutzer:
Diese Einstellungen abspeichern.
5. Zugriffsberechtigungen erteilen
Damit die Redakteure nach der Anmeldung die entsprechenden Seiten ändern können, müssen bei diesen die Zugriffsberechtigungen erteilt werden. Das geschieht im Bereich „Zugriff“.
Klicke dazu auf „[nicht gesetzt]“ und wähle im Klappmenü, das dann eingeblendet wird, die gewünschte Backend-Benutzergruppe aus:
Nun sollte der neu angelegte Backend-Benutzer sich bei Typo3 anmelden können und die für seine Benutzergruppe freigegebenen Seiten bearbeiten können.
Typo3 VOBS-Templates: Kalender einbinden, Integration von Google-, Outlook- und .ics-Kalendern
| Vorarlberger Standardschulinstallation Verfasser: Alexander Zoppel |
© 2024 IT-Regionalbetreuer Vorarlberg 6900 Bregenz, Römerstraße 14 Alle Rechte vorbehalten |
1. Google Account erstellen
Google Account erstellen:
Google.at -> Anmelden -> Konto erstellen -> Für die Arbeit oder mein Unternehmen
Beispielhaft: Erstellung eines Google Accounts für die Mittelschule Test
Weitere Schritte und Angaben (Empfehlungen):
- Vorname: Mittelschule ***
- Geburtsdatum: über 18
- Geschlecht: Ich möchte dies nicht beantworten
- Vorgeschlagene E-Mail-Adresse verwenden oder eine eigene generieren
- Geeignetes (sicheres!) Passwort erstellen
- E-Mail-Adresse zur Kontowiederherstellung hinzufügen: Überspringen
- Telefon: Überspringen
- Einstellungen auswählen -> Manuell (4 Schritte)
- Web- & App-Aktivitäten nicht in meinem Konto speichern
- YouTube-Verlauf nicht in meinem Konto speichern
- Allgemeine Werbung einblenden
- Gelegentlich Erinnerungen für den Privatsphärecheck erhalten: Haken nicht setzen
- Angaben bestätigen und Datenschutz zustimmen
- Unternehmensprofil einrichten: Jetzt nicht
Der Google Account ist nun erstellt und unser Google Kalender (bei bestehender Anmeldung) unter calendar.google.com oder im sich rechts oben angezeigten Menü einsehbar.
2. Google Projekt „Kalender Export“ erstellen und Google API generieren
|
Unter console.cloud.google.com den Nutzungsbedingungen zustimmen. |
Unter Projekt auswählen „Neues Projekt“ „Kalender Export“ erstellen: |
Ein Klick auf APIS UND DIENSTE AKTIVIEREN führt zur API-Bibliothek:
Unter Google Workspace ist die Google Calendar API zu finden. Diese muss aktiviert werden.
Unter Anmeldedaten wird nun ein API-Schlüssel erstellt und ist unter „Schlüssel anzeigen“ jederzeit einsehbar. Der API-Schlüssel kann auch eindeutig benannt werden. Dieser Schlüssel wird später bei der Einrichtung des Typo3-Kalender-Plugins zwingend benötigt.
3. Outlook-Kalender zum Teilen bereitstellen
Im Vorfeld müssen von der IT-Betreuung Einstellungen im Tenant vorgenommen werden:
3.1 Outlook-Kalender mit Terminen befüllen
3.2 Outlook-Kalender teilen
In der Browser-Version(!) von Outlook Einstellungen (Zahnrad)
Gewünschten Kalender veröffentlichen
4. Pflege und Integration von Google-, Outlook- bzw. sonstigen .ics-Kalendern
In Google kann nun der kopierte Link zur Outlook-.ics-Datei (oder jede andere .ics-Datei) eingebunden werden: Kalender hinzufügen Per URL
Ansicht im Google-Kalender mit allen aktivierten Kalendern:
Blau: Originale Google Einträge (Mittelschule Test)
Orange: Outlook Einträge (Kalender Import MS365)
Grün: Feiertage in Österreich
Nun können alle gewünschten Kalender einzeln für die Integration in Typo3 bearbeitet werden:
In diesem Beispiel werden die Kalender-IDs von drei Kalendern verwendet:
Google Kalender „Mittelschule Test“: mittelschuletest@gmail.com
Weitere Kalender „Feiertage in Österreich: de.austrian#holiday@group.v.calendar.google.com
Weitere Kalender: „Kalender Import MS365“: xxxxxxxxxxxxxxxxx@import.calendar.google.com
5. Typo3: Extension me_google_calendar einrichten und pflegen
5.1 Installation der Extension
Eine Deaktivierung des bestehenden Plugins Calendarize wird empfohlen.
|
Installation des Plugins Erweiterungen -> Erweiterungen hinzufügen -> me_google_calendar |
Anlegen eines SYS Ordners unter „Datenbanken“ Liste -> Neuer Ordner „kalender-db“ |
Anschließend wird im Template das statische Template Google Calendar eingebunden
Template Root (in diesem Fall VOBSDemo) -> Info/Bearbeiten -> Vollständigen Template-Datensatz bearbeiten -> Enthält
Um sicher zu gehen, dass es keine Konflikte bei der Ausgabe der Termine gibt, wird die korrekte Zeitzone im Setup des Templates angegeben:
Template -> Root (in diesem Fall VOBSDemo) -> Info/Bearbeiten -> Setup
plugin.tx_megooglecalendar.settings.timeZone = Europe/Berlin
5.2 Kalender importieren
Kalender in kalender-db importieren: Liste -> kalender-db -> +
Neuer Datensatz: Google Calendar
Angaben: Titel, Google API Key, Calendar Id, optional Css für Styling (Farbe, etc.)
Für alle weiteren Kalender gleich verfahren.
Schlussendlich werden alle importierten Kalender als Datensätze angezeigt:
5.3 Inhaltselement (im Frontend sichtbar) anlegen
Seite -> Termine -> Content -> + Inhalt -> Allgemeines Plugin
Plugin-Einstellungen:
Datensätze angeben (aus SYS-Ordner kalender-db)
Zusätzliche Einstellungen vornehmen.
In diesem Fall: Auswählbare Ansichten Monat, Woche und Jahresliste
Anmerkung:
Eine deutsche Übersetzung des Plugins ist möglich: Wartung -> Manage Language Packs
Frontend-Ansicht Woche:
Frontend-Ansicht Jahresliste:
Bei einem Klick auf einen Termin öffnet sich ein Popup-Fenster mit zusätzlichen Angaben (falls eingegeben): Beschreibung des Termins, Wann, Wo (ein Klick auf den Ort öffnet Google Maps falls angegeben), Download der .ics Datei.
Typo3 - News (Aktuelles): Archiv einrichten
| Vorarlberger Standardschulinstallation Verfasser: Kuno Sandholzer und Alex Zoppel |
© 2025 IT-Regionalbetreuer Vorarlberg 6900 Bregenz, Römerstraße 14 Alle Rechte vorbehalten |
1. Vorwort
An vielen Schulen werden News verwendet, um aktuelle Projekte und Neuigkeiten darzustellen. Oft reicht eine einfache News/Aktuelles-Seite aus. Werden aber viele Artikel über das Jahr eingepflegt, empfiehlt sich das Anlegen eines Archivs. Untenstehend wird das Anlegen einer Archiv-Seite erklärt.
2. Ziel
Bei einem Klick auf „AKTUELLES“ im Hauptmenü erscheinen die News des laufenden Schuljahres (NACH einem bestimmten Datum). In der linken Seitenspalte ist der Menüpunkt „ARCHIV“ zu sehen.
Bei einem Klick auf „ARCHIV“ in der linken Seitenspalte werden alle News VOR einem bestimmten Datum angezeigt.
3. Vorbereitungen
Standardmäßig kommt die eingerichtete News-Seite der VOBS-Templates (AKTUELLES) in einem einspaltigen Design. Zunächst machen wir diese Seite zweispaltig.
Ergebnis: Die Hauptseite „AKTUELLES“ ist nun zweispaltig und wir erhalten eine Sidebar auf der linken Seite.
Entsprechend machen wir auch die Unterseite „ARCHIV“ zweispaltig.
Wichtig: Wir wollen am Schluss nicht, dass eine Seite mit Unterseiten entsteht, da die Hauptmenüpunkte mit Unterseiten nur über einen Umweg zugänglich sind.
In dieser so entstandenen Sidebar legen wir ein neues Inhaltselement an:
Neuen Inhalt erstellen 🠖 Typischer Seiteninhalt 🠖 Nur Überschrift
Empfohlene Einstellungen:
Speichern und Schließen.
Als nächstes aktivieren wir die beiden Seiten Archiv und Archiv Single. Weiters können die Single-Seiten beliebig benannt werden (Beispiel: Single, Detail,...). Zum Schluss ziehen wir noch die Archiv Single – Seite „in“ die Archiv Seite, damit eine übersichtlichere Struktur entsteht.
Rechtsklick auf die jeweilige Seite > Aktivieren
„Archiv Single“ mit Drag & Drop in „Archiv“ ziehen.
Ergebnis: 
Man erkennt, dass die Icons der Seiten „Archiv“ und „Archiv Single“ ein bisschen dunkler sind. Das bedeutet, dass sie auch im Hauptmenü sichtbar sind. Aus obengenannten Gründen wollen wir das nicht.
Beide Seiten werden im Menü ausgeblendet. Das bedeutet, der Hauptmenüpunkt „AKTUELLES“ bekommt „keine“ Unterseiten (kann nicht ausgeklappt werden)
Bei beiden Seiten: Seiteneigenschaften 🠖 Zugriff 🠖 „Seite in Menüs aktiviert“ ausschalten
Ergebnis: Saubere Struktur und alle Unterseiten von „AKTUELLES“ sind im Menü NICHT AKTIV.
Zum Abschluss der Vorbereitungen verlinken wir noch die Überschrift „Archiv“ in der Seite „Aktuelles“ (Sidebar) mit der Seite „Archiv“.
Das Fenster schließt sich automatisch. Nach dem Speichern ändert sich der anfänglich kryptische Link
in 
(oder ähnlich)
4. News-Inhaltselemente für beide Archiv-Seiten
Die News-Inhaltselemente der beiden Archiv-Seiten unterscheiden sich nicht wesentlich zu den News-Inhaltselementen der Hauptseite „Aktuelles“ und „Aktuelles-Single“. Aus diesem Grund können sie kopiert und danach bearbeitet werden.
4.1 Listenansicht Archiv
Seite Aktuelles 🠖 Dreipunktmenü beim Inhaltselement „News-Artikelliste“ 🠖 Kopieren
Seite Archiv 🠖 im Content-Bereich auf den „Einfügen“-Button klicken
Das eingefügte Element ist zunächst deaktiviert 🠖 Aktivieren.
Anschließend auf das Stift-Symbol klicken um das Inhaltselement zu bearbeiten:
Überschrift: Archiv
Plugin 🠖 Einstellungen
Plugin 🠖 Weitere Einstellungen
4.2 Detailansicht Archiv (Single)
Wir kopieren das Listenelement aus „Aktuelles Single“ in den Content-Bereich von „Archiv Single“
Inhaltselement „Detailansicht der News-Artikel“ aktivieren und bearbeiten
5. Vorbereiten der Artikel
Datum & Zeit: Erstell-Datum der News UND Anzeige-Datum im Frontend (kann auch nachträglich geändert werden
Archiv: Datum ab wann die News archiviert werden.
In diesem Beispiel wurde am 23.März 2023 ein Artikel erstellt (Schuljahr 22/23). Mit Ende des Schuljahres / Beginn des nächsten Schuljahres wandert der Artikel am 1. September 2023 ins Archiv.
Ein weiteres Beispiel:
Am 2.Dezember 2025 wurde ein Artikel erstellt (Schuljahr 25/26). Mit Ende des Schuljahres / Beginn des nächsten Schuljahres wandert der Artikel am 1. September 2026 ins Archiv.
6. Der letzte Schritt
Zum Schluss passen wir noch die Listenansicht auf der Hauptseite "AKTUELLES" an. Es sollen nur die NICHT archivierten Artikel angezeigt werden:
Seite > Aktuelles > Inhaltselement News-Artikelliste bearbeiten (Stift) > Plugin > Einstellungen
