Social Stream Ninja
Português (Brasil)
EnglishEspañolPortuguês (Brasil)РусскийFrançaisDeutsch日本語简体中文繁體中文ItalianoPolski한국어УкраїнськаالعربيةTürkçeČeštinaไทย

Personalize sua enquete gráfica

Combine as cores, fontes e layout do seu programa com CSS OBS ou sua própria cópia da página de enquete.

Devo editar o link OBS ou o arquivo HTML?

O arquivo de sobreposição é poll.html. Ele contém o layout, estilos e código de votação da enquete. O URL que você copia para OBS aponta para esse arquivo e adiciona configurações de conexão, como seu ID de sessão, após o ?.

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

Para cores, fontes, espaçamento e estilo de barra, você pode manter o URL hospedado e adicionar CSS personalizado em OBS. Para um design com nova arte, logotipo ou layout diferente, edite uma cópia do poll.html e aponte OBS para sua cópia. Uma cópia personalizada não aparece automaticamente no menu suspenso de temas do SSN.

Para carregamento direto de disco, inicializadores de arquivos locais OBS, exemplos de renderização segura e referências de suporte, consulte o guia de design de sobreposição compartilhada.

Primeiro faça uma enquete regular funcionar usando o guia de configuração da enquete. Mantenha o link da Pesquisa Gráfica completo gerado para a etapa de conexão abaixo.

1. Estilize a enquete hospedada em OBS

  1. No SSN, abra Enquete gráfica → Opções de enquete. Escolha Padrão em Estilo/tema da enquete como ponto de partida para este exemplo e ative Ativar enquete.
  2. Copie o link da Pesquisa Gráfica. Em OBS, adicione ou abra seu Fonte de navegador, deixe Arquivo local desmarcado e cole o link em URL.
  3. Defina o tamanho da fonte do navegador para o tamanho da sua tela, por exemplo 1920 × 1080. Cole o CSS abaixo em CSS personalizado, depois clique em OK. Salve qualquer CSS que já esteja lá se quiser reutilizá-lo.
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;
}
Enquete real com exemplo de CSS marinho e dourado e votos fictícios de café e chá
O exemplo CSS aplicado a poll.html com votos fictícios.

Altere os valores e tamanhos das cores para se adequar ao seu design. Esses seletores têm como alvo os elementos de enquete existentes. Mantenha as larguras das barras controladas pelo código de enquete e mantenha o .hidden comportamento para que Enable Poll possa mostrar e ocultar o gráfico.

OBS CSS personalizado afeta apenas a fonte do navegador; abrir o mesmo URL em um navegador normal mostrará o estilo original. Veja Referência da fonte do navegador OBS para as propriedades de origem.

Limitação específica da pesquisa: o atual poll.html não lê &css= ou &b64css=. Use CSS personalizado OBS ou edite o arquivo para esta sobreposição.

2. Faça uma cópia editável da enquete

  1. Baixe o ZIP de origem Social Stream Ninja (beta) e extraia-o. Você pode inspecionar a fonte poll.html no GitHub.
  2. Na pasta extraída, duplique poll.html como my-poll.html. Mantenha-o ao lado do original, no nível superior da pasta.
  3. Abrir my-poll.html em um editor de texto/código ou forneça esse arquivo ao ChatGPT ou Codex junto com uma imagem de referência, cores da marca, fontes e o tamanho de tela OBS pretendido.
  4. Para uma edição somente CSS, coloque suas regras no final do existente <style> bloco, pouco antes </style>. O exemplo acima também funciona lá. Salve o arquivo com o .html .

Mantenha os arquivos de suporte. A enquete atual carrega esses scripts em relação à sua própria localização; copiar apenas o HTML para uma nova pasta não é suficiente:

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

A fonte e o favicon são recursos referenciados; os quatro arquivos JavaScript suportam votação e conexões. Deixar a pasta extraída intacta mantém esses caminhos disponíveis. Adicione também qualquer arquivo de logotipo ou fonte que seu design use.

3. Forneça à IA o arquivo existente e um resumo específico

Anexar my-poll.html e sua referência de design, ou abra a pasta extraída em sua ferramenta de codificação. Substitua os detalhes entre colchetes neste prompt:

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.

