Tokyo - Pages, screens and pop-ups | Cover screen

In order to configure properties of a cover screen, we select the screen clicking on it directly or on the breadcrumb trail. We can set up screen parameters from "Properties" tab.
There are three cover presets or styles. Each cover has different properties.

  • Basic cover
  • Cover with title on the left
  • Cover with title on the right

Basic cover

It is the most simple style of cover. It consists of a solid colour background, a unit title, and a button to continue.
In order to configure this cover, we should:

  1. Select and edit the unit title. It is an editable text appearing on the screen.
  2. Select and edit the label of the button that will be clicked to start the unit. An "Enter" text appears by default, but we can customise this label.
  3. Set up the screen properties.

PROPERTY

DESCRIPTION

View

This property allows us to choose different screen styles.
Remember: we should only insert one of the following cover styles in order to avoid operating errors:

Screen background colour

You can customise the screen background colour choosing one of the preset colours in the list. If you wish, you can add a colour in hexadecimal format (for example, #041e42).

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

  • Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
  • Non objetive: this audio will not an objetive to complete the unit.
  • Visit: It is required to visit the screen to reach the objectives of the unit.

Cover with title on the left

In order to configure this page style, we should:

  1. Select and edit the unit title. It is an editable text appearing on the screen.
  2. Select and edit the label of the button that will be clicked to start the unit. An "Enter" text appears by default, but we can customise this label.
  3. Set up the screen properties.

PROPERTY

DESCRIPTION

View

This property allows us to choose different styles of screen.
Remember: we should only insert one of the following cover styles in order to avoid operating errors:

Style

This property allows us to change the colour on the left area, where the title is located:

  • Primary colour: This applies the chosen colour to the "Primary colour" property on the interface.
  • Secondary colour: This applies the chosen colour to the "Secondary colour" property on the interface.
    See here to know how to configure colours for the interface.

Logo (220x50)

This property allows adding the client's logo above the unit title.

Screen background colour

Customise the screen background colour choosing one of the preset colours in the list. If preferred, you can add a colour in hexadecimal format (for example, #041e42).
Only applies if there is no "Background image".

Background image

This property allows to choose an image rather than a "Screen background colour".

Background image in mobile

This property allows configuring an image what will only be shown on devices whose resolution is less that 700px wide. If resolution is lower than that, the background image is not shown on the right side of the title, but above the title. This means having one image size for big screens (PC) and another size for small screen devices (tablets of Smartphones) can be an interesting choice.

Unlock

This property DOES NOT WORK at this moment. We do not recommend using this property.

Cover with title on the right

In order to configure the page style, we should:

  1. Select and edit the unit title. It is an editable text appearing on the screen.
  2. Select and edit the label of the button that will be clicked to start the unit. An "Enter" text appears by default, but we can customise this label.
  3. Set up the screen properties.

PROPERTY

DESCRIPTION

View

This property allows us to choose different screen styles.
Remember: we should only insert one of the following cover styles in order to avoid operating errors:

Style

This property allows us to change the colour on the left area, where the title is located:

  • Primary colour: This applies the chosen colour to the "Primary colour" property on the interface.
  • Secondary colour This applies the chosen colour to the "Secondary colour" property on the interface.
    See here to know how to configure colours for the interface.

Logo (220x50)

This property allows adding the client's logo above the unit title.

Screen background colour

Customise the screen background colour choosing one of the preset colours in the list. If preferred, you can add a colour in hexadecimal format (for example, #041e42).
Applicable only if there is no "Background image".

Background image

This property allows to choose an image rather than a "Screen background colour".

Background image in mobile

This property allows configuring an image what will only be shown on devices whose resolution is less that 700px wide. If resolution is lower than that, the background image is not shown on the right side of the title, but above the title. This means having one image size for big screens (PC) and another size for small screen devices (tablets of Smartphones) can be an interesting choice.

Unlock

This property DOES NOT WORK at this moment. We do not recommend using this property.