模板库

浏览 完整叠加层视觉图库,或在下方探索自定义模板及导入功能。

为直播选择外观

预览聊天、精选消息及警报叠加层,然后将喜欢的样式添加到 OBS 或 Streamlabs。

🧭 选择叠加层类型

💬 聚合聊天

来自已连接平台的持续消息流。从聊天模板开始,或使用 停靠面板.

⭐ 精选消息

在停靠面板中选择的一条消息。为访谈、问答或致意选择精选消息设计。

🎉 事件警报

庆祝关注、会员及打赏。在 SSN 警报设置中配置动画和音频。 警报指南

模板库

为直播找到合适的模板

🎨 配套主题套装

三个浏览器源使用统一外观。在图库中选择 使用配套组合,输入会话信息,然后复制 OBS 链接。动画为可选。

困倦的三花猫、草莓牛奶与柔粉文具

🐱 草莓猫

困倦的三花猫、草莓牛奶和粉色文具。包含配套的聊天、精选消息和警报样式。

预览并使用套装
天蓝色明信片上的快乐柯基

🐶 温馨伙伴

天蓝色明信片上的快乐柯基。包含配套的聊天、精选消息和警报样式。

预览并使用套装
宁静林地里的童话青蛙

🍄 苔藓与蘑菇

宁静林地中的童话青蛙。包含配套的聊天、精选消息和警报样式。

预览并使用套装
在淡紫星尘中漂浮的太空兔

🌙 月亮兔

在淡紫星尘中漂浮的兔子宇航员。包含配套的聊天、精选消息和警报样式。

预览并使用套装
带着发光魔法水晶的小龙

🐉 水晶守护者

小龙守护着发光的魔法水晶。包含配套的聊天、精选消息和警报样式。

预览并使用套装
薄荷绿与梅紫色中的耳机浣熊和黑胶唱片

🎵 午夜混音带

耳机浣熊与黑胶唱片,搭配薄荷绿和梅紫色。包含配套的聊天、精选消息和警报样式。

预览并使用套装
友善幽灵、发光南瓜与午夜梅紫

🎃 南瓜幽灵

友善幽灵、发光南瓜与午夜梅紫色。包含配套的聊天、精选消息和警报样式。

预览并使用套装
围着围巾的驯鹿与节日常青树

🎄 欢乐小驯鹿

围着围巾的驯鹿与节日常青树。包含配套的聊天、精选消息和警报样式。

预览并使用套装

主题套装

完整主题套装,包含文档、示例图片和指南

Deuk 的主题
完整套装

Deuk 的主题

精致的全动画主题,支持自定义颜色及平滑过渡。非常适合游戏直播。

新
Windows 3.1 主题
复古风格

Windows 3.1 主题

怀旧的 Windows 3.1 风格聊天叠加层,带有经典窗口设计及像素级细节。

Neutron 主题
现代设计

Neutron 主题

整洁现代的设计,动画流畅,易于阅读。可自定义配色。

简单即用模板

仅需会话 ID 即可使用的现成模板

示例模板
极低

示例模板

整洁轻量、具备基本功能的模板。适合作为自定义的起点。

美观模板(Pretty Template)
动画

美观模板(Pretty Template)

优雅设计,动画流畅并带有视觉效果。醒目而不分散注意力。

t3nk3y 的主题
游戏

t3nk3y 的主题

为游戏直播设计的醒目高对比主题,即使内容节奏很快也清晰可见。

LuckyLootTube 液态玻璃主题
液态玻璃

LuckyLootTube 的主题

时尚的液态玻璃风格聊天叠加层,动画流畅,表情渲染酷炫。

兼容 YouTube CSS 的模板

支持 YouTube CSS 样式的模板

YouTube CSS 模板
兼容 YouTube

YouTube CSS 模板

在采用 YouTube 结构的叠加层页面上使用为 YouTube 设计的 CSS。兼容 Septapus 样式。

开发者模板

创建自定义叠加层的起点

基础模板(Bare Template)
开发者

基础模板(Bare Template)

用最少代码从头创建自己的叠加层。适合开发者及 LLM 辅助编程。

叠加层示例
开发者

示例叠加层模板

更完整的起始模板,附带注释和文档,帮助你构建自己的自定义叠加层。

有想分享的模板?

为 Social Stream Ninja 制作了出色模板?向 GitHub 仓库提交拉取请求,与社区分享。

在 GitHub 上提交

将 StreamElements 聊天组件与 Social Stream Ninja 配合使用

第一次导入? 阅读完整聊天皮肤指南 ,了解组件文件查找、支持的格式、OBS 设置及故障排查。

同时适用于 SSN Windows 桌面应用和 Chrome 扩展,无需编辑代码。

确认 SSN 正在接收聊天

在 SSN 应用或扩展中打开平台来源,然后发送测试消息。确认消息出现在 SSN 停靠面板后再继续。

获取原始组件导出文件

使用组件设计者提供的 ZIP、文件夹或文件。有效导出通常包含 HTML、CSS、JavaScript、fields/data 及资源。截图或 StreamElements 叠加层 URL 不够。

打开导入器

打开导入器并选择 ZIP、文件夹或文件。它会识别组件部分并立即显示演示预览。

