Parent Lounge UI Maintenance

Overview

There are several options available for displaying logos and banners in Parent Lounge.

Option	Description
Banner Only	The simplest option is to embed your logo into your banner image. Therefore you just add a single image. A good design rule is to embed your logo on the left hand side of your banner image. This will reduce the potential for it to be truncated when Parent Lounge is used on devices with smaller screen sizes.
Logo Only	Using this option, the school would upload a single logo image. A Background Colour can be set to display in place of a banner.
Banner and Logo	Use both the banner and logo if you intend to update Parent Lounge 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 of the banner). Consider this when designing your banner image.
Click the link to view Banner Only, Logo Only and Banner & Logo Images.

Setting up a Logo / Banner

The process for setting up all three options is similar. The difference is selecting what images are enabled in the Parent Lounge.

Item

Process

Description

1

Prepare your Banner or Logo

Prepare an image file (E.g. JPEG, GIF or PNG).

The larger a file size image, the longer the Parent Lounge home page will take to load.

The height of your logo / banner image will depend on whether you want the banner to:

Fit above the toolbar. Maximum height - 83 pixels.
Fit above the toolbar and cover the toolbar (as background). Maximum height - 117 pixels.

To stop the toolbar from overriding a section of your logo / banner you will need to tick the Transparent flag in the Toolbar panel on the Styles tab.

Banner Only

The width of your banner is dependent on the look you are trying to achieve and the screen resolution of devices you anticipate Parent Lounge will run on.

As a guide, a left justified image of 1300 pixels is recommended.

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.

2

Add your Banner or Logo

Go to System Admin > Utilities > Product UI Maintenance.
Click on the Images tab and the Add Image button.
Complete the following set up:

Fields that require further explanation
TASS / Portal	Parent Lounge
Image Type	Choose Banner or Logo
Image Number	This is a system allocated sequential number which will increment automatically. You would create multiple image numbers if you intend to change the banners for parents regularly. It would be unlikely to have more than one logo image. As an example you may have a banner that you use during holiday periods or to market certain events.
Enabled	This flag is used to determine if this logo / banner image in the current one displayed in Parent Lounge. Use this to turn logo / banner images on and off.
Image Upload	Use the Browse button to locate the file that you want to attach as the image.
Background Colour	Use the colour picker or enter a hexadecimal code. Banner Only 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. Logo Only The colour you nominate here will be displayed in place of having a banner.
Background Colour 2 (For Gradient)	This option is not relevant when you have chosen the Banner Only and Logo Only option.
Transparent	This option is not relevant when you have chosen the Banner Only option. To display the Background Colour you have nominated for Logo Only, ensure this option is NOT ticked. This option is not relevant when you have chosen the Banner Only option. To display the Background Colour you have nominated for Logo Only, ensure this option is NOT ticked.
Repeat Image	You can elect to have it repeat across the top section of the Parent Lounge screen.
Horizontal Position	Choose to have the image positioned on the left, centred, on the right or at a specific screen to co-ordinate.
Vertical Position	Choose to have the image positioned at the top, in the middle, on the bottom or at a specific screen co-ordnate within the banner panel area.

4. Click Save.

3

Prepare your Image Sliders

Image sliders are the pictures that display in a rotating carousel on the Parent Lounge homepage.

Image sliders can be used to promote and market events that are happening at your school. They could also be used to publish photos of various student activities such as sports, musicals or excursions.

The dimensions of your Image Sliders is dependent on screen resolution and the types of devices you anticipate Parent Lounge will run on.

As a guide, 1000 pixels in width and 500 pixels in height is recommended.

To publish image sliders you will need to prepare an image file (E.g. JPEG, GIF or PNG).

Image Sliders resize based on the width (to fit the whole panel). Ratios less than 2:1 are not recommended as the image will go beyond the visible panel (vertically).

The larger a file size image, the longer the Parent Lounge home page will take to load.

4

Add your Image Sliders

Go to System Admin > Utilities > Product UI Maintenance.
Click on the Images tab and the Add Image button.
Complete the following set up:

Fields that require further explanation
TASS / Portal	Parent Lounge
Image Type	Image Slider
Image Number	This is a system allocated sequential number.
Enabled	This flag is used to determine if this Image Slider is currently displayed in Parent Lounge. Use this to turn Image Sliders on and off.
Image Upload	Use the Browse button to locate the file that you want to attach as the logo image.
Heading (0 of 500)	Use this field to enter and display a heading that will appear underneath your Image Slider.
Heading (0 of 2000)	Use this field to enter and display a caption or description for the Image Slider that you are uploading.
Sort Order	Use this field to determine the order that Image Sliders appear as they rotate through.

4. Click Save.

There are default Image Sliders installed with Parent Lounge. We recommend that you upload your Image Sliders and then disable the default Image Sliders using the Enabled field above.

5. Review or edit the 'Image Slider Settings' on the 'Homepage' tab in TASS.web program Student Admin > Parent Records > Setup Information > Parent Lounge Setup.

5

Add your Styles

Go to System Admin > Utilities > Product UI Maintenance.
Click on the Styles tab and the Add Product button.
Choose Parent Lounge from the dropdown list and click Next.
Complete your colour choices on the UI Elements panel.

The controls elements in the Parent Lounge User Interface (except menus).

The image below displays where these attributes appear in the Parent Lounge:

Row Hover Background.
Row Selected Background.
Panel Header Background.
Panel Header Text Colour.
Content Text Colour.

5. Set the colour scheme for the Menus in your Parent Lounge. There are two options:

a) Auto Adjust Theme Mode

This is the recommended way to setup Parent Lounge colours.

Leave the Auto Adjust Theme ticked.

In the Theme Options panel choose colours (using the colour picker or enter a hexadecimal code) for:

Theme Toolbar Colour	Area 1 in the image below. It often looks better to make the toolbar transparent. Go to the Toolbar panel and tick the Transparent box.
Theme Menu Colour	Area 2 in the image below. The program will set all other attributes for the Menu Bar, Menu (Mouse Over), Sub Menu Items and Sub Menu Items (Mouse Over) panels.

b) Manual Adjust Mode

Use this mode to change individual attributes in the Toolbar, Menu Bar, Menu (Mouse Over), Sub Menu Items and Sub Menu Items (Mouse Over) panels.

In the Theme Options panel, choose base colours for the Them Toolbar Colour and Theme Menu Colour.
Uncheck Auto Adjust Theme
Adjust attribute colours.

Once you elect to turn Auto Adjust Mode off, you can NOT turn it back on. You will need to delete this product from the Styles tab and then recreate it.

6. Click Save.

Customising the Login Image

If you are going to customise the image that is displayed as part of the login screen, you will need to prepare an image file such as a JPEG, GIF or PNG.

As a guide, an image size of 300 pixels in width and 150 pixels in height works well.

Click on the 'Images' tab and the 'Add Image' button.

Complete the following setups

TASS/Portal	Parent Lounge
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 Parent Lounge.
Image Upload	Use the Browse button to locate the file that you want to attach as the login image.