What are the "Appearance" settings?

In the "Appearance" settings category, you have the option of individually adapting your events to your CI or the branding of your customers. 

You can set the branding for all your events or for individual events.

Please note: These settings only apply to the Stage area and not to Backstage. 

Further information on Stage and Backstage can be found here.

Where can I find the Appearance settings?

Define the appearance for all events of the tenant

The configuration of the appearance can be found in the tenant settings under the tab "Appearance".

These settings apply to all events of the tenant or client, as long as no individual definition has been set in individual events.

Setting the appearance for a single event

You can configure the appearance for a single event in the event settings under "Appearance".

These settings apply to the entire event including all breakout rooms.

What settings can I make?

The following options are available for configuring the appearance:

  1. Color settings
  2. Fonts
  3. Logo
  4. Header
  5. Individual content pages
  6. Favicon and page title
  7. Customised onboarding page

The options are explained in detail below:

1. Color Settings

This picture overview shows which area of the stage influences the respective color setting:

Accent color

In the following image section, the areas that are colored by the accent color are shown in red.

Background color

The background color influences the areas that are colored red in the following. 

Note: You can adjust the background color of the header individually and decouple it from the background color used here.

Font color

The font color influences the color of the font.

Canvas color

The Canvas describes the area behind your livestream or conference.

Hover Color

The Hover color describes the color that a selectable element takes on when you hover over it with your mouse pointer.

Active color

The Active color describes the colour that a selected (active) element/ panel takes on.

Active hover Color

The Active hover color tints areas of already selected elements (active) over which you hover with the mouse.

2. Fonts

Streamboxy offers you the possibility to adjust the font of the platform. Here you can distinguish between title and standard fonts. To integrate your own font, you need a link to your font file (.ttf, .otf).

3. Logo

Upload an individual logo for your events by clicking on "Upload new logo".

Depending on the selected option (visibility), you will see this on the left in the upper bar directly under your header in the stage. 

The logo is also used to communicate the status of the session to your participants, provided you have selected the default option under the menu item 'Individual content pages'. 

By default, the logo is used in the email invitation to your participants. You can change this in the email settings.

4. Header

You can find a detailed help article on customising your header here.

5. Favicon and page title

To individualize the information displayed to you and your participants in the tab, you can upload your own favicon in the settings ("Upload new favicon") and define your page title

Note: If you do not see all your images, check that your search settings filter for "Icon". ICO files are recommended.

6. Individual Onboarding Page

The Onboarding Page is displayed before entering the event and requires confirmation of the terms and conditions and privacy policy. 

By adding a custom HTML you have the possibility to design the background (coloured red) yourself (eg. by adding a picture or animated background).

You can use this code example as a guide and expand it further:

<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #ab2b2b"></div>

Note: In the privacy settings you have, among other things, the option not to display this page.

7. Standard Backstage Theme

Here you can set whether you want your backstage to appear light or dark. To do this, click on either "Light Theme" or "Dark Theme" to select the standard appearance.

Example for Light Theme: 

Example for Dark Theme: