Inspire theme settings
- 06 Aug 2024
- 7 minutes to read
Inspire theme settings
- Updated on 06 Aug 2024
- 7 minutes to read
Article summary
Did you find this summary helpful?
Thank you for your feedback
The Inspire theme is a new theme available from Totara 19 onwards. You can configure the Inspire theme by navigating to Quick-access menu > Appearance > Themes > Inspire.
Site theme
With the Inspire theme selected you can configure the following settings.
| Setting | Description | Notes |
|---|---|---|
Brand | ||
Logo | Upload an image to be used as your site's logo in the main navigation. | - |
Alternative text | Add the name of the site to function as a text alternative to the logo image. This is recommended to make your site more accessible. | - |
Favicon | Here you can upload a small icon which will display in the browser tab next to the page name. The favicon allows users to see which site is open in the tab at a glance. | The favicon image should be 16 x 16 px and in the .ico format. |
Brand - email notifications | ||
| Header HTML | Add custom HTML to brand the header of email notifications. | Note that the brand colour used in email notifications is set by the Accent colour setting. Multi-language content is not supported. |
| Footer HTML | Add custom HTML to brand the footer of email notifications. | Note that the brand colour used in email notifications is set by the Accent colour setting. Multi-language content is not supported. |
| Footer plain text | Add standard text that will appear in plain-text email notifications, such as legal disclaimers or contact details. | - |
| Test email notification | Use this button to send a test email notification to see how your changes look. | - |
Colour | ||
Primary colour | Use the colour picker or enter a hex code for the colour you want to use for the interactive elements of your site, e.g. hyperlinks and buttons. | - |
Use overriding colours | If you want to configure the colour of interactive elements in more detail you can enable this setting. With Use overriding colours enabled you can set the following colours individually:
| - |
Accent colour | Set the colour of non-interactive elements, such as the tab highlight line and card outlines. | The accent colour determines the colour used in email notifications. |
Header background colour | Set the background colour of the main navigation bar at the top of the page. | This setting can be accessed by expanding the More colours section. |
Header text colour | Set the text colour on the main navigation bar at the top of the page. | This setting can be accessed by expanding the More colours section. |
Page text colour | Set the colour of text on the site. | This setting can be accessed by expanding the More colours section. |
Footer background colour | Set the background colour of the site footer. | This setting can be accessed by expanding the More colours section. |
Footer text colour | Set the colour of text in the site footer. | This setting can be accessed by expanding the More colours section. |
Images | ||
Core: Display login page image | Enable this setting to display an image of your choice on your site's login page. You will need to upload an image for the Login page background setting. | - |
Core: Login page background | Upload an image to use as the background for your site's login page. The Display login page image setting must be enabled. | We recommend using a 1200px x 1200px image, as the image may be cropped depending on screen size. JPEG, PNG and SVG file formats are accepted, and PNG files are preferred for illustrative images. We recommend keeping the file size as small as possible (without sacrificing quality), with a minimum DPI of 150. |
Learn: Course | Upload an image to change the default course image. | - |
Learn: Program | Upload an image to change the default program image. | - |
Learn: Certification | Upload an image to change the default certification image. | - |
Engage: Resource | Upload an image to change the default resource image. | - |
Engage: Workspace | Upload an image to change the default workspace image. | - |
Custom styles | ||
Custom CSS | Here you can enter CSS code to override the styles for specific site components. | Any CSS added here will be applied after all other styles. |
Custom footer | Enter text to display in the site footer when this theme is used. | Text added to the footer is centre-aligned by default. You can also add HTML code to this section to customise the footer. |
Tenant themes
If you have multitenancy enabled on your site and have multiple tenants set up, you can choose to use the default site theme or create specific themes for each tenant.
To configure the default look and feel of the site click Edit site brand.
In the Tenant branding table you can see a list of all of the tenants on your site, along with their unique Tenant identifier. The Branding column indicates whether each tenant is using the default Site branding or its own Custom branding. To edit a tenant's theme, click the pencil icon (
) in the Actions column.
When Custom tenant branding is enabled for a tenant, changes to the site branding will no longer be applied to the tenant. When custom branding is first enabled for a specific tenant the current site settings will be used as default for that tenant. If custom tenant branding is enabled, later disabled, and even enabled again, the tenant branding used will be the same as it would have been without disabling and re-enabling it, regardless of whether any changes were made to the site settings since enabling it the first time.
By default, each tenant will use the Site branding, but enabling the Custom tenant branding setting allows you to configure the following settings.
| Setting | Description | Notes |
|---|---|---|
Brand | ||
Logo | Upload an image to be used as the tenant's logo in the main navigation. | - |
Logo alternative text | Add the name of the site to function as a text alternative to the logo image. This is recommended to make your site more accessible. | - |
Favicon | Here you can upload a small icon which will display in the browser tab next to the page name. The favicon allows users to see which site is open in the tab at a glance. | The favicon image should be 16 x 16 px and in the .ico format. |
Brand - email notifications | ||
| Header HTML | Add custom HTML to brand the header of email notifications sent from the tenant. | Note that the brand colour used in email notifications is set by the Accent colour setting. Multi-language content is not supported. |
| Footer HTML | Add custom HTML to brand the footer of email notifications sent from the tenant. | Note that the brand colour used in email notifications is set by the Accent colour setting. Multi-language content is not supported. |
| Footer plain text | Add standard text that will appear in plain-text email notifications sent from the tenant, such as legal disclaimers or contact details. | - |
| Test email notification | Use this button to send a test email notification to see how your changes look. | - |
Colour | ||
Primary colour | Use the colour picker or enter a hex code for the colour you want to use for any interactive elements within the tenant, e.g. hyperlinks and buttons. | - |
Use overriding colours | If you want to configure the colour of interactive elements in more detail you can enable this setting. With Use overriding colours enabled you can set the following colours individually:
| - |
Accent colour | Set the colour of non-interactive elements, such as the tab highlight line and card outlines. | The accent colour determines the colour used in email notifications. |
Header background colour | Set the background colour of the main navigation bar at the top of the page. | This setting can be accessed by expanding the More colours section. |
Header text colour | Set the text colour on the main navigation bar at the top of the page. | This setting can be accessed by expanding the More colours section. |
Page text colour | Set the colour of text on the site. | This setting can be accessed by expanding the More colours section. |
Footer background colour | Set the background colour of the site footer. | This setting can be accessed by expanding the More colours section. |
Footer text colour | Set the colour of text in the site footer. | This setting can be accessed by expanding the More colours section. |
Images | ||
Display login page image | Enable this setting to display an image of your choice on this tenant's login page. You will need to upload an image for the Login page background setting. | Note that this setting will only be available if you have enabled the Enable pre-login tenant themes setting (Quick-access menu > Tenants > Settings). |
Login page background | Upload an image to use as the background for this tenant's login page. The Display login page image setting must be enabled. | Note that this setting will only be available if you have enabled the Enable pre-login tenant themes setting (Quick-access menu > Tenants > Settings). We recommend using a 1200px x 1200px image, as the image may be cropped depending on screen size. JPEG, PNG and SVG file formats are accepted, and PNG files are preferred for illustrative images. We recommend keeping the file size as small as possible (without sacrificing quality), with a minimum DPI of 150. |
| Learn: Course | Upload an image to change the default course image for courses within the tenant. | - |
| Learn: Program | Upload an image to change the default program image for programs within the tenant. | - |
| Learn: Certification | Upload an image to change the default certification image for certifications within the tenant. | - |
| Engage: Resource | Upload an image to change the default resource image for resources within the tenant. | - |
| Engage: Workspace | Upload an image to change the default workspace image for workspaces within the tenant. | - |
Custom | ||
Custom footer | Enter text to display in the site footer when this theme is used. | Text added to the footer is centre-aligned by default. You can also add HTML code to this section to customise the footer. |
Can't find what you're looking for? Contact us at documentation@totara.com. Alternatively, book a call to have a chat about your Totara platform with a dedicated Customer Success Manager.
© Copyright 2024 Totara Learning Solutions. All rights reserved.
© Copyright 2024 Totara Learning Solutions. All rights reserved.
Was this article helpful?
