Stream Overlay CSS

Watch our Stream Overlay tutorial video for a visual guide.

Structure

The Overlays generated by this module have specific CSS classes and IDs attached to them.

They are structured and nested and can be overridden using OBS’s CSS Feature.

The topmost element also has the class “obs-utils” in case multiple overlay plugins are rendering something on /stream.

• .overlay
  • .actor #actor[actor id]

    Actor ID is the Foundry Actor ID (i.e. “abc123456789”)

    • .[overlay-type] #overlay[overlay id]

      Overlay ID is the Array Index

      Available overlay types are:

      • single-line-overlay

      • .component .[component-type] #component[component id]

        Component ID is the Array Index

        Available component types are:

        • actor-val-component
        • fa-icon-component
        • plain-text-component

Overriding in the Editor

There also is the option to edit the styles directly within the editor

These will create inline style data on the HTML tags for either the overlay or the component.