Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

doc:tec:pc_sof:obs:css:inicio [2026/01/16 12:31] – ↷ Página movida de doc:tec:exe:obs:css:inicio a doc:tec:pc_sof:obs:css:inicio fepgdoc:tec:pc_sof:obs:css:inicio [Fecha desconocida] (actual) – editor externo (Fecha desconocida) 127.0.0.1
Línea 1: Línea 1:
 +====== [OBS] Códigos CSS ======
 +
 +===== CSS chat Youtube para OBS =====
 +
 +<well> {{:ico:enlace.png?nolink|}} **Sacado de...**
 +[[https://youtu.be/XUyHEKmdEcM|Tutorial OBS de escenas: Como hacer que tu Streaming en OBS se vea profesional (minuto 17)]]
 +</well>
 +
 +  - 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: <file css Código css_chat_youTube_para_obs.txt>
 +
 +@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";
 +}
 +</file>
 +
 +