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.
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 | |
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 | |
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 | |
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 | |
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 | |
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 |
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:
- In the Manage workspace, navigate to Settings > General > Theme > Colours
- Locate the colour you would like to update
- 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.
- Click OK
- Save
General
App header background and App header text |
|
Text | |
Link, Link hover, and Link active |
|
Info box background and Info box text |
|
Info box heading and Info box icon |
|
Alert box warning (background) and Alert box info (text) |
|
Alert box error (background) and Alert box text |
|
Form box background and Form box text |
|
Focus box background and Focus box text |
|
Brand header background |
Note: your selected colour is displayed here if no background image has been uploaded.
|
Brand footer background | |
Home background |
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 |
|
Secondary button, Secondary button text, Secondary button hover, and Secondary button hover text |
|
Tertiary button, Tertiary button text, Tertiary button hover, and Tertiary button hover text |
Tabs
Tab and Tab text |
|
Tab active and Tab active text |
|
Tab hover and Tab hover text |
Navigation
Menu background and Menu text |
Note: any content blocks that are publicly visible, including About pages will use this theming configuration on your program's login page.
|
Menu hover background and Menu hover text |
|
Menu active background and Menu active text |
|
Tray background and Tray text |
Note: this colour is also used for the configuration tray of the form editor.
|
Tray link and |
|
Tray link active |
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 | |
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 |
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 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 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 | |
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 | |
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 header and footer: 1200 x 180px
Email header and footer: 580 x 400px
Video overview
Watch this video to get a quick overview of the branding options available to you.