Apariencia

El aspecto de Stream UI funciona en dos niveles:

1. El estilo de overlay, en la pestaña Estilos generales de la página Overlay, se aplica a todos los widgets a la vez. Aquí es donde el overlay toma su identidad visual.
2. La pestaña Estilo de cada widget, en su propia página, deja que un elemento de un widget se vea distinto — los nombres del chat, la imagen de las alertas…

Todo sigue el estilo de overlay mientras no digas lo contrario, así que empieza aquí. Con varios overlays, el estilo de overlay y los estilos de los widgets son comunes a todos; solo cambian el lienzo y la colocación.

El estilo de overlay

La pestaña Estilos generales tiene una columna Estilos a la izquierda, una fila por cada parte del estilo de abajo: haz clic en una para editarla en la zona principal. Los tamaños van en píxeles a 1080p y escalan con el lienzo.

Contenedor de los widgets

La caja alrededor de cada widget entero: su aspecto, en las mismas cuatro secciones que el fondo de los widgets de abajo. Transparente por defecto (Transparente activado, sin borde, padding, desenfoque ni sombra), para que los widgets se apoyen directamente en el stream. El contenedor de cada widget ajusta su tamaño, su espaciado y su contenido en su pestaña Estilo (más abajo); un widget mostrado como barra horizontal conserva el aspecto propio de la barra.

Fondo de los widgets

Las burbujas del chat, las alertas y todas las tarjetas de los widgets: su aspecto, en cuatro secciones (Borde, Relleno, Color de fondo, Sombra). Los fondos de cada widget ajustan su tamaño, su espaciado y su contenido en su pestaña Estilo (más abajo).

Títulos, Subtítulos, Texto, Texto secundario y Números

Cinco filas con los mismos campos: Títulos (nombres, títulos de alerta, cabeceras de tarjetas), Subtítulos (etiquetas en mayúsculas: nombres de sección, de estadística y de estado), Texto (mensajes del chat y texto general), Texto secundario (descripciones de las alertas y otros textos pequeños) y Números (contadores, puntuaciones, espectadores y tiempo restante).

Todas empiezan con una sombra de texto Suave, salvo Números (Fuerte). Los Subtítulos van en Mayúsculas, con un espaciado de 6 %. Todos los demás textos de los widgets usan la fuente de Texto mientras no cambies la suya.

Fotos de perfil

Las alertas, el Primero del chat, los saludos, los shoutouts, las cuentas atrás y las tarjetas de espectador, con las secciones de todas las imágenes (más abajo). Si un widget las muestra se ajusta en su pestaña Ajustes.

Iconos de plataforma

Los logos de Twitch, YouTube y Kick de las alertas, el chat, el Primero del chat, los saludos, el contador de espectadores y las tarjetas de espectador, con las mismas secciones que las fotos de perfil. Su lugar se ajusta en la pestaña Ajustes de cada widget.

Barras de progreso

Objetivos, encuestas y cuentas atrás.

Separadores

Las líneas finas: bajo el título de una tarjeta de objetivos, entre la pregunta de una encuesta y sus opciones, y entre las partes de una barra de subathon.

Transición de entrada y salida

Cómo aparecen y desaparecen los widgets.

Auto (según la posición) hace entrar cada widget por el borde junto al que está y lo hace salir por el mismo: un widget en medio a la izquierda se desliza desde la izquierda, uno arriba al centro desde arriba, una esquina desde su lado en una posición en columna y desde su borde en una fila. Las barras de arriba y de abajo vienen de su borde; la posición Centro, una barra en el centro y los widgets a pantalla completa crecen desde el centro.

Restablecer los estilos, a la derecha de las pestañas, devuelve toda la pestaña Estilos generales al estilo del estudio. Los estilos personalizados en la página de un widget se conservan.

La pestaña Estilo de un widget

Cada página de widget tiene una pestaña Ajustes y una pestaña Estilo, en la columna de la izquierda — más una pestaña Controles en los widgets que se pueden manejar a mano; la vista previa se queda a la derecha. (Las Recompensas por actividad y los Webhooks de Discord no muestran nada, así que no tienen pestaña Estilo.) La pestaña Estilo lista cada elemento que dibuja el widget, de atrás hacia delante — en el chat: el contenedor, el fondo de los mensajes, el icono de plataforma, el nombre, las insignias, el texto del mensaje, los emotes… La página de cada widget en esta documentación lista los suyos.

Contenedores y fondos

Las mismas primeras tarjetas en todas partes. Cada widget empieza por su Contenedor, la caja que contiene todo el widget, y después su Fondo, la caja detrás de su contenido (o detrás de cada elemento de una lista: cada mensaje del chat, saludo, contador…). Las dos, como todas las demás cajas de un widget (insignias, escalón del podio, marco del vídeo…), tienen las mismas secciones, en este orden:

Su Contenedor coloca cada caja: el Alinear contenido del Contenedor alinea el Fondo en el widget. Seguir al contenedor padre, el ajuste por defecto de los Contenedores y de la mayoría de los Fondos, sigue la posición del widget en el lienzo (sus alineaciones Horizontal y Vertical, en la página Overlay). Elige un lado para fijarla tú.

