Module Templates

Overview

Module templates are used to customize the appearance and functionality of each module, including their main menu, secondary menus, and content pages. The appearance, layout, and configuration options for each module template are illustrated below. Templates are assigned and configured on each module panel on the Modules tab. Switching between module templates takes effect immediately without the need to save changes. Changes are visible in the interactive as soon as a relevant page is reloaded; either by a screen refresh or by navigating to a different page and then back.

 

Default Template 

Overview

The default module template, including its associated menus, pages and styles, is assigned and configured on each module panel on the Modules tab.

 

Main Menu

The Default module template can incorporate up to seven (7) main menu buttons.

 

 

Main Menu Banner

Full Height Main Menu Banner

The Full Height Main Menu Banner incorporates the module title and an optional pre-title when the Use Full Height Banner option is selected on the Main Menu Panel on the Modules tab.

 

Standard Main Menu Banner

The Standard Main Menu Banner is displayed as a thin band of color across the top of the page with no module title or pre-title. The standard banner can be useful when a physical title is used to identify the interactive, above the kiosk on a wall for example.

 

 

Standard Main Menu Banner

The Standard Main Menu Banner is displayed as a thin band of color across the top of the page when the Use Full Height Banner checkbox is unchecked.

 

Style Panel:

Common:

Banner Color

The banner color helps to visually identify the active module and is common to all of the module's menus and pages. 

 

Banner Border Color

Select a color for the hairline below the banner. 

 

 

 

Pre-Title

The optional Pre-Title is displayed on the main menu when the Use Full Height Banner option is selected on the Main Menu Panel on the Modules tab.

 

Style Panel:

Common:

Banner Pre-Title Color

The pre-title color is common to all of the module's menus and pages.

 

Pre-Title Font Size

The pre-title font size is common to all of the module's menus and pages. 

 

Pre-Title Kerning

The pre-tile kerning (character spacing) is common to all of the module's menus and pages.

 

Module Title (Banner)

The Module Title is displayed on the header when the Use Full Height Banner option is selected on the Main Menu Panel on the Modules tab.

 

Style Panel:

Common:

Banner Title Color

The title color is common to all of the module's menus and pages. 

 

Main Menu Intro Button

The Intro Button is displayed above the main menu instructional text, separating it from the other main menu buttons when the Use Intro Button option is selected on the Main Menu Panel on the Modules tab. This option is useful if there is an introductory video or other content to display that serves a different purpose than the other main menu buttons.

Main Menu Instructional Text

The Instructional Text is used to help guide end-users and can be edited on the Main Menu Panel on the Modules tab. The color of the instruction text is determined by the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the main menu instructional text, as well as other elements.

 

Main Menu Buttons

The main menu buttons are used to search for members or display member content and are configured on the Main Menu Panel on the Modules tab.

 

Style Panel:

Main Menu:

Main Menu Button Color

Select a color for the main menu buttons. 

 

Main Menu Button Label Color

Select a color for the main menu button labels (text). 

 

Main Menu Background Image

The action image for each member assigned to the module cross fades in the background in a random order. The action image for each member is assigned on the Action Image Panel on the Members tab.

 

Style Panel:

Main Menu:

Background Tint

Adding a translucent tint overlay can help make the overlaid text easier to read. Adding a tint on the Style and Layout panel on the Modules tab will affect all of the main menu background images.  

 

Image Saturation

Image saturation can be adjusted from grayscale (0) to full color saturation (1). Changing the image saturation on the Style and Layout panel on the Modules tab will affect all of the main menu background images. 

 

 

Main Menu Module Title (Footer)

The module title, as defined on each module panel on the Modules tab, is displayed as a graphic design element at the lower right to identify the active module. The shade of the text can be adjusted for dark or light backgrounds.

 

Style Panel:

Main Menu:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

Main Menu Task Bar

The Main Menu Task Bar lists all active modules and allows end-users to switch between them. Modules are configured on the Modules tab. The placement of each module's title on the task bar, and its highlight color, are configured on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the graphic line above the selected module on the main menu task bar, as well as other elements.

 

Task Bar Font Color

Select a Task Bar Font Color.

 

Task Bar Border Color

The Task Bar Border Color applies to the hairline above the taskbar.

 

 

 

 

 

 


Secondary Menus (Button Targets)

Secondary menus are used to navigate between the main menu and content pages, and to narrow down the list of members based on the attributes that are assigned to them. Secondary menus are determined by the Button Target assigned to each main menu button on the Modules tab. 

 

 


Common Secondary Menu Page Elements

The following elements are common to all secondary menu pages.

 

 

 

Pre-Title

The secondary menu Pre-Title is displayed above the module title on the banner and acts as a breadcrumb to help identify where an end-user is within the interactive. By default, each level added to the breadcrumb is the previous level's title, but can be customized by editing a menu attribute's panel options on the Attributes tab.

 

Style Panel:

Common:

Pre-Title Text Color

The pre-title text color is common to all of the module's menus and pages.

 

Pre-Title Font Size

The pre-title font size is common to all of the module's menus and pages.

 

Pre-Title Kerning

The pre-title kerning (character spacing) is common to all of the module's menus and pages.

 

 

Menu Title

The menu title matches the label of the selected button. Button labels are defined when a new button is created on the Modules tab or when a new menu attribute is created on the Attributes tab.

 

Banner Color

The banner color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Banner Color

The banner color helps to visually identify the active module and is common to all of the module's menus and pages.

 

 

Style Panel:

Common:

Banner Border Color

Select a color for the hairline below the banner.  

 

 

Background Action Image

The background action image for each member is assigned on the Action Image Panel on the Members tab. Only images assigned to members who are associated with the current search results are displayed.

 

Style Panel:

Secondary Menus:

Background Tint

Adding a translucent tint can help make the overlaid text easier to read. Adding a tint on the Style and Layout panel on the Modules tab will affect all of the secondary menu background images. 

 

Image Saturation

Image saturation can be adjusted from grayscale (0) to full color saturation (1). Changing the image saturation on the Style and Layout panel on the Modules tab will affect all of the secondary menu background images. 

 

 

Scroll Buttons

Scroll arrows are common to all menu pages and become active when content expands beyond the alloted space. End-users can also swipe to scroll. The Scroll Arrow Color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Scroll Arrow Color

Select a color for the scroll buttons.

 

 

Primary Navigation Buttons

The primary Main Menu and Previous Menu buttons are common to all pages and allow end-users to navigate back to the main menu, or if applicable, the previous secondary menu. Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to active navigation buttons, as well as other elements.  

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

Sort Buttons

