Engage Help Center
ENGAGE HELP CENTER
Style settings
Learn how to customize the appearance of your Engage organization.
Customising style settings
You can apply various white-labelling options to personalise the look of your whole Engage organisation. Adjust these elements in the Style settings section under Settings.
To manage your organisation's style settings, you need administrator rights with Manage content permissions at the organization level. Learn more about Permission management.
You can apply various white-labelling options to personalise the look of your whole Engage organisation. Adjust these elements in the Style settings section under Settings.
To manage your organisation's style settings, you need administrator rights with Manage content permissions at the organization level. Learn more about Permission management.
Once you adjust any elements in the Style settings section, the "Revert" button allows you to discard any unsaved changes.
1. Primary Colour: Sets the main colour for buttons, selected answers, active fields, and the progress bar.
Changes to the Primary Colour apply to both activities without registration and IFrame-integrated activities.
Read more about Integration style settings.
Read more about Integration style settings.
2. Secondary Colour: Defines the colour of secondary elements like buttons on project and activity cards.
3. Sidebar/Header Background Colour: Sets the colour of the left-side navigation bar and the header background of activities that don't require registration.
3. Sidebar/Header Background Colour: Sets the colour of the left-side navigation bar and the header background of activities that don't require registration.
To maintain contrast, avoid using the same colour or very similar shades for both the Primary Colour and Sidebar/Header Background Colour.
For example, the Primary Colour is applied to buttons in surveys and also highlights the selected section in the left sidebar. If you choose a dark shade for survey buttons (Primary Colour), we recommend selecting a lighter shade for the Sidebar/Header Background Colour. Using dark shades for both may reduce readability, making section names in the left sidebar—such as Manage projects and Projects—hard to see.
For example, the Primary Colour is applied to buttons in surveys and also highlights the selected section in the left sidebar. If you choose a dark shade for survey buttons (Primary Colour), we recommend selecting a lighter shade for the Sidebar/Header Background Colour. Using dark shades for both may reduce readability, making section names in the left sidebar—such as Manage projects and Projects—hard to see.
4. Header Organisation Name Colour: Defines the colour of your organisation's name in headers of activities that don't require registration.
5. Header Survey Title Colour: Customises the title colour in headers of activities that don't require registration.
6. Button Text Colour: Adjusts the text colour of buttons like Next Page, Previous Page, Complete, and the icon color of the sidebar collapse button.
7. Font Name: Specifies a font, but only fonts that are free of charge can be applied.
8. Font URL: Allows linking to an external font for a custom look aligned with your institution’s design.
5. Header Survey Title Colour: Customises the title colour in headers of activities that don't require registration.
6. Button Text Colour: Adjusts the text colour of buttons like Next Page, Previous Page, Complete, and the icon color of the sidebar collapse button.
7. Font Name: Specifies a font, but only fonts that are free of charge can be applied.
8. Font URL: Allows linking to an external font for a custom look aligned with your institution’s design.
You can customize your organization’s font using Google Fonts.
To customize your organization's font using Google Fonts, follow these two steps:
1. Enter the font name.
This should match the name of the font you want to use from Google Fonts.
Example: Roboto
2. Enter the font URL.
Copy the embed link from Google Fonts and paste it into the Font URL field.
Open the font of your choice. Open the "Get font" and then the section "Get embed code". Extract the URL link from the HTML code sample.
Example: https://fonts.googleapis.com/css2?family=Roboto&display=swap
1. Enter the font name.
This should match the name of the font you want to use from Google Fonts.
Example: Roboto
2. Enter the font URL.
Copy the embed link from Google Fonts and paste it into the Font URL field.
Open the font of your choice. Open the "Get font" and then the section "Get embed code". Extract the URL link from the HTML code sample.
Example: https://fonts.googleapis.com/css2?family=Roboto&display=swap
Important!
- Only Google Fonts are supported.
- If the font name and URL don’t match, the font may not load properly.
- Make sure to include both the name and the full URL.
Need help picking a Font? Browse available fonts at fonts.google.com. Choose one that fits your brand and is easy to read.
9. Page Background Colour: Customises the background colour for projects, activities that don't require registration, and the sidebar collapse button.
10. Language Switcher Colour: Toggles between light and dark themes for the language selector in the bottom-left corner of your Engage organisation's window and headers of activities that don't require registration.
10. Language Switcher Colour: Toggles between light and dark themes for the language selector in the bottom-left corner of your Engage organisation's window and headers of activities that don't require registration.
If the Sidebar/Header Background Colour is dark, select "Dark background". If the Sidebar/Header Background Colour is light, select "Light background".
11. Large Logo: Upload your institution’s logo (SVG, PNG, or JPG) in high quality.
12. Small Logo: Add a minimalistic version of your logo (for example, a minimalistic icon) if used in your institution.
12. Small Logo: Add a minimalistic version of your logo (for example, a minimalistic icon) if used in your institution.
The small logo appears at the top of the sidebar when collapsed.
If no small logo is added, a circle in your selected primary color—featuring the first letter of your organization—will replace it.
If no small logo is added, a circle in your selected primary color—featuring the first letter of your organization—will replace it.
Once customised, these settings will automatically apply to your organisation and all activities that don't require registration.
For additional customisation, contact Longenesis Support at support@longenesis.com.
We use cookies in order to secure and improve the Longenesis web page functionality, as well as to optimize your experience within this page.
Please see our Privacy policy for more information on how we use the information about your use of our web page. By continuing to use this web page you agree to our Privacy Policy.
Please see our Privacy policy for more information on how we use the information about your use of our web page. By continuing to use this web page you agree to our Privacy Policy.