OBS : Personnalisation de l'overlay Discord

Note de mai 2024 : L'article est maintenant public, mais la manipulation du CSS n'a pas été vérifié si elle marche toujours. J'ouvre l'article au public, la méthode doit toujours fonctionner, mais les sélecteurs CSS sont possiblement à revoir !

Discord propose au travers de son Streamkit un moyen de montrer sur son stream l'activité d'un salon vocal. Mais l'affichage par défaut est un peu grand et prend pas mal de place, et Discord n’offre pas beaucoup de choix pour le personnaliser.

Néanmoins, ce système fonctionne au travers d'une page Web, et les logiciels de streaming ont une option de personnalisation du style de la page. Rien n'empêche de modifier un peu cet affichage…

Disclaimer : Discord peut effectuer des changements sur cette page qui obligent à récrire une partie de ce code CSS. Il faut rester à l'affût et ne pas être surpris si quelque chose ne marche plus, parce que ça a déjà été le cas par 2 fois ! Il y a donc un risque que ces modifications ne soient plus du tout possibles un jour. Ce que vous aurez créé peut de ne plus jamais fonctionner un jour ou l'autre.

Disclaimer² : ce post sera assez technique, notamment au niveau du fonctionnement du CSS. Si vous avez des difficultés, je vous invite à aller voir les introductions de la fondation Mozilla sur le HTML et le CSS.

Discord Streamkit

Discord propose un affichage de l'activité d'un salon vocal au travers de leur Streamkit. On sélectionne un serveur, le salon vocal à afficher et on obtient une URL qu'on peut utiliser sur OBS et consorts pour afficher le salon vocal sur son stream en tant que source de navigateur (Page d'aide Discord à ce sujet). Sur cette même page, on peut aussi changer quelques paramètres de taille et de couleur.

Mais il se peut que le rendu proposé ne colle pas vraiment avec l'overlay que vous avez, ou que vous voulez mieux l'intégrer dans votre visuel global : des avatars carrés au lieu de ronds, affichage horizontal plutôt que vertical, dégradés, images personnalisées… C'est possible, mais il faut mettre la main dans le cambouis.

Attention : le lien fourni est différent pour chaque salon vocal. Cela n'a pas d'incidence sur le style qu'on va créer, mais si la page est complètement vide, ce n'est peut-être pas le bon salon vocal qui est affiché.

Reactive, by FujiTech

Avant de rentrer dans le vif du sujet, il existe néanmoins un second affichage d'un salon vocal. Celui-ci est proposé par FujiTech et propose d'autres options de personnalisation de l'affichage d'un salon vocal. Le lien "Group browser source" à gauche permet d'afficher l'état du salon vocal, et s'ajoute comme le Streamkit, dans une source "navigateur".

À noter que contrairement au Streamkit de Discord, Reactive affiche automatiquement le salon vocal dans lequel vous vous trouvez. Pas de sélection d'un salon donc.

L'outil va demander une connexion à votre compte Discord, surtout pour récupérer votre image de profil et savoir dans quel vocal vous vous trouvez (pour l'afficher justement). Si cela ne vous convient pas, vous pouvez supprimer la permission dans les paramètres Discord, section "Applications autorisées".

Reactive, de FujiTech

La magie du CSS

Comme indiqué au-dessus, l'affichage du Streamkit se fait au travers d'une source navigateur sur le logiciel de streaming. C'est donc une page Web qui est affichée.

Je vais essayer de faire vite, mais une page Web contient une structure de contenu au travers de balises contenant du texte qui donnent l'information aux navigateurs de comment afficher une page. Pour rajouter du style à une page, on ajoute très souvent des informations (identifiant, classes, et autres instructions plus avancées) à ces balises. Avec le CSS, on "cible" ces balises et informations pour donner des instructions sur style à appliquer.

Exemple : je veux que le texte dans les balises avec une classe 'rouge' soit en rouge.

Pour que Discord mette du style sur le Streamkit, c'est pareil : il y a des identifiants, des classes, et Discord leur donne des consignes de style.

Côté logiciel de streaming, il y a très souvent un champ vide ou jamais modifié lorsqu'on rajoute une source : la section "CSS personnalisé". Toutes les instructions de style présentes à l'intérieur de ce champ vont écraser le style de base fourni sur la page. Et c'est exactement ce qu'on va utiliser pour altérer l'apparence de l'overlay !

Votre meilleur ami : les outils de développement