Sort Buttons are configured on the Filter/Layout Options panel for each button on the Modules tab. Sort buttons allow end-users to re-sort and display the resulting list of members based on the configuration of each sort button. The use of sort buttons is optional. Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the active sort button, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the sort buttons, as well as elements that are not otherwise assigned a specific color.

 

 

Module Title (Footer)

The module title, as defined on each module panel on the Modules tab, is displayed as a graphic design element at the lower right to identify the active module. The shade of the text can be adjusted for dark or light backgrounds.

 

Style Panel:

Secondary Menus:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

 

 


Member List Menu

The Member List Menu displays the resulting members as an alphabetical, scrollable list.

 

 

Member List

The resulting members are displayed as a scrollable list with each member's label displayed next to a circular button graphic. The button graphic will be grayed out and disabled if the member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label, how they are laid out, and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Member List Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is used to highlight active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

 

 


Alpha Menu

The Alpha Menu layout displays the resulting members grouped alphabetically, along with a menu that allows end-users to scroll directly to each group. 

 

 

Member List

The resulting members are grouped alphabetically and displayed as a scrollable list with each member's label displayed next to a circular button graphic. The button graphic will be grayed out and disabled if the member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label, how they are laid out, and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Alpha Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to navigation buttons, as well as elements that are not otherwise assigned a specific color.

 

 

Alpha Selection Menu

The Alpha Selection Menu allows end-users to scroll directly to an alphabetically sorted group of members. A menu item is disabled and grayed out when there are no corresponding members. Enabled buttons are rendered in the Common Font Color and active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the active alpha menu selection, as well as active other elements.

 

Common Font Color

The Common Font Color is applied to the alpha menu, as well as other elements that are not otherwise assigned a specific color.

 

 

 

 


Year Menu

The Year Menu displays a year selection menu on the left side of the page and a single, scrollable column of members on the right side of the page.

 

 

Year Selection Menu

The Year Selection Menu allows end-users to select a four digit year. Only years that are associated with a member are available for selection. Each digit can be scrolled using its corresponding up and down arrows or by swiping up or down.

Selected Year Graphic

The selected year is displayed as a subtle graphic element above the year menu.

Selected Year Title

The page name, as defined for each page on the Modules tab, and the selected year are displayed above the member list to identify the active selection.

Member List

The resulting members are displayed as a scrollable list with each member's label displayed next to a circular button graphic. The button graphic will be grayed out and disabled if the member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Year Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is used to highlight active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

 

 


Month Menu

The Month Menu displays month and year selection menus on the left side of the page and a single, scrollable column of members on the right side of the page.

 

 

Month Selection Menu

The Month Selection Menu allows end-users to sort members by month. Only months that are associated with a member are available for selection. Months take precedence over years, so when a new month is selected the list of associated years is updated. The list of months can be scrolled using the up and down arrows or by swiping up or down.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the month text, as well as other elements that are not otherwise assigned a specific color.

 

Year Selection Menu

The Year Selection Menu allows end-users to select a four digit year. Only years that are associated with a member are available for selection. Months take precedence over years, so only years associated with the selected month are available for selection. Each digit can be scrolled using its corresponding up and down arrows or by swiping up or down.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the year text, as well as other elements that are not otherwise assigned a specific color.

 

Selected Month Graphic

The selected month is displayed as a graphic element above the month menu.

Selected Date Title

The selected month and year are displayed above the member list to identify the active selection.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the title, as well as other elements that are not otherwise assigned a specific color.

 

Member List

The resulting members are displayed as a scrollable list with each member's label displayed next to a circular button graphic. The button graphic will be grayed out and disabled if the member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Month Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is used to highlight active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

 

 


Custom Defined Menu

A Custom Defined Menu displays a scrollable list of attributes as defined by each nested level of the menu attribute assigned as the button target. The scrollable list of attributes can be configured to be displayed as text or icons. If the Disable Empty Buttons option is selected under Settings, buttons that would produce an empty result are grayed out and disabled.

 

Labels

When the menu attribute's layout is configured as labels, each attributed is displayed as a label along side a button icon.

 

 

Attribute List

The Attribute List is a scrollable list of attributes as defined by each nested level of the menu attribute assigned as the main menu button's button target. If the Disable Empty Buttons option is selected under Settings, buttons that would produce an empty result are grayed out and disabled.

 

See the Main Menu Buttons, Button Target, Custom Defined Menu, Menu Attribute and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is used to highlight active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

 

Information Icon

When a Description is entered under the Label Override Options on the Attributes tab, an Information Icon will be displayed next to the associated button in the interactive. As illustrated below, when an end-user touches an Information Icon, the associated text is displayed at the top of the page.

 

 

 

Information Overlay

Style Panel:

Common:

Banner Color

The background color of the overlay matches the banner color, as defined on the module's Style panel on the Modules tab.

 

 

Label Override Options:

Description

Descriptive text can be entered on each menu attribute's sub panel on the Attributes tab. When a description is entered an Information Icon is automatically rendered next to the menu item in the interactive, and the description overlay is displayed at the top of the page when an end-user touches the Information Icon.

 

Description Columns

When the description is long, it can be broken into columns to make it easier to read and comprehend.

 

 

 


Icons

When the menu attribute's layout is configured as icons, each attributed is displayed as an icon with its name displayed vertically to its right.

 

 

Icon Menu

The Icon Menu is a scrollable list of attributes as defined by each nested level of the menu attribute assigned as the main menu button's button target. If the Disable Empty Buttons option is selected under Settings, buttons that would produce an empty result are grayed out and disabled.

 

See the Main Menu Buttons, Button Target, Custom Defined Menu, Menu Attribute and Filter/Layout Panel topics for more information.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the button labels, as well as other elements that are not otherwise assigned a specific color.

 

Accent Color

The Accent Color is used to highlight active image buttons when they are pressed.

 

NOTE: Due to incompatibilities with some browsers this feature is disabled when using the editor's virtual interactive display.

 

Style Panel:

Secondary Menus:

Icon Color

The icon color is applied to image buttons.

NOTE: Due to incompatibilities with some browsers this feature is disabled when using the editor's virtual interactive display.

 

 

 


Content Pages

The following page layouts pertain to both the Default and Default (no menu) module templates. The Default (no menu) module template has no main menu or secondary menu pages.

 

Image Requirements

Each member featured in the interactive requires at least one Action image and one Portrait image. The action image is used as a full screen background image and is displayed on the attract screen, main menu, secondary menus and content pages. The portrait image is a self-portrait of the member and is displayed on content pages. The recommended resolution for each image is as follows:

Action Image: 1920px x 1080px x 72ppi   (JPEG image, w x h x pixels per inch)
Portrait Image: 300px x 400px x 72ppi  (JPEG image, w x h x pixels per inch)

 

Common Page Elements

 

 

Page Title

The page title is defined when a new page is created on the Modules tab.

