自定义您的图形民意调查

我要编辑OBS链接还是HTML文件？

覆盖文件是 poll.html. 它包含民意调查的布局、样式和投票代码。您复制到 OBS 中的 URL 指向该文件，并在 ?.

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

对于颜色、字体、间距和栏样式，您可以保留托管 URL 并添加 自定义 CSS OBS。对于具有新图稿、徽标或不同布局的设计，请编辑以下内容的副本 poll.html 并将 OBS 指向您的副本。自定义副本不会自动出现在 SSN 的主题下拉列表中。

对于直接磁盘加载、OBS 本地文件启动器、安全渲染示例和支持参考，请参阅 共享叠加设计指南.

首先使用以下命令进行定期民意调查 投票设置指南.保留完整生成的图形投票链接以用于下面的连接步骤。

1. 在 OBS 中设置托管投票的样式

1. 在 SSN 中打开 图形投票 → 投票选项。选择 默认 ；对应的设置项： 民意调查风格/主题 作为本例的起点，并打开 启用投票.
2. 复制图形投票链接。在OBS中，添加或打开其 浏览器来源，保留 本地文件 取消选中，并将链接粘贴到 URL.
3. 例如，将浏览器源大小设置为画布大小 1920 × 1080.将下面的 CSS 粘贴到 自定义 CSS，然后点击 确定.如果您想重用它，请保存已有的 CSS。

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

更改颜色值和尺寸以适合您的设计。这些选择器针对现有的 poll 元素。保持条形宽度由轮询代码控制，并保持 .hidden 行为，以便启用轮询可以显示和隐藏图形。

OBS 自定义 CSS 仅影响该浏览器源；在普通浏览器中打开相同的 URL 将显示原始样式。参见 OBS的浏览器源码参考 源属性。

民意调查特定限制： 当前 poll.html 未读 &css= 或 &b64css=.使用 OBS 自定义 CSS 或编辑此叠加层的文件。

2. 制作一份可编辑的民意调查副本

1. 下载 Social Stream Ninja 源 ZIP（测试版） 并提取它。您可以检查 GitHub 上的 poll.html 源代码.
2. 在解压的文件夹中，复制 poll.html 作为 my-poll.html.将其放在文件夹顶层的原件旁边。
3. 打开 my-poll.html 在文本/代码编辑器中，或将该文件连同参考图像、品牌颜色、字体和您想要的 OBS 画布尺寸一起提供给 ChatGPT 或 Codex。
4. 对于仅 CSS 编辑，请将您的规则放在现有规则的末尾 <style> 块，就在之前 </style>.上面的例子也适用于此。保存文件 .html 扩展名。

保留支持文件。 当前poll相对于自己的位置加载这些脚本；仅将 HTML 复制到新文件夹是不够的：

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

字体和图标是引用资源；四个 JavaScript 文件支持投票和连接。保持提取的文件夹完好无损，可以使这些路径保持可用。也可以在其中添加您的设计使用的任何徽标或字体文件。

3. 给AI现有的文件和具体的简介

附上 my-poll.html 和您的设计参考，或在编码工具中打开提取的文件夹。替换此提示中括号中的详细信息：

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.

对于 OBS CSS 路由，将最后一条指令更改为： “使用现有的投票选择器和默认主题，仅返回 OBS 自定义 CSS 的 CSS；不包含 HTML 或脚本标记。”

对于手动编辑，主要的样式挂钩是 #poll-container, .poll-title, .poll-option, .poll-bar, .option-number, .option-text, .option-percentage, .option-tally，以及 .poll-instruction.布局更改可能还需要在两者中进行匹配编辑 updatePollOptions() 和 updatePollResults()，构建答案行。

4. 在OBS中打开编辑好的投票

打开 my-poll.html 直接来自您的计算机。无需安装或启动服务器。

1. 拖动 my-poll.html 进入 Chrome 或 Edge。从地址栏复制地址；它开始于 file:///.
2. 复制所有内容 ? 从 SSN 的工作图形民意调查链接开始。将其添加到文件地址的末尾。这会保留您的会话、密码和其他设置。
3. 在浏览器中打开该组合地址进行检查。然后将其粘贴到OBS浏览器源的 URL 场与 本地文件 未检查。设置预期的宽度和高度。

例如，复制的链接：

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

变为：

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

这些是占位符：使用您实际复制的链接，仅包括它已有的选项。继续使用SSN的 投票选项 设置问题、投票匹配和投票控制。

上面的文件地址是Windows示例。在 macOS 上，它以 file:///Users/....复制浏览器的实际地址，以便为您处理路径和任何空格。

设置一次。 OBS 保存地址。将下载的文件夹保留在同一位置，并在使用投票时保持 SSN 和您的聊天源运行。保存编辑后，使用 刷新当前页面缓存 在源属性中。

为什么不选中本地文件？ 使用URL字段包括之后的会话设置 ?.单独选择 HTML 文件不会。的 共享指南 还涵盖了文件选择器的可选启动器。

5. 通过真实民意调查来测试设计

1. 保持 SSN 和捕获的聊天源运行。在 投票选项，启用轮询，设置 自由形式，输入问题，然后选择 仅精确投票.
2. 发送 #coffee 和 #tea 来自不同的聊天用户，或使用不同的虚构用户 测试消息工具.禁用多次投票后，同一用户重复投票将不会添加另一票。
3. 检查 OBS 中的条形图和总计。尝试一个很长的问题，一个很长的答案，然后 显示票数而不是百分比 检查文本是否合适的选项。
4. 测试 话题标签可出现在任意位置 带有更长的消息，例如 I vote #coffee today。检查 结束投票, 重置投票，以及 启用投票 因此自定义设计可以处理关闭、空和隐藏状态。

• 空白覆盖： 检查启用轮询和复制的会话设置。在投票到达之前，自由形式的民意调查没有答案行。
• 本地页面打不开： 再次将文件拖到浏览器中并复制其当前地址。检查文件名是不是不小心 my-poll.html.txt.
• 卡在“正在加载民意调查”： 检查支持脚本及其文件夹路径、SSN 的运行状态以及工作托管民意调查中的完整查询字符串。
• 投票不计入： 确认投票已开启，消息符合所选投票方式，且测试用户尚未投票。
• OBS 中看起来有所不同： 检查浏览器源尺寸、覆盖文件设计的任何较旧的自定义 CSS，以及是否需要刷新。
• 投票后Logo消失： 将永久性艺术品放在外面 #poll-options；该元素在更新时重建。

您编辑的副本与 SSN 的托管投票分开维护。保留设计的备份，并将其与新的进行比较 poll.html 版本。要从头开始构建不同的覆盖层，请参阅 自定义叠加层指南.