[OBS] Códigos CSS

CSS chat Youtube para OBS

Sacado de… Tutorial OBS de escenas: Como hacer que tu Streaming en OBS se vea profesional (minuto 17)

Creamos una nueva escena , por ejemplo con el nombre chat.

Abrimos el chat de Youtube en una ventana independiente y copiamos la dirección de esta.

Añadimos a la escena una nueva fuente de Navegador y pegamos la dirección anterior.

Ajustamos el tamaño de la ventana del chat y en CSS personalizado ponemos el siguiente código:

@import url("https://fonts.googleapis.com/css?family=Oswald"); @import url("https://fonts.googleapis.com/css?family=Roboto"); /* 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 * { font-family: "Oswald"; font-size: 40px !important; line-height: 55px !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: 50px !important; height: 50px !important; border-radius: 50px !important; margin-right: 12.5px !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: "Roboto"; 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: #db9600 !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: #f9f9f9 !important; font-family: "Oswald"; font-size: 40px !important; line-height: 50px !important; } yt-live-chat-text-message-renderer #author-name::after { content: ":"; margin-left: 0px; } /* Messages. */ yt-live-chat-text-message-renderer #message, yt-live-chat-text-message-renderer #message * { color: #ffffff !important; font-family: "Oswald"; font-size: 40px !important; line-height: 55px !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: #009bdb !important; font-family: "Oswald"; font-size: 40px !important; line-height: 55px !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: "Oswald"; font-size: 40px !important; line-height: 40px !important; } yt-live-chat-paid-message-renderer #content, yt-live-chat-paid-message-renderer #content * { color: #ffffff !important; font-family: "Oswald"; font-size: 40px !important; line-height: 40px !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-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: "Oswald"; }