[Index]

Model: data/Theme

Themes

To access the latest documentation, go to Documentation and Resources at: https://voss.portalshape.com

  1. Prepare the theme file:

    1. The recommended procedure is to use an export of an exiting theme as a baseline and update it with a new name, images and colours as required. Refer to Download and Update a Theme for details.

    2. Create a folder with the required name of the theme and un-zip the exported theme in it, maintaining directory structure.

      The name of the folder must be the same as the intended theme name (only alphanumeric characters or underscore can be used, with no spaces or special characters).

    3. Add any CSS overrides to the file. Note that only the definitions as shown in the export of a provided CSS file skin.css can be modified.

    4. Add required image files in this folder (if any).

      Important

      If customization is done on MS Windows, check that no desktop.ini files reside in the directory tree of the theme before compressing it.

    5. Create a .zip archive file with the same filename as the folder.

  2. Add the theme to the system:

    1. Choose the hierarchy level at which the theme will be created.

    2. Choose Role Management > Themes to open the Themes list view.

    3. Click Add on the button bar to open the Themes input form. Note that themes can only be customized by a Provider Administrator (or higher).

    4. Enter the Theme Name (same as the file name created above).

    5. Enter Navbar Text if needed. This will show on the navigation bar next to the logo.

    6. Enter an appropriate Site Title if required. The site title entered here is the text displayed in the browser tab.

    7. Click the Browse button to import the created theme zip file. Wait until the system displays the file chosen in the Import File field.

    8. If the theme must also apply to the login page, select the Use this Theme to style Login page check box.

    9. To set login banner text and notices on the login page, refer to Set the Login Page Theme. The Use this Theme to style Login page check box does not have to be selected for banner text to show.

    10. If you want to hide the theme from lower level hierarchies, select the Hide from Lower Hierarchies check box. Users logged in at lower level hierarchies will not be able to see that particular theme on the Themes list view screen.

    11. For details on the Theme Customization tab controls, refer to Create a Theme in the Business Admin Portal.

      Note

      If any details are added on this tab, all fields should be provided with input.

    12. Choose Interface to which the theme applies from the drop down. By default the theme applies to the Administration interface.

    13. Click Save on the button bar when complete.

      Note

      Do not leave the screen until the processing of the theme completes and theme list is refreshed. This can take a few minutes depending on details and complexity of theme uploaded.

Controls appearance of web page

Model Details: data/Theme

Title Description Details
Theme Name * The name that is given to the Theme.
  • Field Name: name
  • Type: String
  • Pattern: ^[a-zA-Z0-9_]+$
Site Title Title displayed in the browser tab
  • Field Name: title
  • Type: String
Import File
  • Field Name: import_file
  • Type: String
  • Format: file
Import File Id
  • Field Name: import_file_id
  • Type: String
Backup Enabled Create backup if existing theme exists
  • Field Name: backup
  • Type: Boolean
Navbar Text Text that appears in the Navbar after login
  • Field Name: banner_title
  • Type: String
Description A description for the Theme.
  • Field Name: description
  • Type: String
Use this Theme to style Login page Determines if this theme is used to style the login page
  • Field Name: is_login_theme
  • Type: Boolean
Hide from Lower Hierarchies Indicates if the theme can be viewed and dowloaded at lower hierarchies.
  • Field Name: hide_from_lower_hierarchies
  • Type: Boolean
Interface The selected interface that is associated with the Theme. The interface can be an Administration or Self Service. Default: administration
  • Field Name: interface
  • Type: String
  • Default: administration
  • Choices: ["Administration", "Self Service"]
Theme Customisation The colours and images that comprise a theme.
  • Field Name: theme_customisation
  • Type: Object
Primary Colour This is the background colour for most menus and headers, as well as the text colour for links and buttons.
  • Field Name: theme_customisation.primary_colour
  • Type: String
  • Format: color
Dark Primary Colour This is the background colour for sub menus and footers, or for contrast with the primary colour.
  • Field Name: theme_customisation.primary_colour_dark
  • Type: String
  • Format: color
Light Primary Colour This colour is used mostly for when hovering over certain text or elements of the primary colour.
  • Field Name: theme_customisation.primary_colour_light
  • Type: String
  • Format: color
Very Light Primary Colour This colour is used for text in the top bar.
  • Field Name: theme_customisation.primary_colour_lightest
  • Type: String
  • Format: color
Accent Colour This colour is used when attention needs to be drawn for important notifications or active buttons and text.
  • Field Name: theme_customisation.accent_colour
  • Type: String
  • Format: color
Light Accent Colour This colour is mostly used as a hover for the accent colour.
  • Field Name: theme_customisation.accent_colour_light
  • Type: String
  • Format: color
Logo This image is used for the logo on the login screen and the top left of the menu bar. Must be a PNG image with a transparent background. Maximum file size is 0.5MiB and maximum dimensions are 600 pixels in width and 192 pixels in height.
  • Field Name: theme_customisation.logo
  • Type: String
  • Format: file
Logo Id
  • Field Name: theme_customisation.logo_id
  • Type: String
Login Background This image is used for the login screen background. Must be a PNG or JPEG image. Maximum file size is 5MiB and maximum dimensions are 1920 pixels in width and 1080 pixels in height.
  • Field Name: theme_customisation.login_bg
  • Type: String
  • Format: file
Login Background Id
  • Field Name: theme_customisation.login_bg_id
  • Type: String
Menu Background This image is used for the side menu background. Must be a PNG or JPEG image. Maximum file size is 2MiB and maximum dimensions are 240 pixels in width and 1040 pixels in height.
  • Field Name: theme_customisation.menu_bg
  • Type: String
  • Format: file
Menu Background Id
  • Field Name: theme_customisation.menu_bg_id
  • Type: String
Generate Admin GUI Theme Generate a new admin GUI theme, overwriting an existing theme of the same name
  • Field Name: theme_customisation.data_driven
  • Type: Boolean
Login Page Details How theme styles the login page
  • Field Name: login_page
  • Type: Object
Title Title displayed at top of login page
  • Field Name: login_page.title
  • Type: String
Banner Text Banner text displayed at bottom of login page. References to {{cookie_policy}} and {{privacy_policy}} will be replaced with relevant links when displaying the theme.
  • Field Name: login_page.banner
  • Type: String
  • MaxLength: 2048
Cookie Policy Reference to resultant hyperlink can be added as {{cookie_policy}} inside the Banner Text field
  • Field Name: cookie_policy
  • Type: Object
Link Text * Text that will be displayed for the hyperlink
  • Field Name: login_page.cookie_policy.text
  • Type: String
Link URL * URL that has Cookie Policy. Opens in a new tab
  • Field Name: login_page.cookie_policy.url
  • Type: String
Privacy Policy Reference to resultant hyperlink can be added as {{privacy_policy}} inside the Banner Text field
  • Field Name: privacy_policy
  • Type: Object
Link Text * Text that will be displayed for the hyperlink
  • Field Name: login_page.privacy_policy.text
  • Type: String
Link URL * URL that has Privacy Policy. Opens in a new tab
  • Field Name: login_page.privacy_policy.url
  • Type: String