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.
- For more device properties available in Appspace, please refer to Appspace Device Properties Dictionary.
- Also check out Navigate 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
- Network Administrator
- Portal Administrator (on-prem)
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:
- Navigate to Admin > App Configuration > App Theme tab from the Appspace menu navigation bar.
- In the Theme Selection section, select either Light or Dark for the TV (device) option.
- 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.
- 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:
- Create a Playlist Channel with the name “interactive-theme-background“.
- 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
- 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 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
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)
| Input | Example | Description |
|---|---|---|
| H HH | 0..23 | Hours (24 hour time) |
| h hh | 1..12 | Hours (12 hour time used with a A.) |
| k kk | 1..24 | Hours (24 hour time from 1 to 24) |
| a A | am pm | Post or ante meridiem (Note the one character a p are also considered valid) |
| m mm | 0..59 | Minutes |
| s ss | 0..59 | Seconds |
| S SS SSS | 0..999 | Fractional seconds |
| Z ZZ | +12:00 | Offset from UTC as +-HH:mm, +-HHmm, or Z |
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 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 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:
- Navigate to Admin > App Configuration > App Theme tab from the Appspace menu navigation bar.
- In the Theme Selection section, select either Light or Dark for the TV (device) option.
- In the Light Theme Settings, click the accent color picker, and select the desired color. Repeat this for the Dark Theme Settings.
- 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
