Theme configuration guide

 

 

When your account was created, you may have had your theme configured by our service team or your in-house designer may have configured your theme from scratch. Either way, you have full access to make any changes to your theme.

To get started, go to Settings > Theme. 

 

See branding options in action!

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

Home

Home refers to the login page when users visit the program platform. You have the option to upload a logo, a mobile logo, a background image and a favicon.

Recommended asset dimensions:

Home logo (desktop): 700px x 250px
Home logo (mobile): 300px x 200px
Home background image: 1900px x 1000px. Landscape recommended.
Favicon: 16px x 16px (this asset can be an .ico image)

Notes:

  • You can align the logo to the left, centre or right.
  • The home logo is not scaled, it will display at the exact size of the uploaded file.
  • The system will accommodate a height greater than 250px for the home logo but keep in mind that the page content will be pushed further down the page.
  • The header image can be designed as a banner (2000px x 250px), however the 'logo'  should remain in the recommended safe area (centre 700px) to avoid cropping on smaller screens. Please see Branding Specifications for more details on this point.
  • Set the height in the Home header height field. 
  • The home background image is scaled to fit the browser width/height. The image is not distorted, so depending on browser proportions, some cropping of the image may occur. This cropping is unavoidable as browser proportions/dimensions are controlled by the end-user. 

Header

The header is shown on the My entries, Judging and Gallery pages.

Recommended asset dimensions:

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

  • You have the option to upload a logo, a mobile logo and a background image.
  • The header logo is not scaled, it will display at the exact size of the uploaded file.
  • Set the height in the Header height field
  • You can align the logo to the left, centre or right and add a URL link.
  • 30px padding is automatically added to the left margin of this asset.
  • See below for further information on how background images are treated.

Colours

The colours tab is where you can change almost any colour in the system to match your branding.

Use the diagrams below as a guide.




Changing the colours

  1. Select the item you want to change
  2. Choose the colour (use colour picker or hex code)
  3. Press Ok and Save
  4. Refresh your page

To reset a colour back to the original:

  1. Hover over the item you want to change
  2. Click Reset and then Save
  3. Refresh your page

To reset all colours, click Reset all and Save. Refresh the page.

Footer

The footer is shown at the bottom of each page with the option to include/exclude the home page.

Recommended asset dimensions:

Footer logo (desktop): 700px x up to 1000px but no higher than 300px recommended
Footer logo (mobile): 300px x up to 1000px but no higher than 300px recommended
Footer background image: 1900px x 250px recommended

  • You have the option to upload a logo and background image.
  • The footer logo is not scaled, it will display at the exact size of the uploaded file.
  • Set the height for the logo and mobile logo in the footer height fields 
  • You can align the logo to the left, centre or right.
  • The black bar at the very bottom of the page always remains and the colour cannot be changed.
  • See below for further information on how background images are treated.

The footer is commonly used to display sponsor logos. Individual logos cannot be displayed. For multiple sponsors, please combine the logos in one image before uploading. Note: The footer will only display once an image has been uploaded..

Background options for the Header and Footer
  1. Solid colour - if you want a solid background colour, go to the Colours tab and change the Brand header and Brand footer background colours.



  2. Tiled image - if you want a pattern or repeatable image, the system will do this automatically when you upload a background image. The background image is not scaled, it will display and repeat at exactly the size of the uploaded file.



  3. Single image - for single image backgrounds we recommend a width of at least 1900px and maximum height of 250px. Note that a background image for the header and footer will always repeat, so if using a smaller image on a large screen, some repetition will likely be noticeable (see second image).




PDF

You have the option to upload PDF header and footer  images, which will appear on all entry PDFs. The recommended image size is 1200 x 180px in JPEG or PNG format. These dimensions give a good result for print quality. The image will be scaled to the width of the PDF (minus a small margin), with a fluid height.

Email

The email header and footer are included on all emails sent by the system (notifications, broadcasts and system messages). The recommended image size is 580 x 400px in JPEG or PNG format. Images larger than 580 x 400px will be scaled down.

  

Quick Reference: Asset Dimensions Summary

Home

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

Header

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

Footer 

Footer logo (desktop): 700px x no max (300px recommended)
Footer logo (mobile): 300px x no max (300px recommended)
Footer background image: 1900px x 250px

PDF

PDF header and footer: 1200px x 180px

Email

Email header and footer: 580px x 400px max

Important: The Home and Header logos are available on the Starter and Plus plans