Theme configuration guide

Important: the features described in this guide are available for the Pro plan. For our Starter and Plus plan guide please refer to Logo specifications for Starter and Plus plans.

The theme of your account is entirely customisable and can be updated at any time. Below you'll find a list of all configurable elements and previews of where these items are within the platform. To get started, go to Settings > General > Theme.

Home

In Award Force, the home page refers to the login page that users visit when logging in and registering for your program. Here you can customise the following:

Home logo (desktop)

Use This is the logo users will see when navigating to your program's URL on a desktop computer or large tablet.
Note: the home logo image is not scaled and will appear in the exact size of the file uploaded. Depending on browser proportions, some cropping of the image may occur. This cropping is unavoidable as browser dimensions are controlled by the end-user. 
Preview Screen_Shot_2021-12-16_at_16.19.24_2.png
Recommended asset dimensions (px) 700 x 250

 

Home logo (mobile)

Use This is the logo users will see when navigating to your program's URL on a mobile device.
Note: the home logo image is not scaled and will appear in the exact size of the file uploaded. This cropping is unavoidable as browser dimensions are controlled by the end-user. 
Recommended asset dimensions (px) 300 x 200

 

Home background image

Use This is the image that fills the available background space on your program's login page.
Note: this image is automatically cropped to fit the size of the screen. 
Preview Screen_Shot_2021-12-16_at_16.19.24.png
Recommended asset dimensions (px) 1920 x 1000

 

Favicon

Use This is the image that appears in your browser tab or in the address bar, depending on your browser.
Preview Screen_Shot_2021-12-16_at_16.23.02.png
Recommended asset dimensions (px) 16 x 16

Home header height (px)

Use this setting to control the height of the logo area on your program's login page. If you exceed the recommended height of 250px for your home logo, you can simply adjust this to allow for a larger image. 

Horizontal align home logo

You can utilise this setting to align your logo image to the left, centre, or right. 

Header

Your program's header is where branding will primarily appear for entrants and judges who have signed into the platform.

Header logo (desktop)

Use This logo is displayed on desktop devices to entrants on the Entries > My entries page. It also appears on reviewing pages such as Entries > Judge entries and in galleries.
Note: this image is not scaled and will display at the exact size of the uploaded file. 30px of padding is automatically added to the left margin of this asset.
Preview Screen_Shot_2021-12-17_at_08.14.51_2.png
Recommended asset dimensions (px) 750 x 250

 

Header logo (mobile)

Use This logo is displayed on mobile devices to entrants on the Entries > My entries page. It also appears on reviewing pages such as Entries > Judge entries and in galleries.
Note: this image is not scaled and will display at the exact size of the uploaded file. 30px of padding is automatically added to the left margin of this asset.
Recommended asset dimensions (px) 300 x 200

 

Header background image

Use This is the image that provides a backdrop for your header logo on both mobile and desktop devices.
Note: depending on the size of your user's browser cropping or duplication of the image may occur. 
Preview Screen_Shot_2021-12-17_at_08.14.51_3.png
Recommended asset dimensions (px) 1920 x 250

 

Header height (px)

To accomodate taller or shorter header logos, adjust this setting. 

Header logo link URL

If a user clicks on the image set as the header logo, they will be navigate to this link in a new tab. 

Horizontal align header logo

You can utilise this setting to align your logo image to the left, centre, or right. 

Colours

The colour of virtually every corner of the platform is configurable from this area and can be customised to match your branding. To apply a colour, follow these steps:

  1. Navigate to Settings > General > Theme > Colours
  2. Locate the colour you would like to update
  3. Use the colour picker or hex code entry field to provide your desired replacement
    Note: to remove an unwanted colour selection, hover your cursor over the location name and click Reset.
    Screen_Shot_2021-12-16_at_09.39.10.png
  4. Click OK
  5. Save

General

App header background

and

App header text

Screen_Shot_2021-12-17_at_08.14.51_4.png
Text Screen_Shot_2021-12-17_at_08.14.51_5.png

Link,

Link hover,

and

Link active

Screen_Shot_2021-12-17_at_08.14.51_6.png

Info box background

and

Info box text

Screen_Shot_2021-12-17_at_08.14.51_7.png

Info box heading

and

Info box icon

Screen_Shot_2021-12-17_at_08.14.51_8.png

Alert box warning (background)

and

Alert box info (text)

Screen_Shot_2021-12-16_at_16.27.13.png

Alert box error (background)

and

Alert box text

Screen_Shot_2021-12-17_at_08.44.45.png

Form box background

and

Form box text

Screen_Shot_2021-12-16_at_16.19.24_4.png

Focus box background

and

Focus box text

Screen_Shot_2021-12-16_at_16.19.24_5.png
Brand header background

Screen_Shot_2021-12-17_at_08.14.51_3.png

