Search This Blog
Subscribe to this blog
Follow by Email
OBS Chat CSS Code
- Get link
- Other Apps
@import url("https://fonts.googleapis.com/css?family=Changa One");
@import url("https://fonts.googleapis.com/css?family=Imprima");
/* Background colors*/
body <
background-color: rgba(0,0,0,0);
>
/* Transparent background. */
yt-live-chat-renderer <
background-color: transparent !important;
>
/* Outlines */
yt-live-chat-renderer * <
text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
>
yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-message-renderer #content <
overflow: initial; !important
>
/* Hide scrollbar. */
yt-live-chat-item-list-renderer #items <
overflow: hidden !important;
>
yt-live-chat-item-list-renderer #item-scroller <
overflow: hidden !important;
>
/* Hide header and input. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer <
display: none !important;
>
/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer <
padding-left: 4px !important;
padding-right: 4px !important;
>
yt-live-chat-paid-message-renderer #header <
padding-left: 4px !important;
padding-right: 4px !important;
>
/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo <
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
margin-right: 6px !important;
>
/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges <
display: none !important;
vertical-align: text-top !important;
>
/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp <
color: #999999 !important;
font-family: "Imprima";
font-size: 16px !important;
line-height: 16px !important;
>
/* Badges. */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] <
color: #ffd600 !important;
>
yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] <
color: #5e84f1 !important;
>
yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] <
color: #0f9d58 !important;
>
/* Channel names. */
yt-live-chat-text-message-renderer #author-name <
color: #cccccc !important;
font-family: "Changa One";
font-size: 20px !important;
line-height: 20px !important;
>
yt-live-chat-text-message-renderer #author-name::after <
content: ":";
margin-left: 2px;
>
/* Messages. */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * <
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
>
/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * <
color: #ffffff !important;
font-family: "Changa One";
font-size: 20px !important;
line-height: 20px !important;
>
yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * <
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
>
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * <
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
>
yt-live-chat-paid-message-renderer <
margin: 4px 0 !important;
>
yt-live-chat-legacy-paid-message-renderer <
background-color: #0f9d58 !important;
margin: 4px 0 !important;
>
yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a <
text-decoration: none !important;
>
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] <
display: none !important;
>
yt-live-chat-ticker-renderer <
background-color: transparent !important;
box-shadow: none !important;
>
yt-live-chat-ticker-renderer <
display: none !important;
>
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * <
color: #ffffff !important;
font-family: "Imprima";
>
Очередь просмотра
Очередь
- Удалить все
- Отключить
Хотите сохраните это видео?
- Пожаловаться
Пожаловаться на видео?
Выполните вход, чтобы сообщить о неприемлемом контенте.
Понравилось?
Не понравилось?
Текст видео
Всех приветствую на своем канале
Голосовые сообщения:
http://www.donationalerts.ru/r/zle0nz
Помощь в развитии канала:
QIWI: +79172161460
Яндекс. Деньги: 41001645007633
Мой комп:
Видеокарта ASUS GeForce® GTX 950 STRIX
Процессор Intel Core i5-6400, 2.70ГГц
Материнская плата ASRock H110M Combo-G
Оперативная память ноунейм 8Гб
Блок питания ATX 600W Thermaltake TR2 S
Жесткий диск HDD неизвестной фирмы на 750Гб
SSD тоже неизвестно чей на 128Гб
Данный гайд понадобится тем кто занимается, или хочет заняться, стрименгом на youtube. Мы хотим вывести чатик на экран так, что бы он особо не мешался зрителям и при этом сохранился в архиве записи. Что же нам для этого понадобиться?
С первым пунктом думаю ни у кого не возникнет вопросов. Просто скачиваем и устанавливаем как любую программу.
Для получения ссылки на ваш чат нам необходимо пройти в настройки трансляции в самом youtube. В открывшейся странице ищем блок чата и жмякаем на три вертикальные точки
далее нажимаем "Открыть чат в новом окне"
Из нового открывшегося окна полностью копируем ссылку.
далее открываем OBS и в блоке "источники" создаем новую сцену Browser Source, либо CLR Browser (для OBS Classic). Называем на свое усмотрение, например я назвал ее YTG_chat, и нажимаем ОК.
Откроется новое окно с настройками.
- В поле URL вставляем ссылку которую копировали на наш чатик.
- Width (ширина) и Height (высота) настраиваем по своему вкусу, но стоит заметить что выставив слишком маленькие значения и потом растянуть сцену по экрану, то получим размытый чатик который будет плохо читабельным.
- Графу FPS выставляем такую же в которой вы стримете, если стримете в 30 fps, то выставляете 30, если в 60, то ставите 60.
- CSS вставляем вот этот текст предварительно опустошив эту графу:
На этом наша настройка завершается. Далее вам только остается выставить это окошко в нужном для вас месте в общей сцене и наслаждаться на здоровье.
Для самых ленивых, или просто для тех кто только начал настраивать свою OBS Studio, могут скачать уже готовую от меня сцену просто её импортировав предварительно распаковав архив.
Мы получили довольно красивый чатик который исчезает через некоторое время и в то же время стабильный в работе чат, нежели тот же самый RutonyChat который периодически подвисает и съедает доп ресурсы вашего пк.
P.S. Знатоки CSS могут меня в чем то поправить если я допустил какие то ошибки в коде, либо могут предложить свои варианты оформления 