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

Personaliza tu encuesta gráfica

Combina los colores, fuentes y diseño de tu programa con OBS CSS o tu propia copia de la página de encuesta.

¿Edito el enlace OBS o el archivo HTML?

El archivo de superposición es poll.html. Contiene el diseño, los estilos y el código de votación de la encuesta. La URL que copia en OBS apunta a ese archivo y agrega configuraciones de conexión, como su ID de sesión, después de la ?.

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

Para colores, fuentes, espaciado y estilo de barra, puede conservar la URL alojada y agregar CSS personalizado en OBS. Para un diseño con nueva obra de arte, un logotipo o un diseño diferente, edite una copia de poll.html y apunte OBS a su copia. Una copia personalizada no aparece automáticamente en el menú desplegable de temas de SSN.

Para carga directa en disco, OBS lanzadores de archivos locales, ejemplos de renderizado seguro y referencias de soporte, consulte la guía de diseño de superposición compartida.

Primero haga funcionar una encuesta regular usando la guía de configuración de la encuesta. Conserve el enlace de la encuesta gráfica completa generada para el paso de conexión a continuación.

1. Diseñe la encuesta alojada en OBS

  1. En SSN, abre Encuesta gráfica → Opciones de encuesta (Graphical Poll → Poll Options). Elige Predeterminado en Estilo/tema de la encuesta como punto de partida para este ejemplo y active Activar encuesta (Enable Poll).
  2. Copie el enlace de la encuesta gráfica. En OBS, agregue o abra su Fuente de navegador (Browser Source), deja Archivo local (Local file) desmarcado y pegue el enlace en URL.
  3. Establezca el tamaño de origen del navegador según el tamaño de su lienzo, por ejemplo 1920 × 1080. Pegue el CSS a continuación en CSS personalizado y haz clic en Aceptar (OK). Guarde cualquier CSS que ya esté allí si desea reutilizarlo.
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;
}
Encuesta real con el ejemplo de CSS azul marino y dorado y votos ficticios de café y té.
El CSS de ejemplo aplicado a poll.html con votos ficticios.

Cambie los valores de color y los tamaños para adaptarlos a su diseño. Estos selectores se dirigen a los elementos de encuesta existentes. Mantenga los anchos de las barras controlados por el código de sondeo y mantenga el .hidden comportamiento para que Enable Poll pueda mostrar y ocultar el gráfico.

OBS El CSS personalizado afecta únicamente a esa fuente del navegador; Al abrir la misma URL en un navegador normal se mostrará el estilo original. Ver Referencia de fuente del navegador de OBS para las propiedades de origen.

Limitación específica de la encuesta: la corriente poll.html no lee &css= o &b64css=. Utilice CSS personalizado OBS o edite el archivo para esta superposición.

2. Haga una copia editable de la encuesta.

  1. Descargue el ZIP fuente Social Stream Ninja (beta) y extráigalo. puedes inspeccionar la fuente poll.html en GitHub.
  2. En la carpeta extraída, duplicar poll.html como my-poll.html. Guárdelo al lado del original, en el nivel superior de la carpeta.
  3. Abrir my-poll.html en un editor de texto/código, o entregue ese archivo a ChatGPT o Codex junto con una imagen de referencia, colores de marca, fuentes y el tamaño de lienzo OBS deseado.
  4. Para una edición solo de CSS, coloque sus reglas al final de la existente <style> bloque, justo antes </style>. El ejemplo anterior también funciona allí. Guarde el archivo con el .html .

Conserve los archivos de respaldo. La encuesta actual carga estos scripts en relación con su propia ubicación; copiar sólo el HTML a una nueva carpeta no es 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

La fuente y el favicon son recursos a los que se hace referencia; Los cuatro archivos JavaScript admiten votaciones y conexiones. Dejar intacta la carpeta extraída mantiene estas rutas disponibles. Agregue allí también cualquier logotipo o archivo de fuente que utilice su diseño.

3. Entregue a AI el archivo existente y un resumen específico

Adjuntar my-poll.html y su referencia de diseño, o abra la carpeta extraída en su herramienta de codificación. Reemplace los detalles entre corchetes en este mensaje:

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 la ruta CSS OBS, cambie la última instrucción a: "Devuelve solo CSS para el CSS personalizado OBS, utilizando los selectores de encuesta existentes y el tema predeterminado; no incluya etiquetas HTML ni script".