Banner Color

The banner color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Banner Color

The banner color helps to visually identify the active module and is common to all of the module's menus and pages.

 

 

Page Title (Shadow Graphic)

The page title is displayed as a graphic design element at the upper left. There are no style configuration options to adjust the appearance of this element.

Side Menu

The side menu lists all active pages assigned to the member and allows end-users to switch between them. Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

Background Action Image

A background Action Image is assigned to each member on the Members tab. If a member's action image is not defined the default action image is used, as defined on the default images panel on the Modules tab. If both the default image and the member's action image are undefined a generic built-in placeholder image is used.

Scroll Arrows

Scroll Arrows are common to all non-video content pages and become active when content expands beyond the alloted space. End-users can also swipe to scroll. The Scroll Arrow Color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Scroll Arrow Color

The Scroll Arrow Color is common to all of the module's menus and pages. 

 

 

Navigation Buttons

The primary Main Menu and Previous Menu buttons are common to all pages and allow end-users to navigate back to the main menu, or if applicable, the previous secondary menu. Optional buttons, such as the View Background Image button, are displayed to the right of the primary navigation buttons. 

 

NOTE: In the case of page templates without a Side Menu, Next Page and Previous Page buttons will be listed to the right of the primary navigation buttons. 

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

Module Title (Footer)

The module title, as defined on each module panel on the Modules tab, is displayed as a graphic design element at the lower right to identify the active module. The shade of the text can be adjusted for dark or light backgrounds.

 

Style Panel:

Content Pages:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

 


Default Page Layout

The Default Page Layout displays a page navigation menu on the left side of the page, a member's portrait image at the center of the page, and up to three lines of user-defined attributes followed by a scrollable text area on the right side of the page.

 

 

Portrait Image

A Portrait Image is assigned to each member on the Members tab. If a member's portrait image is not defined the default portrait image is used, as defined on the default images panel on the Modules tab. If both the default image and the member's portrait image are undefined a generic built-in placeholder image is used.

Auto Generated Headings

Auto Generated Headings headings, as configured on the on the page panel on the Modules tab, are displayed to the right of the member's portrait.

 

Style Panel:

Content Pages:

H1 Color

The H1 Color is applied to H1 title elements within the content area.

H2 Color

The H3Color is applied to H3 title elements within the content area.

H3 Color

The H3 Color is applied to H3 title elements within the content area.

Content Area

Page content is added using the built-in text editor on the Members tab. If no content has been created the default placeholder text is displayed. When page content expands beyond the allotted space it can be scrolled using the up and down scroll arrows or by swiping. In the case of the Default Page Layout, the editable content area is limited to the space to the left of the member's portrait and below the Auto Generated Headings.

 

Style Panel:

Content Pages:

Paragraph Color

The Paragraph Color is applied to text within the content area.

 

 


Video: With Menu

The Video: With Menu page layout displays a video in a window on the right side of the page and a menu with each page assigned to the member on the left side of the page.

 

 

Video in a Window

The video is initially displayed in a window to the right of the page navigation menu. Video options, including the video source location, URL, and aspect ratio are configured under the Member Content section on the Members tab.

External Video Controls

The External Video Controls are visible when a video is displayed in a window, and include options to pause the video, display closed captions, or view the video fullscreen. See the Video Controls topic for more information on video controls.

Video Caption

The Auto Generated Caption, as configured on the on the page panel on the Modules tab, is displayed below the lower right corner of the video.

 

Style Panel:

Content Pages:

H1 Color

The H1 Color is applied to the video caption.

 

 


Video:No Menu

The Video: No Menu page layout displays a video in a window on the right side of the page and a column for text on the left side of the page. If used, Next Page and Previous Page buttons are displayed to the right of the primary navigation buttons.

 

 

Content Area

Page content is added using the built-in text editor. In the case of the Video: No Menu template, a single column to the left of the video can be customized as needed.

Video

The video is initially displayed in a window to the right of the page content area. Video options, including the video source location, URL, and aspect ratio are configured under the Member Content section on the Members tab.

External Video Controls

The External Video Controls are visible when a video is displayed in a window, and include options to pause the video, display closed captions, or view the video fullscreen. See the Video Controls topic for more information on video controls.

Video Caption

The Auto Generated Caption, as configured on the on the page panel on the Modules tab, is displayed below the lower right corner of the video.

 

 


Video:Full Screen

The Video: Full Screen page layout displays a full screen video with the navigation buttons overlaid at the lower left corner of the screen.

 

 

Full Screen Video

The video is displayed full screen and all navigation and control buttons are overlaid at the bottom of the screen. Video options, including the video source location and URL are configured under the Member Content section on the Members tab.

Navigation Buttons

The primary Main Menu and Previous Menu buttons are common to all pages and allow end-users to navigate back to the main menu, or if applicable, the previous secondary menu. In the case of the Video: Full Screen template, when a member has more than one page the Next Page and Previous Page buttons are display to the right of the primary navigation buttons. 

 

Video control buttons are displayed at the lower right of the screen.

 

The default color of the navigation and control buttons is a neutral gray to help make them more visible against both light and dark backgrounds. The color can be changed on the module's Style panel on the Modules tab.

 

Style Panel:

Video/Fullscreen (FS) Video:

Closed Caption Size

Sets the size of the closed captions to small, medium, or large.

Windowed Controls Color

Defines the color of the play button and scrub bar when a video is played in a window.

Fullscreen Controls Color

Defines the color of the control buttons and scrub bar when a video is played fullscreen.

Fullscreen Controls Outline Color

Defines the outline color of the control buttons and scrub bar when a video is played fullscreen.

Fullscreen Control Bar Color

Defines the background color of the control bar when a video is played fullscreen.

Fullscreen Active Closed Caption Color

Defines the color of the active closed captions icon when a video is played fullscreen.

 

 

 


Blank: With Menu:

The Blank: With Menu template can be used to create custom page layouts with the page navigation menu still displayed on the left side of the page.

 

 

Custom Content

Page content is added using the built-in text editor. When page content expands beyond the allotted space it can be scrolled using the up and down scroll arrows or by swiping. In the case of the Blank: With Menu template, the entire content area to the right of the side menu can be customized as needed.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to tabs, table headers, and other elements added to the content using the text editor tools.

 

 


Blank: No Menu:

The Blank: No Menu page template can be used to create custom layouts within the full width of the page. If the associated member is assigned more then one page the Next Page and Previous Page navigation buttons will displayed to the right of the primary navigation buttons.

 

 

 

Page Content

Page content is added using the built-in text editor. When page content expands beyond the allotted space it can be scrolled using the up and down scroll arrows or by swiping. In the case of the Blank: No Menu template, the content area expands the full width of the page and can be customized as needed.

