Настройка оверлея

Начните с шаблонов, затем добавляйте параметры URL и CSS только при необходимости.

Самый быстрый путь: выбрать шаблон

Есть тема чата StreamElements или Streamlabs? Импортируйте собственный виджет по руководству тем чата.

Шаблоны — самый простой способ получить аккуратный оверлей без написания CSS с нуля.

Галерея шаблонов с поиском, фильтрами категорий и предпросмотром
Найдите шаблон с помощью поиска и фильтров, затем скопируйте созданный URL в OBS.

Уровни настройки

УровеньДля чегоГде
Настройки шаблонаБыстрые изменения внешнего вида.Галерея шаблонов.
Параметры URLПоведение, подписи, фильтры, масштаб и ограничения.Строка параметров URL оверлея.
Собственный CSS в OBSНебольшие изменения стиля одного источника OBS.Свойства источника «Браузер» OBS.
Размещённый или собственный CSSОбщие стили для нескольких оверлеев.&css= или &b64css=.
Собственный оверлейПолностью собственное поведение.Руководство по собственным оверлеям.

Частые параметры URL

featured.html?session=YOUR_SESSION&scale=1.1&limit=10
  • session подключает оверлей к нужной комнате чата.
  • scale меняет размер без переписывания CSS.
  • limit задаёт число видимых сообщений на поддерживаемых страницах.
  • hidesource скрывает подписи платформ в док-панели (dock.html только).
  • css и b64css загружают собственное оформление.

Предпросмотр перед OBS

Пример оверлея с оформленным сообщением чата Social Stream
Перед проверкой OBS откройте итоговый URL в обычном браузере.

Решение частых проблем

  • В браузере выглядит правильно, а в OBS — нет: уберите собственный CSS OBS и обновите источник браузера.
  • Шрифт не загружается: используйте прямой HTTPS-адрес файла шрифта и проверьте CORS и правила прямых ссылок.
  • Ничего не видно: проверьте непрозрачность, цвет, фильтры и необходимость данных выбранного сообщения или события.
  • Изменения URL ничего не дают: обновите источник OBS или замените URL.