Student Cafe UI Maintenance
There are several options available for displaying logos and banners in Student Café:
Banner Only - The simplest option is to include your logo in your banner image. By doing this you won't need a separate logo image.
It is advisable to insert your logo on the left hand side of your banner. This will reduce the potential for it to be truncated when Student Café is used on devices with smaller screen sizes.
There is a default TASS logo installed with Student Café that will display over the top of a section of your banner. To stop this happening you need to upload the 'transparent' logo supplied with this on-line help. Refer to Step 3 below for details on uploading a 'transparent' logo.
Logo Only – This will display your logo only. You need to override the default banner in Student Café with the transparent banner supplied with this on-line help. Refer to Step 4 below for details on uploading a 'transparent' banner.
Banner and Logo – You might use both if you intend to update Student Café 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.
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.
If you are not going to use a banner you will need to use the transparent banner supplied with this on-line help to overwrite the default banner.
It is important to consider the file size of your images as the larger the image, the longer the Student Café home page will take to load for students.
The height of your banner image will depend on whether you want the banner to:
Fit above the toolbar. In this case it should be no higher than 83 pixels. See example 1 below.
Fit above the toolbar and cover the toolbar (as background). In this case it should be no higher than 117 pixels. See example 2 below.
To stop the toolbar overriding a section of your banner you will need to tick the 'Transparent' flag in the 'Toolbar' panel on the 'Styles' tab.
The width of your banner is dependent on the look you are trying to achieve and the screen resolution of devices Student Café will run on. As a rough guide, a left justified image of 1300 pixels works well in most resolutions.
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 1
Example 2
Step 2 Prepare your logo
If you intend to use a logo you will need to prepare an image file such as a jpeg, gif or png.
If you are going to incorporate your logo into your banner image, you will need to use the transparent logo supplied with this on-line help to overwrite the default logo.
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.
Step 3 Add your banner
Click on the 'Images' tab and the 'Add Image' button.
Complete the following setups:
TASS/Portal | Student Café. |
|---|---|
Image Type | Banner |
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 students 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 Student Café. Use this to turn banner images on and off. |
Image Upload | Use the 'Browse' button to locate the file that you want to attach as the banner image (as setup in Step 1). |
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 (For Gradient) | You canpick 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 Student Café screen. |
Horizontal Position | Choose to have the banner positioned on the left, centred, on the right or at a specific screen co-ordinate. |
Vertical Position | Choose to have the banner positioned at the top, in the middle, on the bottom or at a specific screen co-ordinate within the banner panel area. |
Click the 'Save' button to commit your changes to the database.
Step 4 Add your logo
Click on the 'Images' tab and the 'Add Image' button.
Complete the following setups:
TASS/Portal | Student Café. |
|---|---|
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 Student Café. |
Image Upload | Use the 'Browse' button to locate the file that you want to attach as the logo image (as setup in Step 2). |
Background Colour | This field is only relevant where you have chosen the 'Logo Only' option. The colour you nominate here will be displayed in place of having a banner. |
Transparent | If your logo image includes any transparent area the 'Background Colour' above will be displayed. |
Repeat Image | You can elect to have this image repeat across the top section of the Student Café screen. |
Horizontal Position | Choose to have the logo positioned on the left, centred, on the right or at a specific screen co-ordinate. |
Vertical Position | Choose to have the logo positioned at the top, in the middle, on the bottom or at a specific screen co-ordinate within the banner panel area. |
Click the 'Save' button to commit your changes to the database.
Step 5 Add your styles
Click on the 'Styles' tab and the 'Add Product' button.
Choose 'Student Café' from the dropdown list and click the 'Next' button.
A. First up, you need to complete your colour choices on the 'UI Elements' panel.
This controls elements in the Student Café user interface except menus.
Refer to the example below to see where these attributes appear in Student Café:
Row Hover Background
Row Selected Background
Panel Header Background
Panel Header Text Colour
Content Text Colour
B. Next set the colour scheme for the menus in your school's Student Café.
There are two options: Auto Adjust mode or Manual Adjust Mode.
Auto Adjust Theme mode
This is the recommended way to setup Student Café 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 | Referring to the screenshot directly below. This is the area 1. It often looks better to make the toolbar transparent. To do this, go to the 'Toolbar' panel and tick the 'Transparent' box. |
|---|---|
Theme Menu Colour | Referring to the screenshot directly below. This is the area 2. The program will set all other attributes for the Menu Bar, Menu (Mouse Over), Sub Menu Items and Sub Menu Items (Mouse Over) panels. |
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.
It is recommended that you start by selecting base colours in the 'Theme Toolbar Colour' field and 'Theme Menu Colour' field in the 'Theme Options' panel.
Next un-tick the 'Auto Adjust Theme' box to make manual adjustments to attributes.
Once you elect to turn Auto Adjust mode off, you cannot turn it back on. If you make a mess with your colours, then you will need to delete this product from the 'Styles' tab and then re-create 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.
Step 6 Prepare and add your 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 rough 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 | Student Café. |
|---|---|
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 Student Café. |
Image Upload | Use the 'Browse' button to locate the file that you want to attach as the login image. |