Staff Kiosk UI Maintenance
Overview
The ‘Product UI Maintenance’ program in TASS.web System Admin > Utilities manages the User Interface banners and colour themes displayed in Staff Kiosk portal product.
Example
An example of a banner at the top of the page in Staff Kiosk.
Follow the steps below to customise your school’s Staff Kiosk User Interface (UI).
Step 1 : Prepare Your Banner
If you intend to use a banner, you will need to prepare an image file such as a JPEG, GIF, or PNG.
It is important to consider the file size of your images. The larger the image, the longer the Staff Kiosk home page will take to load for staff.
The width of your banner depends on the look you are trying to achieve and the screen resolution of the devices on which Staff Kiosk will run. As a rough guide, a left-justified image of 1300 pixels works well in most resolutions.
The height of your banner image will depend on whether you want the banner to:
Fit above the toolbar and cover the toolbar (as background). See ‘Banner Option A’ below.
Fit above the toolbar. See ‘Banner Option B’ below.
A good design rule is to embed your logo on the left-hand side of your banner image. This will reduce the potential for truncation when Staff Kiosk is used on devices with smaller screen sizes.
Banner Option A |
This option will fit the banner above the toolbar and cover the toolbar (as background). In this case, the height should be no higher than 117 pixels. This is the recommended option. Important! To prevent the toolbar from overriding a section of your banner, you must tick the 'Transparent' flag in the 'Toolbar' panel on the 'Styles' tab. Example 1 A Staff Kiosk banner that fits above the toolbar and covers the toolbar (as background).  |
Banner Option B |
This option will fit the banner above the toolbar. In this case, the height should be no higher than 83 pixels. To make the transition from the banner to the background less obvious, set the 'Background Colour' on the 'Images' tab to the same hexadecimal code as you have in your banner image. Example 2 A Staff Kiosk banner that fits above the toolbar.  |
Step 2 : Prepare Your Login Image
If you want to customise the image displayed on the login screen, you will need to prepare an image file such as a JPEG, GIF, or PNG.
As a rough guide, an image size of 300 pixels in width and 150 pixels in height works well.
Example
An example of a login image in Staff Kiosk.
Step 3 : Add Your Banner
Click on the 'Images' tab and the 'Add Image' button.
Complete the following setups:
Product Image Details | |
|---|---|
* TASS / Portal | Staff Kiosk (TIA) |
* Image Type | Banner |
* Image Number | This is a system-allocated sequential number that increments automatically. If you intend to change the banners for staff regularly, you would create multiple image numbers. As an example, you may have a standard banner along with additional banners for holiday periods or specific school events. |
Enabled | This flag determines if this banner image is the current one displayed in the Staff Kiosk. Use it to turn banner images on and off. |
* Image Upload | Use the 'Choose File' button to locate the file that you want to attach as the banner image (as setup in Step 1). Acceptable file formats are JPEG, GIF or PNG. |
Image Styles | |
* Background Colour | Use the colour picker or enter a hexadecimal code. To make the transition from the banner to the background less obvious, set this colour to the same hexadecimal code that you have in your banner image background. |
Background Colour 2 | You can pick a second colour and the banner background section will graduate from the colour above to this one. This option is not relevant when you have chosen the 'Banner Only' option. |
Transparent | If your banner image has any transparent area, the 'Background Colour' above will be displayed. This option is not relevant when you have chosen the 'Banner Only' option. |
* Repeat Image | If your banner image is relatively small, you can elect to have it repeat across the top section of the Staff Kiosk screen. |
* Horizontal Position | The banner will display from the left. This can't be changed. |
* Vertical Position | The banner will display from the top. This can't be changed. |
Click the 'Save' button to commit your changes to the database.
Step 4 : Add Your Login Image
Click on the 'Images' tab and the 'Add Image' button.
Complete the following setups:
Product Image Details | |
|---|---|
* TASS / Portal | Staff Kiosk |
*Image Type | Login |
*Image Number | This is an automatically allocated sequential number. It would be unlikely to have more than one login image. |
Enabled | This flag determines if this login image is the current one displayed in Staff Kiosk. |
*Image Upload | Use the 'Choose File' button to locate the file from Step 2 that you want to attach as the login image. Acceptable file formats are JPEG, GIF or PNG. |
Image Styles | |
Horizontal Position | You can choose to have the login image positioned on the left, centred, right, or at a specific screen coordinate within the banner panel area. |
Click the 'Save' button to commit your changes to the database.
Step 5 : Add Your Styles
Click the 'Styles' tab and the 'Add Product' button.
Select 'Staff Kiosk' from the dropdown list and click the 'Next' button.
Set your ‘Theme Options’, ‘Toolbar’ and ‘UI Elements’ colour schemes by following the instructions below.
Theme Options
The 'Theme Options' panel allows you to set the colour scheme for the menus in your school's Staff Kiosk.
There are two options: ‘Auto Adjust Theme’ mode or ‘Manual Adjust Theme’ mode.
The ‘Auto Adjust Theme' option is recommended for setting up Staff Kiosk colours. It enables the automatic adjustment of Styles based on ‘Theme Colours’ and Primary 'Background’ Colours.
The recommended method is the ‘Auto Adjust Theme’ mode.
The ‘Manual Adjust Theme’ mode is still available for schools that had this feature before TASS introduced the ‘Auto Adjust Theme’ mode.
Auto Adjust Theme Mode | ||||
|
This is the recommended way to set up Staff Kiosk colour themes. Leave the 'Auto Adjust Theme' ticked. In the 'Theme Options' panel to choose colours (using the colour picker or enter a hexadecimal code) for:
Example An example of the ‘Theme Options’ in TASS.web:  An example of the applied colours in Staff Kiosk:  |
Manual Adjust Theme Mode |
This mode can be used to change individual attributes in the Toolbar, Menu Bar, Menu (Mouse Over), Sub Menu Items, and Sub Menu Items (Mouse Over) panels. The recommended method is the ‘Auto Adjust Theme’ mode. The ‘Manual Adjust Theme’ mode is still available for schools that had this feature before TASS introduced the ‘Auto Adjust Theme’ mode. You should start by selecting base colours in the 'Theme Toolbar Colour' field and 'Theme Menu Colour' field in the 'Theme Options' panel. Next, untick the 'Auto Adjust Theme' box to adjust attributes manually. Once you elect to turn ‘Auto Adjust Theme’ mode off, you cannot turn it back on. If you mess up your colours, you will need to delete this product from the 'Styles' tab, recreate it, and start again. You can now adjust attribute colours on the Toolbar, Menu Bar, Menu (Mouse Over), Sub Menu Items and Sub Menu Items (Mouse Over) panels. Click the 'Save' button to commit your changes to the database. |
Toolbar
If you choose Option A in Step 1, make the Staff Kiosk toolbar transparent by opening the 'Toolbar' panel and checking the 'Transparent' box.
If you choose Option B in Step 1, the 'Auto Adjust Theme Mode' will set your toolbar colour based on your selected 'Theme Menu Colour'. For 'Manual Adjust Theme Mode', select your preferred toolbar colour.
Click the 'Save' button to commit your changes to the database.
UI Elements
Use the 'UI Elements' panel to set:
Panel Header Background
Panel Header Text Colour.
Click the 'Save' button to commit your changes to the database.
Refer to the Staff Kiosk examples below to see where these attributes are used.
Example 1
An example of the ‘Panel Header Background’ and ‘Panel Header Text Colour’ on the Staff Kiosk Homepage.
These colours are used in various list screens:
Example 2
An example of the ‘Panel Header Background’ and ‘Panel Header Text Colour’ on the Staff Kiosk Listings > My Saved Lists screen.
They are also used in some modal windows:
Example 3
An example of the ‘Panel Header Background’ and ‘Panel Header Text Colour’ on the Staff Kiosk ‘Send SMS’ modal screen.
Step 6 : Preview Staff Kiosk
Log in to Staff Kiosk using your login details, or use the ‘Ghost Logon’ link in TASS.web Payroll HRM > Employee/HR > Employee Information > Employees on the ‘General’ tab.
Preview your Banner and Styles.
You may need to clear your web browser cache for the page:
On PC, press ‘Ctrl + F5’.
On Mac, press ‘Command + Option + E’.
If you are ghosted into Staff Kiosk as someone else, select ‘Logout’ from the Profile Name menu in the Toolbar to preview the Parent Lounge login image.