¶ Customization Guideline for the Tyr Theme
This guide provide you with some help on how you can modify the Tyr Theme for each hotel.
¶ Import the theme
Start by importing the theme to your site.
Note: If you want to customize the theme and then export it to several sites, you should import the Theme to a new Theme site, and do the modifications here. Then the modified theme can be exported to these hotels. Contact Support if you have questions on how to do this.
¶ Customize the main menu
¶ Change the background image
To change the background image, first open the "Main Menu" page in the menu editor and next, select the "Overall Page Settings" in the upper right corner:
From the page settings, you can change the background image. Right click on the url and use the menu that appears to insert the new image:
¶ Change the brand logo
To change the brand logo, doubleclick it, select "Normal Content" and replace the url in the "img" tag by rightclicking it and use the menu that appears:
¶ Change the text on the buttons
To change the text on the buttons, you doubleclick the button and select "Normal Content". Here you can change the text, and also add translations using the flags on the right:
¶ Change the button styling
The button styling is defined in the CSS section on each button. Open the below menu by doubleclicking the button. Adjust the CSS to your preference.
¶ Change the behaviour of a button
If you have added a new button or just want to change the behaviour of an existing one, you can use the Eventhandlers. This menu is found by doubleclicking the button and select "Eventhandlers". Here you can choose what to do when the button is selected by the user, for instance which page you want to open. Maybe you have created a new page which you want your button to open. Then simply add the new page in Parameters->MenuPage. Add page parameters if you need to send parameters to the page that is opened.
¶ Add a new button
The easiest way of creating a new button is to copy an existing one. Then it will keep the same style as the original button. Select the button you want to copy, and use the copy/paste functions:
Now you can relocate the buttons and adapt the new button to fit your need.
¶ Change the Page Navigation
To change how the navigation works between items on the page, there is a Navigation Helper availabe. Select the item you want to control the navigation of and select the helper from the Item Tools:
The menu that appears helps you setting up the navigation:
¶ Change the External Source Input Selector Page
The Tyr Theme contains a page which lets the user select from the available external sources of the TV. The elements on this page can be customized in the same way as described in the Main Menu section above.
¶ Modify the list element
There is however one new element here, the list element:
¶ The content of the External Source list element
This element gets its content from a Local Data Source called "externalinputs":
This Local Data Source can be found by clicking the "Select LocalSource" button shown in the image above and select "External Inputs" from the list:
The system will now automatically provide the list item with source "type" and source "idx". More about this can be found here.
So, now, by inserting the below in the Content section of the list element, the list element will automatically get the correct source list from the system.
"Item" refers to the datasource used in the list element, "type" and "idx" refer to source type and source index. So, "item.type" will in the list translate into "HDMI", "Composite" etc and "item.idx" will translate into "1", "2", "3" etc, all depending of the External sources avalable of the specific screen.
The "type" and "idx" are also reflected in the page parameters that are sent to the External Source page when a source is selected from the list elements:
¶ Style the list element
The style of the list element can be altered both in the CSS section and in the Settings section of the element:
¶ Change the External Source Overlay
The layout of the External Input Source overlay can be changed by doubleclicking the various elements in the same way as described in the Main Menu section.
¶ Change the Menu Language Selector Page
The Tyr Theme contains a page which lets the user select from the available system langauges.
The elements on this page can be customized in the same way as described in the Main Menu section above.
¶ Fetching the system languages
The system languages are fetched in much the same way as the external inputs are fetched, see above. It just uses a different local data source:
The languages are then referred using {{item.label}} in the Content section. More about this can be found here. ("Item" refers to the datasource used in the list element, "label" refers to the language.)
¶ Change the Hotel Infomation Submenu
The Tyr Theme contains a Hotel Information submenu, which lists an overview over different types of infopages. The elements in this page can be customized in the same way as described in the Main Menu section above. Please note that this page does not containt any list element. The list of infopages consists of individual buttons instead.
¶ Modify which infopages that opens
The page contains a list of buttons that opens different infopages when selected.
If you want to add other infopages or add other behaviour to the buttons, this can be done by doubleclicking the button you want to modify the behaviour of. Then go to Eventhandlers and change the parameters for the Trigger "Item is selected by the user".
In this case the Action is set to "Open page". If you just want to link to a different infopage, simply change the "MenuPage" parameter :
¶ Customize the Infopages
The Tyr Theme contains 5 different infopage templates. In difference from some other Themes which use the Document editor to set up infopages, the content of the infopages in Tyr is added directly inside the infopage itself. So, to modify it, click the element that contains the text and/or image and edit inside the "Normal Content" section:
The styling of the different html tags is defined in the CSS section:
¶ Duplicating a page
If you want to duplicate a page, for instance that you want to use the same infopage template everywhere, you should do as below:
- Open the page that you want to duplicate
- In the "Page Tools" section, select the "Source Editor":
- Select and copy the complete page source:
- Create a new page:
- Open the Source Editor from the Page Tools of the new, empty page and replace the content with the data you copied in step 3 above.
- Press APPLY and save the new page. You now have a duplicate of the page which you can modify.
¶ Customize the TV channel page
The Tyr Theme contains a page which lets the user navigate TV channels, view the current/next EPG, change subtitle/audio language and open the Full EPG service. The elements on this page can be customized in much the same way as described in the above sections of this guideline.
¶ Fetching the TV channels
The channel list uses an element called "Channel List". You can read more about this element here.
The channel list element automatically uses a datasource which collects the TV or Radio channels defined in the system, It also has some embedded logic, including handling of channel tuning.
There is a configuration called "Channel type", selecting if the element should fetch the TV channel list or the Radio channel list. This can be found in the Settings section of the element:
Depending on the selection of Channel type, the element fetches data from the corresponding channel table configured in Screens->Configurations:
¶ Customize the audio/subtitle selector pages
The Tyr Theme contains two pages which lets the user select subtitle and audio language on the media streams. The elements on these pages can be customized in much the same way as described in the above sections of this guideline.
¶ Fetching the audio/subtitle languages
The audio and subtitle languages are fetched in much the same way as the external inputs are fetched, see above. It just uses different local data sources:
The languages are then referred using {{item.label}} in the Content section. More about this can be found here. ("Item" refers to the datasource used in the list element, "label" refers to the language.)
¶ Customize the Full EPG page
The Tyr Theme contains a page which lets the user watch the multi-day EPG data.
The main element on this page is the "EPG Matrix" element:
This element automatically provides and presents the EPG data from the channel table. Some basic styling can be done in the "CSS" and "Settings" sections of the element:
This page contains more info on the EPG Matrix element.