Documentation
  • Welcome to Odyssey
  • Upload a project
    • Getting Started
    • Set up your project
    • Package for Linux (it's easy)
    • Upload your project
    • Create and publish your space
  • Instant Multiplayer
    • Quickstart
    • Spatial voice & video
      • Add spatial comms to player
      • Huddle
      • Share your screen
    • Avatars
      • Using Avatars
      • Avatar Blueprints
  • Realtime Configurator
    • Quickstart
    • Sketchfab importer
    • Actor importer
    • Level & object configurator
      • Level configurator
      • Object configurator
      • Configurator blueprint API
    • Media importer
      • Vimeo & web panels
      • Dolby.io in-world streams
  • Embed in a website
    • Enable embedding
    • Pass messages to and from Unreal
      • Sending messages to Unreal
      • Receiving messages from Unreal
    • Manage your stream
      • Stream loading states
      • Session states
      • Stream quality settings
      • Dynamic styling
  • Admin
    • Sharing and permissions
    • Subscriptions
    • Purchase stream hours
  • FAQ
    • Our GPUs (Coreweave)
    • Concurrent user limits
    • Vulkan renderer
    • In-world video support on Linux
  • Guides
    • Add the Odyssey plugin
    • Validate your project settings
    • Troubleshoot "Project zip is invalid"
Powered by GitBook
On this page
  • Overview
  • Example payloads
  • Update cursor
  • Update button background and text color
  1. Embed in a website
  2. Manage your stream

Dynamic styling

Overview

Update the CSS of Odyssey UI elements using Odyssey's MessageChannel API. Simply provide a selector string to the desired element, accompanied by an array of styling changes to be applied. Using this powerful feature you can rebrand tooltips, move collaboration UI to different locations, change the mouse cursor, and customize the look and feel of Odyssey to however you like.

To apply custom styling, initiate a message with type === "update-document-style". Include a data property with elementSelector specifying the target element by its string identifier. Additionally, provide a styleUpdates array, containing objects with both a property and value field. property defines the CSS property to modify and value indicates the desired styling value.

Example payloads

Update cursor

{
  "type": "update-document-style",
  "data": {
    "elementSelector": "#player",
    "styleUpdates": [
      {"property": "cursor", "value": "pointer"},
    ]
  }
}

Update button background and text color

{
  "type": "update-document-style",
  "data": {
    "elementSelector": ".app-button",
    "styleUpdates": [
      {"property": "background", "value": "#000000"},
      {"property": "color", "value": "#FFFFFF"},
    ]
  }
}

Last updated 1 year ago