Pour voir la structure de l'overlay et tester des changements, l'outil de développement intégré à votre navigateur favori sera votre plus grand allié (sauf si vous utilisez encore Internet Explorer, auquel cas j'aurais beaucoup de questions).

Copiez-collez l'URL fournie par Discord et ouvrez-la dans un nouvel onglet. Quel que soit le navigateur, ouvrez l'outil de développement avec le bouton magique "F12", ou clic droit > "Inspecter". Et il ne faut pas avoir peur, parce que ce sera le terrain de jeu.

L'outil de développement montre donc la structure de l'overlay sur la gauche, avec la possibilité de déplier/replier certains éléments. Sur la partie droite, les styles appliqués à l'élément sélectionné (la plupart du temps affiché en surbrillance sur la page, pour s'y retrouver). Sur les onglets principaux affichés tout en haut, seul le "Éditeur de style" pourrait être pratique (il n'est présent que sur Firefox), puisqu'il donne un résumé de toutes les modifications de style effectuées.

Tout en haut à gauche devrait se trouver une icône d'option de "sélection d'un élément sur la page". Cliquez dessus, puis sélectionnez un élément précis de la page, l'outil de développement va dérouler son interface jusqu'à l'élément sélectionné. Très utile pour effectuer des changements sur un élément précis.

Attention néanmoins : rafraichir la page fait disparaitre toutes les modifications de style que vous auriez pu écrire. Pensez à copier ces changements sur n'importe quel fichier texte à côté.

Effectuer des changements

De mon côté, j'avais juste besoin de gérer l'agencement des personnes sur le vocal. La transformation que je vais montrer est extrêmement basique et n'est qu'une introduction à l'édition.

Afficher les personnes sur une seule ligne ? C'est possible. Agrandir l'image de profil ? Aussi. Les modifications CSS à faire peuvent demander à "effacer" le style appliqué par Discord (les valeurs à utiliser sont très souvent 0, none ou unset) avant d'appliquer le nôtre.

Pour que Discord applique son style, il se sert justement des classes pour cibler les éléments. On va faire la même chose : utiliser ces classes pour écraser le style.

À une différence près : depuis décembre 2022, le format de ces classes a changé et chacune est maintenant suffixée d'une suite de caractère inconnue à l'avance. Discord, lui, peut les connaître et donner les instructions en fournissant le nom de la classe complet. On ne sait que le début, mais heureusement qu'il existe un sélecteur d'attribut : on peut sélectionner des classes "qui commencent par", "qui contiennent", etc.

Et c'est à partir de là que je perds tout le monde, alors on va faire du concret : le style de l'image est donné au travers de la classe Voice_avatar__htiqH. Ce __htiqH peut changer à tout moment, donc je ne peux cibler mon style qu'avec "qui commence par Voice_avatar". C'est fait grâce à img[class^="Voice_avatar_"] = les balises image dont la classe commence par Voice_avatar_.

Sur l'outil de développement du navigateur, on va utiliser la colonne de droite : elle contient la liste des styles appliqués, et chaque ligne peut être désactivée pour voir ses impacts.

En haut de cette colonne de droite devrait se trouver un joli +. Celui-ci permet de créer une classe dans l'outil de développement. Et c'est ce qui va être utilisé pour cibler un élément et lui appliquer du style.

La pratique, ça flex

Maintenant, comment faire mes modifications d'agencement ? On va détailler la structure pour savoir quoi cibler :

Chaque élément a une balise, ainsi qu'une classe. C'est très utile, ce qui peut donner cette liste pour changer le style d'affichage de :

• ul[class^="Voice_voiceStates_"] : la liste des personnes dans le salon
• li[class^="Voice_voiceState_"] : un utilisateur
• div[class^="Voice_user_"] : du pseudo des utilisateurs
• span[class^="Voice_name_"] : pareil, le pseudo (mais en plus précis)
• img[class^="Voice_avatar_"] : l'image des utilisateurs
• img[class*="Voice_avatarSpeaking_"] : l'image des utilisateurs qui sont en train de parler

Un cas pratique ? Je souhaite changer l'affichage des utilisateurs, que le pseudo se retrouve sous l'image de profil. J'applique la modification en ciblant avec li[class^="Voice_voiceState_"]. Le problème ? Chaque cas est unique (et c'est pour ça que j'adore l'informatique). Ce qui veut dire que dans d'autres circonstances, c'est peut-être un élément différent qu'il faudra cibler pour faire les modifications. Et ce sera à vous de trouver lequel.

Reprenons mon cas : comment faire afficher le pseudo sous l'image ?

En décomposant un peu la structure de la page et le style appliqué, on remarque que l'image a une instruction de float: left , qui force l'image à s'aligner à gauche. Je pourrais cibler img[class^="Voice_avatar_"]et "supprimer" le changement (avec float: unset). C'est une astuce (qui marche !), mais on est sur une solution des années 90, alors on va utiliser quelque chose de plus récent : les Flexbox.

Les flexbox sont la nouvelle façon d’arranger les éléments sur une page HTML. Il y a aussi les grilles, mais je ne maitrise pas.

Les possibilités d'agencement sont très nombreuses et permettent de régler 99 % des cas (si vous n’avez jamais fait attention, le site de Petitstream est rempli de ces flexbox).