Para ediciones manuales, los ganchos de estilo principales son #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally, y .poll-instruction. Un cambio de diseño también puede requerir ediciones coincidentes en ambos updatePollOptions() y updatePollResults(), que construyen las filas de respuesta.

4. Abra su encuesta editada en OBS

Abrir my-poll.html directamente desde su computadora. No hay ningún servidor para instalar o iniciar.

  1. Arrastra my-poll.html en Chrome o Edge. Copie la dirección de la barra de direcciones; comienza con file:///.
  2. Copia todo de ? en adelante en el enlace de Encuesta gráfica en funcionamiento desde SSN. Agréguelo al final de la dirección del archivo. Esto mantiene su sesión, contraseña y otras configuraciones.
  3. Abra esa dirección combinada en su navegador para verificarla. Luego péguelo en la fuente del navegador OBS. URL campo con Archivo local (Local file) sin marcar. Establezca el ancho y alto deseados.

Por ejemplo, este enlace copiado:

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

se convierte en:

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

Estos son marcadores de posición: use su enlace copiado real, incluyendo solo las opciones que ya tiene. Sigue usando SSN Opciones de encuesta para establecer los controles de preguntas, coincidencia de votos y encuestas.

La dirección del archivo anterior es un ejemplo de Windows. En macOS comienza con file:///Users/.... Copie la dirección real de su navegador para que la ruta y los espacios sean manejados por usted.

Configure esto una vez. OBS guarda la dirección. Mantenga la carpeta descargada en el mismo lugar y mantenga funcionando SSN y su fuente de chat cuando utilice la encuesta. Después de guardar una edición, use Actualizar la caché de la página actual en las propiedades de origen.

¿Por qué dejar el archivo local sin marcar? El uso del campo URL incluye la configuración de la sesión después ?. Seleccionar el archivo HTML por sí solo no lo hace. el guía compartida también cubre un iniciador opcional para el selector de archivos.

5. Prueba el diseño con una encuesta real

  1. Mantenga en funcionamiento SSN y una fuente de chat capturada. en Opciones de encuesta, habilita la encuesta, configura Forma libre, ingresa una pregunta y elige Solo voto exacto (Exact vote only).
  2. Enviar #coffee y #tea de diferentes usuarios de chat, o utilizar usuarios ficticios distintos con el herramientas de mensajes de prueba. Con los votos múltiples deshabilitados, repetir un voto del mismo usuario no agregará otro voto.
  3. Consulta las barras y totales en OBS. Pruebe con una pregunta larga, una respuesta larga y el Mostrar número de votos en lugar de porcentaje opción para comprobar el ajuste del texto.
  4. Prueba Hashtag en cualquier parte (Hashtag anywhere) con un mensaje más largo como I vote #coffee today. comprobar Finalizar encuesta (End Poll), Reiniciar encuesta (Reset Poll), y Activar encuesta (Enable Poll) por lo que el diseño personalizado maneja los estados cerrado, vacío y oculto.
  • Superposición en blanco: marque Habilitar encuesta y la configuración de sesión copiada. Una encuesta de formato libre no tiene filas de respuestas hasta que llegan los votos.
  • La página local no se abre: arrastre el archivo a su navegador nuevamente y copie su dirección actual. Compruebe que el nombre del archivo no sea accidental. my-poll.html.txt.
  • Atascado en "Cargando encuesta": verifique los scripts de soporte y sus rutas de carpeta, el estado de ejecución de SSN y la cadena de consulta completa de la encuesta alojada en funcionamiento.
  • Los votos no cuentan: confirme que la votación esté abierta, que el mensaje coincida con el modo de votación seleccionado y que el usuario de prueba aún no haya votado.
  • Se ve diferente en OBS: verifique las dimensiones de origen del navegador, cualquier CSS personalizado anterior que anule el diseño del archivo y si es necesaria una actualización.
  • El logotipo desaparece después de una votación: poner obras de arte permanentes afuera #poll-options; ese elemento se reconstruye en las actualizaciones.

Su copia editada se mantiene por separado de la encuesta alojada por SSN. Mantenga una copia de seguridad del diseño y compárelo con el más nuevo. poll.html versiones cuando necesita correcciones ascendentes. Para crear una superposición diferente desde cero, consulte la guía de superposiciones personalizadas.