Personalización Visual sin Límites en OBS Studio
Una de las mayores fortalezas de utilizar una fuente de navegador web en OBS Studio es la capacidad de inyectar hojas de estilo en cascada (CSS) arbitrarias. Mientras que otras herramientas imponen plantillas rígidas e inflexibles, MultiStream Chat expone una arquitectura de selectores BEM (*Block Element Modifier*) semántica y limpia, permitiendo a diseñadores y creadores modelar cualquier aspecto estético.
En esta guía técnica analizamos la lista completa de selectores disponibles, cómo importar fuentes tipográficas externas de Google Fonts y cómo crear animaciones modernas sin requerir conocimientos avanzados de programación.
Diccionario de Selectores CSS Expuestos
El overlay de MultiStream Chat estructura cada mensaje utilizando las siguientes clases canónicas:
| Selector CSS | Elemento al que se Aplica | Ejemplo de Uso |
|---|---|---|
| `.msc-overlay-root` | Contenedor raíz de toda la ventana | Ajustar margen global o dirección del scroll. |
| `.msc-message-row` | Fila completa de un mensaje individual | Espaciado entre mensajes (`margin-bottom`). |
| `.msc-card` | Caja visual que rodea el texto del usuario | Fondos, bordes redondeados, desenfoques. |
| `.msc-badge-container` | Envoltura de insignias (VIP, Mod, Sub) | Alineación vertical de iconos. |
| `.msc-platform-badge` | Icono representativo (Twitch / YouTube) | Color y tamaño del logotipo de origen. |
| `.msc-author-name` | Nombre de usuario del emisor | Tipografía, negrita, colores por roles. |
| `.msc-message-body` | Cuerpo de texto del mensaje | Color de fuente, interlineado y tamaño. |
| `.msc-emote` | Emote insertado (7TV, BTTV, FFZ, nativo) | Altura forzada y espaciado horizontal. |
Cómo Inyectar Google Fonts en OBS Studio
No es necesario que instales las fuentes tipográficas en el disco duro de tu ordenador. Puedes importar directamente cualquier tipografía del catálogo de Google Fonts utilizando la directiva @import al inicio del campo CSS Personalizado de la fuente de navegador en OBS:
/* 1. Importación de tipografías modernas de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=JetBrains+Mono:wght@500&display=swap');
/* 2. Aplicación a los nombres de usuario y cuerpo del chat */
.msc-author-name {
font-family: 'Outfit', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
}
.msc-message-body {
font-family: 'Outfit', sans-serif !important;
font-weight: 400 !important;
font-size: 16px !important;
}Colección de Estilos Listos para Copiar y Pegar
Tema 1: Cyberpunk Neón con Borde Brillante
Diseñado para juegos de acción, shooters y transmisiones con estética futurista oscura:
.msc-card {
background: rgba(10, 10, 20, 0.85) !important;
border: 1px solid #00f0ff !important;
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(0, 240, 255, 0.1) !important;
border-radius: 4px !important;
backdrop-filter: blur(6px);
}
.msc-platform-twitch .msc-card {
border-color: #a970ff !important;
box-shadow: 0 0 15px rgba(169, 112, 255, 0.35) !important;
}
.msc-platform-youtube .msc-card {
border-color: #ff3333 !important;
box-shadow: 0 0 15px rgba(255, 51, 51, 0.35) !important;
}Tema 2: Minimalista Limpio (Modo E-Sports)
Sin cajas ni bordes pesados, maximizando el contraste para torneos competitivos:
.msc-card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 4px 0px !important;
}
.msc-message-body {
color: #ffffff !important;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000,
0px 2px 4px rgba(0, 0, 0, 0.9) !important;
}Animaciones Avanzadas de Entrada y Desaparición
Puedes sustituir la animación por defecto aplicando tus propias reglas @keyframes aceleradas por hardware:
@keyframes popIn {
0% {
opacity: 0;
transform: scale(0.85) translateY(10px);
}
70% {
transform: scale(1.02) translateY(-2px);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.msc-message-row {
animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}