Custom themes management
Getting started
We are happy to introduce the new custom theme management feature in the Loree admin dashboard.
Admins can now effortlessly create and manage themes for Loree-built content across their organization and apply them to multiple sub-accounts and export the CSS to Canvas LMS.
Work flow diagram:
Benefits of a Customized Theme
- Centralized Theme Management: Admins can easily manage themes for all Loree-designed content from one place, ensuring consistency across the organization.
- Customizable & Flexible: Admins can create unique themes for each sub-account while still allowing designers to change styles when needed.
- Improved User Experience: Consistent and well-designed themes make course content look better and easier to use.
- Time-Saving & Efficient: The removal of inline styles and easy theme application reduce effort, making the design process faster and simpler.
Please note
- Initially, the Loree theme is set as the default. Users must create a new theme for their organization.
- The Loree default theme cannot be edited or modified as per product specifications.
- Each sub-account can have only one theme. You cannot add multiple themes to a single sub-account.
To create a new theme, follow the below steps:
Creating a new custom theme
Steps to Create a Custom Theme
|
4. This will redirect you to the Custom Theme page. Make the necessary changes to customize your theme as per your preference. (Refer the below Theme customization section for available options.) 5. After your customization, you can view the real-time change in the preview section. 6. Click the "Create" button in the top-right corner to continue the process. 7. By clicking the "Discord" button, the user will be redirected to the theme dashboard page. |
| 7. A "Create Theme" popup will appear. Enter a title for your theme. 8. Click the "Create" button to create a theme. After that, you will be redirected to the theme dashboard. |
| 9. After loading, a toast message will appear saying "Custom theme created successfully". 10. On the Theme Dashboard, you can view the customized theme with the updated date and time under custom theme. |
Theme customization
Theme Colors
1. Brand colors
Admins can now customize specific colors under the brand colors section. (Refer the below video.)
| Brand Colors | Functionality |
| Primary Color | Change the icon color |
| Heading Text | Change the color of all headings. |
| Link Color | Adjust the color of links across your account |
| Paragraph Text Color | Modify the all text except navigation and blockquotes |
| Caption Color | Customize the color of captions. |
| Link Hover Color | Select a color for links when hovered over |
| Border Color | Modify the color of borders |
| Divider Color | Choose the color for dividers between sections |
2. Table Color
- The admin can modify the table color elements by changing the Table Header Background, Table Header Text Color, and Table Border Color options. (Refer the below video.)
3. Module List Colors
Modules List Colors | Functionality |
Button Background Color | Sets the background color of all module list buttons. |
Button Background Hover Color | Changes the button background color when hovered over. |
Button Border Color | Defines the border color of all buttons in the modules list. |
Button Text Color | Sets the color of the text displayed inside buttons. |
Button Text Hover Color | Changes the button text color when hovered. |
Grid Background Color | Controls the background color of the modules list grid. |
Grid Background Hover | Changes the grid background color when hovered over. |
Grid Border Color | Sets the border color for the grid layout. |
Grid Text Color | Defines the color of all text inside the grid. |
Grid Text Hover Color | Changes the color of grid text when hovered. |
Typography
- The typography section in Themes now allows you to easily customize fonts and text styles across your platform. You can adjust the font family and size for headers (H1 to H6), paragraph text, and links to match your preferred design.
Activating themes
After creating a theme, it will not be activated automatically. Users need to activate it by following the steps below.
1. To activate a theme, click the three dots on the theme and select the Activate option. |
2. After clicking the active option, the admin will see the "Active Theme pop-up," where you can select the sub-account to which the customization should be applied. 3. After selecting the sub-account, click the "Activate" button to continue. |
4, A confirmation popup will appear with important must-do points. 5, Click the "Activate" Button to activate the theme. 6, Discard will drop the process. |
5, After activating the theme, the activated theme will be displayed in the default theme column. |
- At least one theme must be activated.
- When the sub-account already activated with theme and by activating another theme will overwrite the styles in Loree side. However, you must export the CSS to update in Canvas Themes.
- If any templates newly created will apply the current sub-account theme and by using the templates in different sub-account, the styling may vary depends on how the styled themes are configured in each sub-account in Canvas.
- you can still edit the course contents by adding their own styles. This will overwrite the theme style. However, by clearing the format will replace the style to its default theme style.
Exporting Theme
Important: After activating the customized theme in Loree, users must follow the below export and Upload steps. Otherwise, the theme will not update in Canvas.
Exporting CSS in loree
1. Export the CSS
|
2, Copy or Download the CSS
|
Update CSS in Canvas
After exporting the CSS file in the loree, you need to follow the below steps to upload in the canvas:
Step 1: Navigate to Canvas Theme
- Follow the navigation steps in the canvas reference document to access the Canvas Theme page.
- Navigate to the theme page in Canvas and select the currently activated theme in Canvas.
- Locate the Upload tab in the left navigation and click it.
Step 2: Upload the CSS in Canvas
Before making any changes, create a backup of your current Canvas CSS file.
- If you don't have any changes in the canvas, you can directly upload the exported CSS file from Loree to the canvas CSS.
- If you have changes in the canvas, you need to update the new CSS from Loree with the canvas CSS code.
- To update the code, you need to edit the CSS file externally since the canvas does not have its own editor. You must use an external editor to modify the CSS file.
- Open the existing Canvas CSS file in your editor. Locate the line where the old CSS is referenced and replace it with the new export from Loree. (Refer below screeshots)
Old CSS:
After exporting, the new CSS file will look like: - Save and Upload: Save the updated CSS file and upload it back into Canvas.
The new Loree URL must be placed at the top of the file.3. Upload mobile CSS in canvas
When uploading a Loree export CSS to Canva Mobile CSS, follow these steps: Since the @import statement does not work in mobile CSS, you must extract all the CSS files and update them manually. Ensure the extracted CSS files are added in the following order:
|
Edit theme
|
Delete theme
Key Considerations before deleting a theme
- A theme that is currently active cannot be deleted. To remove a theme, deactivate it first.
- If a theme is activated in any sub-account, it cannot be deleted until it is deactivated across all sub-accounts.
- The Loree Default Theme is a system-defined theme and cannot be deleted or edited.
- There must always be at least one active theme in the system. You cannot deactivate or delete all themes at the same time.
- To delete a custom-created theme, ensure it is not active in any sub-account. Only deactivated themes can be removed.
- Once deleted, it will no longer be available in your theme list.
To delete the theme
|
Switch Account
|
Video Tutorial
Need help?
If you need any assistance with theme management, please contact us at. https://support.loree.io We’re here to help!
Related Articles
Loree Interactive Style Management in admin dashboard
Getting started We are happy to introduce the Loree Interactive feature in the admin dashboard. From the admin dashboard, admins can effortlessly customize styles and manage their Loree Interactive content. Benefits of a Loree Interactive feature in ...Custom Row
Getting started Introduction to custom rows The Custom Row feature allows you to save and reuse a row instead of creating a new one from scratch. This helps streamline your workflow by making it easy to save, access, and reuse rows whenever needed. ...Custom Elements
Module List The Module List in the Loree Editor helps you add and display your course modules in a clean and organized way. You can choose how the modules look, arrange them in a layout, preview the result, and then add them to your content. Steps to ...Custom Template
Custom Template The "Custom Template" feature allows users to save a page as a template. Once a page is created, it can be saved as a custom template for future use. This simplifies user workflow by allowing you to save, access, and reuse templates ...What customisation options are available in Loree Design? (Loree Admin)
We have two customization options available in the Loree Design Admin Dashboard. They are : 1. Fonts (Where we can customise fonts) 2. Style Manager Fonts In the world of fonts, Loree shines with a collection of over 900 Google fonts available ...