Dostosuj swoją graficzną ankietę

Czy edytować link OBS czy plik HTML?

Plik nakładki to poll.html. Zawiera układ, style i kod głosowania ankiety. Adres URL, który kopiujesz do OBS, wskazuje na ten plik i dodaje ustawienia połączenia, takie jak identyfikator sesji, po ?.

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

W przypadku kolorów, czcionek, odstępów i stylu pasków możesz zachować hostowany adres URL i dodać go Własny CSS w OBS. Aby uzyskać projekt z nową grafiką, logo lub innym układem, edytuj kopię poll.html i skieruj OBS na swoją kopię. Niestandardowa kopia nie pojawia się automatycznie na liście rozwijanej motywów SSN.

Informacje na temat bezpośredniego ładowania dysku, lokalnych programów uruchamiających pliki OBS, przykładów bezpiecznego renderowania i odnośników pomocniczych można znaleźć w udostępniony przewodnik projektowania nakładek.

Najpierw wykonaj zwykłą ankietę działającą przy użyciu instrukcja konfiguracji ankiety. Zachowaj w pełni wygenerowany link do ankiety graficznej na potrzeby poniższego kroku połączenia.

1. Stylizuj hostowaną ankietę w OBS

1. W SSN otwórz Graphical Poll → Poll Options. Wybierz Domyślne w sekcji Styl/motyw ankiety jako punkt wyjścia dla tego przykładu i włącz Włącz ankietę.
2. Skopiuj link do ankiety graficznej. W OBS dodaj lub otwórz plik Źródło przeglądarki, pozostaw Plik lokalny odznaczone i wklej link do URL.
3. Ustaw rozmiar źródła przeglądarki na przykład na rozmiar płótna 1920 × 1080. Wklej poniższy kod CSS do Własny CSS, a następnie kliknij OK. Zapisz istniejący już CSS, jeśli chcesz go ponownie użyć.

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;
}

Zmień wartości kolorów i rozmiary, aby dopasować je do swojego projektu. Te selektory celują w istniejące elementy ankiety. Zachowaj szerokość pasków kontrolowaną przez kod odpytywania i zachowaj .hidden , więc opcja Włącz ankietę może wyświetlać i ukrywać grafikę.

Niestandardowy CSS OBS wpływa tylko na to źródło przeglądarki; otwarcie tego samego adresu URL w zwykłej przeglądarce wyświetli oryginalny styl. Zobacz Informacje o źródle przeglądarki OBS dla właściwości źródłowych.

Ograniczenia dotyczące ankiety: prąd poll.html nie czyta &css= lub &b64css=. Użyj niestandardowego CSS OBS lub edytuj plik dla tej nakładki.

2. Wykonaj edytowalną kopię ankiety

1. Pobierz plik Social Stream Ninja źródłowy ZIP (beta) i wyodrębnij go. Możesz sprawdzić źródło poll.html na GitHubie.
2. W wyodrębnionym folderze zduplikuj poll.html jako my-poll.html. Trzymaj go obok oryginału, na najwyższym poziomie folderu.
3. Otwórz my-poll.html w edytorze tekstu/kodu lub przekaż ten plik do ChatGPT lub Codex wraz z obrazem referencyjnym, kolorami marki, czcionkami i zamierzonym rozmiarem płótna OBS.
4. Aby edytować wyłącznie CSS, umieść reguły na końcu istniejącego <style> blok, tuż przed </style>. Powyższy przykład również tam działa. Zapisz plik z rozszerzeniem .html .

Zachowaj pliki pomocnicze. Obecna ankieta ładuje te skrypty względem własnej lokalizacji; skopiowanie samego kodu HTML do nowego folderu nie wystarczy:

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

Czcionka i favikona to zasoby odniesienia; cztery pliki JavaScript obsługują głosowanie i połączenia. Pozostawienie wyodrębnionego folderu nienaruszonego powoduje, że ścieżki te są dostępne. Dodaj tam również dowolne logo lub pliki czcionek, których używa Twój projekt.

3. Przekaż AI istniejące akta i konkretne wytyczne

Załącznik my-poll.html i numer referencyjny projektu lub otwórz wyodrębniony folder w narzędziu do kodowania. Zamień szczegóły w nawiasach w tym monicie:

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.

Dla trasy CSS OBS zmień ostatnią instrukcję na: „Zwróć tylko CSS dla niestandardowego CSS OBS, używając istniejących selektorów ankiety i motywu domyślnego; nie dołączaj znaczników HTML ani skryptów.”

W przypadku edycji ręcznej głównymi haczykami stylizującymi są #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally i .poll-instruction. Zmiana układu może również wymagać pasujących zmian w obu przypadkach updatePollOptions() i updatePollResults(), które budują wiersze odpowiedzi.

