Personalizza il tuo sondaggio grafico

Modifico il collegamento OBS o il file HTML?

Il file di sovrapposizione è poll.html. Contiene il layout, gli stili e il codice di voto del sondaggio. L'URL che copi in OBS punta a quel file e aggiunge le impostazioni di connessione, come l'ID di sessione, dopo ?.

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

Per colori, caratteri, spaziatura e stile delle barre, puoi mantenere l'URL ospitato e aggiungerlo CSS personalizzato a OBS. Per un progetto con una nuova grafica, un logo o un layout diverso, modifica una copia di poll.html e punta OBS verso la tua copia. Una copia personalizzata non viene visualizzata automaticamente nel menu a discesa dei temi di SSN.

Per il caricamento diretto del disco, i lanciatori di file locali OBS, esempi di rendering sicuro e riferimenti di supporto, vedere la guida alla progettazione dell'overlay condivisa.

Per prima cosa fai funzionare un sondaggio regolare utilizzando la guida alla configurazione del sondaggio. Conserva il collegamento al sondaggio grafico completo generato per il passaggio di connessione riportato di seguito.

1. Modellare il sondaggio ospitato in OBS

1. In SSN, apri Sondaggio grafico → Opzioni sondaggio. Scegli Predefinito sotto Stile/Tema del sondaggio come punto di partenza per questo esempio e accendere Abilita sondaggio.
2. Copia il collegamento Sondaggio grafico. In OBS, aggiungi o apri il suo file Sorgente browser, lascia File locale deselezionato e incollare il collegamento in URL.
3. Imposta la dimensione della sorgente del browser sulla dimensione della tua tela, ad esempio 1920 × 1080. Incolla il CSS qui sotto in CSS personalizzato, poi fai clic su OK. Salva eventuali CSS già presenti se desideri riutilizzarli.

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

Modifica i valori dei colori e le dimensioni per adattarli al tuo design. Questi selettori prendono di mira gli elementi del sondaggio esistenti. Mantieni le larghezze delle barre controllate dal codice di poll e mantieni il file .hidden comportamento in modo che Abilita sondaggio possa mostrare e nascondere l'immagine.

OBS Il CSS personalizzato influisce solo sulla sorgente del browser; l'apertura dello stesso URL in un normale browser mostrerà lo stile originale. Vedi Riferimento alla sorgente del browser di OBS per le proprietà della sorgente.

Limitazioni specifiche del sondaggio: la corrente poll.html non legge &css= oppure &b64css=. Utilizza OBS CSS personalizzato o modifica il file per questo overlay.

2. Crea una copia modificabile del sondaggio

1. Scarica il ZIP sorgente Social Stream Ninja (beta) ed estrarlo. Puoi ispezionare il sorgente poll.html su GitHub.
2. Nella cartella estratta, duplicare poll.html come my-poll.html. Conservalo accanto all'originale, al livello più alto della cartella.
3. Apri my-poll.html in un editor di testo/codice oppure fornisci il file a ChatGPT o Codex insieme a un'immagine di riferimento, i colori del marchio, i caratteri e le dimensioni della tela OBS desiderate.
4. Per una modifica solo CSS, posiziona le regole alla fine di esistente <style> , poco prima </style>. L'esempio sopra funziona anche lì. Salvare il file con l'estensione .html .

Conservare i file di supporto. Il sondaggio corrente carica questi script rispetto alla propria posizione; copiare solo l'HTML in una nuova cartella non è sufficiente:

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

Il carattere e la favicon sono risorse di riferimento; i quattro file JavaScript supportano la votazione e le connessioni. Lasciando intatta la cartella estratta, questi percorsi rimangono disponibili. Aggiungi lì anche eventuali file di logo o caratteri utilizzati dal tuo progetto.

3. Fornire ad AI il file esistente e un brief specifico

Allega my-poll.html e il riferimento del progetto oppure apri la cartella estratta nel tuo strumento di codifica. Sostituisci i dettagli tra parentesi in questo messaggio:

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.

Per il percorso CSS OBS, modificare l'ultima istruzione in: "Restituisci solo CSS per OBS CSS personalizzato, utilizzando i selettori di sondaggio esistenti e il tema predefinito; non includere tag HTML o script."