Footer Title

The module title is displayed as a graphic design element at the lower right and identifies the active module. The footer title can be changed for each page under its Pages Panel on the Modules tab.

 

 

Footer Title

By default, the Footer Title is the name of the module, but can be changed by entering a new value.

 

Style Panel:

Content Pages:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

 


Inactivity Timer

The inactivity timer loads the attract screen after a pre-determined duration of inactivity. When triggered, a dialog box is presented to give the end-user a ten second window to cancel the timeout and continue using the interactive.  

 

 

Inactivity Timer

The inactivity timer loads the attract screen after a pre-determined duration of inactivity. The length of time is configured on each station's Station Configuration Panel under Settings, and can be adjusted individually for the main menu, secondary menu pages, and content pages.

 

The color of the countdown text is determined by the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the countdown text, as well as other elements.

 

Timeout Background Color

 

Sets the background color of the timeout box.

 

 


Video Controls

Video controls are common to all video layouts.

 

 

Overlay Video Controls

The Overlay Video Controls are available when the video is displayed in a window. The controls are made visible when an end-user clicks or touches the video. The highlight color of the play/pause button and the scrub bar are defined by the Accent Color as configured in the Common section on the Style panel on Modules tab.

 

Video in a Window:

Play Button

Click or touch to resume playback of the video.

Scrub Bar

Grab and drag the scrub bar handle to move the play head to a new location.

 

Full Screen Video:

Full Screen Play Button

Click or touch to resume playback of the video.

Full Screen Pause Button

Click or touch to pause the video.

Full Screen Closed Captions Button

When available, click the CC button to toggle the display of closed captions.

Exit Full Screen Button

Click the Exit Full Screen button to display the video in a window.

Full Screen Scrub Bar

Grab and drag the scrub bar handle to move the play head to a new location.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the windowed overlay buttons and scrub bar.

Full Screen Video:

Button Color

The Full Screen Video Button Color is applied to the full screen overlay buttons and scrub bar.

 

Button Outline Color

Selecting an outline color that contrasts the Button Color can help keep the button visible when its fill color blends in with the background.

 

External Video Controls

The External Video Controls are only visible when the video is displayed in a window. There are no style adjustment options for the external video control buttons.

 

Closed Captions Button

When available, click the CC button to toggle the display of closed captions.

Full Screen Button

Click the Full Screen button to toggle between full screen and window modes.

Play Button

Click or touch to expand the video full screen.

Pause Button

Click or touch to pause the video.

 

 

 

Tiles Template 

Overview

The Tiles module template, including its associated menus, pages and styles, is assigned and configured on each module panel on the Modules tab.

 

Main Menu

 

The Tiles module template can incorporate up to nine (9) main menu buttons, including the Intro Button.

 

 

 

Main Menu Logo

The Main Menu Logo is used in place of a main menu title and can be used to identify the active module and venue, or for any other required purpose. To retain a transparent background a PNG file with transparency enabled should be uploaded. For proper display the image must be 480 pixels wide x 240 pixels tall x 72ppi.

 

Main Menu Logo

The Main Menu Logo is uploaded under the Banner Options on the Main Menu Panel on the Modules tab. Click to expand the panel and upload a logo or other graphic to display on the Main Menu.

 

Main Menu Instructional Text

The Instructional Text is used to help guide end-users and can be edited on the Main Menu Panel on the Modules tab. The color, font size, and kerning (character spacing) values for the instructional text is defined on the module's Style panel on the Modules tab.

 

Style Panel:

Main Menu:

Instructional Text Background Color

Select a background color for the band behind the instructional text.

 

Instructional Text Color

Select a color for the instructional text.

 

Instructional Text Font Size

Enter a font size for the instructional text.

 

Instructional Text Kerning

Enter a kerning (character spacing) value for the instructional text.

 

Force Uppercase

Check to force the instructional text to be rendered in all uppercase characters.

 

 

Main Menu Intro Button

The Intro Button is displayed above the main menu instructional text, separating it from the other main menu buttons when the Use Intro Button option is selected on the Main Menu Panel on the Modules tab. This option is useful if there is an introductory video or other content to display that serves a different purpose than the other main menu buttons.

Main Menu Buttons

The main menu buttons are used to search for members or display member content, and are configured on the Main Menu Panel on the Modules tab. 

 

Style Panel:

Main Menu:

Button Label Color

The button label color is applied to all Main Menu buttons.

 

 

Main Menu Task Bar

The Main Menu Task Bar lists all active modules and allows end-users to switch between them. Modules are configured on the Modules tab. The placement of each module's title on the task bar, and its highlight color, are configured on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the graphic line above the selected module on the main menu task bar, as well as active navigation buttons and other elements.

 

 

Main Menu Background Image

The action image for each member assigned to the module cross fades in the background in a random order. The action image for each member is assigned on the Action Image Panel on the Members tab.

 

Style Panel:

Main Menu:

Background Tint

Adding a translucent tint overlay can help make the overlaid text easier to read. Adding a tint on the Style and Layout panel on the Modules tab will affect all of the main menu background images.

 

Image Saturation

Image saturation can be adjusted from grayscale (0) to full color saturation (1). Changing the image saturation on the Style and Layout panel on the Modules tab will affect all of the main menu background images.

 

 

Main Menu Module Title (Footer)

The module title, as defined on each module panel on the Modules tab, is displayed as a graphic design element at the lower right to identify the active module. The shade of the text can be adjusted for dark or light backgrounds.

 

Style Panel:

Content Pages:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

 

 

 

Secondary Menus (Button Targets)

Secondary menus are used to navigate between the main menu and content pages, and to narrow down the list of members based on the attributes that are assigned to them. Secondary menus are determined by the Button Target assigned to each main menu button on the Modules tab. 

 

 

Common Secondary Menu Page Elements

The following elements are common to all secondary menu pages.

 

Pre-Title

The secondary menu Pre-Title is displayed above the module title on the banner and acts as a breadcrumb to help identify where a user is within the interactive. By default, each level added to the breadcrumb is the previous level's title, but can be customized by editing a menu attribute's panel options on the Attributes tab.

 

Style Panel:

Common:

Pre-Title Text Color

The pre-title text color is common to all of the module's menus and pages.

 

Pre-Title Font Size

The pre-title font size is common to all of the module's menus and pages.

 

Pre-Title Kerning

The pre-title kerning (character spacing) is common to all of the module's menus and pages.

 

 

Menu Title

The menu title matches the label of the selected button. Button labels are defined when a new button is created on the Modules tab or when a new menu attribute is created on the Attributes tab.

 

Style Panel:

Common:

Heading Style

