Skip to main content

Develop a theme

Once you become familiar with the concept of theme, you will probably want to develop your own. This page therefore serves as a quick "tutorial" so that you can master the main blocks constituting the creation of a theme applicable to overlays and/or docks.

To find out how to host your theme, go to the dedicated page.

Skeleton​

The basic skeleton of a Multistream Tools theme is as follows:

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

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

/* Your own styles go here. */

Then it will simply be a matter of redefining the value of the variables exposed by our CSS framework and/or those exposed by the overlay or dock that you want to modify ; or even define new ones.

In addition to variables, you can optionally act on all the selectors of your choice in order to completely change the visual appearance of the HTML page, everything is possible!

tip

Take inspiration from the source code of our ready-to-use themes to create new themes in no time!

Overlay​

In order to stylize an overlay - official or third party - using our overlay.css file, refer to their documentation to identify the variables and selectors available to change their behavior.

Here is an example based on our overlay named Featured:

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

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

Here we redefine two system variables named --fontSize and --spacing, a variable specific to the Featured overlay named --background and add a new one (specific to our theme) named --bodyBackground . The latter is then used to change the background color of the body element.

Dock​

In order to stylize a dock - official or third party - using our dock.css file, refer to their documentation to identify the variables and selectors available to change their behavior.

Here is an example based on our dock, also applicable to all those accompanying our ready-to-use overlays:

: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

Here we redefine a system variable named --color1, two dock-specific variables named --textTier2 and --textTier3, then add a new one (specific to our theme) named --messageDisplay. The latter is then used to hide messages related to events displayed in the activity feed.

Extend a theme​

It is common to want to extend an existing theme in order to simply make some slight changes to it. To do this, nothing could be simpler, just import the desired theme in addition to following the procedure previously described for overlays or docks.

Here is an example based on our dock, also applicable to all those accompanying our ready-to-use overlays:

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

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

/* Your own styles go here. */
info

Here we simply rely on the import functionality natively offered by CSS. You can extend multiple themes at once by adding as many imports as you want, however this practice is not recommended for performance reasons.

You see, it's very simple in terms of code; now it's up to you to develop your own themes!