Theme configuration guide

 
 
Important: the features described in this guide are available for the Premium plan. For our Intro plan guide please refer to Logo specifications for the Intro plan.

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, 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 Good Grants, 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, center, 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.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, center, 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. This image is automatically cropped to fit the size of the screen. 
Preview Home_background.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 Favicon.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 applicants and reviewers who have signed into the platform.

Header logo (desktop)

Use

This logo is displayed on desktop devices to applicants in the Apply workspace on the Applications page. It also appears in the Review workspace Applications page and in galleries. 

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

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

Header logo (mobile)

Use

This logo is displayed on mobile devices to applicants in the Apply workspace on the Applications page. It also appears in the Review workspace on the Applications page and in galleries.

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

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

Use

This is the image that provides a backdrop for your header logo on both mobile and desktop 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. 
Preview Header_background_image.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 open the Manage workspace and navigate to Settings > General > Theme and drag the small sizing lines to increase or decrease the size of these elements. 
Header_adjustment_example_gif.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. From 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

App_header_background.png
App header text App_header_text.png
Text Text.jpg

Link,

Link hover,

and

Link active

Link.png
Info box background Info_box_background.png
Info box heading Info_box_heading.png
Info box icon Info_box_icon.png
Info box text Info_box_background.png
Alert box success Screen_Shot_2021-12-16_at_09.48.17.png

Alert box warning

Screen_Shot_2021-12-15_at_08.53.10.png
Alert box info Screen_Shot_2021-12-15_at_08.53.10_2.png

Alert box error (background)

and

Alert box text

Screen_Shot_2021-12-14_at_17.22.58.png
Form box background Form_box_background.png
Form box text Form_box_text.png
Focus box background Focus_box_background.png
Focus box text Focus_box_text.png
Brand header background

Header_background_image.png

Note: your selected colour is displayed here if no background image has been uploaded.
Brand footer background Screen_Shot_2021-12-15_at_08.34.36.png
Home background Home_background.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 colour.png

Note: the Submit application button will display with the primary colour on the last tab of the application form. For all other tabs it is displayed in the tertiary colour. 

Secondary button,

Secondary button text,

Secondary button hover,

and

Secondary button hover text

Secondary button colour.png

Tertiary button,

Tertiary button text,

Tertiary button hover,

and

Tertiary button hover text

Tertiary button colour.png

Tabs

Tab

and

Tab text

Screen_Shot_2021-12-14_at_17.16.47_2.png

Tab active

and

Tab active text

Screen_Shot_2021-12-14_at_17.16.47_3.png

Tab hover

and

Tab hover text

Screen_Shot_2021-12-14_at_17.18.42.png

Navigation

Menu background

Menu_background.png

Note: this colour is also used for about pages and galleries featured on the program login page. 
Menu colour on home page

Menu text

Menu_text.png

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

Screenshot_2022-09-06_at_16.07.51.png

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

Tray link

and
Tray link hover

Screenshot_2022-09-06_at_16.09.01.png

Tray link active

Screenshot_2022-09-06_at_16.10.17.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. 


Note: the black bar at the bottom of the page containing the Good Grants logo and system status indicator cannot be removed or changed. 
Preview Screen_Shot_2021-12-10_at_13.20.33.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.

Note: 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 Good Grants logo and system status indicator cannot be removed or changed. 

Recommended asset dimensions (px) 400 x 200, 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-15_at_08.34.36.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-16_at_12.31.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-16_at_12.31.55_2.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): 1920 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

Was this article helpful?
0 out of 0 found this helpful

Articles in this section