Theme configuration guide

Theme settings control the visual identity of your Award Force account and can be updated at any time. Options vary by subscription level. Accounts with a Growth subscription can find options here: Logo specifications for Growth accounts

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 example
  • 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 entrants and judges.

Header logo (desktop)

Header desktop logo
  • Appears on the Entries page of the Enter workspace and the Judging page of the Judge 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 entries, judging 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

and

App header text

App header
Text Text

Link,

Link hover,

and

Link active

Links

Info box background

and

Info box text

Info box background and text

Info box heading

and

Info box icon

Info box heading and icon

Alert box warning (background)

and

Alert box info (text)

Alert box warning and info

Alert box error (background)

and

Alert box text

Alert box error and text

Form box background

and

Form box text

Form box background and text

Focus box background

and

Focus box text

Focus box background and 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 tab active text

Tab hover

and

Tab hover text

Tab hover and tab hover text

Navigation

Menu background

and

Menu text

Menu background and text

Menu hover background

and

Menu hover text

Menu hover background and text

Menu active background

and

Menu active text

Tray background and text

Tray background

and

Tray text

Settings.png

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)

Footer logo
  • 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 entry-related PDFs
  • Recommended dimensions: 1200 × 180 px

PDF footer image

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

Email

Email header image

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

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.

Video overview

Watch this video to get a quick overview of the branding options available to you.

Examples

Was this article helpful?
13 out of 18 found this helpful

Articles in this section