Theme configuration guide

Important: the features described in this guide are available for the Pro plan and above. For our Growth plan guide please refer to Logo specifications for Growth accounts.

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, open the Manage workspace and go to Settings > General > Theme.

Note: a slight loss of image quality may occur when assets are uploaded due to optimisation. This is to guarantee that your account quickly loads across any number of device types and sizes.  

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.

Using the available Horizontal align home logo drop-down, you can choose whether this logo image is aligned to the left, centre, or right of the page. 

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

Using the available Horizontal align home logo drop-down, you can choose whether this logo image is aligned to the left, centre, or right of the page.

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) 400 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 Home_background_image.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) 200 x 200

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. 

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 in the Enter workspace under Entries. It also appears on judging pages in the Judge workspace under Judging and in galleries.

Using the available Horizontal align header logo drop-down, you can choose whether this logo image is aligned to the left, centre, or right of the page.

To link this logo image to an external webpage, add a valid link to the Header logo link URL field. 

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 Header_logo.png
Recommended asset dimensions (px) 750 x 250

 

Header logo (mobile)

Use

This logo is displayed on mobile devices to entrants in the Enter workspace under Entries. It also appears on judging pages in the Judge workspace under Judging and in galleries.

Using the available Horizontal align header logo drop-down, you can choose whether this logo image is aligned to the left, centre, or right of the page.

To link this logo image to an external webpage, add a valid link to the Header logo link URL field. 

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) 400 x 200

 

Header background image (desktop)

Use

This is the image that provides a backdrop for your header logo on desktop devices. 

To accomodate taller or shorter header logos, adjust the Header height (px) field value. 

Note: depending on the size of your user's browser cropping or duplication of the image may occur. 
Preview Header_background.png
Recommended asset dimensions (px) 1900 x 250

 

Header background image (mobile)

Use

This is the image that provides a backdrop for your header logo on mobile devices.

To accommodate taller or shorter header logos, adjust the Header height (px) field value. 

Note: depending on the size of your user's browser cropping or duplication of the image may occur. 
Recommended asset dimensions (px) 600 x 250
Tip: the header logo and header background image height can be resized from within the platform after upload. Simply navigate to the Manage workspace, go to Settings > General > Theme, and drag the small sizing lines to increase or decrease the size of these elements. 
Header_resize.gif

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. In the Manage workspace, navigate to Settings > General > Theme > Colours
  2. Locate the colour you would like to update
  3. Use the colour picker, available swatches, or input a hex code to provide your desired replacement
    Note: to remove an unwanted colour selection, hover your cursor over the location name and click Reset.
    Screen_Shot_2022-07-07_at_09.51.07.png
  4. Click OK
  5. Save
Tip: the default theming colours of the platform are accessible with high colour contract. When configuring your own theming, keep accessibility in mind. Not sure if your branding meets these requirements? Try an online tool like WebAIM or install a browser plug-in like Accessibility Insights.

General

App header background

and

App header text

App_header_background.png
Text Text.png

Link,

Link hover,

and

Link active

Link.png

Info box background

and

Info box text

Info_box.png

Info box heading

and

Info box icon

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

Alert_box_error.png

Form box background

and

Form box text

Form_box_background_image.png

Focus box background

and

Focus box text

Focus_box_background_image.png
Brand header background

Header_background.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 Home_background_image.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

Primary_button_on__Start_here__tab.png

Secondary button,

Secondary button text,

Secondary button hover,

and

Secondary button hover text

Secondary_button_on__Start_here__tab.png

Tertiary button,

Tertiary button text,

Tertiary button hover,

and

Tertiary button hover text

Tertiary_button_on__Start_here__tab.png

 

Tabs

Tab

and

Tab text

Inactive_tab_on__Start_here__tab.png

Tab active

and

Tab active text

Active_tab_on__Start_here__tab.png

Tab hover

and

Tab hover text

Tab_hover_on__Start_here__tab.png

 

Navigation

Menu background

and

Menu text

Menu_background.png

Note: any content blocks that are publicly visible, including About pages will use this theming configuration on your program's login page.
Menu colours on home page

Menu hover background

and

Menu hover text

Menu_hover.png

Menu active background

and

Menu active text

Menu_active.png

Tray background

and

Tray text

Settings.png

Note: this colour is also used for the configuration tray of the form editor

Tray link

and
Tray link hover

Tray_hover.png

Tray link active

Screenshot_2022-08-30_at_14.28.31.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 (desktop)

Use This is the image that provides a backdrop for your footer logo on 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) 1900 x 250

 

Footer background image (mobile)

Use This is the image that provides a backdrop for your footer logo on mobile devices.
Note: depending on the size of your user's browser cropping or duplication of the image may occur. 
Recommended asset dimensions (px) 600 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): 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

Video overview

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

Examples

Was this article helpful?
9 out of 11 found this helpful

Articles in this section