Zum Hauptinhalt springen

Theme anpassen

Schritt-für-Schritt: Wie du das Design deines Centers individuell anpasst – ohne Programmierkenntnisse.

Was kannst du anpassen?​

Mit dem Theme-System kannst du:

  • Farben (Primär, Sekundär, Akzente)
  • Logo und Favicon
  • Schriftarten (Google Fonts Integration)
  • Layout-Optionen (Header, Footer, Spacing)
  • Bilder (Hero, Hintergründe, Platzhalter)

Schritt 1: Theme-Konfiguration öffnen​

  1. Gehe zu Content > Centers
  2. Klicke auf das gewünschte Center
  3. Öffne den Tab Website
  4. Wechsle zum Reiter Theme

Schritt 2: Farben anpassen​

Primärfarbe (Hauptfarbe) wird verwendet für:

  • Buttons und Links
  • Header-Hintergrund
  • Akzente und Highlights

Sekundärfarbe wird verwendet für:

  • Hintergründe und Flächen
  • Sekundäre Buttons
  • Rahmen und Trennlinien

Anpassen:

  1. Klicke auf das Farbfeld neben der gewünschten Farbe
  2. Wähle eine neue Farbe oder gib einen Hex-Code ein (z.B. #892831)
  3. Speichern klicken

Schritt 3: Logo und Branding​

Logo hochladen:

  1. Im Theme-Reiter: Logo-Upload-Bereich nutzen (Drag & Drop oder Datei auswählen)
  2. Format: PNG oder SVG (empfohlen)
  3. Größe: 200x80px optimal, transparenter Hintergrund
  4. Dateigröße: Max. 5 MB
  5. Speichern – das Logo erscheint automatisch in Header und Footer

Hero-Bilder:

  • Auflösung: 1920x800px (optimal)
  • Format: JPG oder WebP
  • Dateigröße: unter 500 KB für schnelle Ladezeiten

Schritt 4: Schriftarten​

CockpitOS unterstützt Google Fonts. Im Theme-Reiter kannst du:

  • Überschriften-Font auswählen
  • Body-Font auswählen
  • Verschiedene Gewichte nutzen (300, 400, 600, 700)

Empfehlungen:

  • Modern: "Roboto" (Überschriften) + "Open Sans" (Fließtext)
  • Elegant: "Playfair Display" + "Source Sans Pro"
  • Klar: "Poppins" + "Inter"

Schritt 5: Speichern und Vorschau​

  1. Klicke auf Speichern
  2. Öffne die Website im Browser (z.B. https://{slug}.cockpit-os.de)
  3. Prüfe die Änderungen auf Desktop und Mobile (F12 > Device Toolbar)

Best Practices​

Farben:

  • Maximal 3 Hauptfarben verwenden
  • Kontrast beachten (Text muss lesbar bleiben)
  • Barrierefreiheit (WCAG 2.1 AA) beachten

Performance:

  • Bilder optimieren (WebP bevorzugt)
  • Schriftarten begrenzen (max. 2–3 Fonts)

Mobile:

  • Mobile-First denken
  • Touch-Targets groß genug (44px minimum)

Häufige Probleme​

Farben werden nicht übernommen:

  • Cache leeren (Strg+F5)
  • Hast du auf "Speichern" geklickt?
  • 2–3 Minuten warten

Logo wird nicht angezeigt:

  • Dateigröße unter 5 MB?
  • Format PNG oder SVG?
  • Transparenter Hintergrund?

Mobile-Ansicht kaputt:

  • Responsive Vorschau testen
  • Bilder zu groß?
  • Custom CSS prüfen (falls verwendet)

Nächste Schritte​

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /content-creator-handbuch/workflows/theme-anpassen