Note: your selected colour is displayed here if no background image has been uploaded.
Brand footer background Screen_Shot_2021-12-17_at_08.46.55.png
Home background Screen_Shot_2021-12-16_at_16.19.24.png
Note: your selected colour is displayed here if no background image has been uploaded.

 

Buttons

Primary button,

Primary button text,

Primary button hover,

and

Primary button hover text

Screen_Shot_2021-12-17_at_08.56.43_2.png

Secondary button,

Secondary button text,

Secondary button hover,

and

Secondary button hover text

Screen_Shot_2021-12-17_at_08.56.43_3.png

Tertiary button,

Tertiary button text,

Tertiary button hover,

and

Tertiary button hover text

Screen_Shot_2021-12-17_at_08.56.43_4.png

 

Tabs

Tab

and

Tab text

Screen_Shot_2021-12-17_at_08.56.43_5.png

Tab active

and

Tab active text

Screen_Shot_2021-12-17_at_08.56.43_6.png

Tab hover

and

Tab hover text

Screen_Shot_2021-12-17_at_08.59.46.png

 

Navigation

Menu background

and

Menu text

Screen_Shot_2021-12-17_at_09.12.06.png

Menu hover background

and

Menu hover text

Screen_Shot_2021-12-17_at_09.16.14.png

Menu active background

and

Menu active text

Screen_Shot_2021-12-17_at_09.12.06_2.png

Tray background

and

Tray text

Screen_Shot_2021-12-17_at_10.02.18.png

Tray link

and
Tray link hover

Screen_Shot_2021-12-17_at_10.06.03.png

Tray link active

Screen_Shot_2021-12-17_at_10.02.18_2.png

Footer

Footer logo (desktop)

Use

This image appears at the bottom of every page of your account on desktop devices, including the home page if the setting is enabled. This image is not scaled and will display at the exact size of the uploaded file. 

The black bar at the bottom of the page containing the Award Force logo and system status indicator cannot be removed or changed. 

Preview Screen_Shot_2022-01-12_at_10.04.56.png
Recommended asset dimensions (px) 700 x <1000, but no higher than 300px is recommended

 

Footer logo (mobile)

Use

This image appears at the bottom of every page of your account on mobile devices, including the home page if the setting is enabled. This image is not scaled and will display at the exact size of the uploaded file. 

Note:The black bar at the bottom of the page containing the Award Force logo and system status indicator cannot be removed or changed. 
Recommended asset dimensions (px) 300 x <1000, but no higher than 300px is recommended

 

Footer background image

Use This is the image that provides a backdrop for your footer logo on both mobile and desktop devices.
Note: depending on the size of your user's browser cropping or duplication of the image may occur. 
Preview

Screen_Shot_2021-12-17_at_08.46.55.png

Note: your uploaded background image would appear here behind the footer logo.
Recommended asset dimensions (px) 1920 x 250

 

Footer height (px)

To better accomodate a taller or shorter footer logo on desktop devices, adjust this value.

Footer height mobile (px)

To better accomodate a taller or shorter footer logo on mobile devices, adjust this value.

Footer logo link URL

If a user clicks on the image set as the footer logo, they will be navigate to this link in a new tab. 

Horizontal align footer logo

You can utilise this setting to align your logo image to the left, centre, or right. 

Include footer on home

Enable this setting if you would like for your footer to appear on your program's home page. 

PDF

PDF header image

Use This image will appear at the top of all entry-related PDFs generated by the platform. 
Recommended asset dimensions (px) 1200 x 180

 

PDF footer image

Use This image will appear at the bottom of all entry-related PDFs generated by the platform. 
Recommended asset dimensions (px) 1200 x 180

Email

Email header image

Use This image will display at the top of all email messages sent from your account including broadcasts and notifications. Larger images will be scaled down automatically.
Preview Screen_Shot_2021-12-17_at_10.09.30_2.png
Recommended asset dimensions (px) 580 x 400

 

Email footer image

Use This image will display at the bottom of all email messages sent from your account including broadcasts and notifications. Larger images will be scaled down automatically.
Preview Screen_Shot_2021-12-17_at_10.09.30.png
Recommended asset dimensions (px) 580 x 400

Quick reference: asset dimensions

Home

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

Header

Header logo (desktop): 700 x 250px
Header logo (mobile): 300 x 200px
Header background image: 1920 x 250

Footer 

Footer logo (desktop): 700 x 300px (recommended height)
Footer logo (mobile): 300 x 300px (recommended height)
Footer background image: 1920 x 250px

PDF

PDF header and footer: 1200 x 180px

Email

Email header and footer: 580 x 400px

Video overview

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

Need more help? Get in touch!

Simply send us a message via this form and we will get back to you quickly!
Our globally distributed client success team are here to help 24 hours a day, Monday to Friday (business hours).