The Heading Style can be set to Bold or Cursive, and effects the font styles for the entire module, including font styles for each title, pre-title, instruction, button, and textual graphic element.

 

 

Banner Color

The banner color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Banner Color

The banner color helps to visually identify the active module and is common to all of the module's menus and pages.

 

 

Background Action Image

The background action image for each member is assigned on the Action Image Panel on the Members tab. Only images assigned to members who are associated with the current search results are displayed.

 

Style Panel:

Secondary Menus:

Background Tint

Adding a translucent tint overlay can help make the overlaid text easier to read. Adding a tint on the Style and Layout panel on the Modules tab will affect all of the secondary menu background images.

 

Image Saturation

Image saturation can be adjusted from grayscale (0) to full color saturation (1). Changing the image saturation on the Style and Layout panel on the Modules tab will affect all of the secondary menu background images.

 

 

Scroll Buttons

Scroll arrows are common to all menu pages and become active when content expands beyond the alloted space. End-users can also swipe to scroll. The Scroll Arrow Color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Scroll Arrow Color

Select a color for the scroll buttons.

 

 

Primary Navigation Buttons

The primary Main Menu and Previous Menu buttons are common to all pages and allow end-users to navigate back to the main menu, or if applicable, the previous secondary menu. Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to active navigation buttons, as well as other elements.   

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

 

Sort Buttons

Sort Buttons are configured on the Filter/Layout Options panel for each button on the Modules tab. Sort buttons allow end-users to re-sort and display the resulting list of members based on the configuration of each sort button. The use of sort buttons is optional. Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the active sort button, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the sort buttons, as well as elements that are not otherwise assigned a specific color.

 

 

Module Title (Footer)

The module title, as defined on each module panel on the Modules tab, is displayed as a graphic design element at the lower right to identify the active module. The shade of the text can be adjusted for dark or light backgrounds.

 

Style Panel:

Content Pages:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

 

 

Member List Menu

The Member List Menu displays the resulting members as an alphabetical, scrollable list.

 

 

Member List

The resulting members are displayed as a scrollable list with each member's label displayed next to a circular button graphic. The button graphic will be grayed out and disabled if the Member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label, how they are laid out, and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Member List Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is used to highlight active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to text and navigation elements that are not otherwise assigned a specific color.

 

 

 

 

Alpha Menu

The Alpha Menu layout displays the resulting members grouped alphabetically, along with a menu that allows end-users to scroll directly to each group. 

 

 

Member List

The resulting members are grouped alphabetically and displayed as a scrollable list with each member's label displayed next to a circular button graphic. The button graphic will be grayed out and disabled if the Member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label, how they are laid out, and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Alpha Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to navigation buttons, as well as elements that are not otherwise assigned a specific color.

 

 

Alpha Selection Menu

The Alpha Selection Menu allows end-users to scroll directly to an alphabetically sorted group of members. A menu item is disabled and grayed out when there are no corresponding members.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the Alpha Selection Menu, as well as other elements that are not otherwise assigned a specific color.

 

 

 

 

Year Menu

The Year Menu displays a year selection menu on the left side of the page and a single, scrollable column of members on the right side of the page.

 

 

Year Selection Menu

The Year Selection Menu allows end-users to select a four digit year. Only years that are associated with a member are available for selection. Each digit can be scrolled using its corresponding up and down arrows or by swiping up or down.

Selected Year Graphic

The selected year is displayed as a graphic element above the year menu.

Selected Year Title

The page name, as defined for each page on the Modules tab, and the selected year are displayed above the member list to identify the active selection.

Member List

The resulting members are displayed as a scrollable list with each member's label displayed next to a button graphic. The button graphic will be grayed out and disabled if the member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Year Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is used to highlight active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

 

 

Month Menu

The Month Menu displays month and year selection menus on the left side of the page and a single, scrollable column of members on the right side of the page.

 

 

Month Selection Menu

The Month Selection Menu allows end-users to sort members by month. Only months that are associated with a member are available for selection. Months take precedence over years, so when a new month is selected the list of associated years is updated. The list of months can be scrolled using the up and down arrows or by swiping up or down.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the month text, as well as other elements that are not otherwise assigned a specific color.

 

Year Selection Menu

The Year Selection Menu allows end-users to select a four digit year. Only years that are associated with a member are available for selection. Months take precedence over years, so only years associated with the selected month are available for selection. Each digit can be scrolled using its corresponding up and down arrows or by swiping up or down.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the year text, as well as other elements that are not otherwise assigned a specific color.

 

Selected Month Graphic

The selected month is displayed as a graphic element above the month menu.

Selected Date Title

The selected month and year are displayed above the member list to identify the active selection.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the title, as well as other elements that are not otherwise assigned a specific color.

 

 

Member List

The resulting members are displayed as a scrollable list with each member's label displayed next to a button graphic. The button graphic will be grayed out and disabled if the member has no associated content pages. The list can be scrolled using the up and down scroll arrows or by swiping.

 

The attribute used to initially display each member's label and how they are initially sorted is configured on the module's Main Menu Panel on the Modules tab. See the Main Menu Buttons, Button Target, Month Menu and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to the navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

 

 

 

Custom Defined Menu

A Custom Defined Menu displays a scrollable list of attributes as defined by each nested level of the menu attribute assigned as the button target. The scrollable list of attributes can be configured to be displayed as text or icons. If the Disable Empty Buttons option is selected under Settings, buttons that would produce an empty result are grayed out and disabled.

 

Labels

When the menu attribute's layout is configured as labels, each attributed is displayed as a label along side a button icon.

 

 

Attribute List

The Attribute List is a scrollable list of attributes as defined by each nested level of the menu attribute assigned as the main menu button's button target. If the Disable Empty Buttons option is selected under Settings, buttons that would produce an empty result are grayed out and disabled.

 

See the Main Menu Buttons, Button Target, Custom Defined Menu, Menu Attribute and Filter/Layout Panel topics for more information.

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

Information Icon

When a Description is entered under the Label Override Options on the Attributes tab, an Information Icon will be displayed next to the associated button in the interactive. As illustrated below, when an end-user touches an Information Icon, the associated description is displayed at the top of the page.

 

 

Information Overlay

Style Panel:

Common:

Banner Color

The background color of the overlay matches the banner color, as defined on the module's Style panel on the Modules tab.

 

 

Label Override Options:

Description

Descriptive text can be entered on each menu attribute's sub panel on the Attributes tab. When a description is entered an Information Icon is automatically rendered next to the menu item in the interactive, and the description overlay is displayed at the top of the page when an end-user touches the Information Icon.

 

Description Columns

When the description is long, it can be broken into columns to make it easier to read and comprehend.

 

 

 

Icons

