Customize Appspace App 2.0 Channel Browsing

This article provides instructions on how to customize your channel browsing experience, and incorporate your branding elements and color scheme in to Appspace App 2.0.

This article has the following sections:

Prerequisites

• Appspace 7.1 or higher.
• Appspace App 2.0
• One of the following Appspace roles:
  • Account Owner
  • Account Administrator
  • Network Administrator
  • Portal Administrator

Customize Channel Browsing

To customize any of the following, please log in to the Appspace console first at https://cloud.appspace.com.

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.

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 code 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 code or RGBa code

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 code or RGBa code

Configure Cursor Visibility

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

• Device property: player.cursor.visibility.enable
• Property value: True or False

Configure Persistant Back Button

To enable 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
• 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 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 code 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 code 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 code or RGBa code

 

Check out our Navigate the Appspace App 2.0 article.