4. Otwórz edytowaną ankietę w OBS

Otwórz my-poll.html bezpośrednio z komputera. Nie ma serwera do zainstalowania lub uruchomienia.

1. Przeciągnij my-poll.html w przeglądarce Chrome lub Edge. Skopiuj adres z paska adresu; zaczyna się od file:///.
2. Skopiuj wszystko z ? dalej w działającym łączu ankiety graficznej z SSN. Dodaj go na końcu adresu pliku. Dzięki temu sesja, hasło i inne ustawienia zostaną zachowane.
3. Otwórz połączony adres w przeglądarce, aby to sprawdzić. Następnie wklej go do źródła przeglądarki OBS URL pole z Plik lokalny niezaznaczone. Ustaw zamierzoną szerokość i wysokość.

Na przykład ten skopiowany link:

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

staje się:

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

Są to symbole zastępcze: użyj faktycznie skopiowanego linku, włączając tylko opcje, które już posiada. Używaj dalej SSN Opcje ankiety , aby ustawić pytanie, dopasowanie głosów i kontrolę ankiety.

Powyższy adres pliku jest przykładem dla systemu Windows. W macOS zaczyna się od file:///Users/.... Skopiuj rzeczywisty adres przeglądarki, aby ścieżka i wszelkie spacje zostały obsługiwane za Ciebie.

Skonfiguruj to raz. OBS zapisuje adres. Trzymaj pobrany folder w tym samym miejscu, a podczas korzystania z ankiety nie wyłączaj SSN i źródła czatu. Po zapisaniu edycji użyj Odśwież pamięć podręczną bieżącej strony we właściwościach źródłowych.

Dlaczego pozostawić plik lokalny niezaznaczony? Użycie pola URL uwzględnia ustawienia sesji po ?. Samo wybranie pliku HTML nie powoduje tego. The wspólny przewodnik obejmuje także opcjonalny program uruchamiający dla selektora plików.

5. Przetestuj projekt za pomocą prawdziwej ankiety

1. Pozostaw SSN i przechwycone źródło czatu działające. w Opcje ankiety, włącz ankietę, ustaw Dowolna forma, wpisz pytanie i wybierz Tylko dokładny głos.
2. Wyślij #coffee i #tea od różnych użytkowników czatu lub użyj różnych fikcyjnych użytkowników narzędzia do wysyłania wiadomości testowych. Jeśli funkcja wielokrotnego głosowania jest wyłączona, powtórzenie głosu tego samego użytkownika nie spowoduje dodania kolejnego głosu.
3. Sprawdź słupki i sumy w OBS. Wypróbuj długie pytanie, długą odpowiedź i Pokaż liczbę głosów zamiast procentów opcja sprawdzania dopasowania tekstu.
4. Test Hashtag w dowolnym miejscu z dłuższym komunikatem, np I vote #coffee today. Sprawdź Zakończ ankietę, Zresetuj ankietę i Włącz ankietę , więc niestandardowy projekt obsługuje stany zamknięte, puste i ukryte.

• Pusta nakładka: zaznacz opcję Włącz ankietę i skopiowane ustawienia sesji. Ankieta w dowolnej formie nie zawiera wierszy odpowiedzi, dopóki nie napłyną głosy.
• Strona lokalna nie otwiera się: przeciągnij plik ponownie do przeglądarki i skopiuj jego aktualny adres. Sprawdź, czy nazwa pliku nie jest przypadkowa my-poll.html.txt.
• Zablokowanie na etapie „Ładowanie ankiety”: sprawdź skrypty pomocnicze i ścieżki ich folderów, stan działania SSN i pełny ciąg zapytania z działającej ankiety hostowanej.
• Głosy się nie liczą: potwierdź, że głosowanie jest otwarte, wiadomość odpowiada wybranemu trybowi głosowania, a użytkownik testowy nie oddał jeszcze głosu.
• Wygląda inaczej w OBS: sprawdź wymiary źródła przeglądarki, wszelkie starsze niestandardowe CSS przesłaniające projekt pliku i czy potrzebne jest odświeżenie.
• Logo znika po głosowaniu: umieść trwałe dzieła sztuki na zewnątrz #poll-options; ten element jest odbudowywany podczas aktualizacji.

Twoja edytowana kopia jest przechowywana oddzielnie od ankiety hostowanej przez SSN. Zachowaj kopię zapasową projektu i porównaj ją z nowszą poll.html wersje, gdy potrzebujesz poprawek nadrzędnych. Informacje na temat tworzenia od podstaw innej nakładki można znaleźć w artykule Przewodnik po niestandardowych nakładkach.