When the menu attribute's layout is configured as icons, each attributed is displayed as an icon with its name displayed vertically to its right.

 

 

Icon Menu

The Icon Menu is a scrollable list of attributes as defined by each nested level of the menu attribute assigned as the main menu button's button target. If the Disable Empty Buttons option is selected under Settings, buttons that would produce an empty result are grayed out and disabled.

 

See the Main Menu Buttons, Button Target, Custom Defined Menu, Menu Attribute and Filter/Layout Panel topics for more information.

 

Style Panel:

Common:

Common Font Color

The Common Font Color is applied to the button labels, as well as other elements that are not otherwise assigned a specific color.

 

Accent Color

The Accent Color is used to highlight active image buttons when they are pressed.

 

NOTE: Due to incompatibilities with some browsers this feature is disabled when using the editor's virtual interactive display.

 

Style Panel:

Secondary Menus:

Icon Color

The icon color is applied to image buttons.

NOTE: Due to incompatibilities with some browsers this feature is disabled when using the editor's virtual interactive display.

 

 

 

 

 

Content Pages

The following page layouts pertain to both the Default and Default (no menu) module templates. The Default (no menu) module template has no main menu or secondary menu pages.

 

Image Requirements

Each member featured in the interactive requires at least one Action image and one Portrait image. The action image is used as a full screen background image and is displayed on the attract screen, main menu, secondary menus and content pages. The portrait image is a self-portrait of the member and is displayed on content pages. The recommended resolution for each image is as follows:

Action Image: 1920px x 1080px x 72ppi   (JPEG image, w x h x pixels per inch)
Portrait Image: 300px x 400px x 72ppi  (JPEG image, w x h x pixels per inch)



Common Page Elements

Page Title

The page title is defined when a new page is created on the Modules tab.

Banner Color

The banner color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Banner Color

The banner color helps to visually identify the active module and is common to all of the module's menus and pages.

 

 

Page Title (Shadow Graphic)

The page title is displayed as a graphic design element at the upper left. There are no style configuration options to adjust the appearance of this element.

Side Menu

The side menu lists all active pages assigned to the member and allows end-users to switch between them. Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

Background Action Image

A background Action Image is assigned to each member on the Members tab. If a member's action image is not defined the default action image is used, as defined on the default images panel on the Modules tab. If both the default image and the member's action image are undefined a generic built-in placeholder image is used.

Scroll Arrows

Scroll Arrows are common to all non-video content pages and become active when content expands beyond the alloted space. End-users can also swipe to scroll. The Scroll Arrow Color is defined on the Style panel on the Modules tab.

 

Style Panel:

Common:

Scroll Arrow Color

The Scroll Arrow Color is common to all of the module's menus and pages.

 

 

Navigation Buttons

The primary Main Menu and Previous Menu buttons are common to all pages and allow end-users to navigate back to the main menu, or if applicable, the previous secondary menu. Optional buttons, such as the View Background Image button, are displayed to the right of the primary navigation buttons. 

 

NOTE: In the case of page templates without a Side Menu, Next Page and Previous Page buttons will be listed to the right of the primary navigation buttons. 

 

Active buttons are highlighted using the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color applied to active navigation buttons, as well as other elements.

 

Common Font Color

The Common Font Color is applied to navigation buttons, as well as other elements that are not otherwise assigned a specific color.

 

Module Title (Footer)

The module title, as defined on each module panel on the Modules tab, is displayed as a graphic design element at the lower right to identify the active module. The shade of the text can be adjusted for dark or light backgrounds.

 

Style Panel:

Secondary Menus:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

 

Default Page Layout

The Default Page Layout displays a page navigation menu on the left side of the page, a member's portrait image at the center of the page, and up to three lines of user-defined attributes followed by a scrollable text area on the right side of the page.

 

 

Portrait Image

A Portrait Image is assigned to each member on the Members tab. If a member's portrait image is not defined the default portrait image is used, as defined on the default images panel on the Modules tab. If both the default image and the member's portrait image are undefined a generic built-in placeholder image is used.

Auto Generated Headings

Auto Generated Headings headings, as configured on the on the page panel on the Modules tab, are displayed to the right of the member's portrait.

 

Style Panel:

Content Pages:

H1 Color

The H1 Color is applied to H1 title elements within the content area.

H2 Color

The H3Color is applied to H3 title elements within the content area.

H3 Color

The H3 Color is applied to H3 title elements within the content area.

Content Area

Page content is added using the built-in text editor on the Members tab. If no content has been created the default placeholder text is displayed. When page content expands beyond the allotted space it can be scrolled using the up and down scroll arrows or by swiping. In the case of the Default Page Layout, the editable content area is limited to the space to the left of the member's portrait and below the Auto Generated Headings.

 

Style Panel:

Content Pages:

Paragraph Color

The Paragraph Color is applied to text within the content area.

 

 

Video: With Menu

The Video: With Menu page layout displays a video in a window on the right side of the page and a menu with each page assigned to the member on the left side of the page.

 

 

Video in a Window

The video is initially displayed in a window to the right of the page navigation menu. Video options, including the video source location, URL, and aspect ratio are configured under the Member Content section on the Members tab.

External Video Controls

The External Video Controls are visible when a video is displayed in a window, and include options to pause the video, display closed captions, or view the video full screen. See the Video Controls topic for more information on video controls.

Video Caption

The Auto Generated Caption, as configured on the on the page panel on the Modules tab, is displayed below the lower right corner of the video.

 

Style Panel:

Content Pages:

H1 Color

The H1 Color is applied to the video caption.

 

 

Video:No Menu

The Video: No Menu page layout displays a video in a window on the right side of the page and a column for text on the left side of the page. If used, the Next Page and Previous Page buttons are displayed to the right of the primary navigation buttons.

 

 

Content Area

Page content is added using the built-in text editor. In the case of the Video: No Menu template, a single column to the left of the video can be customized as needed.

Video

The video is initially displayed in a window to the right of the page content area. Video options, including the video source location, URL, and aspect ratio are configured under the Member Content section on the Members tab.

External Video Controls

The External Video Controls are visible when a video is displayed in a window, and include options to pause the video, display closed captions, or view the video fullscreen. See the Video Controls topic for more information on video controls.

Video Caption

The Auto Generated Caption, as configured on the on the page panel on the Modules tab, is displayed below the lower right corner of the video.

 

Video:Full Screen

The Video: Full Screen page layout displays a full screen video with the navigation and control buttons overlaid at the bottom of the screen.

 

 

Full Screen Video

The video is displayed full screen and all navigation and control buttons are overlaid at the bottom of the screen. Video options, including the video source location, URL, and aspect ratio are configured under the Member Content section on the Members tab.

Navigation Buttons

