Overlay-Anpassung

Beginne mit Vorlagen und verwende URL-Optionen und CSS nur bei Bedarf.

Schnellster Weg: Eine Vorlage auswählen

Du hast ein StreamElements- oder Streamlabs-Chatdesign? Importiere dein eigenes Widget mit dem Chatdesign-Leitfaden.

Vorlagen sind der einfachste Weg zu einem ansprechenden Overlay, ohne CSS von Grund auf zu schreiben.

Vorlagengalerie mit Suche, Kategoriefiltern und Vorlagenvorschauen
Durchsuche und filtere Vorlagen und kopiere dann die erzeugte Overlay-URL in OBS.

Anpassungsebenen

EbeneVerwenden fürWo
VorlagensteuerungSchnelle optische Änderungen.Vorlagengalerie.
URL-ParameterVerhalten, Beschriftungen, Filter, Skalierung, Grenzen.Abfragezeichenfolge der Overlay-URL.
Benutzerdefiniertes OBS-CSSKleine Stiländerungen für eine OBS-Quelle.Eigenschaften der OBS-Browserquelle.
Gehostetes/selbst gehostetes CSSWiederverwendbare Stile für mehrere Overlays.&css= oder &b64css=.
Eigenes OverlayVollständig eigenes Verhalten.Leitfaden für eigene Overlays.

Gängige URL-Optionen

featured.html?session=YOUR_SESSION&scale=1.1&limit=10
  • session verbindet das Overlay mit dem richtigen Chatraum.
  • scale ändert die Größe, ohne CSS neu zu schreiben.
  • limit steuert auf unterstützten Seiten, wie viele Nachrichten sichtbar bleiben.
  • hidesource blendet Plattform-Quellbeschriftungen im Dock aus (nur dock.html ).
  • css und b64css laden eigene Gestaltung.

Vorschau vor OBS

Beispieloverlay-Vorschau mit gestalteter Social-Stream-Chatnachricht
Öffne die endgültige URL in einem normalen Browser, bevor du in OBS testest.

Häufige Lösungen

  • Im Browser richtig, in OBS falsch: entferne benutzerdefiniertes OBS-CSS und lade die Browserquelle neu.
  • Schrift fehlt: verwende eine direkte HTTPS-Schriftdatei und prüfe CORS-/Hotlink-Regeln.
  • Alles ist unsichtbar: prüfe Deckkraft, Farbe, Filter und ob die Seite Nutzdaten für hervorgehobene Nachrichten/Ereignisse benötigt.
  • URL-Änderungen bewirken nichts: lade die OBS-Quelle neu oder ersetze die URL.