Как сделать прозрачный чат в OBS

Источник «Браузер» в OBS прозрачен сам по себе: видно всё, у чего на странице нет фона. Поэтому прозрачность чата задаётся в самом виджете - темой или CSS.

Готовые темы Chat LD

В кабинете Chat LD есть 9 тем в трёх группах: тёмные, светлые и «стекло». Тема «Тёмная классика» совсем без фона - на экране остаются только текст с лёгкой тенью и значки площадок. Темы группы «стекло» дают полупрозрачную подложку, которая читается на любой игре.

Тема выбирается в кабинете в один клик. После сохранения обновите источник в OBS кнопкой «Обновить кэш текущей страницы».

Свой CSS

Для точной подгонки под оверлей в кабинете есть редактор CSS с предпросмотром. Несколько примеров:

Полностью прозрачные сообщения:

.message { background: transparent; }

Полупрозрачная тёмная подложка под каждым сообщением:

.message { background: rgba(0, 0, 0, 0.35); border-radius: 8px; }

Крупнее текст и больше расстояние между сообщениями:

body { font-size: 18px; }
.message { margin-bottom: 10px; }

В поле «CSS» в свойствах источника OBS писать ничего не нужно - всё оформление хранится в кабинете и одинаково работает во всех сценах.

Как подключить сам чат

1. Войдите на chat-ld.pro по почте - пришлём одноразовый код, пароль не нужен. В кабинете будут ключ для приложения и ссылка на виджет.
2. Скачайте Chat LD для Windows, установите и откройте настройки. Вставьте ключ из кабинета и впишите названия каналов на нужных площадках.
3. Нажмите «Запустить». Приложение начнёт читать чаты и передавать сообщения в виджет. После перезагрузки ПК кнопку нужно нажать снова.
4. Добавьте виджет в OBS. В панели «Источники» нажмите «+», выберите «Браузер», в поле «Ссылка» вставьте адрес виджета из кабинета. Ширину и высоту задайте под место на экране, например 400 x 600.

Подробнее - как добавить чат в OBS.