The primary Main Menu and Previous Menu buttons are common to all pages and allow end-users to navigate back to the main menu, or if applicable, the previous secondary menu. In the case of the Video: Full Screen template, when a member has more than one page assigned to them, the Next Page and Previous Page buttons are display to the right of the primary navigation buttons. 

 

The default color of the navigation buttons is a neutral gray to help make them more visible against both light and dark backgrounds. The color can be changed on the module's Style panel on the Modules tab.

 

Style Panel:

Video/Fullscreen (FS) Video:

Closed Caption Size

Sets the size of the closed captions to small, medium, or large.

Windowed Controls Color

Defines the color of the play button and scrub bar when a video is played in a window.

Fullscreen Controls Color

Defines the color of the control buttons and scrub bar when a video is played fullscreen.

Fullscreen Controls Outline Color

Defines the outline color of the control buttons and scrub bar when a video is played fullscreen.

Fullscreen Control Bar Color

Defines the background color of the control bar when a video is played fullscreen.

Fullscreen Active Closed Caption Color

Defines the color of the active closed captions icon when a video is played fullscreen.

 

 

 

Blank: With Menu:

The Blank: With Menu template can be used to create custom page layouts with the page navigation menu still displayed on the left side of the page.

 

 

Custom Content

Page content is added using the built-in text editor. When page content expands beyond the allotted space it can be scrolled using the up and down scroll arrows or by swiping. In the case of the Blank: With Menu template, the entire content area to the right of the side menu can be customized as needed.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to tabs, table headers, and other elements added to the content using the text editor tools.

 

 

Blank: No Menu:

The Blank: No Menu page template can be used to create custom layouts within the full width of the page. If the associated member is assigned additional pages the Next Page and Previous Page navigation buttons will displayed to the right of the primary navigation buttons.

 

 

Page Content

Page content is added using the built-in text editor. When page content expands beyond the allotted space it can be scrolled using the up and down scroll arrows or by swiping. In the case of the Blank: No Menu template, the content area expands the full width of the page and can be customized as needed.

Footer Title

The module title is displayed as a graphic design element at the lower right and identifies the active module. The footer title can be changed for each page under its Pages Panel on the Modules tab.

 

 

Footer Title

By default, the Footer Title is the name of the module, but can be changed by entering a new value.

 

Style Panel:

Content Pages:

Shadow Font Theme

Select an appropriate theme depending on the style of the background images and tint. The Dark theme provides better contrast against lighter backgrounds, while the Light theme provides better contrast against darker backgrounds.

 

 

 

 

Inactivity Timer

The inactivity timer loads the attract screen after a pre-determined duration of inactivity. When triggered, a dialog box is presented to give the end-user a ten second window to cancel the timeout and continue using the interactive.  

 

 

Inactivity Timer

The inactivity timer loads the attract screen after a pre-determined duration of inactivity. The length of time is configured on each station's Station Configuration Panel under Settings, and can be adjusted individually for the main menu, secondary menu pages, and content pages.

 

The color of the countdown text is determined by the Accent Color as defined on the module's Style panel on the Modules tab.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the countdown text, as well as other elements.

 

Timeout Background Color

 

Sets the background color of the timeout box.

 

 

 

Video Controls

Video controls are common to all video layouts.

 

 

Overlay Video Controls

The Overlay Video Controls are available when the video is displayed in a window. The controls are made visible when an end-user clicks or touches the video. The highlight color of the play/pause button and the scrub bar are defined by the Accent Color as configured in the Common section on the Style panel on Modules tab.

 

Video in a Window:

Play Button

Click or touch to resume playback of the video.

Scrub Bar

Grab and drag the scrub bar handle to move the play head to a new location.

 

Full Screen Video:

Full Screen Play Button

Click or touch to resume playback of the video.

Full Screen Pause Button

Click or touch to pause the video.

Full Screen Closed Captions Button

When available, click the CC button to toggle the display of closed captions.

Exit Full Screen Button

Click the Exit Full Screen button to display the video in a window.

Full Screen Scrub Bar

Grab and drag the scrub bar handle to move the play head to a new location.

 

Style Panel:

Common:

Accent Color

The Accent Color is applied to the windowed overlay buttons and scrub bar.

Full Screen Video:

Button Color

The full screen video Button Color is applied to the full screen overlay buttons and scrub bar.

 

Button Outline Color

Selecting an outline color that contrasts the Button Color can help keep the button visible when its fill color blends in with the background.

 

External Video Controls

The External Video Controls are only visible when the video is displayed in a window. There are no style adjustment options for the external video control buttons.

 

Closed Captions Button

When available, click the CC button to toggle the display of closed captions.

Full Screen Button

Click the Full Screen button to toggle between full screen and window modes.

Play Button

Click or touch to expand the video full screen.

Pause Button

Click or touch to pause the video.

 

 

 

 

Slideshow Template 

Overview

The Slideshow template provides continuous playback of image and video slide shows without the need for user interaction. Slide shows can be presented in vertical or horizontal orientations and can be configured to display an optional clock or event countdown timer.

 

 

Slide

Slides can be images or videos and are added to the slideshow on the Slides panel on the Modules tab.

 

Closed Captions

Closed captions can be turned on or off on the Slideshow Settings panel. The size of the closed captions can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Event:

Closed Captions

Select a size for the closed captions. Options include Small, Medium, or Large.

 

 

Countdown Text

The countdown text is configured under the Event Text section of the Events panel on the Modules tab. Colors are adjusted on the module's Style panel.

 

 

Background Color

 

Style Panel:

Event:

Background Color

Selected a Background Color that contrasts with the countdown text to improve legibility.

 

Event Text

The Countdown Text, Loading/In-Progress Text, and No Events/Event Ended Text use a common text size, style, and color that can be adjusted on the module's Style panel.

 

Style Panel:

Event:

Text Color

Select a color for the countdown text.

Text Style

Select a style for the countdown text. Options include Normal, Bold, Italic, and Bold Italic.

Text Size

Select a size for the countdown text. Options include Small, Medium, and Large.

Blinking Text Color

Event text will blink when enclosed with curly braces {blink this text}. The color of blinking event text can be adjusted independently.

Blinking Text Style

Event text will blink when enclosed by curly braces {blink this text}. The style of blinking event text can be adjusted independently. Options include Normal, Bold, Italic, and Bold Italic.

 

Event Time

The color and style of the Event Time can be adjusted on the module's Style panel.

 

Style Panel:

Event:

Event Time Color

Select a color for the event time.

Event Time Style

Select a style for the event time. Options include Normal, Bold, Italic, and Bold Italic.

 

Event Name

The color and style of the Event Name can be adjusted on the module's Style panel.

 

Style Panel:

Event:

Event Name Color

Select a color for the event name.

