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

1. Centralized Theme Management: Admins can easily manage themes for all Loree-designed content from one place, ensuring consistency across the organization.
   
2. Customizable & Flexible: Admins can create unique themes for each sub-account while still allowing designers to change styles when needed.
   
3. Improved User Experience: Consistent and well-designed themes make course content look better and easier to use.
   
4. Time-Saving & Efficient: The removal of inline styles and easy theme application reduce effort, making the design process faster and simpler.
   

Please note

1. Initially, the Loree theme is set as the default. Users must create a new theme for their organization.
   
2. The Loree default theme cannot be edited or modified as per product specifications.
   
3. 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

In the Loree Admin Portal, go to the Themes section. Click on Themes to open the Theme dashboard. Click the "+ New Theme" option to start creating 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.
Background Color	Modify the background color of your pages
Link Color	Adjust the color of links across your account
Paragraph Text Color	Modify the color of the paragraph, heading with paragraph.
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

1. 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.)
   

Typography

1. 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.

1. At least one theme must be activated.
   
2. 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.
   
3. 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.
   
4. 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

After activating a theme, click the three dots next to the theme title. Select "Export CSS."

2, Copy or Download the CSS

An Export CSS modal will appear with the CSS code. Click the copy icon to copy the code (Ref 1 in ScreenShot). Click the download icon to download the CSS file to your system. (Ref 2 in ScreenShot).

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

1. Follow the navigation steps in the reference document to access the Canvas Theme page.
2. Navigate to the theme page in Canvas and Select the currently activated theme in Canvas.
3. 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.

1. If you don't have any changes in the canvas, you can directly upload the exported CSS file from Loree to the canvas CSS.
   
2. If you have changes in the canvas, you need to update the new CSS from Loree with the canvas CSS code.
   
1. 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.
2. 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:
   
   
   
   
3. 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: Loree Common Style CSS Loree Root File Loree Custom Theme Loree Custom Fonts (if present)

---

Edit theme

You can edit the activated theme and also the listed theme. To edit the theme, click three dots next to the theme title.  After the modification, click the update button. The update theme modal will be visible, and you can change the title of the theme. Again, click the update button, and a new popup will appear with an important message. Click the "Yes, Continue" button to save changes.

---

Delete theme

Key Considerations before deleting a theme

1. A theme that is currently active cannot be deleted. To remove a theme, deactivate it first.
2. If a theme is activated in any sub-account, it cannot be deleted until it is deactivated across all sub-accounts.
   
3. The Loree Default Theme is a system-defined theme and cannot be deleted or edited.
4. There must always be at least one active theme in the system. You cannot deactivate or delete all themes at the same time.
5. To delete a custom-created theme, ensure it is not active in any sub-account. Only deactivated themes can be removed.
   
6. Once deleted, it will no longer be available in your theme list.
   
   

To delete the theme Click the three dots next to the theme and select ‘Delete.’  A confirmation popup will appear. Click ‘Confirm’ to permanently delete the theme.

---

Switch Account

Admin can easily view the activated theme in each sub account by using the drop-down in the top right corner.

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

  Navigation The Navigation element in the Loree Editor allows users to create a customizable navigation bar with various styles. You can add logos, menu items, and adjust style properties like border, color, size, spacing, alignment, and background ...

• 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 ...