Schoolbox Help - Skin Config

Overview Skin Config

Are you sure you want to remove this component?

The appearance of your School's instance is customisable and can be styled to reflect your school's branding and culture. You can adjust colours and add images and logos to promote a positive and familiar user experience when navigating, interacting and reading content within the instance.

When you make an update to the skin config it will not be visible to users until their cache is cleared for Schoolbox.

This can be done on most browsers, when using Windows/Linux, by pressing Ctrl + F5 or Ctrl + the reload button. On Mac OS it can be done by pressing ⌘ Cmd + ⇧ Shift + R, or ⇧ Shift + the reload button.

On this page, you will find the following information:

Accessing and using the Skin Config

Configure the landing page

Configure the main navigation's Skin

Configure component colours

Configure interactive content

Adding custom CSS

Add a custom banner to digests and notifications

How to access and use the pantry

NOTE: Should you require your Skin Configuration to be restored to the default settings, please contact our Support Team.

1. Navigate to Administration > Personalisation > Skin Config

image.php?hash=aefb46fbe942ca364bb4feb8682b3b22a953429b

There are two ways to configure settings within the Skin Config, either by selecting colours or uploading images:

2. Select and adjust the colours using the Colour Picker.

image.php?hash=1c404c29b6c87419da40293413bf02d7e1f2dcc2

image.php?hash=020ad71d51f1d8381b54fa5a283c6c7a718883e2

NOTE: The colour swatch's first 3 colours should be aligned to your instance's colours, it will take the first 3 unique colours from the skin config in this order:

Top Menu Background Colour
Primary Interactive Content Foreground Colour
Primary Interactive Content Background Colour
Primary Interactive Content Selected-State Colour
Side Menu Logo Background Colour
Top Menu Icon Colour
Form Submit Button Background Colour

3. Upload images by selecting or dragging into the highlighted area.

image.php?hash=5e95d88cfb960e971606925b05f5c9614b3072fb

Configure the Landing Page

Are you sure you want to remove this component?

1. Navigate to the Administration Area > Personalisation > Skin Config

2. Adjust the App Icon, Logo Login, Login Background and Login Background as required.

image.php?hash=02335030dbabfe8f291e6863827a7920ab1c2b7e

NOTE: If an App Icon image is not uploaded, the fallback image will be the Top Menu logo.

The table below provides a description of each setting.

image.php?hash=b8b6bec9cea8e4dc8f9db6f6d498f3aac25e590f

image.php?hash=7d94d9a8c6b885dafd517c960b69acf0d1683bfc

Configure the Main Navigation Skin

Are you sure you want to remove this component?

1. Navigate to the Administration Area > Personalisation > Skin Config

2. Adjust the settings as required.

image.php?hash=c9c263c1a74752b58c93acaffb250558eb8dde1e

The table below provides a description of each setting.

image.php?hash=79bbef64bc5c5d01b25651ed93a2f1f491a2c84a

image.php?hash=77e5cd56b4d76b896fe4460190fbf6b556f0de2e

Configure Interactive Content

Are you sure you want to remove this component?

1. Navigate to the Administration Area > Personalisation > Skin Config

2. Adjust Interactive Content colours as required.

image.php?hash=b8b5cf09fd58219aee9644a206454b0b5fddea2c

3. Select 'Save'.

The table below provides a description of each setting.

Setting	Description
Primary Interactive Content Foreground Colour	Sets the foreground colour of some interactive content, including toggles, buttons, checkboxes, text and 3-dot menus.
Primary Interactive Content Background Colour	Sets the background colour of some interactive content, including toggles, buttons, checkboxes, text and 3-dot menus.
Primary Interactive Content Hover Colour	Sets the hover colour of some interactive content, including toggles, buttons, checkboxes, text and 3-dot menus.
Primary Interactive Selected-State Colour	Sets the selected-state colour of some interactive content, including toggles, buttons, checkboxes, text and 3-dot menus.
Secondary Interactive Content Foreground Colour	Sets the foreground colour of some interactive content, including text and border colour of dropzones and when placing components.
Secondary Interactive Content Background Colour	Sets the background colour of some interactive content, including text dropzones. progress bars and some calendar elements.
Secondary Interactive Content Hover Colour	Sets the hover colour of some interactive content, including dropzones.
Form Input Border Colour	Sets the border colour of input fields and hover colour of checkboxes.
Form Input Hover Colour	Sets the hover colour of input fields.
Form Submit Button Text Colour	Sets the text colour in buttons that submit forms.
Form Submit Button Background Colour	Sets the background colour in buttons that submit forms.