Para a rota CSS OBS, altere a última instrução para: "Retornar apenas CSS para CSS personalizado OBS, usando os seletores de enquete existentes e o tema padrão; não inclua HTML ou tags de script."

Para edições manuais, os principais ganchos de estilo são #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, e .poll-instruction. Uma mudança de layout também pode precisar de edições correspondentes em ambos updatePollOptions() e updatePollResults(), que constroem as linhas de resposta.

4. Abra sua enquete editada em OBS

Abrir my-poll.html diretamente do seu computador. Não há servidor para instalar ou iniciar.

  1. Arraste my-poll.html no Chrome ou Edge. Copie o endereço da barra de endereço; começa com file:///.
  2. Copie tudo de ? em diante em seu link de pesquisa gráfica funcional de SSN. Adicione-o ao final do endereço do arquivo. Isso mantém sua sessão, senha e outras configurações.
  3. Abra esse endereço combinado em seu navegador para verificá-lo. Em seguida, cole-o na fonte do navegador OBS URL campo com Arquivo local desmarcado. Defina a largura e a altura pretendidas.

Por exemplo, este link copiado:

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

torna-se:

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

Estes são espaços reservados: use o link copiado, incluindo apenas as opções que ele já possui. Continue usando SSN Opções de enquete para definir a pergunta, correspondência de votos e controles de votação.

O endereço do arquivo acima é um exemplo do Windows. Em macOS começa com file:///Users/.... Copie o endereço real do seu navegador para que o caminho e quaisquer espaços sejam tratados para você.

Configure isso uma vez. OBS salva o endereço. Mantenha a pasta baixada no mesmo lugar e mantenha SSN e sua fonte de bate-papo em execução ao usar a enquete. Depois de salvar uma edição, use Atualizar cache da página atual nas propriedades de origem.

Por que deixar o arquivo local desmarcado? O uso do campo URL inclui as configurações da sessão após ?. Selecionar o arquivo HTML sozinho não. O guia compartilhado também cobre um iniciador opcional para o seletor de arquivos.

5. Teste o design com uma enquete real

  1. Mantenha SSN e uma fonte de bate-papo capturada em execução. Em Opções de enquete, habilite a enquete, defina Formato livre, insira uma pergunta e escolha Somente voto exato.
  2. Enviar #coffee e #tea de diferentes usuários de chat, ou usar usuários fictícios distintos com o ferramentas de mensagem de teste. Com os votos múltiplos desativados, repetir um voto do mesmo usuário não adicionará outro voto.
  3. Verifique as barras e totais em OBS. Tente uma pergunta longa, uma resposta longa e o Mostrar número de votos em vez de porcentagem opção para verificar o ajuste do texto.
  4. Teste Hashtag em qualquer lugar com uma mensagem mais longa, como I vote #coffee today. Verifique Encerrar enquete, Redefinir enquete, e Ativar enquete para que o design personalizado lide com estados fechados, vazios e ocultos.
  • Sobreposição em branco: marque Habilitar Poll e as configurações de sessão copiadas. Uma enquete de formato livre não tem linhas de resposta até a chegada dos votos.
  • A página local não abre: arraste o arquivo para o seu navegador novamente e copie seu endereço atual. Verifique se o nome do arquivo não é acidental my-poll.html.txt.
  • Preso em "Carregando enquete": verifique os scripts de suporte e seus caminhos de pasta, o estado de execução do SSN e a string de consulta completa da enquete hospedada em funcionamento.
  • Os votos não contam: confirme que a votação está aberta, que a mensagem corresponde ao modo de votação selecionado e que o usuário de teste ainda não votou.
  • Parece diferente em OBS: verifique as dimensões da origem do navegador, qualquer CSS personalizado mais antigo que substitua o design do arquivo e se uma atualização é necessária.
  • O logotipo desaparece após uma votação: colocar obras de arte permanentes do lado de fora #poll-options; esse elemento é reconstruído nas atualizações.

Sua cópia editada é mantida separadamente da enquete hospedada em SSN. Mantenha um backup do design e compare-o com o mais recente poll.html versões quando você precisar de correções upstream. Para construir uma sobreposição diferente do zero, consulte o guia de sobreposições personalizadas.