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, open the Manage workspace and go to Settings > General > Theme.
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 | |
| 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 | |
| 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 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 | |
| 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 | |
| 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:
- From 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 |
|
| App header text | |
| Text | |
|
Link, Link hover, and Link active |
|
| Info box background | |
| Info box heading | |
| Info box icon | |
| Info box text | |
| Alert box success | |
|
Alert box warning |
|
| Alert box info | |
|
Alert box error (background) and Alert box text |
|
| Form box background | |
| Form box text | |
| Focus box background | |
| 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 |
Note: this colour is also used for about pages and galleries featured on the program login page.
|
|
Menu text |
|
|
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.
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 | |
| 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 |
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): 1920 x 250px
Footer background image (mobile): 600 x 250px
PDF header and footer: 1200 x 180px
Email header and footer: 580 x 400px