Das Institute-Layout

Im Folgenden erläutern wir, wie Sie Ihren Instituts-Webauftritt im neuen Design einrichten. Dabei weisen wir mehrfach auf die Constants-Dateien (auch genannt Konfigurationsdateien) hin. Diese Dateien finden Sie in der

1. Filelist
2. im Ordner layout2021 im Unterordner typoscript.
3. Klicken Sie die drei Punkte an,
4. und klicken Sie auf "Edit Content"/"Inhalt bearbeiten" um die Dateien bearbeiten zu können.

Die Header-Navigation lehnt sich an die der zentralen TU-Website an, ist jedoch zweizeilig aufgebaut, um in der oberen Zeile Platz für Ihr Logo und Ihren Website- bzw. Institutstitel zu schaffen.

1) Ihr Institutslogo sollte bereits in der Filelist im Ordner layout2021 übernommen worden sein. Wenn nicht hinterlegen Sie das Logo bitte als svg-Datei unter dem Titel inst_logo.svg in ebendiesem Ordner. Die Größe des Logos können Sie beeinflussen, indem Sie das Zeichen "#" vor dem Wert "# header.logo.size" in der constants.txt-Datei entfernen und den Wert zu "medium" oder "large" ändern.

2) Den Instituts-/Website-Titel geben Sie in der constants.txt unter "header.title" ein. Bei  unterschiedlichen Titeln auf Deutsch und Englisch kopieren Sie den Absatz bitte in die constants.de.txt bzw. constants.en.txt Dateien und hinterlegen dort die jeweiligen Titel.

3) Die Hauptmenü-Punkte (Menü-Ebene 1) werden in Zeile 2 des Headers angezeigt. Dies geschieht in Typo3 automatisch aus der Struktur des Seitenbaums heraus. Sie haben Platz für ca. acht Hauptnavigationspunkte, je nach Wortlänge. Versuchen Sie, die Formulierungen möglichst kurz und prägnant zu halten, sodass die Hauptnavigationsleiste idealerweise einzeilig dargestellt wird. Nach dem Designwechsel werden auch frühere Footer-Links in der Hauptmenü-Leiste angezeigt. Diese müssen Sie dann in den Footer verschieben - s.u.

4) On-Klick öffnet sich die Navigation, auch Mega-Menü genannt. Sie schließt sich wieder bei Klick auf den Menüpunkt oder auch, wen Sie irgendwo hin klicken.

5) Die Menü-Ebenen 2 und 3 erscheinen automatisch aus dem Seitenbaum heraus im Mega-Menü. Mit dem Menu Seperator legen Sie fest, an welcher Stelle die Spalten getrennt werden - siehe unten. Tiefere Menü-Ebenen (4-6) erscheinen unten rechts am Bildschirmrand im aufklappbaren Mehr-Menü.

6) Mit der Menü-Teaserbox können Sie besondere Inhalte highlighten. Sie erstellen diese in der List View der Seite des entsprechenden Hauptnavigations-Punkts - siehe unten.

7) Der Sprachumschalter ist automatisch aktiviert, sobald Inhalte zweisprachig vorliegen.

8) Die Menü-Icons erscheinen, sobald Sie in der constants.txt Datei im Absatz " Header Action Buttons" die Page IDs der Webseiten hinterlegen, zu denen diese Icons führen sollen. Sie können alle Icons nutzen oder nur einzelne. Die Icons symbolisieren einen Kalender (header.action.calendar), einen Standort (header.action.place) sowie einen Login-Bereich (header.action.login).

9) Die Suche basiert wie zuvor auch auf dem Google Custom Search Engine und durchsucht nur Ihren jeweiligen Webauftritt. Bei neuen Webauftritten dauert es etwas, bis Google diese indexiert hat - erst danach liefert die Suche Ergebnisse.

Menu Seperator

Mit dem Menu Seperator legen Sie fest, an welcher Stelle die Spalten innerhalb des ausklappbaren Bereichs der Headernavigation getrennt werden. Ziehen Sie diesen einfach an die gewünschte Stelle im Seitenbaum. Die Trennung erfolgt innerhalb der Menüebene 2.

Menü-Teaserbox

Die Menü-Teaserbox fügen Sie hinzu, indem Sie auf der Seite des entsprechenden Hauptnavigationspunktes - im Beispiel "Über uns" die Listenansicht auswählen und über das Plus-Symbol eine Menü-Teaserbox hinzufügen.

1) Sie können eine blaue Illustration (illu) auswählen oder ein eigenes Foto hinterlegen (image).

2) Hinterlegen Sie den Link zu dem die Box führen soll.

3)/4) Geben Sie Titel und optional Text der Box an.

5) Hier können Sie das unter 1) angesprochene Foto hochladen.

6) Hier wählen Sie die Position innerhalb des Hauptmenü-Bereich. Sie können auch mehrere Boxen hinterlegen und wählen dann hier, welche rechts und welche links angezeigt werden soll.

7) Hier wählen Sie ob die Box im deutschen oder englischen Menü angezeigt werden soll.

1)/2) Das TUHH-Logo sowie die Überschrift TU Hamburg erscheinen automatisch und können nicht angepasst werden.

3) Den Titel sowie die Adresse und Kontaktdaten pflegen Sie in den Constants-Dateien. Alles was sich auf DE und EN nicht unterscheidet in constants.txt, der Titel in constants.de.txt bzw constants.en.txt. Sie können die entsprechenden Abschnitte auch in die jeweils anderen Dateien kopieren.

