Schulhomepages & Typo3 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:  Modulgruppe Web Das Modul „Seite“ Hier können Sie Seiten und Seiteninhalte anlegen, bearbeiten oder löschen. Die Anordnung der Inhaltselemente entspricht der Ausgabe im Frontend.  Das Modul „Liste“ Zeigt alle Inhalte einer Seite in einer Listenansicht. Anlegen von Spezialinhalten (z. Bsp. News, Termine, etc…)   Modulgruppe Datei Das Modul „Dateiliste“ Das Dateiverwaltungsmodul bietet Zugriff auf die freigegebenen Ordner und Dateien. Hier können Dateien (z.B. Bilder, PDFs) auf den Webserver hochgeladen werden. Diese können dann kopiert, verschoben, umbenannt, ersetzt, gelöscht und bearbeitet werden.  2.2.3 Navigationsleiste (Seitenbaum)  In der mittleren Spalte stellt das Backend die Struktur der Website dar. Die Struktur ist als Baum aufgebaut.  Beim Überfahren mit der Maus von Seiten und Ordnern, wird die Seiten-ID Nummer angezeigt. Diese dient zur eindeutigen Identifizierung und ist stets bei SupportAnfragen anzugeben.   Über dem Seitenbaum befinden sich Symbole:  (1) Neue Seite – Drag and Drop (2) Backend Benutzer (3) Neue Seite mit Verweis (4) Einstiegspunkt (5) Seite mit Link zu externer URL (6) Neuer Ordner (Bsp: News-Datenbank) (7) Trennzeichen für Menü 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) Über den Button "Neuen Inhalt erstellen" oder über das Kontextmenü "+Neu" können neue Inhaltselemente an der gewünschten Position erstellt werden. 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 im Footer (unterster Bereich der Webseite, auf allen Seiten sichtbar)  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 Navbar → Brand → Eigenes Logo mit korrektem Pfad und Namen angeben 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. 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: 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 Über den Button "Anzeigen" können wir nun das Ergebnis im Frontend betrachten 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-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  5. Footer und Jumbotron (Header) 5.1 Footer Footer-Einstellungen in der T3SB Config: Footer enthält Content der angegeben Seite, in diesem Fall: Footer (id=10) 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  Beispiel Footer: Zwischen Seiten-Content und Footer ist kein oder zu wenig Abstand. 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)
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
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 Y ouTube-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