To customize the Visual and Login elements mentioned in this article, please reach out to our Service Desk.
Content
Candidate and Admin Landing/Login Page
You can customize the following elements:
- Switch Admin login link (Show/hide)
By default, this switch link will be disabled. When enabled, users are able to switch between the candidate login page and the admin login page by clicking the corresponding switch in the top header area of the page. - Logo
Your institution's logo can be displayed here. If you choose not to have a logo, you will have a plain text title of your institution name instead. The logo displayed here is also displayed to candidates in the header on the candidate report.
For the logo, we have reserved a maximum area of 300 x 120 px on the login page.
For example: - SSO Login text
If using Single Sign-On (SSO), you can choose what text is displayed to candidates and admin users for the SSO login option. If you choose not to customize, the default text displayed is 'Log in with X'.
- SSO Login logo
If using SSO, you can add a small logo on the SSO login option. Common choices are the institution's logo or the logo of the SSO provider.
The size of this logo needs to be 20x20 px. - Login help text
This box is optional and as default will display the message 'Trouble logging in? Ask your teacher.' on the candidate landing page and 'Trouble logging in? Contact a user administrator' on the admin landing page. This area can be used to add details about privacy notices, terms and conditions, and/or links to support pages.
- Login image
The default login page images as shown in the examples below but these can be changed to images that better suit your institution. The image for the candidate landing/login page can be different from the image for the admin landing/login page.
Additionally, you can add customizable Alt Text to the image. - Image credit
If you have used an image on the landing/login screen that requires photo credits, it is possible to add this in the bottom right corner of the login pages (for both Admin and Candidates). This can be removed if not necessary.
Examples
Candidate login page
Admin login page
Candidate dashboard
Logo
If you have added a logo on the landing/login page, this logo will also be displayed on the Candidate dashboard, otherwise, you will have a plain text title of your institution name instead.
Banner background color
You can change the banner color on the dashboard to one that matches your branding. Please provide us with the hex color code for the chosen color.
Make sure your chosen color meets the basic contrast ratio for white text (#FFFFFF).
Required Contrast Ratios for WCAG Conformance
Level AA – 4.5:1 (WCAG Success Criterion 1.4.3) Minimum
Level AAA – 7:1 (WCAG Success Criterion 1.4.6) Recommended
How to check Colour contrast?
We recommend using the WCAG Color Contrast Checker,
- Foreground color: add #FFFFFF (white) for the text color
- Background color: add the color you want to use for the dashboard banner.
The WCAG compliance results will show immediately after adding both colors.
Technical constraints
Custom background image specifications for login pages
- Recommended dimensions: 1200 x 1000 px, portrait oriented. We also recommend that the main visual element is placed to the left in the image.
- Maximum file size: 1000kb
- Recommended file format: .svg or .jpg, but .png is allowed for images with few colors
Custom logo
- Recommended image dimensions: min. 300 x 120 px
- File size of Image: max 100kb
- File format: .svg, .png and .jpg format is accepted
SSO logo
- Image Shape: Ensure your logo is in a square format.
- Image dimensions: 20 x 20 px. This is both the maximum and recommended resolution to ensure your logo looks optimal on all devices.
- File size of Image: max 50kb
- File format: .png and .jpg format is accepted