Styleguide
Gestaltungselemente & Anleitungen für Redakteure
Alle Gestaltungselemente des Netzfunke-Themes für TYPO3 13.4 mit bootstrap_package – jeweils mit Beispiel und einer Anleitung, wie du es im Backend anlegst.
Farben & Schrift
Alle Farben kommen aus den Site-Einstellungen und lassen sich je Verein ändern.
Schrift: Atkinson Hyperlegible, Grundgröße 18 px. Farben änderst du unter Site Management → Settings → Bootstrap Package → SCSS und Vereins-Design → Zusatzfarben.
Buttons
Buttons sind Links mit einem Stil aus dem Editor. Abgerundet, mindestens 44 px hoch.
- Im EditorText markieren → Link setzen → im Feld Stil „Button: …“ wählen
- Kombinieren„Button: Primär“ + „Button-Zusatz: groß“ + „Button-Zusatz: mit Pfeil“
- Mehrere ButtonsAbsatz mit Stil „Absatz: Button-Leiste“ – Buttons stehen dann mit Abstand nebeneinander
Hinweis-Boxen
Für Hinweise, Tipps und Warnungen – z. B. im Bereich „Sicher im Internet“.
Gut zu wissen
Das nächste Treffen findet am 19.11.2026 um 19:30 Uhr im Vereinszimmer des Bürgerhauses statt.
Unser Tipp
Nutzen Sie für jeden Dienst ein eigenes Passwort – ein Passwort-Manager hilft dabei.
Achtung Phishing
Ihre Bank fragt niemals per E-Mail nach PIN oder TAN. Solche Nachrichten sind Phishing.
- Elementbeliebig, z. B. „Text“
- Erscheinungsbild → Rahmen-Layout„Netzfunke: Info-Box“, „Tipp-Box“ oder „Warn-Box“
Hinweise im Fließtext
Absatz: Info-Hinweis – für kurze Hinweise mitten im Fließtext.
Absatz: Tipp – z. B. „Speichern Sie die Seite als Lesezeichen.“
Absatz: Warnung – z. B. „Öffnen Sie keine unbekannten Anhänge.“
Text mit Markierung und Primärfarbe.
- Im EditorAbsatz anklicken → Stil „Absatz: Info-Hinweis | Tipp | Warnung“
Termine
Es gibt zwei Varianten. Wähle nach dem Platz und der Menge an Infos pro Termin.
Ausführliche Termine
Jeder Termin als eigene Karte mit Wochentag, Uhrzeit, Titel und kurzem Text.
Für: Startseite, Seite „Termine“.
Element: Timeline
Kompakte Terminliste
Eine Zeile pro Termin: Datum + kurzer Text.
Für: Seitenleiste, Jahresübersicht, Newsletter-Text.
Element: Text (Aufzählung)
Nächste Termine
Variante A – ausführlich
Netzfunke-Treffen November
Bürgerhaus Burgebrach, Vereinszimmer. Davor ab 18:00 Uhr Senioren-Internet-Treff.
Jahresabschluss
Gemütliches Treffen mit Rückblick auf das Vereinsjahr.
Vortrag: Smart Home sicher einrichten
Was ein Heimnetz braucht und worauf man achten sollte.
So legst du Variante A an
- Seite im Modul Web → Seite öffnen und in der gewünschten Spalte auf „+ Inhalt“ klicken.
- Reiter „Bootstrap Package“ → „Timeline“ wählen.
- Reiter Allgemein: Überschrift eintragen, z. B. „Nächste Termine“.
- Im Bereich „Timeline Item“ für jeden Termin „Neu anlegen“ klicken und ausfüllen:
- Datum: über das Kalender-Symbol Tag und Uhrzeit wählen
- Überschrift: was stattfindet, z. B. „Netzfunke-Treffen November“
- Text: Ort und Hinweise
- Icon und Bild leer lassen – sie werden in der Terminliste nicht angezeigt
- Reiter „Timeline Options“ (Timeline-Optionen) → Sortierung „Ascending“ (aufsteigend) wählen. Sonst steht der späteste Termin oben.
- Reiter Erscheinungsbild → Rahmen-Layout „Netzfunke: Terminliste“ wählen.
- Speichern. Wochentag, Datum und „Uhr“ werden automatisch geschrieben.
Tipp: Vergangene Termine verschwinden von selbst, wenn du im Termin-Eintrag unter Zugriff → „Stop“ den Tag nach dem Termin einträgst. Alternativ den Eintrag über das Auge ausblenden.
Kompakte Terminliste
Variante B – eine Zeile pro Termin
So sieht es auf der Website aus
- 19.11.2026 Netzfunke-Treffen, 19:30 Uhr
- 17.12.2026 Jahresabschluss, 19:30 Uhr
- 21.01.2027 Vortrag Smart Home, 19:30 Uhr
- 18.02.2027
Treffen fällt aus
So sieht es im Text-Editor aus
- 19.11.2026 Netzfunke-Treffen, 19:30 Uhr
- 17.12.2026 Jahresabschluss, 19:30 Uhr
- 21.01.2027 Vortrag Smart Home, 19:30 Uhr
- 18.02.2027
Treffen fällt aus
So legst du Variante B an
- Ein Element „Text“ anlegen (oder ein vorhandenes Textelement öffnen).
- Im Editor auf „Aufzählungsliste“ (• ≡) klicken.
- Pro Termin eine Zeile: zuerst das Datum, z. B. „19.11.2026“, dann Leerzeichen und den Text. Mit der Eingabetaste kommt der nächste Termin.
- In jeder Zeile nur das Datum markieren und fett stellen (Symbol B oder Strg+B). Daraus wird auf der Website die farbige Datums-Plakette.
- Cursor irgendwo in die Liste setzen → im Feld Stil „Liste: Terminliste“ wählen.
- Speichern.
Tipp: Fällt ein Termin aus, den Text markieren und durchstreichen (Symbol S) – er wird blass dargestellt. Die Reihenfolge bestimmst du selbst: neue Termine einfach an der richtigen Stelle einfügen.
Chronik
Für Vereinsgeschichte und geschichtliche Themen – nur Jahreszahlen, chronologisch.
Unsere Chronik
Erste urkundliche Erwähnung
Beispieltext: Ein Ereignis, von dem nur das Jahr bekannt ist.
Bau des Bürgerhauses
Beispieltext. Ist das genaue Datum wichtig, steht es im Text: am 12. Mai 1950.
Gründung des Vereins
Beispieltext. Einträge mit Icon werden als Meilenstein hervorgehoben.
Erstes Treffen im Bürgerhaus
Zweites Ereignis im selben Jahr – die Jahreszahl erscheint nur einmal.
1000 Jahre Burgebrach
Beispieltext. Optionale Bilder erscheinen unter dem Text, ein Klick vergrößert sie.
So legst du eine Chronik an
- Element „Timeline“ anlegen (Reiter „Bootstrap Package“), Überschrift z. B. „Unsere Chronik“.
- Für jedes Ereignis unter „Timeline Item“ einen Eintrag anlegen:
- Datum: ein beliebiger Tag im Jahr, z. B. 01.01.1950 – angezeigt wird nur „1950“
- Überschrift: das Ereignis
- Text: Beschreibung; ein genaues Datum bei Bedarf hier hineinschreiben
- Bild (optional): historisches Foto, Bildunterschrift über „Beschreibung“ des Bildes
- Icon (optional): macht den Eintrag zum hervorgehobenen Meilenstein
- Reiter „Timeline Options“ → Sortierung „Ascending“ (älteste zuerst) oder „Descending“ (neueste zuerst).
- Reiter Erscheinungsbild → Rahmen-Layout „Netzfunke: Chronik (nur Jahreszahlen)“.
- Speichern.
Tipp: Mehrere Ereignisse im selben Jahr werden automatisch unter einer Jahreszahl gruppiert. Innerhalb eines Jahres bestimmt das Datum die Reihenfolge – z. B. 01.01. und 01.06. verwenden.
Teaser-Kacheln & Icon-Boxen
Für Zielgruppen und Einstiegsseiten.
Ansprechpartner
Vorstand und Kontaktpersonen mit runden Fotos. Hier mit Beispielnamen und Platzhalter-Fotos.
Vorstand
Max Mustermann
1. Vorsitz
Erika Musterfrau
2. Vorsitz
Alex Beispiel
Schriftführung
Kim Muster
Kasse
- Element„Karten-Gruppe“: Bild = Foto (quadratisch), Titel = Name, Untertitel = Funktion, Link = E-Mail
- Erscheinungsbild → Rahmen-Layout„Netzfunke: Ansprechpartner (runde Fotos)“
Karte & Hervorhebung
Einzelne Inhalte vom Rest abheben.
Karte
Weiße Box mit weichem Schatten – hebt einen einzelnen Inhalt hervor, z. B. den Bericht zur Hauptversammlung.
Hervorhebung
Akzentlinie links – für Zitate, Rückblicke oder wichtige Kernaussagen im Text.
- Erscheinungsbild → Rahmen-Layout„Netzfunke: Karte“ bzw. „Netzfunke: Hervorhebung“
- TippKarte + Hintergrund „Hell“ ergibt eine farbige Box
Textbreite
Standard ist die volle Breite. Lange Fließtexte bei Bedarf schmaler stellen.
Standard: volle Inhaltsbreite
Der Verein bietet Kurse, Vorträge und offene Treffen rund um Computer, Smartphone und Internet an. Alle Angebote werden von Ehrenamtlichen gestaltet und richten sich an Einsteiger ebenso wie an Fortgeschrittene. Lange Fließtexte lassen sich in einer schmaleren Spalte leichter lesen, weil das Auge beim Zeilenwechsel den Anfang der nächsten Zeile schneller findet.
Option „schmal“: gut lesbare Zeilenlänge
Der Verein bietet Kurse, Vorträge und offene Treffen rund um Computer, Smartphone und Internet an. Alle Angebote werden von Ehrenamtlichen gestaltet und richten sich an Einsteiger ebenso wie an Fortgeschrittene. Lange Fließtexte lassen sich in einer schmaleren Spalte leichter lesen, weil das Auge beim Zeilenwechsel den Anfang der nächsten Zeile schneller findet.
- StandardTexte, Karten und Boxen nutzen die ganze Breite des Inhaltsbereichs
- Erscheinungsbild → Optionen„Netzfunke: Schmale Textbreite (besser lesbar)“ – begrenzt das Element auf ca. 800 px
- Zentriertzusätzlich „Netzfunke: Zentriert“ wählen
- AusnahmeBühne und Call-to-Action sind immer etwas schmaler (gestalterisch gewollt)
Videos (Datenschutz)
YouTube- und Vimeo-Videos werden erst nach Zustimmung geladen (2-Klick-Lösung).
YouTube
Vimeo
- Funktioniert automatischbei YouTube- und Vimeo-Videos in „Text & Medien“, „Medien“ und „Externe Medien“ – am Element nichts einstellen
- Vor dem Klickkeine Verbindung zu YouTube/Vimeo. Ein Vorschaubild erscheint nur, wenn TYPO3 es lokal gespeichert hat, sonst das Platinen-Muster
- „immer laden“wird im Browser gespeichert. Widerruf über einen Link mit der Adresse
#nf-consent-reset, z. B. in der Datenschutzerklärung - Texte & Datenschutz-LinkSite Management → Settings → Vereins-Design → Videos – dort die Seiten-ID der Datenschutzerklärung eintragen
Bühne / Hero
Große Begrüßung am Seitenanfang.
Der Kopfbereich ganz oben auf dieser Seite ist selbst ein Beispiel für die Bühne: eine große Begrüßung mit Überschrift, Untertitel, kurzem Text und zwei Buttons.
So legst du eine Bühne an
- Startseite mit dem Backend-Layout „Netzfunke: Startseite“ öffnen.
- In der Spalte „Bühne“ ein Element „Text“ (oder „Text & Medien“ mit Bild) anlegen.
- Überschrift, Untertitel und einen kurzen Text eintragen; die Buttons als Absatz mit Stil „Absatz: Button-Leiste“.
- Reiter Erscheinungsbild → Rahmen-Layout „Netzfunke: Bühne / Hero“.
- Hintergrund „Netzfunke: Sekundärfarbe mit Platinen-Muster“ oder „Verlauf in Primärfarbe“ wählen – oder ein Hintergrundbild hinterlegen (es wird automatisch abgedunkelt).
Tipp: Buttons werden in der Bühne automatisch groß. Ein Hauptbutton („Button: Primär“) und höchstens ein Kontur-Button reichen.
Call-to-Action
Aufforderung mit großem Button, am besten in der Spalte „Nach dem Inhalt“.
Fragen rund ums Internet?
Kommen Sie einfach zum nächsten Treffen vorbei oder melden Sie sich für den Senioren-Internet-Treff an.
- ErscheinungsbildRahmen-Layout „Netzfunke: Call-to-Action“ + Hintergrund „Verlauf in Primärfarbe“ oder „Sekundärfarbe mit Platinen-Muster“
- Buttonswerden automatisch groß
Weitere Einstellungen
Kopfbereich, Ladebildschirm, Videos und Icons – ohne eigenes Inhaltselement.
Diese Einstellungen gelten für die ganze Site und stehen unter Site Management → Settings → Vereins-Design (Netzfunke-Theme).
- ZusatzfarbenAkzent hell (Linien, Verläufe) und Akzent pastell (Datums-Plaketten, Icon-Kreise)
- Kopfbereich (Menü)Hintergrund, Schriftfarbe der Menüpunkte und Farbe des Unterstrichs –
autooder eigene Farbe, z. B.#2E3036. Auf dunklem Hintergrund erscheint automatisch das weiße Logo („Logo Inverted“) - LadebildschirmBild, Text, Hintergrundfarbe und Dauer in Millisekunden; standardmäßig aus. Empfehlung: „nur beim ersten Seitenaufruf“
- VideosTexte der 2-Klick-Lösung und Link zur Datenschutzerklärung (siehe Videos)
- IconsSmartphone-Icon (180 × 180 px); Favicon und Logo unter Bootstrap Package → Logo / Favicon
- Theme-Versionwird bei jedem Update automatisch gesetzt – nicht ändern
Nach dem Ändern von Farben: Caches leeren, das Design wird neu erzeugt.