Customisations within Inspera

To customise the visual and text elements mentioned in this article, please reach out to our Service Desk. 

Content

Candidate and Admin Login Page

Customise visual elements

login page 1.png

The image above is from the Candidate login page, but the customisation options are also available on the Admin login page.

  1. Login image

    The default login page images are 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 customisable Alt Text to the image.

  2. 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.

  3. 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:

  4. 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.

  5. 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 SSO logio is the same for candidates and admins.

    The size of this logo is recommended to be 20x20 px.

 

Customise text elements

Custom text on the login page will help users navigate to the correct login screens if they're not familiar with the Candidate and Admin names that is default in Inspera. 

When you want to customise these, please also include any required translations in the request to Service Desk. Translations are supported for all text except for the Login help text (5).

Note: Changes to text elements may take up to two weeks come into effect.

 

login page 2.png

  1. Go to Candidate/Admin Login

    This text can be independently replaced on both the Candidate and Admin login pages. 
    Translations are supported.

  2. Welcome to Candidate/Admin login!

    This text can be independently replaced on both the Candidate and Admin login pages.
    Translations are supported.

  3. 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 customise, the default text displayed is 'Log in with X'. 
    Translations are supported.
  1. Or log in with registered Inspera user credentials

    This text can be replaced, but it is shared between the Candidate and Admin login page. This means that any change will be added to both login pages.
    Translations are supported.

  2. 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. 
    Translations are not supported.

 

Examples

Candidate login page

 

Admin login page

 

Candidate dashboard

Logo

If you have added a logo on the 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  

 

Artiklar i detta avsnitt

Var denna artikel till hjälp?
0 av 0 tyckte detta var till hjälp