Los modos ajustan algunos campos por sí mismos. Cuando un widget funciona en un modo, el modo toma los campos que necesita, y estos salen de la pestaña Estilo:

• En barra. En un widget mostrado como barra horizontal (chat, objetivos y subathon, marcador), la tarjeta Contenedor es la banda: su propia caja, su Altura en Tamaño (Auto o Fijo, y luego su Altura fija; In the overlay picked in the Editor de overlays: en el overlay elegido en la página Overlay, los mismos valores que en la pestaña Disposición), sin ancho ni dirección. En una barra, solo la barra dibuja un fondo: las demás cajas del widget son transparentes por defecto.
• Pantalla completa (créditos finales, lluvia de emotes y gifs): el Contenedor cubre toda la pantalla, así que no tiene Tamaño ni Espaciado.
• Los ajustes del widget: una dirección o una disposición ajustada en la pestaña Ajustes (el lado de la imagen de una alerta, las disposiciones del marcador, el podio del Primero del chat) es la Dirección de esa caja.

Imágenes e iconos

Las mismas secciones en todas las imágenes. Fotos de perfil, iconos de plataforma, insignias, emotes, gifs y stickers tienen sus propias tarjetas, en este orden (una sección solo aparece donde sirve):

Mientras el fondo es transparente, la sombra y el brillo siguen la forma de un icono o de un emote; con fondo, siguen su caja.

Lo que estás editando se resalta. El elemento elegido en la pestaña Estilo aparece en la vista previa con un fino contorno malva (un texto, con un brillo añadido), encima de su propio aspecto: su sombra y su brillo se siguen viendo mientras los cambias.

Ninguna imagen se elige en la pestaña Estilo. La imagen que muestra un widget (la foto de perfil del espectador o una imagen que subes: la de cada alerta, la de cada cuenta atrás) se ajusta en su pestaña Ajustes; la pestaña Estilo solo ajusta su aspecto.

Estilos globales o personalizados

Cada elemento muestra todos sus campos, con los valores que usa ahora mismo. Sigue un estilo campo por campo:

• Ligados al estilo de overlay — sigue la pestaña Estilos generales, cambies lo que cambies allí después.
• Propios del widget (insignias, emotes, stickers, cajas interiores como el escalón del podio del Primero del chat o las insignias de estado del subathon, textos de los créditos finales…) — sigue el aspecto por defecto del widget.

Cambia un campo y ese campo pasa a ser del elemento: aparece una pequeña flecha de restablecer junto a su nombre, y todos los demás campos siguen igual que antes. La flecha vuelve a poner el valor seguido.

El interruptor de arriba, Estilos globales / Personalizado (Estilos por defecto / Personalizado en los elementos propios del widget), indica cómo está el elemento: pasa a Personalizado en cuanto cambias un campo, y vuelve a Estilos globales cuando restableces el último. Haz clic en Estilos globales mientras dice Personalizado para restablecer de una vez todos los campos que cambiaste; antes, una ventana te pide que lo confirmes.

Algunos elementos ligados al estilo de overlay conservan un color propio y lo siguen en todo lo demás: los mensajes destacados y del chat compartido, los anuncios y los canjes de puntos de canal, la cuenta atrás y la barra ganadora de una encuesta, la puntuación de un récord del marcador, el contribuyente y el tiempo añadido del subathon.

Mostrar. Que se muestre una imagen, un icono, las insignias o los emotes es un interruptor de la pestaña Ajustes del widget (Mostrar la foto de perfil, Mostrar el icono de plataforma…), nunca de su tarjeta de estilo.

Estilo para. Cada widget que muestra algo por plataforma (Chat, Primero del chat, Saludo a los chatters, Alertas, Objetivos y subathon, Contador de espectadores, Encuestas y predicciones, Créditos finales, Marcador, Tarjetas de espectadores) puede dar a una plataforma su propio estilo: elígela en Estilo para, junto al interruptor (Todas, luego cada plataforma activada; Alertas también lista tus integraciones), y cambia los campos que quieras. El interruptor dice entonces Igual que Todas / Personalizado: todo lo que no cambies sigue Todas. Lo que se dibuja una sola vez alrededor de todas las plataformas (el Contenedor, el fondo del Contador de espectadores, el timer y el historial de Objetivos, la columna y los títulos de los Créditos finales…) no tiene Estilo para: se ajusta para todo el widget.

Algunos ajustes de widget están en la pestaña Estilo, junto a lo que cambian: la duración del desplazamiento de los créditos.

La pestaña Estilo solo lista lo que muestran los ajustes del widget: desactiva una parte en la pestaña Ajustes (un tipo de mensaje del chat, el título del clip, el podio del Primero del chat…) y su elemento sale de la lista hasta que la vuelvas a activar. Su estilo se conserva.

El botón Restablecer de la página de un widget devuelve todos los ajustes y estilos de ese widget a sus valores por defecto — el aspecto por defecto del propio widget, que en los créditos finales ya tiene un campo propio (su transición en fundido).

Y después

La apariencia decide cómo se ve. La pestaña Disposición decide dónde va: qué widget dónde, a qué tamaño, en qué lienzo.