Aller au contenu principal

Développer un thème

Une fois familiarisé avec le concept de thème, vous aurez probablement la volonté de développer les vôtres. Cette page fait donc office de "tutoriel" rapide afin que vous puissiez maîtriser les blocs principaux constituant la réalisation d'un thème applicable à des overlays et/ou docks.

Pour savoir comment héberger votre thème, rendez-vous sur la page dédiée.

Squelette​

Le squelette de base d'un thème Multistream Tools est le suivant :

:root {
  /* CSS variables go here. */
}

/* Optional, French related changes for example. */
:root[lang|='fr'] {
  /* Translated CSS variables go here. */
}

/* Your own styles go here. */

Ensuite il s'agira simplement de redéfinir la valeur des variables exposées par notre framework CSS et/ou de celles exposées par l'overlay ou le dock que vous souhaitez modifier ; ou encore d'en définir de nouvelles.

En complément des variables, vous pouvez éventuellement agir sur tous les sélecteurs de votre choix afin de changer complètement l'aspect visuel de la page HTML, tout est réalisable !

astuce

Inspirez vous du code source de nos thèmes prêt à l'emploi pour créer de nouveaux thèmes en un rien de temps !

Overlay​

Afin de styliser un overlay - officiel ou tiers - utilisant notre fichier overlay.css, référez-vous à la documentation de ceux-ci pour identifier les variables et sélecteurs disponibles pour en changer le comportement.

Voici un exemple basé sur notre overlay nommé Featured :

:root {
  /* System variables */
  --fontSize: 30px;
  --spacing: 1.5rem;
  /* Overlay variable */
  --background: red;
  /* New variable */
  --bodyBackground: blue;
}

body {
  background: var(---bodyBackground);
}
info

Ici nous redéfinissions deux variables système nommées --fontSize et --spacing, une variable propre à l'overlay Featured nommée --background et en ajoutons une nouvelle (propre à notre thème) nommée --bodyBackground. Cette dernière est ensuite utilisée pour changer la couleur de fond de l'élément body.

Dock​

Afin de styliser un dock - officiel ou tiers - utilisant notre fichier dock.css, référez-vous à la documentation de ceux-ci pour identifier les variables et sélecteurs disponibles pour en changer le comportement.

Voici un exemple basé sur notre dock, s'appliquant également à tous ceux accompagnant nos overlays prêts à l'emploi :

:root {
  /* System variable */
  --color1: red;
  /* Dock variables */
  --textTier2: 'tier 2 ';
  --textTier3: 'tier 3 ';
  /* New variable */
  --messageDisplay: none;
}

.event[data-message]::after,
.event > .message {
  display: var(--messageDisplay);
}
info

Ici nous redéfinissions une variable système nommée --color1, deux variables propres au dock nommées --textTier2 et --textTier3, puis en ajoutons une nouvelle (propre à notre thème) nommée --messageDisplay. Cette dernière est ensuite utilisée pour masquer les messages liés aux événements affichés dans le flux d'activités.

Étendre un thème​

Il est courant de vouloir étendre un thème existant afin d'apporter simplement quelques légers changements à celui-ci. Pour ce faire, rien de plus simple, il suffit d'importer le thème souhaité en plus de suivre la procédure précédemment décrite pour les overlays ou les docks.

Voici un exemple basé sur notre dock, s'appliquant également à tous ceux accompagnant nos overlays prêts à l'emploi :

@import 'https://obs.multistream.tools/v1/themes/streamelements/dock.css';

:root {
  /* CSS variables go here. */
}

/* Your own styles go here. */
info

Ici nous nous appuyons simplement sur la fonctionnalité d'import nativement offerte par CSS. Vous pouvez étendre plusieurs thèmes à la fois en ajoutant autant d'imports que vous le souhaitez, cette pratique n'est cependant pas recommandée pour des raisons de performance.

Vous voyez, c'est très simple en terme de code ; à vous maintenant de développer votres propres thèmes !