4) Die Links im Footer richten Sie ein, indem Sie die Seiten, zu den verlinkt werden soll, in die Systemordner "Footer links" und "Footer rechts" schieben. Links und rechts geben die zwei Spalten an. Hier müssen mindestens die Seiten Impressum und Datenschutz erscheinen - letztere darf eine Weiterleitung auf www.tuhh.de/tuhh/datenschutz sein, wenn Sie sich auf unser TYPO3-Standard-Angebot beschränken. Für individuelle Lösungen müssen Sie die Datenschutzerklärung selbst verfassen.

5) Wenn Sie Social Media Accounts pflegen, setzen Sie in der constants.txt Datei den Wert "footer.social" auf 1. Geben Sie dann die Links zu den jeweiligen Social-Media-Kanälen unter dem Abschnitt "Social Media Buttons in Footer" an. Bleibt ein Link leer, erscheint das entsprechende Symbol nicht. Möglich sind aktuell Facebook, Twitter/X, Instagram, Youtube und LinkedIn.

6) Um Partner-Logos zu hinterlegen, fügen Sie auf der Wurzelseite des Auftritts in der List-View über das Plus-Symbol "Partner" hinzu. Fügen Sie die Logos hinzu und verlinken Sie diese.

Folgende Bereiche sollten Sie nach der Umstellung Ihres Webauftritts auf das neue Design bearbeiten oder überprüfen:

1. Startseite: Auf der Startseite besteht der größte Überarbeitungsbedarf. Die bisherigen Layout-Varianten von Header und Teaser gibt es im neuen Design nicht mehr. Sie können die Teaser durch das Element "Landing Page Hero" ersetzen, das einen Newslider bietet. Für Schmuckbilder bietet sich der Headerslider an. Wichtig ist, dass Ihre Startseite (und auch jede andere Seite) eine H1-Überschrift enthält.
2. News-System: Wenn Sie das News-System verwenden, wird dies automatisch in das neue Design überführt. Da das neue Layout keine Randspalte mehr hat, gibt es aber nicht mehr die Möglichkeit, News in der Randspalte der Startseite anzeigen zu lassen. Stattdessen können Sie im Contentbereich der Startseite einen Newsslider mit den News aus dem News-System verwenden. Mehr erfahren Sie in dieser Anleitung.
3. Kontakte (Plugins Staff Table und Assistant Info): Die Inhalte dieser Plugins werden übernommen. Alternativ können Sie das neue Inhaltslement Kontaktpersonen verwenden, das seine Inhalte ebenfalls vom LDAP-Server der TUHH holt.
4. Plugins TORE und BibTex: Die Inhalte bleiben erhalten und fügen sich in das neue Design ein. es sollte hier keine To Dos für Sie geben, bitte überprüfen Sie dies aber sicherheitshalber.
5. Tabellen: Im Rich Text Editor erstellte Tabellen werden übernommen und fügen sich in das neue Design ein. Im HTML-Element erstellte Tabellen werden ebenfalls übernommen - hier sollten Sie aber das Design überprüfen und die HTML-Lösungen zeitnah abbauen. Zusätzlich gibt es ein neues Inhaltselement für einfache und komplexe (sortierbare) Tabellen.
6. Bilder: Bilder, die direkt im Rich Text Editor eingefügt wurden, sind im Frontend noch sichtbar, im Backend aber nicht mehr und sobald Sie das Inhaltselement mit dem Bild einmal bearbeiten, verschwindet das Bild. Dies liegt nicht am neuen Design, sondern Bilder im RTE sind seit Typo3 V10 nicht mehr möglich. Benutzen Sie bitte nur noch den Inhaltselement-Typ Text & Images und platzieren Sie Bilder mit der TYPO3-Methode, die Sie auf dem Tab Images finden. Sie können unter "Galerieeinstellungen/Position und Ausrichtung" die Platzierung des Bildes im Verhältnis zum Text verändern sowie den grafischen Rahmen ändern oder ausschalten. Individuell eingestellte Bildgrößen unter "Medienanpassungen" haben keinen Effekt mehr - das neue Design setzt auf standardisierte Bildgrößen. Mehr dazu finden Sie in dieser Anleitung zum Thema Bilder.
7. Randspalte: das neue Layout hat keine Randspalte mehr. Inhalte aus der Randspalte müssen in den Contentbreich verschoben werden. Sie finden die Inhaltselemente, die vormals in der Randspalte waren, nun ganz unter im Backennd einer Seite unter Unused. Ein orangefarbener Störer weist Sie im Backend darauf hin, dass es Unused elements gibt - prüfen Sie diese, ob Sie erhalten bleiben sollen, oder löschen Sie sie.
8. Datenschutz und Impressum: Eine Datenschutzerklärung und ein Impressum müssen via Links im Footer erreichbar sein - siehe Thema "Footer" oben. Die Datenschutzerklärung muss ein eigener Link im Footer sein und kann kein Unterthema des Impressums sein, sie darf aber eine Weiterleitung auf den zentralen Webauftritt sein, solange Sie keine individuellen datenschutzrelevanten Funktionen/Inhalte auf Ihrem Auftritt verwenden. Das Impressums-Plugin funktioniert nach wie vor, bitte nehmen Sie die Umstellung des Designs aber zum Anlass, die Inhalte auf Aktualität und Vollständigkeit zu überprüfen. Weitere Informationen zu den Themen Datenschutz und Impressum finden Sie auf der Webseite des Rechtsreferats.
9. Qualitätscheck: Bitte überprüfen Sie alle Seiten Ihres Webauftritts auf funktionale Fehler und Darstellungsfehler und melden Sie Fehler an webmaster[at]tuhh(dot)de.