Event Name Style

Select a style for the event name. Options include Normal, Bold, Italic, and Bold Italic.

 

Countdown

The color and style of the Countdown can be adjusted on the module's Style panel.

 

Style Panel:

Event:

Countdown Color

Select a color for the countdown.

Countdown Style

Select a style for the countdown. Options include Normal, Bold, Italic, and Bold Italic.

 

Clock

The visibility, format, position, and size of the clock can be configured on the Clock Overlay panel. Its color and background can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Clock:

Clock Color

Select a color for the clock time.

Date Color

Select a color for the clock date.

 

Shadow

Select a background Shadow theme that contrasts with the selected clock colors to improve legibility. Options include Dark, Light, and None.

 

 

 

 

Text Rotation

Text rotation is used when slideshows are presented in a vertical orientation. Text rotation affects the Clock, Event Text, and closed captions and is configured on the Slideshow Settings panel on the Modules tab. Images can be rotated in the Image Editor.

 

 

Timeline Template 

Overview

The Timeline template is an interactive template used to present a sequence of key historical milestones or other relevant events.

 

 

Milestone Image

Milestone images scroll with the timeline and provide a visual representation of the current milestone. Milestone images are uploaded on the Milestones panel. Milestone images can be cropped for full screen or windowed display. Full screen milestone images must be created at a specific size and saved in a specific format. Download the Photoshop (.psd) Timeline Image Template from the Resources tab under My Account for assistance with proper sizing and placement of an image within the alloted space.

Timeline Background Image

The timeline background image is a static image displayed behind all other timeline elements. The background image is assigned on the Timeline Background Image panel.

Milestone Date/Label

The Milestone Date/Label is configured on the Milestone Settings panel. The color of the date/label can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Milestones:

Milestone Label Color

 

The color of each milestone's date/label can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Milestones:

Milestone Label Color Override

 

Milestone Date/Label Shadow

The Milestone Date/Label Shadow is a subtle graphic element positioned behind the milestone date/label, as configured on the Milestone Settings panel. The color of the date/label shadow can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Milestones:

Milestone Shadow Color

 

The color of each milestone's date/label shadow can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Milestones:

Milestone Shadow Color Override

Timeline Background Tint

Adding a translucent background tint can help make the milestone text easier to read. Adding a tint will affect the appearance of timeline background image.

Style Panel:

Milestones:

Background Tint

Milestone Title

The Milestone Title is configured on the Milestone Settings panel. The color of the title can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Milestones:

Milestone Title Color

 

The color of each milestone's date/label shadow can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Milestones:

Milestone Title Color Override

Milestone Subtitle

The Milestone Title is configured on the Milestone Settings panel. The color of the title can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Milestones:

Milestone Subtitle Color

 

The color of each milestone's subtitle can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Milestones:

Milestone Subtitle Color Override

Milestone Copy

The Milestone Copy is configured on the Milestone Settings panel. The color of the copy can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Milestones:

Milestone Copy Color

Scrollbar

The color of the vertical scrollbar can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Milestones:

Milestone Vertical Scrollbar Color

 

The color of each milestone's vertical scrollbar can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Milestones:

Milestone Vertical Scrollbar Color Override

Timeline Navigation Bar

As outlined below,numerous methods are available to navigate the timeline.

 

 

Navigation Arrows

Press a directional arrow to navigate forward or backward through each milestone.

 

The color of the directional arrows can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Timeline Navigation Bar:

Arrow Color

Swipeable Area

Swipe left or right on an open area to scroll through the timeline.

More... Button

Press the more... button to display the extended content.

 

The color of the more... button can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Milestones:

Milestone More... Color

 

The color of each milestone's more... button can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Milestones:

Milestone More... Color Override

Timeline Scrub Bar

Drag the timeline scrub bar to navigate quickly to a specific milestone. The targeted milestone's date/label is displayed above the scrub bar handle while scrubbing.

 

The color of the timeline scrub bar handle and date/label can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Timeline Navigation Bar:

Scrub Bar Color

Scrub Bar Label Color

 

Start Button

Press the start button to navigate back to the beginning of the timeline.

 

The color of the start button can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Timeline Navigation Bar:

Navigation Button Color

Main Menu Button

Press the main menu button to exit to the main menu.

 

The color of the main menu button can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Timeline Navigation Bar:

Navigation Button Color

Active Milestone Brackets

The color of the brackets surrounding the active milestone can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Timeline Navigation Bar:

Bracket Color

Hairline

The color of the hairlines above and below the milestone labels on the navigation bar can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Timeline Navigation Bar:

Hairline Color

Milestone Dates/Labels

Press a milestone date/label to navigate to that milestone.

 

The color of the milestone date/label on the navigation bar can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Timeline Navigation Bar:

Milestone Label Color

 

The color of each milestone's date/label on the navigation bar can be can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Timeline Navigation Bart:

Milestone Label Color Override

Swipeable Area

The timeline can be navigated by swiping left or right on an open area on the screen.

 

 

Milestone Extended Content

Extended content is configured on the Milestone Settings panel and is displayed when a user presses a milestone's more... button.

 

 

Extended Content Title

The extended content title is configured on the Milestone Settings panel. When entered, the extended content title is fixed in place and will not scroll with the copy. To scroll the title with the copy, leave the field blank and add the title above the copy in the text editor.

 

The color of the extended content title can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Extended Content:

Title Color

 

The color of each milestone's extended content title can be can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Extended Content:

Title Color Override

Extended Content Subtitle

The extended content subtitle is configured on the Milestone Settings panel. When entered, the extended content subtitle is fixed in place and will not scroll with the copy. To scroll the subtitle with the copy, leave the field blank and add the subtitle above the copy in the text editor.

 

The color of the extended content subtitle can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Extended Content:

Subtitle Color

 

The color of each milestone's extended content subtitle can be can be overridden independently on the Milestone Settings panel. 

Milestone Style Overrides:

Extended Content:

Subtitle Color Override

Extended Content Copy

The extended content copy is configured on the Milestone Settings panel. 

 

The color of the extended content copy can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Extended Content:

Copy Color

 

The color of each milestone's extended content copy can be can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Extended Content:

Copy Color Override

Background Color

The color of the extended content background can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Extended Content:

Background Color

Close Button

The color of the extended content close button can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Extended Content:

Close Button Color

Extended Content Scrollbar

The color of the extended content vertical scrollbar can be adjusted on the module's Style panel on the Modules tab.

 

Style Panel:

Extended Content:

Vertical Scrollbar Color

 

The color of each milestone's extended content vertical scrollbar can be overridden independently on the Milestone Settings panel. 

 

Milestone Style Overrides:

Extended Content:

Vertical Scrollbar Color Override