打开组件导入器

添加你的 SSN 会话 ID

从 SSN 弹出菜单打开导入器时,会自动填入会话 ID 和密码。如果直接打开,请从以下位置复制: 会话选项 ,在应用或扩展中查找。只需在导入器中输入会话 ID 一次,它会保存在下载的文件内。

选择消息历史

如果导入的组件提供兼容设置,使用 消息历史 以关闭定时移除,或更改屏幕上保留的消息数量。这会更改组件设置,不会更改代码。

下载前测试

演示预览 通过示例消息检查设计。 实时预览 使用正在运行的 SSN 应用或扩展中的真实聊天检查会话。

下载并添加到 OBS

点击 下载 OBS HTML。在 OBS 中添加浏览器源,启用 本地文件,并选择下载的 HTML 文件。 不要在 OBS 中添加会话 ID 或编辑 URL。 直播时保持 SSN 运行;导入器和 StreamElements 可以关闭。

演示为空白

检查导入器识别出的文件;如果选错 HTML、CSS 或 JavaScript,请使用 Advanced file selection。

实时预览为空白

确认聊天到达 SSN 停靠面板,且会话 ID 和可选密码完全一致。

OBS 显示为空白

使用下载的 HTML 文件,而非导入器页面、原始 ZIP 或 StreamElements URL,然后刷新 OBS 浏览器源。

如何使用模板

按照这些简单步骤开始

选择模板

浏览模板库,选择适合直播风格的模板。使用截图图库比较设计;大多数内置模板可直接通过 URL 使用,无需下载。

添加你的会话 ID

替换 YOURSESSIONID ,在模板 URL 中替换为实际的 Social Stream Ninja 会话 ID,可在 SSN 应用或扩展的 Session Options 下找到。如果会话使用密码,也请包含可选密码。

https://socialstream.ninja/themes/pretty.html?session=YOURSESSIONID

添加到 OBS/Streamlabs

将修改后的 URL 作为浏览器源添加到直播软件中:

  1. 在 OBS 中点击“来源”下的 +,选择“浏览器”
  2. 为来源命名并点击“确定”
  3. 粘贴带会话 ID 的模板 URL
  4. 设置宽度和高度(建议:1920×1080)
  5. 点击“确定”将其添加到场景

自定义模板

通过以下任一方式使用自定义 CSS 个性化叠加层:

  • OBS 自定义 CSS: 在浏览器源属性中添加 CSS
  • URL 参数: 附加 &css=URL_TO_YOUR_CSS_FILE 到模板 URL
  • Base64 CSS: 对于内联 CSS,使用 &b64css=YOUR_BASE64_ENCODED_CSS

🛠️ 制作自己的模板

从可用叠加层开始,再修改外观。

🎨 更改外观

使用 OBS 浏览器源 自定义 CSS ,以调整颜色、间距和排版。保留原始 SSN URL 和连接。

📦 导入组件

有 StreamElements 聊天组件导出文件? 打开 StreamElements 转换器,预览后下载 OBS HTML。请使用原始 ZIP 或文件,而非截图或叠加层 URL。 查看下方设置.

🧩 更改行为

复制一个可用起始模板,并编辑其 HTML、CSS 和 JavaScript。 快速开始 · 开发者指南 · 事件字段

🔧 文件、路由及测试
  1. 使用 sampleoverlay.html 用于聚合聊天, featured-modern.html 用于选中消息,或 multi-alerts.html 用于事件。从以下位置下载源文件及所需资源: beta 仓库.
  2. 保留原始连接代码。聊天和精选叠加层接收不同的消息流;为聊天流改样式不会将其变成选中消息叠加层。
  3. 将引用的共享脚本、字体和图片与文件一起保留,使用相同相对路径,或让 AI 提供独立导出。重命名一个 HTML 文件不会将其依赖打包。
  4. 托管文件,并使用带会话及可选密码的 URL。对于独立本地导出,请遵循其配置说明;OBS Local file 没有用于会话参数的 URL 字段。
  5. 先用模拟数据预览,再使用自己的 SSN 会话测试。检查选中消息、清空、长名称、图片及透明背景。实时使用期间保持 SSN 运行。

对于基于触发器的行为,从以下内容开始: Event Flow 编辑器 和 警报效果规则 ,然后再编写新叠加层。

✨ 为你的 AI 复制提示词

选择起点,复制提示词,并替换方括号中的设计细节。如果 AI 无法读取链接,请附上源文件。不要在对话中提供私密会话 ID 和密码。

💬 聚合聊天
⭐ 精选消息
🎉 带声音的警报
🎨 仅用 CSS 改造外观

正在转换更复杂的组件? 使用完整的 StreamElements / Streamlabs 转换提示词.

视频教程

了解如何借助 AI 创建自定义聊天叠加层

视频快速指南

  1. 找到示例叠加层模板(sampleoverlay.html)
  2. 将模板代码复制到剪贴板
  3. 使用 Claude 等 AI 助手帮助自定义
  4. 提示 AI 修改 CSS,以实现喜欢的样式
  5. 配置 OBS 以使用自定义模板
  6. 通过 OBS 浏览器源设置应用自定义 CSS