Commercial Debtors UI Maintenance
Overview
The ‘Product UI Maintenance’ program in TASS.web System Admin > Utilities manages the User Interface banner and logo displayed in the Commercial Debtors Online Payment Portal.
The program provides several options for displaying logos and banners in the Commercial Debtors Online Payment Portal:
Options | Description |
|---|---|
Banner Only | The simplest option is to include your logo in the banner image, eliminating the need for a separate logo image. Insert your logo on the left side of your banner. This placement reduces the risk of truncation when the Commercial Debtors Online Payment Portal is viewed on smaller screens. You need to override the default logo in the Commercial Debtors Online Payment Portal with the transparent banner supplied with this help guide. Refer to Step 2 and 5 below for details on uploading a 'transparent logo'. |
Logo Only | This option will display your logo only. You need to override the default banner in the Commercial Debtors Online Payment Portal with the transparent banner supplied with this help guide. Refer to Step 1 and 4 below for details on uploading a 'transparent banner'. |
Banner and Logo | You might use both if you intend to update the Commercial Debtors Online Payment Portal regularly with new banner images and do not want to have to incorporate the school logo into your banner image each time. In this scenario, the logo image would remain constant, and the banner image would be changed regularly using this program. The logo will display over the top of the banner (normally on the left-hand side), so consider this when designing your banner image. |
Follow the steps below to customise your school’s Commercial Debtors Online Payment Portal User Interface (UI).
Step 1 : Prepare Your Banner
If you intend to use the ‘Banner Only’ or ‘Logo and Banner’ options, you will need to prepare an image file such as a JPEG, GIF, or PNG.
If you plan to use the ‘Logo Only’ option without a banner, download the transparent banner file below to replace the default banner.
Click the image below to view it in full size.
Right-click the image and select ‘Save Image As’ to save it in your preferred location.
It is important to consider the file size of your images. The larger the image, the longer the Commercial Debtors Online Payment Portal home page will take to load for customers.
The width of your banner depends on the look you are trying to achieve and the screen resolution of the devices on which the Commercial Debtors Online Payment Portal 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 the Commercial Debtors Online Payment Portal 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 Commercial Debtors Online Payment Portal 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 Commercial Debtors Online Payment Portal banner that fits above the toolbar:  |
Step 2 : Prepare Your Logo
If you intend to use the ‘Logo Only' or ‘Logo and Banner’ options, you will need to prepare an image file such as a JPEG, GIF or PNG.
The logo should be no higher than 83 pixels.
If your logo is to appear over the top of a banner, it is a good idea to make the background of your logo transparent. This looks better.
If you plan to use the ‘Banner Only’ option without a banner, download the transparent logo file below to replace the default logo.
Click the image below to view it in full size.
Right-click the image and select ‘Save Image As’ to save it in your preferred location.
Step 3 : Prepare Your Login Image
To customise the image displayed on the login screen, you must 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 the Commercial Debtors Online Payment Portal:
Step 4 : Add Your Banner
Click on the 'Images' tab and the 'Add Image' button.
Complete the following setups:
Product Image Details | |
* TASS / Portal | CD Online Payment Portal |
* Image Type | Banner |
* Image Number | This is an automatically allocated sequential number. You would create multiple image numbers if you intend to change the banners regularly. As an example you may have a banner that you use during holiday periods. |
Enabled | This flag is used to determine if this banner image is the current one displayed in Commercial Debtors Online Payment Portal. Use this 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. When using the ‘Logo Only’ option, you must use the ‘transparent banner’ from Step 1 to override the default TASS banner. |
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. |
Transparent | If your banner image has any transparent area, the 'Background Colour' above will be displayed. |
* Repeat Image | If your banner image is relatively small, you can elect to have it repeat across the top section of the Commercial Debtors Online Payment Portal. |
* Horizontal Position | You can choose to have the banner positioned on the left, centred, on the right, or at a specific screen coordinate. |
* Vertical Position | You can choose to have the banner positioned at the top, in the middle, on the bottom, 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 Logo
Click on the 'Images' tab and the 'Add Image' button.
Complete the following setups:
Product Image Details | |
* TASS/Portal | CD Online Payment Portal |
* Image Type | Logo |
* Image Number | This is an automatically allocated sequential number. It would be unlikely to have more than one logo image. |
Enabled | This flag is used to determine if this logo image is the current one displayed in the Commercial Debtors Online Payment Portal. |
* Image Upload | Use the 'Choose File' button to locate the file that you want to attach as the logo image (as setup in Step 2). Acceptable file formats are JPEG, GIF or PNG. When using the ‘Baner Only’ option, you must use the ‘transparent logo’ from Step 2 to override the default TASS banner. |
Image Styles | |
* Background Colour | This field is only relevant when you choose the 'Logo Only' option. The colour you nominate here will be displayed instead of having a banner. |
Transparent | If your logo image includes any transparent area, the 'Background Colour' above will be displayed when this checkbox is selected. |
* Repeat Image | Use this option to repeat the image across the top section of the Commercial Debtors Online Payment Portal. |
* Horizontal Position | You can choose to have the logo positioned on the left, centred, right, or at a specific screen coordinate within the banner panel area. |
* Vertical Position | You can choose to have the logo positioned at the top, in the middle, on the bottom, or at a specific screen coordinate within the banner panel area. |
Click the 'Save' button to commit your changes to the database.
Step 6 : Add Your Login Image
Click on the 'Images' tab and the 'Add Image' button.
Complete the following setups:
Product Image Details | |
* TASS / Portal | CD Online Payment Portal |
* 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 is used to determine if this login image is the current one displayed in the Commercial Debtors Online Payment Portal. |
* Image Upload | Use the 'Choose File' button to locate the file from Step 3 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 7 : Add Your Styles
Click on the 'Styles' tab and the 'Add Product' button.
Choose 'Commercial Debtors' from the dropdown list and click the 'Next' button.
Complete your colour choices on the 'Toolbar' panel.
Product Image Details | |
* TASS / Portal | CD Online Payment Portal |
Toolbar | |
* Background | Select a primary toolbar colour. |
Background Gradient Colour | Select a secondary toolbar colour here if you want a gradient (two-tone) toolbar. |
Transparent | Select this checkbox to make the toolbar transparent. |
Example
An example of a Toolbar with a primary colour and gradient colour.
Click the 'Save' button to commit your changes to the database.
Step 8 : Preview the Portal
To preview the Commercial Debtors Online Payment Portal, visit the URL that is configured for the portal in TASS.web System Admin > Utilities > Product Activation Maintenance.
Preview the Login Image.
Then, enter a ‘Customer Code' and 'Invoice Number’ from TASS.web Finance > Commercial Debtors > Customer Information > Customers.
Preview the Banner and Logo.