API tools faq
paste
Guest User

CUSTOM CSS FOR OBS CHAT

a guest
Nov 3rd, 2024
8
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.49 KB | Gaming | 0 0
raw download clone embed print report
  1. OBS - CSS for Chat Window
  2.  
  3. In OBS, open a new 'browser' source.
  4.  
  5. [YOUTUBE]
  6.  
  7. Copy the following into URL for YouTube:
  8.  
  9. https://www.youtube.com/live_chat?is_popout=1&v=XXXXXXXXXX <-- (this will be your stream's ID, to be updated each new stream)
  10.  
  11. Copy the following into Custom CSS for YouTube (without the equal sign break):
  12.  
  13. ==========================================================================
  14.  
  15.  
  16. @charset "UTF-8";
  17.  
  18.  
  19. @import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500&display=swap");
  20.  
  21.  
  22. body {
  23. background-color: transparent !important;
  24. font-family: "Noto Sans JP", sans-serif !important;
  25. overflow-y: hidden !important;
  26. }
  27.  
  28.  
  29. yt-live-chat-renderer {
  30. background-color: transparent !important;
  31. }
  32.  
  33.  
  34. yt-live-chat-ticker-renderer {
  35. display: none !important;
  36. }
  37.  
  38.  
  39. yt-live-chat-item-list-renderer {
  40. --yt-live-chat-author-chip-owner-text-color: #ffd600ff;
  41. --yt-live-chat-deleted-message-color: rgba(153, 153, 153, 0.5);
  42. --yt-live-chat-item-timestamp-display: none;
  43. --yt-live-chat-item-timestamp-margin: 0 5px 0 0;
  44. --yt-live-chat-message-highlight-background-color: transparent;
  45. --yt-live-chat-message-highlight-text-color: #ffd600ff;
  46. --yt-live-chat-moderator-color: #5e84f1ff;
  47. --yt-live-chat-owner-color: #ffd600ff;
  48. --yt-live-chat-paid-message-author-name-color: #ffffffff;
  49. --yt-live-chat-primary-text-color: #ffffffff;
  50. --yt-live-chat-secondary-text-color: #ffffffff;
  51. --yt-live-chat-sponsor-color: #107516ff;
  52. --yt-live-chat-tertiary-text-color: #999999ff;
  53. }
  54.  
  55.  
  56. #item-scroller {
  57. overflow-y: hidden !important;
  58. }
  59.  
  60.  
  61. yt-live-chat-text-message-renderer {
  62. padding: 4px 5px !important;
  63. }
  64.  
  65.  
  66. yt-live-chat-text-message-renderer[is-deleted] {
  67. display: none !important;
  68. }
  69.  
  70.  
  71. yt-live-chat-text-message-renderer #author-photo {
  72. display: block !important;
  73. height: 20px !important;
  74. margin: 3px 10px 0 0 !important;
  75. width: 20px !important;
  76. }
  77.  
  78.  
  79. yt-live-chat-text-message-renderer #author-photo img {
  80. height: 100% !important;
  81. width: 100% !important;
  82. }
  83.  
  84.  
  85. yt-live-chat-text-message-renderer yt-live-chat-author-chip {
  86. font-size: 18px !important;
  87. letter-spacing: 0.15em;
  88. line-height: 1.4 !important;
  89. margin: 0 !important;
  90. text-shadow:
  91. -2px -2px 0 #000000ff,
  92. -2px -1px 0 #000000ff,
  93. -2px 0px 0 #000000ff,
  94. -2px 1px 0 #000000ff,
  95. -2px 2px 0 #000000ff,
  96. -1px -2px 0 #000000ff,
  97. -1px -1px 0 #000000ff,
  98. -1px 0px 0 #000000ff,
  99. -1px 1px 0 #000000ff,
  100. -1px 2px 0 #000000ff,
  101. 0px -2px 0 #000000ff,
  102. 0px -1px 0 #000000ff,
  103. 0px 0px 0 #000000ff,
  104. 0px 1px 0 #000000ff,
  105. 0px 2px 0 #000000ff,
  106. 1px -2px 0 #000000ff,
  107. 1px -1px 0 #000000ff,
  108. 1px 0px 0 #000000ff,
  109. 1px 1px 0 #000000ff,
  110. 1px 2px 0 #000000ff,
  111. 2px -2px 0 #000000ff,
  112. 2px -1px 0 #000000ff,
  113. 2px 0px 0 #000000ff,
  114. 2px 1px 0 #000000ff,
  115. 2px 2px 0 #000000ff;
  116. }
  117.  
  118.  
  119. yt-live-chat-text-message-renderer[author-type="owner"] yt-live-chat-author-chip {
  120. font-size: 18px !important;
  121. text-shadow:
  122. -2px -2px 0 #000000ff,
  123. -2px -1px 0 #000000ff,
  124. -2px 0px 0 #000000ff,
  125. -2px 1px 0 #000000ff,
  126. -2px 2px 0 #000000ff,
  127. -1px -2px 0 #000000ff,
  128. -1px -1px 0 #000000ff,
  129. -1px 0px 0 #000000ff,
  130. -1px 1px 0 #000000ff,
  131. -1px 2px 0 #000000ff,
  132. 0px -2px 0 #000000ff,
  133. 0px -1px 0 #000000ff,
  134. 0px 0px 0 #000000ff,
  135. 0px 1px 0 #000000ff,
  136. 0px 2px 0 #000000ff,
  137. 1px -2px 0 #000000ff,
  138. 1px -1px 0 #000000ff,
  139. 1px 0px 0 #000000ff,
  140. 1px 1px 0 #000000ff,
  141. 1px 2px 0 #000000ff,
  142. 2px -2px 0 #000000ff,
  143. 2px -1px 0 #000000ff,
  144. 2px 0px 0 #000000ff,
  145. 2px 1px 0 #000000ff,
  146. 2px 2px 0 #000000ff;
  147. }
  148.  
  149.  
  150. yt-live-chat-text-message-renderer[author-type="moderator"] yt-live-chat-author-chip {
  151. font-size: 18px !important;
  152. text-shadow:
  153. -2px -2px 0 #000000ff,
  154. -2px -1px 0 #000000ff,
  155. -2px 0px 0 #000000ff,
  156. -2px 1px 0 #000000ff,
  157. -2px 2px 0 #000000ff,
  158. -1px -2px 0 #000000ff,
  159. -1px -1px 0 #000000ff,
  160. -1px 0px 0 #000000ff,
  161. -1px 1px 0 #000000ff,
  162. -1px 2px 0 #000000ff,
  163. 0px -2px 0 #000000ff,
  164. 0px -1px 0 #000000ff,
  165. 0px 0px 0 #000000ff,
  166. 0px 1px 0 #000000ff,
  167. 0px 2px 0 #000000ff,
  168. 1px -2px 0 #000000ff,
  169. 1px -1px 0 #000000ff,
  170. 1px 0px 0 #000000ff,
  171. 1px 1px 0 #000000ff,
  172. 1px 2px 0 #000000ff,
  173. 2px -2px 0 #000000ff,
  174. 2px -1px 0 #000000ff,
  175. 2px 0px 0 #000000ff,
  176. 2px 1px 0 #000000ff,
  177. 2px 2px 0 #000000ff;
  178. }
  179.  
  180.  
  181. yt-live-chat-text-message-renderer[author-type="member"] yt-live-chat-author-chip {
  182. font-size: 18px !important;
  183. text-shadow:
  184. -2px -2px 0 #000000ff,
  185. -2px -1px 0 #000000ff,
  186. -2px 0px 0 #000000ff,
  187. -2px 1px 0 #000000ff,
  188. -2px 2px 0 #000000ff,
  189. -1px -2px 0 #000000ff,
  190. -1px -1px 0 #000000ff,
  191. -1px 0px 0 #000000ff,
  192. -1px 1px 0 #000000ff,
  193. -1px 2px 0 #000000ff,
  194. 0px -2px 0 #000000ff,
  195. 0px -1px 0 #000000ff,
  196. 0px 0px 0 #000000ff,
  197. 0px 1px 0 #000000ff,
  198. 0px 2px 0 #000000ff,
  199. 1px -2px 0 #000000ff,
  200. 1px -1px 0 #000000ff,
  201. 1px 0px 0 #000000ff,
  202. 1px 1px 0 #000000ff,
  203. 1px 2px 0 #000000ff,
  204. 2px -2px 0 #000000ff,
  205. 2px -1px 0 #000000ff,
  206. 2px 0px 0 #000000ff,
  207. 2px 1px 0 #000000ff,
  208. 2px 2px 0 #000000ff;
  209. }
  210.  
  211.  
  212. yt-live-chat-text-message-renderer yt-live-chat-author-chip::after {
  213. color: var(--yt-live-chat-secondary-text-color, hsla(0, 0%, 6.7%, .6));
  214. content: ":";
  215. display: block;
  216. font-weight: 500;
  217. margin: 0 8px 0 3px;
  218. order: 2;
  219. }
  220.  
  221.  
  222. yt-live-chat-text-message-renderer[author-type="owner"] yt-live-chat-author-chip::after {
  223. color: var(--yt-live-chat-message-highlight-text-color);
  224. display: block;
  225. }
  226.  
  227.  
  228. yt-live-chat-text-message-renderer[author-type="moderator"] yt-live-chat-author-chip::after {
  229. color: var(--yt-live-chat-moderator-color);
  230. display: block;
  231. }
  232.  
  233.  
  234. yt-live-chat-text-message-renderer[author-type="member"] yt-live-chat-author-chip::after {
  235. color: var(--yt-live-chat-sponsor-color);
  236. display: block;
  237. }
  238.  
  239.  
  240. yt-live-chat-text-message-renderer #author-name {
  241. background-color: transparent !important;
  242. display: block;
  243. order: 0;
  244. padding: 0 !important;
  245. }
  246.  
  247.  
  248. yt-live-chat-text-message-renderer #author-name[type="owner"] {
  249. display: block;
  250. }
  251.  
  252.  
  253. yt-live-chat-text-message-renderer #author-name[type="moderator"] {
  254. display: block;
  255. }
  256.  
  257.  
  258. yt-live-chat-text-message-renderer #author-name[type="member"] {
  259. display: block;
  260. }
  261.  
  262.  
  263. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer {
  264. display: none;
  265. margin: 0 0 2px 3px !important;
  266. }
  267.  
  268.  
  269. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
  270. display: inline-block;
  271. }
  272.  
  273.  
  274. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
  275. display: inline-block;
  276. }
  277.  
  278.  
  279. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer #image {
  280. height: 16px;
  281. width: 16px;
  282. }
  283.  
  284.  
  285. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] #image {
  286. height: 16px;
  287. width: 16px;
  288. }
  289.  
  290.  
  291. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] #image {
  292. height: 16px;
  293. width: 16px;
  294. }
  295.  
  296.  
  297. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer #image img,
  298. yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer #image yt-icon {
  299. height: 100% !important;
  300. width: 100% !important;
  301. }
  302.  
  303.  
  304. yt-live-chat-text-message-renderer[author-type="moderator"] yt-live-chat-author-badge-renderer #image svg {
  305. filter: drop-shadow(1px 1px #000000ff)
  306. drop-shadow(-1px 1px #000000ff)
  307. drop-shadow(1px -1px #000000ff)
  308. drop-shadow(-1px -1px #000000ff);
  309. }
  310.  
  311.  
  312. yt-live-chat-text-message-renderer #message,
  313. yt-live-chat-text-message-renderer yt-formatted-string {
  314. font-size: 18px !important;
  315. letter-spacing: 0.15em;
  316. line-height: 1.4 !important;
  317. text-shadow:
  318. -2px -2px 0 #000000ff,
  319. -2px -1px 0 #000000ff,
  320. -2px 0px 0 #000000ff,
  321. -2px 1px 0 #000000ff,
  322. -2px 2px 0 #000000ff,
  323. -1px -2px 0 #000000ff,
  324. -1px -1px 0 #000000ff,
  325. -1px 0px 0 #000000ff,
  326. -1px 1px 0 #000000ff,
  327. -1px 2px 0 #000000ff,
  328. 0px -2px 0 #000000ff,
  329. 0px -1px 0 #000000ff,
  330. 0px 0px 0 #000000ff,
  331. 0px 1px 0 #000000ff,
  332. 0px 2px 0 #000000ff,
  333. 1px -2px 0 #000000ff,
  334. 1px -1px 0 #000000ff,
  335. 1px 0px 0 #000000ff,
  336. 1px 1px 0 #000000ff,
  337. 1px 2px 0 #000000ff,
  338. 2px -2px 0 #000000ff,
  339. 2px -1px 0 #000000ff,
  340. 2px 0px 0 #000000ff,
  341. 2px 1px 0 #000000ff,
  342. 2px 2px 0 #000000ff;
  343. }
  344.  
  345.  
  346. yt-live-chat-text-message-renderer #timestamp {
  347. font-size: 16px !important;
  348. line-height: 1.4 !important;
  349. }
  350.  
  351.  
  352. yt-live-chat-legacy-paid-message-renderer,
  353. yt-live-chat-paid-message-renderer {
  354. padding: 4px 2px !important;
  355. }
  356.  
  357.  
  358. yt-live-chat-legacy-paid-message-renderer {
  359.  
  360. }
  361.  
  362.  
  363. yt-live-chat-paid-message-renderer {
  364. --yt-live-chat-paid-message-author-name-color: var(--yt-live-chat-secondary-text-color) !important;
  365. --yt-live-chat-paid-message-color: var(--yt-live-chat-primary-text-color) !important;
  366. --yt-live-chat-paid-message-header-color: var(--yt-live-chat-primary-text-color) !important;
  367. --yt-live-chat-paid-message-timestamp-color: var(--yt-live-chat-tertiary-text-color) !important;
  368.  
  369. }
  370.  
  371.  
  372. yt-live-chat-legacy-paid-message-renderer #author-photo,
  373. yt-live-chat-paid-message-renderer #author-photo {
  374. display: display !important;
  375. height: 20px !important;
  376. margin: 3px 10px 0 0 !important;
  377. width: 20px !important;
  378. }
  379.  
  380.  
  381. yt-live-chat-legacy-paid-message-renderer #author-photo img,
  382. yt-live-chat-paid-message-renderer #author-photo img {
  383. height: 100% !important;
  384. width: 100% !important;
  385. }
  386.  
  387.  
  388. yt-live-chat-legacy-paid-message-renderer #card,
  389. yt-live-chat-paid-message-renderer #card {
  390. box-shadow: none !important;
  391. }
  392.  
  393.  
  394. yt-live-chat-legacy-paid-message-renderer #card {
  395. padding: 4px 2px !important;
  396. }
  397.  
  398.  
  399. yt-live-chat-legacy-paid-message-renderer #event-text,
  400. yt-live-chat-legacy-paid-message-renderer #detail-text {
  401. font-size: 18px !important;
  402. letter-spacing: 0.15em;
  403. line-height: 1.4 !important;
  404. text-shadow:
  405. -2px -2px 0 #000000ff,
  406. -2px -1px 0 #000000ff,
  407. -2px 0px 0 #000000ff,
  408. -2px 1px 0 #000000ff,
  409. -2px 2px 0 #000000ff,
  410. -1px -2px 0 #000000ff,
  411. -1px -1px 0 #000000ff,
  412. -1px 0px 0 #000000ff,
  413. -1px 1px 0 #000000ff,
  414. -1px 2px 0 #000000ff,
  415. 0px -2px 0 #000000ff,
  416. 0px -1px 0 #000000ff,
  417. 0px 0px 0 #000000ff,
  418. 0px 1px 0 #000000ff,
  419. 0px 2px 0 #000000ff,
  420. 1px -2px 0 #000000ff,
  421. 1px -1px 0 #000000ff,
  422. 1px 0px 0 #000000ff,
  423. 1px 1px 0 #000000ff,
  424. 1px 2px 0 #000000ff,
  425. 2px -2px 0 #000000ff,
  426. 2px -1px 0 #000000ff,
  427. 2px 0px 0 #000000ff,
  428. 2px 1px 0 #000000ff,
  429. 2px 2px 0 #000000ff;
  430. }
  431.  
  432.  
  433. yt-live-chat-legacy-paid-message-renderer #event-text {
  434. color: var(--yt-live-chat-paid-message-author-name-color) !important
  435. }
  436.  
  437.  
  438. yt-live-chat-legacy-paid-message-renderer #detail-text {
  439. color: var(--yt-live-chat-primary-text-color) !important;
  440. padding: 4px 0 0 0 !important;
  441. }
  442.  
  443.  
  444.  
  445.  
  446.  
  447.  
  448. yt-live-chat-paid-message-renderer #header {
  449. align-items: flex-start !important;
  450. padding: 4px 2px !important;
  451. }
  452.  
  453.  
  454. yt-live-chat-paid-message-renderer #header-content {
  455. align-items: flex-end !important;
  456. }
  457.  
  458.  
  459. yt-live-chat-paid-message-renderer #header-content-primary-column {
  460. align-items: flex-end;
  461. flex-direction: row !important;
  462. justify-content: flex-start;
  463. }
  464.  
  465.  
  466. yt-live-chat-paid-message-renderer #content {
  467. padding: 4px 2px 4px 27px !important;
  468. }
  469.  
  470.  
  471. yt-live-chat-paid-message-renderer #author-name {
  472. font-size: 18px !important;
  473. letter-spacing: 0.15em;
  474. line-height: 1.4 !important;
  475. text-shadow:
  476. -2px -2px 0 #000000ff,
  477. -2px -1px 0 #000000ff,
  478. -2px 0px 0 #000000ff,
  479. -2px 1px 0 #000000ff,
  480. -2px 2px 0 #000000ff,
  481. -1px -2px 0 #000000ff,
  482. -1px -1px 0 #000000ff,
  483. -1px 0px 0 #000000ff,
  484. -1px 1px 0 #000000ff,
  485. -1px 2px 0 #000000ff,
  486. 0px -2px 0 #000000ff,
  487. 0px -1px 0 #000000ff,
  488. 0px 0px 0 #000000ff,
  489. 0px 1px 0 #000000ff,
  490. 0px 2px 0 #000000ff,
  491. 1px -2px 0 #000000ff,
  492. 1px -1px 0 #000000ff,
  493. 1px 0px 0 #000000ff,
  494. 1px 1px 0 #000000ff,
  495. 1px 2px 0 #000000ff,
  496. 2px -2px 0 #000000ff,
  497. 2px -1px 0 #000000ff,
  498. 2px 0px 0 #000000ff,
  499. 2px 1px 0 #000000ff,
  500. 2px 2px 0 #000000ff;
  501. }
  502.  
  503.  
  504. yt-live-chat-paid-message-renderer #author-name::after {
  505. content: ":";
  506. display: inline-block;
  507. font-weight: 500;
  508. margin-left: 3px;
  509. }
  510.  
  511.  
  512. yt-live-chat-paid-message-renderer #purchase-amount,
  513. yt-live-chat-paid-message-renderer #message {
  514. font-size: 18px !important;
  515. letter-spacing: 0.15em;
  516. line-height: 1.4 !important;
  517. text-shadow:
  518. -2px -2px 0 #000000ff,
  519. -2px -1px 0 #000000ff,
  520. -2px 0px 0 #000000ff,
  521. -2px 1px 0 #000000ff,
  522. -2px 2px 0 #000000ff,
  523. -1px -2px 0 #000000ff,
  524. -1px -1px 0 #000000ff,
  525. -1px 0px 0 #000000ff,
  526. -1px 1px 0 #000000ff,
  527. -1px 2px 0 #000000ff,
  528. 0px -2px 0 #000000ff,
  529. 0px -1px 0 #000000ff,
  530. 0px 0px 0 #000000ff,
  531. 0px 1px 0 #000000ff,
  532. 0px 2px 0 #000000ff,
  533. 1px -2px 0 #000000ff,
  534. 1px -1px 0 #000000ff,
  535. 1px 0px 0 #000000ff,
  536. 1px 1px 0 #000000ff,
  537. 1px 2px 0 #000000ff,
  538. 2px -2px 0 #000000ff,
  539. 2px -1px 0 #000000ff,
  540. 2px 0px 0 #000000ff,
  541. 2px 1px 0 #000000ff,
  542. 2px 2px 0 #000000ff;
  543. }
  544.  
  545.  
  546. yt-live-chat-paid-message-renderer #purchase-amount {
  547. padding: 0 5px 0 10px !important;
  548. white-space: nowrap !important;
  549. }
  550.  
  551.  
  552. yt-live-chat-viewer-engagement-message-renderer {
  553. border-top: none !important;
  554. display: none !important;
  555. padding: 2px 4px;
  556.  
  557.  
  558. --yt-live-chat-primary-text-color: #000;
  559. --yt-live-chat-vem-background-color: rgba(255, 255, 255, .8);
  560. }
  561.  
  562.  
  563. yt-live-chat-viewer-engagement-message-renderer #icon {
  564. height: 36px;
  565. margin-right: 8px;
  566. width: 36px;
  567. }
  568.  
  569.  
  570. yt-live-chat-viewer-engagement-message-renderer #message {
  571. font-size: 15px !important;
  572. line-height: 1.4;
  573. }
  574.  
  575.  
  576. yt-live-chat-viewer-engagement-message-renderer #action-button {
  577. display: none !important;
  578. }
  579.  
  580.  
  581. yt-live-chat-header-renderer,
  582. yt-live-chat-message-input-renderer,
  583. yt-live-chat-mode-change-message-renderer,
  584. yt-live-chat-restricted-participation-renderer {
  585. display: none !important;
  586. }
  587.  
  588. #reaction-control-panel.yt-reaction-control-panel-overlay-view-model {
  589. display: none;
  590. }
  591.  
  592.  
  593. ===========================================
  594.  
  595. [TWITCH]
  596.  
  597. Copy the following into URL for Twitch:
  598.  
  599. https://www.twitch.tv/embed/tethercat/chat?parent=localhost
  600.  
  601. Copy the following into Custom CSS for Twitch (without the equal sign break):
  602.  
  603. ==========================================================================
  604.  
  605. /**
  606. * Change font color for all user and system names and messages, add text shadow and make background transparent
  607. */
  608. body, .chat-room, .chat-line__moderation, .chat-line__status, .chat-line__message, .chat-author__display-name {
  609. color: #FFFFFF !important;
  610. margin: 0 auto!important;
  611. overflow: hidden!important;
  612. font-weight: bold!important;
  613. font-size: 16px!important;
  614. text-shadow:
  615. -1px -1px 1px #000000,
  616. -1px 1px 1px #000000,
  617. 1px -1px 1px #000000,
  618. 1px 1px 1px #000000!important;
  619. background-color: rgba(0,0,0,0)!important;
  620. }
  621.  
  622. /**
  623. * Remove the header section
  624. */
  625. .stream-chat .stream-chat-header {
  626. display: none!important;
  627. }
  628.  
  629. /**
  630. * Remove the footer section
  631. */
  632. .stream-chat .chat-input {
  633. display: none!important;
  634. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!