Reprenons l'exemple, sans les changements sur le float. La flexbox doit être appliquée sur le "parent" de ce que je veux modifier. Le parent de img[class^="Voice_avatar_"]est li[class^="Voice_voiceState_"].

On applique l'affichage "flex" avec une direction "column" et… voilà ! Il se passe exactement la même chose qu'avec le float, mais en plus "moderne".

Cela peut paraitre réducteur, mais pour certain cas, le flex sera l’unique possibilité pour changer le style d'affichage : si j’envisage d'afficher le pseudo au-dessus de l'image de profil sans tout casser, ou le pseudo à gauche de l'image, les Flexbox sont la seule solution où il y aura le moins de problèmes derrière (peut-être les grilles aussi, j'en sais rien).

Sauvegarder les changements

Ça y est, la première modification est faite. Sauvegarder ces changements au fur et à mesure sur un fichier texte à part est très utile. Bien qu'on ne puisse pas importer un fichier texte de style dans le champ dédié dans la source "navigateur", on peut néanmoins y copier-coller son contenu pour modifier l'affichage de l'overlay.

Reprendre les modicications

Maintenant que vous avez un nouvel overlay, si vous souhaitez le modifier à nouveau en conservant les changements actuels, il n'y a pas beaucoup de possibilités. Pour tous les navigateurs, vous pouvez copier-coller les styles dans l'outil de développement en les ajoutant à nouveau classe par classe. Mais il n'y a que Firefox qui propose un onglet "Éditeur de style", qui permet de copier-coller tout le contenu de votre champ de CSS personnalisé ou de votre fichier en une seule action

Et plus si affinité

Dans mon exemple de changement, j'ai juste effectué une modification de disposition. Mais pour tous les éléments, on peut changer la taille du texte, sa hauteur, largeur, espacements, couleur de fond, et même enlever les bords arrondis.

Je n'ai pas non plus présenté des fonctionnalités plus avancées du CSS, comme les animations, la modification des images (mais voir la partie Modiciations d'avril pour ça), les dégradés… Le CSS est un vaste monde, et il ne tient qu'à vous de jouer avec et construire ce qu'il vous plaît.

Si vous voulez savoir le comportement d'une instruction spécifique, je conseille fortement d'aller regarder la documentation de la fondation Mozilla, très complète.

Des overlays complets

C'est bien beau de faire une présentation avec un aperçu, mais il existe déjà quelques overlays sur Internet, dont on peut récupérer le code et le copier-coller dans le logiciel de streaming. Il y a pas mal de code sur Github ou globalement sur Internet ("streamkit custom overlay"), mais voici quelques exemples :

• sûrement le plus utilisé, celui de BryBry, affiche les utilisateurs sur une seule ligne, agrandit les images de profil et place le pseudo sous l'image : lien Twitter
• une liste de différents overlays, qui peut donner une idée plus précise de ce qui est possible. Attention néanmoins : la page est rédigée en japonais et se base sur les modifications d'avant décembre 2022. Le ciblage des éléments est donc à refaire : lien GitHub Pages
• une autre liste d'overlays, à jour. Ça tombe bien : ce sont ceux que j'ai écrits ! Propose principalement un overlay plus "carré" : lien Github

N'hésitez pas d'ailleurs à regarder en détail comment sont effectuées les modifications (avec l'outil de développement du navigateur). Cela vous donnera une meilleure idée de comment effectuer vos modifications.

Modifications d'avril, et le futur

Modifier le nom des classes était une chose, limiter la provenance des images en est une autre ! Il semblerait qu'au début du mois d'avril, Discord ait rajouté quelques règles de sécurité sur l'overlay, restreignant l’origine des images aux noms de domaine Discord. Si vous voulez afficher une image spécifique sur votre overlay, il faudra l'uploader avant sur Discord et récupérer l'URL vers l'image.

Comme indiqué dans les disclaimers au début, Discord peut modifier l’overlay à sa seule discrétion et casser tous les styles qui auraient pu être créés. Ne faites donc pas les surpris si ça arrive !

Sources

J'ai l'habitude de mettre tous les éléments qui m'ont permis de rédiger ce pavé, mais ici, il n'y en a pas vraiment. Tout a commencé avec l’overlay proposé par BryBry, ce qui m'a montré qu'on pouvait jouer avec cet overlay par défaut et j'ai tenté des modifications avec mon expérience.

Les sources vont plutôt être en rapport avec les différents chargements que Discord aura faits sur leur système d'overlay, qui aura nécessité de récrire certains styles :

• un concernant les modifications de décembre, en anglais : lien Forums OBS
• Le second, sur les modifications de décembre et d'avril, en anglais aussi : lien Reddit

Si vous avez des remarques ou questions, n’hésitez pas à me les envoyer sur le Fediverse.

Matias49