Theme configuration guide

 
 

Theme settings control the visual identity of your Good Grants account and can be updated at any time. Options vary by subscription level. Accounts with an Intro subscription can find options here: Logo specifications for the Intro plan.

To get started go to Settings > General > Theme in the Manage workspace.

Home

The home page is the login and registration page for your program.

Home logo (desktop)

Home logo desktop
  • Shown on desktop and large tablets
  • Can be aligned left, centre or right
  • Displays at the exact size of the uploaded file
  • Recommended dimensions: 700 × 250 px

Home logo (mobile)

  • Shown on mobile devices
  • Can be aligned left, centre or right
  • Displays at the exact size of the uploaded file
  • Recommended dimensions: 400 × 200 px

Home background image

Home background image
  • Fills the background of the login page
  • Automatically cropped to fit screen size
  • Recommended dimensions: 1920 × 1000 px

Favicon

Favicon
  • Appears in the browser tab or address bar
  • Recommended dimensions: 200 × 200 px

Home header height

  • Controls the height of the logo area on the home page 

Header

The header appears after users sign in and is visible to applicants and reviewers.

Header logo (desktop)

Header logo desktop
  • Appears on the Applications page of the Apply workspace and the Reviewing page of the Review workspace
  • Can be aligned left, centre or right
  • Can link to an external website
  • Recommended dimensions: 750 × 250 px

Header logo (mobile)

  • Appears on mobile devices in applications, reviewing, and galleries
  • Can be aligned left, centre or right
  • Can link to an external website
  • Recommended dimensions: 400 × 200 px

Header background image (desktop)

Header background image
  • Provides the background behind the header logo
  • Header height can be adjusted
  • Recommended dimensions: 1900 × 250 px

Header background image (mobile)

  • Provides the background behind the header logo on mobile
  • Recommended dimensions: 600 × 250 px

Colours

You can customise colours across the platform. To update colours

  1. In the Manage workspace, go to Settings > General > Theme
  2. Open the 'Colours' tab
  3. Select a colour setting (see examples below)
  4. Choose a colour using the picker or hex value
  5. Select OK
  6. Click Save

General

App header background App header background
App header text App header text
Text Text

Link,

Link hover,

and

Link active

Links
Info box background Info box background
Info box heading Info box heading
Info box icon Info box icon
Info box text Info box text
Alert box success Alert box success
Alert box warning Alert box warning
Alert box info Alert box info

Alert box error (background)

and

Alert box text

Alert box error and text
Form box background Form box background
Form box text Form box text
Focus box background Focus box background
Focus box text Focus box text
Brand header background Brand header background
Brand footer background Brand footer background
Home background Home background

Buttons

Primary button,

Primary button text,

Primary button hover,

and

Primary button hover text

Primary button

Secondary button,

Secondary button text,

Secondary button hover,

and

Secondary button hover text

Secondary button

Tertiary button,

Tertiary button text,

Tertiary button hover,

and

Tertiary button hover text

Tertiary button

Tabs

Tab

and

Tab text

Tab and tab text

Tab active

and

Tab active text

Tab active and text

Tab hover

and

Tab hover text

Tab hover and text

Navigation

Menu background Menu background
Menu text Menu text

Menu hover background

and

Menu hover text

Menu hover background and text

Menu active background

and

Menu active text

Menu active background

Tray background

and

Tray text

Tray background and text

Tray link

and
Tray link hover

Tray link and hover
Tray link active Tray link active

Footer

The footer appears at the bottom of pages across the platform.

Footer logo (desktop)

Screen_Shot_2021-12-10_at_13.20.33.png
  • Appears on all pages
  • Displays at the exact uploaded size
  • Recommended dimensions: 700 × up to 300 px

Footer logo (mobile)

  • Appears on all pages on mobile
  • Recommended dimensions: 300 × up to 300 px

Footer background image

Footer background image
  • Appears behind the footer logo
  • Recommended dimensions:
    • Desktop: 1900 × 250 px
    • Mobile: 600 × 250 px

Footer settings

  • Footer height
  • Footer logo alignment
  • Footer logo link URL
  • Option to include footer on the home page

PDF

PDF header image

  • Appears at the top of application-related PDFs
  • Recommended dimensions: 1200 × 180 px

PDF footer image

  • Appears at the bottom of application-related PDFs
  • Recommended dimensions: 1200 × 180 px

Email

Email header image

Email header image
  • Appears at the top of all broadcasts and notifications
  • Recommended dimensions: 580 × 400 px

Email footer image

Email footer image
  • Appears at the bottom of all broadcasts and notifications
  • Recommended dimensions: 580 × 400 px

Quick reference: asset dimensions

Home

  • Home logo (desktop): 700 x 250px
  • Home logo (mobile): 400 x 200px
  • Home background image: 1920 x 1000px. Landscape recommended.
  • Favicon: 200 x 200px

Header

  • Header logo (desktop): 750 x 250px
  • Header logo (mobile): 400 x 200px
  • Header background image (desktop): 1900 x 250px
  • Header background image (mobile): 600 x 250px

Footer 

  • Footer logo (desktop): 700 x 300px (recommended height)
  • Footer logo (mobile): 400 x 200px (recommended height)
  • Footer background image (desktop): 1900 x 250px
  • Footer background image (mobile): 600 x 250px

PDF

  • PDF header and footer: 1200 x 180px

Email

  • Email header and footer: 580 x 400px

Good to know

  • Theme options vary by subscription level.
  • Images are optimised on upload to improve performance.
  • Logos are not scaled and display at uploaded size.
  • Cropping may occur depending on screen size and browser.
  • Header and footer heights can be resized after upload.
  • Colours should meet accessibility contrast standards.
  • Default colours are designed for high contrast.
  • The black Award Force system footer cannot be removed.
  • Background colours are shown if no image is uploaded for the header or footer.
Was this article helpful?
0 out of 0 found this helpful

Articles in this section