Per le modifiche manuali, i principali hook di styling sono #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, e .poll-instruction. Una modifica al layout potrebbe anche richiedere modifiche corrispondenti in entrambi updatePollOptions() e updatePollResults(), che costruiscono le righe di risposta.

4. Apri il sondaggio modificato in OBS

Apri my-poll.html direttamente dal tuo computer. Non è necessario installare o avviare alcun server.

1. Trascina my-poll.html in Chrome o Edge. Copia l'indirizzo dalla barra degli indirizzi; inizia con file:///.
2. Copia tutto da ? in poi nel collegamento al sondaggio grafico funzionante da SSN. Aggiungilo alla fine dell'indirizzo del file. Ciò mantiene la sessione, la password e altre impostazioni.
3. Apri l'indirizzo combinato nel tuo browser per verificarlo. Quindi incollalo nelle sorgenti del browser OBS URL campo con File locale deselezionato. Imposta la larghezza e l'altezza desiderate.

Ad esempio, questo collegamento copiato:

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

diventa:

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

Questi sono segnaposto: utilizza il collegamento effettivamente copiato, includendo solo le opzioni già presenti. Continua a utilizzare SSN Opzioni sondaggio per impostare la domanda, la corrispondenza dei voti e i controlli del sondaggio.

L'indirizzo del file riportato sopra è un esempio di Windows. Su macOS inizia con file:///Users/.... Copia l'indirizzo effettivo del tuo browser in modo che il percorso e gli eventuali spazi vengano gestiti per te.

Configuralo una volta. OBS salva l'indirizzo. Mantieni la cartella scaricata nello stesso posto e mantieni SSN e la sorgente della chat in esecuzione quando utilizzi il sondaggio. Dopo aver salvato una modifica, utilizzare Aggiorna cache della pagina corrente nelle proprietà della fonte.

Perché lasciare il file locale deselezionato? L'utilizzo del campo URL include le impostazioni della sessione successive ?. La sola selezione del file HTML non funziona. Il guida condivisa copre anche un launcher opzionale per il selettore di file.

5. Testare il progetto con un sondaggio reale

1. Mantieni in esecuzione SSN e una fonte di chat catturata. Dentro Opzioni sondaggio, abilitare il poll, impostare Forma libera, inserisci una domanda e scegli Solo voto esatto.
2. Invia #coffee e #tea da diversi utenti di chat o utilizzare utenti fittizi distinti con il file strumenti per messaggi di prova. Con più voti disabilitati, ripetere un voto dello stesso utente non aggiungerà un altro voto.
3. Controllare le barre e i totali in OBS. Prova una domanda lunga, una risposta lunga e il Mostra il numero di voti anziché la percentuale opzione per verificare l'adattamento del testo.
4. Prova Hashtag ovunque con un messaggio più lungo come I vote #coffee today. Controlla Termina sondaggio, Azzera sondaggio, e Abilita sondaggio in modo che il design personalizzato gestisca gli stati chiuso, vuoto e nascosto.

• Sovrapposizione vuota: selezionare Abilita poll e le impostazioni della sessione copiate. Un sondaggio in formato libero non prevede righe di risposta finché non arrivano i voti.
• La pagina locale non si apre: trascina nuovamente il file nel browser e copia il suo indirizzo corrente. Controlla che il nome del file non sia casuale my-poll.html.txt.
• Bloccato su "Caricamento sondaggio": controlla gli script di supporto e i relativi percorsi delle cartelle, lo stato di esecuzione di SSN e la stringa di query completa dal sondaggio ospitato funzionante.
• I voti non contano: conferma che la votazione è aperta, il messaggio corrisponde alla modalità di votazione selezionata e l'utente di prova non ha già votato.
• Sembra diverso in OBS: controlla le dimensioni dell'origine del browser, eventuali CSS personalizzati precedenti che sovrascrivono il design del file e se è necessario un aggiornamento.
• Il logo scompare dopo una votazione: metti all'esterno opere d'arte permanenti #poll-options; quell'elemento viene ricostruito sugli aggiornamenti.

La tua copia modificata viene mantenuta separatamente dal sondaggio ospitato da SSN. Conserva un backup del progetto e confrontalo con quello più recente poll.html versioni quando sono necessarie correzioni upstream. Per creare una sovrapposizione diversa da zero, vedere il file guida agli overlay personalizzati.