Apparence

Le style de Stream UI fonctionne à deux niveaux :

1. Le style d'overlay, dans l'onglet Styles généraux de la page Overlay, s'applique à tous les widgets à la fois. C'est là que l'overlay prend son identité visuelle.
2. L'onglet Style de chaque widget, sur sa propre page, permet à un élément d'un widget d'avoir un rendu différent — les pseudos du chat, l'image des alertes…

Tout suit le style d'overlay tant que vous n'en décidez pas autrement : commencez donc ici. Avec plusieurs overlays, le style d'overlay et les styles des widgets sont partagés par tous ; seuls le canevas et le placement changent.

Le style d'overlay

L'onglet Styles généraux a une colonne Styles à gauche, une ligne par partie du style ci-dessous : cliquez sur l'une d'elles pour la modifier dans la zone principale. Les tailles sont en pixels à 1080p et suivent le canevas.

Conteneur des widgets

La boîte autour de chaque widget entier : son apparence, dans les mêmes quatre sections que le fond des widgets ci-dessous. Transparente par défaut (Transparent activé, ni bordure, ni padding, ni flou, ni ombre), pour que les widgets se posent directement sur le stream. Le conteneur de chaque widget règle sa taille, son espacement et son contenu dans son onglet Style (plus bas) ; un widget affiché en barre horizontale garde le style propre de la barre.

Fond des widgets

Les bulles du chat, les alertes et toutes les cartes des widgets : leur apparence, en quatre sections (Bordure, Marge intérieure, Couleur de fond, Ombre). Les fonds de chaque widget règlent leur taille, leur espacement et leur contenu dans son onglet Style (plus bas).

Titres, Sous-titres, Texte, Texte secondaire et Nombres

