Im Folgenden erläutern wir, wie Sie Ihren Instituts-Webauftritt im neuen Design einrichten. Dabei weisen wir mehrfach auf die Constants-Dateien 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 Layout-Switch 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. Dies ist einer Neuerung, anfangs öffnete sich das Menü bei Mouse-Over. Der angeklickte Hauptmenüpunkt erscheint automatisch noch einmal und ist dann klickbar, um die dahinter liegenden Inhalte ansehen zu können.

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.

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 https://www.tuhh.de/tuhh/datenschutz sein.

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

Zwei der neuen Inhaltselemente machen einen Cookiebanner für Ihren Webauftritt zwingend erforderlich: Video und Social Wall - denn beide geben Nutzer*innendaten an Drittanbieter weiter, und dem müssen die Nutzer*innen aktiv zustimmen. Wenn sie das nicht tun, werden die Videos und die Social Wall mit einem Overlay blockiert und sind nicht nutzbar.

Wenn Sie also eines oder beide dieser Elemente verwenden, müssen Sie den Cookiebanner in der constants.txt Datei aktivieren.

In diesem Beispiel ist der Cookiebanner sowohl für die Videos (via YouTube) als auch für die Social Wall (via Juicer.io) akiviert:

#application.site.config.no_cookiepopup = 0
# renamed:
cookiebanner.no_banner = 0
cookiebanner.no_youtube = 0
cookiebanner.no_juicer = 0

Für eine Deaktivierung setzen Sie den Wert auf 1.

Für die Werte folgenden Werte müssen Sie die Page IDs der Impressums- und der Datenschutz-Seite Ihres Webauftritts hinterlegen:

cookiebanner.imprint_page =
cookiebanner.privacy_page =

Wenn Sie Videos über den Medienserver einbinden, ist der Cookiebanner nicht notwendig.

Zusätzlich müssen Sie in den Footerlinks einen Link zu den Cookie-Einstellungen hinterlegen, sodass die Nutzer*innen ihre Auswahl nachträglich ändern können.

1) Dazu legen Sie eine Seite vom Typ "Link to External URL" an.

2) Bennen Sie diese "Cookie-Einstellungen" bzw. "Cookie Settings".

3) In das Feld für die externe URL geben Sie ein "?type=1625489126" (ohne die Anführungszeichen).

4) Zusätzlich geben Sie  im Feld target "_top" ein (ohne die Anführungszeichen).

Sollten Sie die entsprechenden Felder nicht sehen, wenden Sie sich gerne an webmaster(at)tuhh.de und wir setzen das entsprechend für Sie um.