Customize Channel Browsing Theme for Appspace App for Devices (2.0)

This article provides the instructions and device properties available to customize your channel browsing experience by incorporating your personal branding elements and color schemes when displayed on your device running Appspace App for Devices 2.0.

This article provides instructions to customize your channel browsing experience, incorporate your branding elements and color scheme into the Appspace App 2.0 using multiple device properties available.

Prerequisites

• Account Owners, Location Admin, or Portal Admin (On-prem) roles

Customize Logo

To use a custom logo, follow the instructions below:

1. Navigate to Admin > App Configuration > App Theme tab from the Appspace menu navigation bar.
2. In the Theme Selection section, select either Light or Dark for the TV (device) option.
3. In the Light Theme Settings, click the logo image, and select an image from the Library, or upload an image with the recommended dimensions (80px x 200px). Repeat this for the Dark Theme Settings.
4. Click Save.

Customize Background Color

To use a solid color for the background, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.background.color
• Property value: Hex or RGBa code

Customize Background with Custom Content

To use a custom image, card, or video, as the background from the console, follow the instructions below:

1. Create a Playlist Channel with the name “interactive-theme-background“.
2. Add the desired content to be displayed as the background to the playlist channel.
   The following content type may be used as the background:
   • Image
   • Video
   • Cards
3. Publish the playlist channel to the desired device or device group.

Enable or Disable Background Scroll

To enable or disable the background scroll, add the following device property:

• Device property: player.play.themesettings.home.background.scroll
• Property value: True or False

Customize Background Behavior

To customize the background behavior when a user scrolls up or down the screen, add the following device property:

• Device property: player.play.themesettings.home.background.behavior
• Property value: scroll, blur, or none

Configure Channel Title Color

To customize the Channel title color, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.channel.title.color
• Property value: Hex or RGBa code

Configure Channel Group Title

To enable or disable the Channel Group title, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.channelgroup.title.enable
• Property value: true or false

Configure Channel Group Title Color

To customize the Channel Group title color, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.channelgroup.title.color
• Property value: Hex or RGBa code

Enable or Disable the Clock

To enable or disable the clock, add the following device property for the selected device(s). 

• Device property: player.play.themesettings.home.clock.enable
• Property value: True or False

Configure Clock Format

To configure the clock format, add the following device property for the selected device(s). The table below lists down the supported time formats.

• Device property: player.play.themesettings.home.clock.format
• Property value: HH:mmA (clock will display as 14:29PM)

Customize Clock Text Color

To use a solid color for the background, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.clock.color
• Property value: Hex or RGBa code

Configure Cursor Visibility

To enable or disable the cursor visibility on the screen, add the following device property for the selected BrightSign device(s) only.

• Device property: player.cursor.visibility
• Property value: hidden / auto / visible

Configure Persistent Back Button

To enable the persistent back button of a live channel, playlist, or advanced channel when displayed in full screen.

• Device property: player.play.themesettings.channel.fullscreen.back
• Property value: true or false

Configure Persistant Back Button Placement

To determine the placement of the persistant back button of a live channel, playlist, or advanced channel when displayed in full screen.

• Device property: player.play.themesettings.channel.fullscreen.back.placement
• Property value: topleft, topright, bottomright or bottomleft

Configure Search

To enable or disable the Search function on the sidebar, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.search.enable
• Property value: true or false

Configure Channel Rows

To configure the number of rows displayed on the channel, add the following device property for the selected device(s). 

• Device property: player.play.themesettings.home.channelrows.count
• Property value: Integer

Configure Channel Columns

To configure the number of columns displayed on the channel, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.channelcolumns.count
• Property value: Integer

Configure Playlist Behavior

To configure the playlist to return to the Home screen once the playlist ends, add the following device property for the selected device(s).

• Device property: player.play.themesettings.playlist.endofplaylistbehaviour
• Property value: goback or none

Configure Idle Behavior and Duration

To configure the device to play a single or default content when the device is idle, add the following device property for the selected device(s).

For idle behavior to work correctly, both the Player.Play.Idle.Behaviour and Player.Play.Idle.Duration device properties must be added to the device.

• Device property: Player.Play.Idle.Behaviour
• Property value:
  • lastused
  • live=<channel_number>
  • sign=<sign_ID>
  • channel=/<Channel Group Name>/<Channel Name>
  • channel=/Channels/<Channel Name>
  • channel=Live Video Streams/<Live Channel Name>

• Device property: Player.Play.Idle.Duration
• Property value: <idle timeout in seconds>

Configure Sidebar Behavior

To enable or disable the sidebar menu, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.sidebar.enable
• Property value: true or false

Customize Sidebar Text Color

To customize the sidebar menu text color, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.sidebar.color
• Property value: Hex or RGBa code

Customize Sidebar Highlight and Accent Color

To customize the sidebar menu highlight and accent color, add the following device property for the selected device(s).

• Device property: player.play.themesettings.colors.accent
• Property value: Hex or RGBa code

To customize the sidebar menu highlight and accent color from the console, follow the instructions below:

1. Navigate to Admin > App Configuration > App Theme tab from the Appspace menu navigation bar.
2. In the Theme Selection section, select either Light or Dark for the TV (device) option.
3. In the Light Theme Settings, click the accent color picker, and select the desired color. Repeat this for the Dark Theme Settings.
4. Once done, click Save.

Customize Sidebar Background Color

To customize the sidebar menu background color, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.sidebar.backgroundcolor
• Property value: Hex or RGBa code

Sort Live Channels in the Home and Channel Group Screens

To sort the live channels either by name, number, or code on the home and channel group screens.

• Device property: Player.play.themesettings.home.livechannels.sortby
• Property value: Name, Number, or Code

Enable or Disable the Recently Added Group

To enable or disable the Recently Added group on the home screen, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.recent.enable
• Property value: True or False

Configure Channel Group Summary

To display Content vs Channels for Channel Groups, add the following device property for the selected device(s).

• Device property: player.play.themesettings.home.channelgroup.summary
• Property value: Content or Channel