Custom themes management

Getting started

We are happy to introduce the new Theme Customization feature in the admin dashboard. Admins can now easily customize their theme and apply it to multiple sub-accounts with less effort.

Benefits of a Customized Theme

1. Easy Style Migration—Before, styles had to be updated manually when moving content between sub-accounts. Now, styles will transfer automatically.
2. Better User Experience—Different themes help improve the look and feel, making the experience better for users.
3. Saves Time—No need for manual updates, which makes the process faster and easier.
4. Theme Flexibility—Users can apply different themes to different sub-accounts as needed.

Important : 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.

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. 5.Click the "Create" button in the top-right corner to continue the process 6.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 Colors

Admins can now customize specific colors under the brand colors section. [ Ref 1 in the above screenshot]

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

Table Color

Admin could modify the table color elements By changing the Table Header Background, Table Header Text Color, and Table Border Color options.

 

Typography

The Typography section in Themes now lets you easily customize fonts and text styles across your platform. Adjust the font family and size for headers (H1 to H6), paragraph text, and links.

Font Customization Options

Font Family  In the Font Family dropdown, you’ll find a list of fonts available in the Loree. Select the font that best fits your desired style for your headers and paragraph text.
Font Size  Adjust the font size for headers (H1 to H6) and paragraph tags to ensure the text is perfectly suited to your design. You can adjust the px and pt of the text.

Link Customization Options

Font family Text decoration Text decoration type Text Style

Preview

This new feature contains a preview option. Now you can instantly view how your changes reflects across your platform [ Ref above screenshot for no 2]

After creating a theme, it will not be activated automatically. Users need to activate it by following the steps below.

Activating  themes

Activate the theme in loree

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

4,  Once the theme is applied, admin could be able to view the success Toasts message at the right corner of the screen.

5, After activating the theme, the activated theme will be displayed in the default theme column.

Important: After activating the customized theme in Loree, users must follow the below exporting 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 SS). Click the download icon to download the CSS file to your system. (Ref 2 in SS).

Export the CSS in canvas

1, Navigate to Canvas Theme

Follow the navigation steps in the reference document to access the Canvas Theme page. Select the currently activated theme in canvas

2, Upload the CSS in Canvas

On the left side of the screen, locate the Upload tab and click it. If you already have a customized URL, replacing it will overwrite the old one. In this case, you need to update the new CSS code within the existing one. If you are creating a new theme, directly upload the exported CSS file.

Backup the original CSS before making changes to avoid any issues.

Edit and Delete the themes

Click the three dots next to the theme title  Click the edit icon to edit the theme.  [ Ref 1 in SS] Click the delete icon to delete the theme. [ Ref 2 in SS]

Switch Account

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

• Related Articles

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

• How do I remove duplicated Canvas Page title?

  Learn how to remove duplicated Canvas course page titles via themes with Loree's bonus custom code. To conceal page titles in Canvas LMS using custom CSS and upload/update themes in your instance, follow these steps: Uploading/Updating Themes: Access ...

• Release notes for Loree - Canvas A2303.1

  Font Management We have now completely updated the Font Management System in the Loree editor. Now the Loree admin is able to add or upload the custom fonts to their instance directly from the admin dashboard. When the Loree admin is on the admin ...