Passen Sie Ihre grafische Umfrage an

Muss ich den OBS-Link oder die HTML-Datei bearbeiten?

Die Overlay-Datei ist poll.html. Es enthält das Layout, die Stile und den Abstimmungscode der Umfrage. Die URL, die Sie in OBS kopieren, verweist auf diese Datei und fügt nach der Datei Verbindungseinstellungen wie Ihre Sitzungs-ID hinzu ?.

https://socialstream.ninja/poll.html?session=YOUR_SESSION

Für Farben, Schriftarten, Abstände und Balkenstil können Sie die gehostete URL beibehalten und hinzufügen Eigenes CSS in OBS. Für ein Design mit neuer Grafik, einem Logo oder einem anderen Layout bearbeiten Sie eine Kopie von poll.html und richten Sie OBS auf Ihre Kopie. Eine benutzerdefinierte Kopie erscheint nicht automatisch im Theme-Dropdown von SSN.

Informationen zum direkten Laden auf die Festplatte, OBS lokale Dateistarter, Beispiele für sicheres Rendering und unterstützende Referenzen finden Sie unter Gemeinsamer Overlay-Design-Leitfaden.

Bringen Sie zunächst eine reguläre Umfrage zum Laufen die Umfrage-Setup-Anleitung. Behalten Sie den vollständig generierten Link zur grafischen Umfrage für den folgenden Verbindungsschritt bei.

1. Gestalten Sie die gehostete Umfrage in OBS

1. Öffne in SSN Grafische Umfrage → Umfrageoptionen. Wähle Standard unter Stil/Thema der Umfrage als Ausgangspunkt für dieses Beispiel und aktivieren Sie es Umfrage aktivieren.
2. Kopieren Sie den Link zur grafischen Umfrage. Fügen Sie in OBS dessen hinzu oder öffnen Sie ihn Browserquelle, lass Lokale Datei deaktivieren Sie das Kontrollkästchen und fügen Sie den Link ein URL.
3. Stellen Sie die Größe der Browserquelle beispielsweise auf die Größe Ihrer Leinwand ein 1920 × 1080. Fügen Sie das folgende CSS ein Eigenes CSS, klicke dann auf OK. Speichern Sie dort bereits vorhandenes CSS, wenn Sie es wiederverwenden möchten.

body {
    margin: 0;
    background: transparent;
    overflow: hidden;
}

#poll-container {
    box-sizing: border-box;
    width: 880px;
    max-width: 90%;
    padding: 28px;
    border-radius: 0;
    border-left: 8px solid #f5c542;
    background: rgba(8, 24, 48, 0.95);
    color: #ffffff;
    font-family: Arial, sans-serif;
}

#poll-container .poll-title {
    color: #ffffff;
    font-size: 36px;
    text-align: left;
    margin: 0 0 24px;
}

#poll-container .poll-option {
    background: #162e50;
    border-radius: 0;
    padding: 14px 16px;
    font-size: 26px;
}

#poll-container .poll-bar {
    background: #3266ad;
}

#poll-container .poll-instruction {
    font-size: 22px;
    margin-bottom: 18px;
}

Ändern Sie die Farbwerte und Größen passend zu Ihrem Design. Diese Selektoren zielen auf die vorhandenen Umfrageelemente ab. Behalten Sie die durch den Abfragecode gesteuerten Balkenbreiten bei, und behalten Sie die bei .hidden Verhalten, damit „Umfrage aktivieren“ die Grafik ein- und ausblenden kann.

OBS Benutzerdefiniertes CSS wirkt sich nur auf diese Browserquelle aus; Wenn Sie dieselbe URL in einem normalen Browser öffnen, wird der ursprüngliche Stil angezeigt. Siehe OBSs Browser-Quellenreferenz für die Quelleigenschaften.

Umfragespezifische Einschränkung: der Strom poll.html liest nicht &css= oder &b64css=. Verwenden Sie OBS Custom CSS oder bearbeiten Sie die Datei für dieses Overlay.

2. Erstellen Sie eine bearbeitbare Kopie der Umfrage