Cinq lignes aux mêmes champs : Titres (pseudos, titres d'alerte, en-têtes de cartes), Sous-titres (libellés en capitales : noms de section, de statistique et de statut), Texte (messages du chat et texte courant), Texte secondaire (descriptions des alertes et autres petits textes) et Nombres (compteurs, scores, spectateurs et temps restant).

Toutes démarrent avec une ombre de texte Légère, sauf Nombres (Forte). Les Sous-titres sont en Majuscules, avec un espacement de 6 %. Tous les autres textes des widgets prennent la police de Texte tant que vous ne changez pas la leur.

Photos de profil

Les alertes, le Premier du chat, les accueils, les shoutouts, les comptes à rebours et les cartes de spectateur, dans les sections de toutes les images (plus bas). Leur affichage se règle dans l'onglet Réglages de chaque widget.

Icônes des plateformes

Les logos Twitch, YouTube et Kick des alertes, du chat, du Premier du chat, des accueils, du compteur de spectateurs et des cartes de spectateur, dans les mêmes sections que les photos de profil. Leur place se règle dans l'onglet Réglages de chaque widget.

Barres de progression

Objectifs, sondages et comptes à rebours.

Séparateurs

Les lignes fines : sous le titre d'une carte d'objectifs, entre la question d'un sondage et ses choix, et entre les parties d'une barre de subathon.

Transition d’apparition

L'apparition et la disparition des widgets.

Auto (selon la position) fait entrer chaque widget par le bord contre lequel il se trouve et le fait sortir par le même : un widget au milieu à gauche glisse depuis la gauche, un en haut au centre depuis le haut, un coin depuis son côté dans une position en colonne et depuis son bord dans une rangée. Les barres du haut et du bas viennent de leur bord ; la position Centre, une barre au centre et les widgets plein écran grandissent depuis le milieu.

Réinitialiser les styles, à droite des onglets, remet tout l'onglet Styles généraux au style du studio. Les styles personnalisés sur la page d'un widget sont conservés.

L'onglet Style d'un widget

Chaque page de widget a un onglet Réglages et un onglet Style, dans la colonne de gauche — plus un onglet Commandes pour les widgets qu'on peut piloter à la main ; l'aperçu reste à droite. (Les Récompenses d’activité et les Webhooks Discord n'affichent rien et n'ont donc pas d'onglet Style.) L'onglet Style liste chaque élément que dessine le widget, de l'arrière vers l'avant — pour le chat : le conteneur, le fond des messages, l'icône de plateforme, le pseudo, les badges, le texte du message, les emotes… La page de chaque widget dans cette documentation liste les siens.

Conteneurs et fonds

Les mêmes premières cartes partout. Chaque widget commence par son Conteneur, la boîte qui contient tout le widget, puis son Fond, la boîte derrière son contenu (ou derrière chaque élément d'une liste : chaque message du chat, accueil, compteur…). Les deux, comme toutes les autres boîtes d'un widget (badges, marche du podium, cadre de la vidéo…), ont les mêmes sections, dans cet ordre :

Une boîte est placée par son Conteneur : l'Aligner le contenu du Conteneur aligne le Fond dans le widget. Suivre le conteneur parent, le réglage par défaut des Conteneurs et de la plupart des Fonds, suit la position du widget sur le canevas (ses alignements Horizontal et Vertical, sur la page Overlay). Choisissez un côté pour le fixer vous-même.

Les modes règlent certains champs eux-mêmes. Quand un widget tourne dans un mode, le mode prend les champs dont il a besoin, et ils disparaissent de l'onglet Style :

• En barre. Dans un widget affiché en barre horizontale (chat, objectifs et subathon, tableau des scores), la carte Conteneur est la bande : sa propre boîte, sa Hauteur dans Taille (Auto ou Fixe, puis sa Hauteur fixe ; In the overlay picked in the Créateur d’overlay : dans l'overlay choisi sur la page Overlay, les mêmes valeurs que dans l'onglet Disposition), sans largeur ni direction. Dans une barre, seule la barre dessine un fond : les autres boîtes du widget sont transparentes par défaut.
• Plein écran (générique de fin, pluie d'emotes et de gifs) : le Conteneur couvre tout l'écran, il n'a donc ni Taille ni Espacement.
• Les réglages du widget : une direction ou une disposition réglée dans l'onglet Réglages (le côté de l'image d'une alerte, les dispositions du tableau des scores, le podium de Chat First) est la Direction de cette boîte.

Images et icônes

Les mêmes sections sur toutes les images. Photos de profil, icônes de plateforme, badges, emotes, gifs et stickers ont leurs propres cartes, dans cet ordre (une section ne s'affiche que là où elle sert) :

Tant que le fond est transparent, l'ombre et le halo suivent la forme d'une icône ou d'une emote ; avec un fond, ils suivent sa boîte.

Ce que vous stylisez est souligné. L'élément choisi dans l'onglet Style apparaît dans l'aperçu avec un fin contour mauve (un texte, avec un halo ajouté), par-dessus son propre rendu : son ombre et son halo restent visibles pendant que vous les modifiez.

Aucune image ne se choisit dans l'onglet Style. L'image affichée par un widget (la photo de profil du spectateur ou une image que vous importez : celle de chaque alerte, de chaque compte à rebours) se règle dans son onglet Réglages ; l'onglet Style ne règle que son rendu.

Styles globaux ou personnalisés

Chaque élément affiche tous ses champs, sur les valeurs qu'il utilise en ce moment. Il suit un style champ par champ :

• Liés au style d'overlay — il suit l'onglet Styles généraux, quoi que vous y changiez ensuite.
• Propres au widget (badges, emotes, stickers, boîtes intérieures comme la marche du podium du Premier du chat ou les badges de statut du subathon, textes du générique…) — il suit le rendu par défaut du widget.

Modifiez un champ et ce champ devient celui de l'élément : une petite flèche de réinitialisation apparaît à côté de son nom, et tous les autres champs continuent de suivre. La flèche remet la valeur suivie.

L'interrupteur du haut, Styles globaux / Personnalisé (Styles par défaut / Personnalisé pour les éléments propres au widget), indique où en est l'élément : il passe en Personnalisé dès qu'un champ est modifié, et revient sur Styles globaux une fois le dernier réinitialisé. Cliquez sur Styles globaux quand il affiche Personnalisé pour réinitialiser d'un coup tous les champs modifiés ; une fenêtre vous demande d'abord de confirmer.

Quelques éléments liés au style d'overlay gardent une couleur à eux et le suivent pour le reste : messages mis en avant et du chat partagé, annonces et récompenses de points de chaîne, compte à rebours et barre gagnante d'un sondage, score d'un record du tableau des scores, contributeur et temps ajouté du subathon.

Afficher. L'affichage d'une image, d'une icône, des badges ou des emotes est un interrupteur de l'onglet Réglages du widget (Afficher la photo de profil, Afficher l’icône de plateforme…), jamais de sa carte de style.

Style pour. Chaque widget qui affiche quelque chose par plateforme (Chat, Premier du chat, Accueil des chatteurs, Alertes, Objectifs et subathon, Compteur de spectateurs, Sondages et prédictions, Générique de fin, Tableau des scores, Cartes de viewers) peut donner à une plateforme son propre style : choisissez-la dans Style pour, à côté de l'interrupteur (Tous, puis chaque plateforme activée ; Alertes liste aussi vos intégrations), puis modifiez les champs voulus. L'interrupteur affiche alors Comme Tous / Personnalisé : tout ce que vous ne changez pas suit Tous. Ce qui est dessiné une seule fois autour de toutes les plateformes (le Conteneur, le fond du Compteur de spectateurs, le timer et l'historique des Objectifs, la colonne et les titres du Générique de fin…) n'a pas de Style pour : il se règle pour tout le widget.

Quelques réglages de widget se trouvent dans l'onglet Style, à côté de ce qu'ils changent : la durée de défilement du générique.

L'onglet Style ne liste que ce que les réglages du widget affichent : désactivez une partie dans l'onglet Réglages (un type de message du chat, le titre du clip, le podium du Premier du chat…) et son élément quitte la liste jusqu'à ce que vous la réactiviez. Son style est conservé.

Le bouton Réinitialiser de la page d'un widget remet tous les réglages et styles de ce widget à leurs valeurs par défaut — le rendu par défaut du widget lui-même, qui pour le générique a déjà un champ à lui (sa transition en fondu).

Et ensuite

L'apparence décide de quoi ça a l'air. L'onglet Disposition décide où ça se trouve : quel widget où, à quelle taille, sur quel canevas.