NOTE: The colour swatch's first 3 colours should be aligned to your instance's colours, it will take the first 3 unique colours from the skin config in this order:

Top Menu Background Colour
Primary Interactive Content Foreground Colour
Primary Interactive Content Background Colour
Primary Interactive Content Selected-State Colour
Side Menu Logo Background Colour
Top Menu Icon Colour
Form Submit Button Background Colour

Adding Custom CSS

Are you sure you want to remove this component?

It is possible to further personalise your instance through the use of Custom CSS. While this functionality is available, please be aware that Custom CSS can affect the general performance of your instance.

1. Navigate to Administration > Personalisation > Skin Config.

2. Paste the custom CSS into the input box at the bottom of the page.

image.php?hash=85d2e2707189781e3c55e9c4a371cff876f53a18

NOTE: Insertion of custom CSS will override all internal styles. Please be aware that custom CSS can break the appearance of your instance, ensure your CSS is valid before proceeding

Add a Custom Banner to Digests and Notifications

Are you sure you want to remove this component?

1. Navigate to Admin > Personalisation > Skin Config.

2. Scroll to the bottom of the page.

3. Upload the custom banner into the Email Banner Image drop zone.

image.php?hash=a6a4e56da835ebc18bc1b1e7f8020f6130315b53

NOTE: We recommend that this image is 670 x 100px.

4. Select 'Save' to apply the changes.

How to Access & Use the Pantry

Are you sure you want to remove this component?

The Pantry is an area of your instance where you can see each of the applications of the skin config in action.

1. Navigate to the Pantry by adding '/pantry' to the end of your URL from your dashboard.

image.php?hash=5654af569777327f3538870c3d57d206854567b8

2. Select the different tabs to access different examples of the skin config within the instance.

image.php?hash=d5d116f4da73de1d7e6e30813a01c23a8e2d55c8

Configure Component Colours

Are you sure you want to remove this component?

1. Navigate to the Administration Area > Settings > Skin Config.

2. Locate the 'Component' settings.

image.php?hash=db2bedae80966d7a521e0fad85e0a7a48c5da3a7

3. Select 'Save'.

NOTE: Changes made to the Homepage Colour settings will not be applied to existing pages and only to pages created after the changes were made.

The table below provides a description of each setting.

image.php?hash=c4e63c45926a883d1d69eed54a568736ab7014de

image.php?hash=a626d695241338aefc8da3546efee18207904a1a

Manually select colour	Adjust horizontal colour scale	Adjust Transparency slider	Insert RGB code	Select from pre-set colours

Setting	Description	Example
Logo Login	The Logo Login displays an image at the top of the login form.
Login Background	The Login Background displays an image as the background of the landing page. One or more images can be displayed on the login page. If multiple images have been uploaded, a new image will appear each time the page is refreshed.
Login Background Colour	The Login Background colour sets the colour behind the login form on the login page.

Setting	Description	Example
Top Menu Background Colour	Sets the background colour of the top menu & notification panel.
Top Menu Icon Colour	Sets the icon and text colour of items on the top menu.
Top Menu Hover Colour	Sets the hover colour when navigating to items on the top menu.
Top Menu Logo	Sets the square image that will display on the top menu (at least 180x180 pixels).
Side Menu and Notification Panel Background Colour	Sets the background colour of the side menu & notification panel.
Side Menu and Notification Panel Text Colour	Sets the colour of text on the side menu and side menu pin.
Side Menu Hover Colour	Sets the hover colour when navigating to items on the side menu.
Side Menu Logo	Sets the image that will dsiplay at the top of the side menu (at least 196 pixels wide). This also acts as your school logo for the news fallback image.
Side Menu Logo Background Colour	Sets the background colour behind the side menu logo on the side menu.
User Account Menu Background Colour	Sets the background colour of the user account menu.
User Account Menu Text Colour	Sets the text colour on the user account menu.
User Account Menu Hover Colour	Sets the hover colour on the user account menu.
Body Background Colour	Sets the background colour of each page.

Setting	Description	Example
Component Heading Text Colour	Sets the colour of the heading on homepage components.
Component Heading Background Colour	Sets the colour of the heading background on homepage components.
Component Content Text Colour	Sets the colour of the text with the content of homepage components.
Component Content Colour	Sets the colour of the content area of homepage components.