1. Laden Sie die herunter Social Stream Ninja Quell-ZIP (Beta) und extrahieren Sie es. Sie können inspizieren die poll.html-Quelle auf GitHub.
2. Im extrahierten Ordner duplizieren poll.html als my-poll.html. Bewahren Sie es neben dem Original auf der obersten Ebene des Ordners auf.
3. Öffnen my-poll.html in einem Text-/Code-Editor oder geben Sie diese Datei zusammen mit einem Referenzbild, Markenfarben, Schriftarten und Ihrer beabsichtigten OBS-Leinwandgröße an ChatGPT oder Codex weiter.
4. Für eine reine CSS-Bearbeitung platzieren Sie Ihre Regeln am Ende der vorhandenen <style> Block, kurz davor </style>. Das obige Beispiel funktioniert auch dort. Speichern Sie die Datei mit .html Dateiendung.

Bewahren Sie die unterstützenden Dateien auf. Die aktuelle Umfrage lädt diese Skripte relativ zu ihrem eigenen Speicherort; Es reicht nicht aus, nur den HTML-Code in einen neuen Ordner zu kopieren:

your-poll-folder/
    my-poll.html
    currency.js
    js/
        transport-dedupe.js
        local-server-url.js
    shared/
        overlay-control-transport.js
    thirdparty/
        NotoColorEmoji.ttf
    favicon.ico

Die Schriftart und das Favicon sind referenzierte Assets; Die vier JavaScript-Dateien unterstützen Abstimmungen und Verbindungen. Wenn Sie den extrahierten Ordner intakt lassen, bleiben diese Pfade verfügbar. Fügen Sie dort auch alle Logo- oder Schriftartdateien hinzu, die Ihr Design verwendet.

3. Geben Sie AI die vorhandene Datei und einen spezifischen Auftrag

Anhängen my-poll.html und Ihre Designreferenz oder öffnen Sie den extrahierten Ordner in Ihrem Codierungstool. Ersetzen Sie die Angaben in Klammern in dieser Eingabeaufforderung:

Customize this existing Social Stream Ninja poll overlay.

Design: [describe the look or match the attached reference].
Colors: [brand hex colors]. Font: [font name or supplied font file].
Logo: [supplied image filename, if any].
OBS canvas: [1920 x 1080]. Placement: [center / lower third / side panel].
Allow for long questions and up to 10 free-form answers.

Edit my-poll.html, using CSS first. Keep the existing working poll code:
hashtag matching, vote counting, duplicate-vote handling, percentages,
tallies, donation weighting, settings updates, and start/end/reset controls.
Keep session/password/transport URL handling and all supporting script loads.
Preserve #poll-container, #poll-title, #poll-options, and show/hide behavior.
The script replaces #poll-options contents when results update, so put any
permanent logo or decoration outside that element.
Do not hard-code sample results or private session details.
Keep the page compatible with Chrome 80 and OBS Browser Source.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited poll work directly from disk using a file:/// URL,
without requiring a local web server. Return the complete edited HTML,
list any extra image/font files needed, and include the file URL steps for OBS.

Ändern Sie für die CSS-Route OBS die letzte Anweisung in: „Gibt nur CSS für OBS Custom CSS zurück, unter Verwendung der vorhandenen Umfrageselektoren und des Standarddesigns; schließen Sie keine HTML- oder Skript-Tags ein.“

Für manuelle Bearbeitungen sind die wichtigsten Styling-Hooks #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, und .poll-instruction. Eine Layoutänderung erfordert möglicherweise auch entsprechende Änderungen in beiden updatePollOptions() und updatePollResults(), die die Antwortzeilen bilden.

4. Öffnen Sie Ihre bearbeitete Umfrage in OBS

Öffnen my-poll.html direkt von Ihrem Computer aus. Es muss kein Server installiert oder gestartet werden.

1. Ziehe my-poll.html in Chrome oder Edge. Kopieren Sie die Adresse aus der Adressleiste. es beginnt mit file:///.
2. Alles kopieren von ? weiter in Ihrem funktionierenden grafischen Umfrage-Link von SSN. Fügen Sie es am Ende der Dateiadresse hinzu. Dadurch bleiben Ihre Sitzung, Ihr Passwort und andere Einstellungen erhalten.
3. Öffnen Sie diese kombinierte Adresse in Ihrem Browser, um sie zu überprüfen. Fügen Sie es dann in die OBS-Browserquelle ein URL Feld mit Lokale Datei ungeprüft. Stellen Sie die gewünschte Breite und Höhe ein.

Zum Beispiel dieser kopierte Link:

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

