Theme configuration is available in two locations in the portal. You can either configure a theme specifically to a project or duplicate and customise an existing theme from the theme section of the portal.


When customising a theme, a configurator window will open providing users with access to the following sections and settings:


nav-bar-settings.png



Section

Item

Description

Global settings

Screen size

Allows users to set the desktop screen size for the content. Size can be set in % or pixel width.


Tablet and smartphones automatically use 100% of the width available to ensure content display is optimised.


Content area

Allows users to set the width and height of the content area for desktop devices. Sizes can be set in % or pixel width.


Tablet and smartphones automatically use 100% of the width available to ensure content display is optimised.


Theme colours

Themes use primary and secondary colours that are applied to key elements of the theme to give it a consistent look and feel. Configuring these will update all global elements that use them (e.g. topic tile backgrounds, progress indicators and asset controls).


Backgrounds

Themes include a number of elements that can support backgrounds.


When configuring a background, users will have the option to set a background image or background colour. When a colour is chosen, the user will also have the opportunity to set an opacity (e.g. 0.8 for 80%).


Users can set default backgrounds for the following elements:


  • Default background (applied to the whole screen)

  • Screen content area

  • Sub-screens

  • Content columns


Content fonts

Themes utilise a number of font styles when displaying content. Users can configure the following elements for each style:


  • Font

  • Size (px)

  • Formatting

    • Bold

    • Italic

    • Underlined

  • Colour


Subject to the theme, the following font styles can be set:


  • H1 (Titles)

  • H2 (Sub heading)

  • H3 (Sub heading)

  • Screen topic titles

  • Instruction text (initial, intermediate and final)

  • Body text

  • Button text

  • Custom 1

  • Custom 2

Buttons

Backgrounds

Users can set the default background colour values of button items that are used in a theme. These include:


  • Generic

  • Menu

  • Content (large)

  • Content (warning)

  • Content (danger)


For each item, users will be able to configure the default and rollover state colours.


Fonts

For each of the button styles outlined above, users can also configure the font styles for the default and rollover states of each button.


Subject to the theme, the following font styles can be set:


  • Font

  • Size (px)

  • Formatting

    • Bold

    • Italic

    • Underlined

  • Colour


Navigation bar

Background

Users can configure the background of the navigation bar and have the option to set a background image or background colour. When a colour is chosen, the user will also have the opportunity to set an opacity (e.g. 0.8 for 80%).


Font

Users can configure the font style (default and rollover state) of the navigation bar elements.


Subject to the theme, the following font styles can be set:


  • Font

  • Size (px)

  • Formatting

    • Bold

    • Italic

    • Underlined

  • Colour

Topics

Topic titles

Themes support a number of default items that can be displayed on screen when viewing a topic. Users can turn these on or off via theme settings. The available items include:


  • Topic title

  • Screen title

  • Page count (progress indicator)

Topics

Navigation direction

gomo supports two types of navigation style:


  • Horizontal when a user chooses to proceed to the next screen, content is loaded horizontally (in from the right)

  • Vertical when a user chooses to proceed to the next screen, content is loaded vertically (in from the bottom). 


Please note, not all of these features may be visible as they may not be relevant to the selected theme.