Vous en avez marre des alertes de base de chez Streamlabs ou StreamElements, vous voulez quelque chose de plus sophistiqué ? Faire des effets originaux sur le texte, avec des animations, des changements de couleurs ou autres ? Eh bien c’est possible de faire ça avec du CSS, gratuitement. Voyons ensemble comment faire car de belles alertes de stream, c’est important ET impactant.
Le CSS, c’est quoi ?
On partira du principe que vous savez déjà configurer des alertes de stream, si ce n’est pas le cas je vous suggère plutôt le tutoriel de base pour setup les alertes, chez Streamlabs par exemple, c’est la solution la plus courante. Mais le CSS, c’est quoi ? C’est un langage informatique qui permet de mettre en forme et de donner du style à des pages web.
Avant que vous ne commenciez à paniquer, sachez que ce n’est pas si compliqué que ça en a l’air. Moi-même je suis loin d’être un expert en CSS, et j’arrive à faire des modifications par-ci par-là pour obtenir le résultat attendu. Donc rassurez-vous, pas besoin d’être programmeur, on va voir comment faire sans avoir besoin de connaissances poussées, essentiellement à base de copier/coller.
Comment utiliser le CSS ?
Pour mettre à profit le CSS, on peut donc utiliser un service comme Streamlabs ou StreamElements, voire utiliser les alertes Twitch directement, puisque la plupart permettent d’activer le « HTML/CSS personnalisé », option que vous avez peut-être aperçue en réglant vos alertes. Ça permet de modifier l’alerte, sachant qu’il y a déjà une structure, une ossature, avec parfois également des variables.
Par exemple, chez Streamlabs, la variable {messageTemplate} affiche le message indiqué dans le champ Format, champ qui pourra lui-même comporter une variable également.
Dans cet exemple, le nom du follower apparaît suivi d’un texte, mais on pourrait tout aussi bien couper la variable {name} puis la coller devant {messageTemplate} dans le code HTML. Le résultat serait le même, c’est juste pour montrer une des possibilités qui pourront être utiles si vous décidez de mettre le nez dans le code.
Ensuite on a l’onglet CSS, qui permet la mise en forme. Si je regarde dans le code HTML, je vois que le texte de mon alerte est inclus dans la div alert-message, si je cherche ce nom dans le code CSS, je vois qu’il y a un attribut qui permet, en l’occurrence, de centrer le texte, et si je lance une alerte test, le texte est bien centré.
Mais si je mets left à la place de center et que je sauvegarde les changements, si je lance une nouvelle alerte test, le texte sera désormais aligné à gauche au lieu d’être centré.
Et le CSS permet de faire plein d’autres choses, de la couleur à la taille en passant par la police, on peut aussi faire des animations de texte, même si ça devient un peu plus technique, on peut repositionner le texte d’une alerte sur une image de façon plus précise également, parce que soyons honnêtes, qui n’a jamais eu ce souci d’alignement du texte avec ses alertes ? Eh bien on peut corriger ça avec le CSS, et souvent c’est même la seule solution.
J’ajoute au passage que, si vous faites vos réglages via les aperçus disponibles sur les services d’alertes, vous aurez peut-être un résultat différent sur votre stream. Donc quand vous faites vos tests, revenez toujours rapidement sur OBS pour voir à quoi ressembleront vos alertes finales, c’est OBS qui fait foi.
Où trouver du CSS ?
Si on ne connaît rien au CSS, on peut se débrouiller quand même. Pour les besoins de cet article, j’ai lancé une recherche Google et regardé les sites proposant des effets en CSS. Par exemple, sur ce site j’ai trouvé pas mal l’effet avec les ombres dansantes, du coup il me suffirait de copier/coller le HTML et le CSS sur Streamlabs, éventuellement de l’adapter un peu, mais on peut voir qu’il n’y a pas tant de code que ça au final.
Donc si vous n’y connaissez rien, ça sera probablement la meilleure façon de trouver des choses. Et évidemment, si vous voulez creuser davantage, libre à vous de vous documenter sur le CSS, vous trouverez tout ce qu’il faut sur le site officiel, vous pourrez y trouver toutes les propriétés et tous les attributs utilisables en CSS.
Exemple simple : alignement
Pour le premier exemple, je vais reprendre le souci d’alignement du texte sur l’image de l’alerte, car c’est un problème courant qui servira de base pour les explications.
Ici, va donc utiliser du CSS personnalisé pour corriger l’alignement. La div, donc le conteneur, qui correspond au message de l’alerte est identifiée par alert-message, et elle est elle-même incluse dans une div plus large identifiée par alert-text (comme en témoigne le commentaire laisse juste au-dessus, qui n’a aucune influence sur le code mais sert littéralement à commenter).
On va ensuite chercher cet identifiant alert-text dans le CSS et ajouter un attribut de position verticale par rapport au centre de l’écran, à savoir « top: 140px;« , le point-virgule étant très important pour valider la ligne.
J’enregistre les modifications, je relance un test, et on voit que le texte a bougé vers le bas. C’est bien, mais je veux le faire bouger vers le haut, et beaucoup moins, donc là j’ai deux options, soit je change le top en bottom et je règle le décalage sur 20px par exemple, soit je laisse le top, et je règle un décalage négatif de -20px, dans ce cas le résultat sera le même.
J’enregistre les modifications, je lance l’aperçu, ça ressemble à quelque chose, même si la police est trop grosse, mais ce qui est important, rappelez-vous, c’est l’aperçu dans OBS puisque j’y ai ajouté une source navigateur pour mes alertes, avec des dimensions de 1920×1080. Donc je relance un test, je bascule sur OBS, et ô miracle, le texte est correctement positionné.
Et là je viens de corriger mes alertes en modifiant le CSS. Vous voyez que ce n’est pas si compliqué que ça en a l’air.
Petite parenthèse sur ce cas précis de positionnement vertical, parfois il n’y a même pas besoin du CSS personnalisé, on peut tricher un peu en ajoutant des sauts de lignes en HTML directement dans le format du message, avec la cette balise :
<br />
Là, sans CSS, le texte est décalé, si j’ajoute deux sauts de ligne dans le format du message de l’alerte, que j’enregistre et que je lance un test, le texte est décalé vers le haut, et sur OBS le résultat est juste parfait, donc voilà, ça peut se faire aussi comme ça.
Exemple avancé : animation
Maintenant on va monter d’un cran, car repositionner un texte ou changer sa taille, c’est facile, mais on peut aussi faire des animations vraiment stylées avec le CSS. C’est relativement abordable, même pour un débutant.
J’ai trouvé cet effet en CSS sur ce site après une recherche Google, et il se trouve que cet exemple est proposé avec son code, d’une part le HTML qui montre que le texte est placé dans une balise titre H1 avec un identifiant, balise elle-même placée dans un conteneur avec un autre identifiant. Et pour le CSS, on a toute la partie body qui sert à définir le style global de la page, donc ça on peut zapper, et on va juste copier le code correspondant à la classe du texte, et l’animation associée qui se trouve juste en dessous.
Sur Streamlabs, je vais coller tout ça dans le CSS custom, j’en profite pour ne laisser que le nom du follower dans le format du message.
De retour sur le site où se trouve mon animation, je vais copier le code HTML et le coller sur Streamlabs, dans la balise qui englobe le texte de l’alerte. Enfin, je coupe la variable du message d’alerte et je remplace le texte fixe. Au final, ça fait une div en plus, on pourrait s’en passer, mais ça fonctionne.
Pour l’exemple, je vais rajouter un attribut bottom pour recentrer le texte verticalement, comme tout à l’heure, et si j’enregistre les modifs et que je lance l’aperçu, vous voyez que ça fonctionne parfaitement. Idem en lançant un test classique, en revenant sur OBS, l’effet est visible, le texte est centré, c’est parfait.
Petit bonus pour que le nom du follower soit toujours affiché en majuscules : dans le CSS, dans la partie qui correspond au texte animé, je vais ajouter l’attribut « text-transform : uppercase; ».
J’enregistre, l’aperçu me semble OK, je lance un test de follow, et c’est confirmé également sur OBS, j’ai donc une animation de texte qu’on ne verra nulle part ailleurs.
Exemple avancé : cumul
Tout ce qu’on vient de voir, on peut le faire avec énormément d’effets et d’animations trouvables en cherchant un peu, on pourrait même demander à ChatGPT de créer un code CSS. Et on peut aller encore plus loin et cumuler les effets. Prenons un nouvel exemple concret à partir de ce qu’on vient de faire, avec le nom du follower dans un style, et le texte « New Follower » dans un autre style.
Pour l’autre style, j’ai choisi l’effet Neon sur le même site qu’avant, donc je vais copier le CSS (sans la partie body) et le coller sur Streamlabs dans le CSS custom, en fin de code par exemple.
Je fais pareil pour le HTML, que je copie et viens coller dans l’onglet HTML personnalisé, juste au-dessus du nom du follower. Je tape mon nouveau texte « New Follower », je mets un peu en forme, j’en profite pour supprimer l’ancienne image de l’alerte, j’enregistre les modifs, et là en l’état j’ai deux textes, un fixe et un avec une variable, chacun dans un style différent.
Je vais en profiter pour ajuster le positionnement vertical, donc dans le CSS je vais ajouter une section .neon-text-container (notez que ça commence par un point et que j’utilise des accolades), puis j’ajoute ces attributs :
position : relative; top : 40px;
Je vais également diminuer la taille du texte à « 2rem », il ne me reste plus qu’à sauvegarder et lancer l’aperçu, ça semble cohérent. Et si je fais une simulation de nouveau follower, un retour sur OBS montre que mon alerte est exactement comme je le voulais, avec un effet de néon sur le texte du haut, et l’effet avec les ombres 3D sur le nom du follower. Contrat rempli.
Conclusion
Donc oui, ça peut paraître technique au premier abord, et oui, il y a énormément d’attributs possibles pour mettre en forme et donner du style. Moi-même je n’en connais que quelques-uns, mais si vraiment le CSS vous intéresse, je ne peux que vous encourager à en apprendre davantage via le site officiel. Et pour rester dans la personnalisation, je vous suggère également d’en apprendre plus sur OBS avec cet article, avec des astuces que même les streamers chevronnés ignorent encore parfois.