wird:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Dies sind Platzhalter: Verwenden Sie Ihren tatsächlich kopierten Link, einschließlich nur der Optionen, die er bereits hat. Benutzen Sie weiterhin SSNs Umfrageoptionen zum Festlegen der Frage, der Stimmenzuordnung und der Abstimmungskontrollen.

Die obige Dateiadresse ist ein Windows-Beispiel. Auf macOS beginnt es mit file:///Users/.... Kopieren Sie die tatsächliche Adresse Ihres Browsers, damit der Pfad und alle Leerzeichen für Sie verarbeitet werden.

Richten Sie dies einmal ein. OBS speichert die Adresse. Behalten Sie den heruntergeladenen Ordner am selben Ort und lassen Sie SSN und Ihre Chat-Quelle laufen, wenn Sie die Umfrage verwenden. Verwenden Sie nach dem Speichern einer Bearbeitung Cache der aktuellen Seite aktualisieren in den Quelleigenschaften.

Warum sollte die Option „Lokale Datei“ deaktiviert bleiben? Die Verwendung des URL-Felds umfasst die Sitzungseinstellungen danach ?. Die alleinige Auswahl der HTML-Datei reicht nicht aus. Die Gemeinsamer Leitfaden behandelt auch einen optionalen Launcher für die Dateiauswahl.

5. Testen Sie das Design mit einer echten Umfrage

1. Halten Sie SSN und eine erfasste Chat-Quelle am Laufen. In Umfrageoptionen, Umfrage aktivieren, einstellen Freiform, geben Sie eine Frage ein und wählen Sie Nur exakte Stimme.
2. Senden #coffee und #tea von verschiedenen Chat-Benutzern oder verwenden Sie unterschiedliche fiktive Benutzer mit dem Testnachrichten-Tools. Wenn die Mehrfachabstimmung deaktiviert ist, wird durch die Wiederholung einer Abstimmung desselben Benutzers keine weitere Abstimmung hinzugefügt.
3. Überprüfen Sie die Balken und Summen in OBS. Versuchen Sie es mit einer langen Frage, einer langen Antwort und dem Anzahl der Stimmen statt Prozent anzeigen Option zur Prüfung der Textpassung.
4. Testen Hashtag an beliebiger Stelle mit einer längeren Nachricht wie z I vote #coffee today. Überprüfen Umfrage beenden, Umfrage zurücksetzen, und Umfrage aktivieren Das benutzerdefinierte Design behandelt also geschlossene, leere und ausgeblendete Zustände.

• Leeres Overlay: Aktivieren Sie „Umfrage aktivieren“ und die kopierten Sitzungseinstellungen. Bei einer Freiformumfrage gibt es keine Antwortzeilen, bis die Stimmen eintreffen.
• Lokale Seite öffnet sich nicht: Ziehen Sie die Datei erneut in Ihren Browser und kopieren Sie ihre aktuelle Adresse. Stellen Sie sicher, dass der Dateiname nicht zufällig ist my-poll.html.txt.
• Hängenbleiben bei „Umfrage wird geladen“: Überprüfen Sie die unterstützenden Skripte und ihre Ordnerpfade, den Ausführungsstatus von SSN und die vollständige Abfragezeichenfolge aus der funktionierenden gehosteten Umfrage.
• Stimmen zählen nicht: Bestätigen Sie, dass die Abstimmung geöffnet ist, die Nachricht dem ausgewählten Abstimmungsmodus entspricht und der Testbenutzer noch nicht abgestimmt hat.
• Sieht in OBS anders aus: Überprüfen Sie die Abmessungen der Browserquelle, alle älteren benutzerdefinierten CSS-Dateien, die das Design der Datei überschreiben, und ob eine Aktualisierung erforderlich ist.
• Logo verschwindet nach einer Abstimmung: Stellen Sie dauerhafte Kunstwerke nach draußen #poll-options; Dieses Element wird bei Updates neu erstellt.

Ihre bearbeitete Kopie wird getrennt von der gehosteten Umfrage von SSN verwaltet. Bewahren Sie eine Sicherungskopie des Designs auf und vergleichen Sie es mit neueren poll.html Versionen, wenn Sie Upstream-Korrekturen benötigen. Informationen zum Erstellen eines anderen Overlays von Grund auf finden Sie unter Anleitung für benutzerdefinierte Overlays.