Theme configuration guide

Important: the features mentioned below are available for Pro and Enterprise plans. Regarding Starter and Plus plans, please read the following help article: Starter and Plus plans 

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 > General > Theme. 

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, a footer and a favicon:

Theme_01_Home_ImageAssets_v3.png

Recommended asset dimensions (pixels):

Home logo (desktop): 700 x 250px
Home logo (mobile): 300 x 200px
Home background image: 1920 x 1000px. Landscape recommended.
Favicon: 16 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 the page content, such as the registrations and login forms, will be pushed further down the page.
  • The header image can be designed as a banner (1920 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. 

Theme_HomeTab.png

Header

As a program manager, you can also see what entrants and Judges can see by going to Entries > My entries, or, if you have judging setup, Entries > Judge entries. Alternatively, you can create yourself a second user account and use that to log in as either an entrant or a judge.  

The header is shown on the My entries, Judging and Gallery pages (you can read more about the configuration of a Gallery page here).

Recommended asset dimensions (pixels):

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

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

Theme_02_Header.png

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.

Image: Colour settings

Theme_03_Colours.png

 

Image: General > Form and Focus boxes

Theme_03_Colours_01_Registration-page_v2.png

 

Image: General > App header and links

Theme_05_General-01.png

 

Image: General > Info box (aka content blocks)

Theme_03_Colours_03_ContentBlocks.png

 

Image: General > Alert box warning

Theme_05_General-02_AlertWarning.png

Image: General > Alert box error

Theme_05_General-03_AlertError.png

 

Image: Buttons

Theme_03_Colours_04_Buttons.png

 

Image: Tabs

Theme_07_Tabs.png

Image: Navigation

Theme_06_Navigation.png

Changing the colours

  1. Click on the item you want to change
  2. From the colour picker, either select the colour you want of type in the Hex value of the colour you want
  3. Click Ok to apply the colour
  4. Click Save to save your changes
  5. Refresh your page to see the changes to your UI

To reset the colour of an individual item back to the system 'default':

  1. Hover over the item you want to change and a 'reset' link will appear
  2. Click the Reset link
  3. Click Save to save your changes
  4. Refresh your page to see the changes to your UI

To reset all colours, click Reset all and Save, then refresh the page to see the changes.

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): 700 x up to 1000px but no higher than 300px recommended
Footer logo (mobile): 300 x up to 1000px but no higher than 300px recommended
Footer background image: 1920 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.

Theme_02_Footer.png

 

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 1920px 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.

Theme_00_Tab_PDF.png

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.

Theme_00_Tab_Email.png

  

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: 16px 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 (related to notifications and broadcasts)

Video overview

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

Need more help? Get in touch!

We're here to help if you need it. Simply get in touch with our Client Success team through one of the methods available at the base of the page.