New Look, Who's This? Loree Reimagined!

New Feature

1. Introducing Loree Theme Management 

Get ready to take control of your branding and user experience! Theme Management has arrived in the Loree Admin Portal. Admins can now easily customise their theme and apply it to multiple sub-accounts with minimum effort.

Benefits of Custom Theme Management

You can now easily move content between accounts and use different looks for each, saving time and keeping things consistent.

Please Note: 
1. The default Loree theme is your starting point. Users must create a new theme for their organization. 

2. Remember, the Loree default theme is a masterpiece in itself and cannot be modified or edited as per product specifications.

3. We can activate only one theme for one sub account, We cannot have multiple themes for a single sub account. 

Customisation for Theme Management

To know more about Customisation for Loree Theme Management please refer to the video below:

To learn more about Loree Theme Management and the steps to export CSS files, do visit our Knowledge Hub page:
                                                                   Custom Themes Management

---

2. Loree Interactive Customisation

Key Benefits

1. Consistent Styling: Like the Loree editor, Loree Interactive styles can now be configured to maintain uniform content appearance.
   
2. Flexible Customisation: Designers still have the ability to modify styles while editing interactive content.
   
3. Font Customisation: Supports Google Fonts and custom-uploaded fonts for greater creative control.
   

Impact on Existing Functionality

1. Removal of Default Loree Interactive Styles: Previously, all Loree interactive elements followed default styles. With this update, styles will be customisable.
2. Preservation of Historical Content: No historical content will be overwritten with the new release.

1. Backup Existing Styles:  Copy the dashboard’s Custom Header and Custom Link Styles before release.
2. If a backup is not available, the existing configured styles will still be accessible within Loree Interactive styles (valid Loree Interactives subscription required).

Loree Interactive - Styles

In the Loree Admin Dashboard, go to the Loree Interactive section.  Click the Interactive Section dropdown. Select Styles to customise the appearance of headers and links.

Custom Headers

1. Users can modify the typography for different heading levels (H1 to H6) and paragraph.
   
   

1. Font family: A dropdown menu to choose from various font styles (e.g., Lato, Arial, etc.).
   
2. Font size: Adjustable in multiple units (px, pt,) to control text size.
   
3. Preview: Displays real-time changes based on the selected font and size.
   
4. Reset button: Restores all settings to their default values.
   
5. Save button: Saves and applies the selected font settings across the interface.
   

Custom Link

1. Users can customise hyperlink styles.
   

1. Link Color: Color picker for hyperlink color.
   
2. Text Decoration: Options like underline, none, etc.
   
3. Text Decoration Style: Solid, dashed, or dotted underlines.
   
4. Font Family: Choose a font for links.
   
5. Link Text Style: Italic, bold, or normal.
   
6. Preview Box: Shows real-time changes to link styles.
   
7. Save button: Saves and applies the selected font settings across the interface.
   

Loree Templates

Loree now offers a collection of professionally designed templates to help you create stunning content effortlessly. Users can easily browse through the library, select a template, and customise it to suit their specific needs. These templates are fully reusable, allowing for quick personalization and cannot be deleted or edited. This feature is available under the Custom Template option, making content creation faster and more convenient than ever!

Feature Enhancements

Landing Page Overhaul

New Landing Page: 

What's Changed and Why?

1. We've simplified the layout, decluttered the interface, and brightened the color palette to create a visually appealing and easy-to-navigate landing page that centers on your learning journey, reducing your clicks.
   
2. New Loader: We've added a new loader to the landing page to enhance the perceived performance and user experience. Instead of a traditional loading spinner, you'll now see a subtle animated placeholder that mimics the layout of the page, providing a visual cue that the content is on its way, making the loading process feel faster. 
3. Header and Footer UI and Icon changes: The header now features a cleaner, more compact design aligning with our Loree Design logo, ensuring effortless access to essential functions like "Full Screen" and "Admin Portal," whereas the "Explore" option now comfortably resides at the footer of the Loree Landing page as well as the Loree Editor page, which when clicked presents users with the three categories of Support, About and Social Media. Refer to the image below: 
   
   

   

   The release version number "A2402.2" indicates this release was published in 2024's second quarter as the second update for that period.
4. “+Module” is Now “+Add Module”: Prominent placement of the "Modules" section and "+Add Module" button creates an intuitive visual flow, with the "+Add Item" pop-up modals having undergone a complete revamp, making it easy to find what you need. The new "+Add Item" option comes with an upgraded, minimalist design—no more lists, dropdowns, or grid views. Instead, you’ll now use tabs to easily select from Private, Global, and Shared templates! Here's a sneak peek: 

Please Note: We've refreshed the fonts from SourceSansPro to Lexend as well as the icons for most features have been remodeled throughout the Editor.

---

1. UI/UX Enhancements

The new Loree Editor page prioritizes user experience with an intuitive layout, prominent action buttons, and a minimalist design. Central buttons "Templates," "Custom Row," and "+ Add Row" empower users to immediately begin content creation. The "Let the fun begin!" prompt sets a welcoming tone, while the "Loree design" logo reinforces branding. Refer to the images below: 

Before Revamp:

After Revamp:

---

2. Redesigned Header and Footer Icons

The Loree Editor is now even better! We've given the header and footer icons a modern refresh. Notable updates include simplified icons for "Outline," "Undo/Redo," "Code," and "Accessibility" in the header. Whereas, the "Explore" option now resides on the right-hand side of the footer for both Landing page and editor page.

---

3. Enhanced Template Library

The Loree Editor Template Library has been updated with a fresh new interface, including refreshed icons, automatically generated thumbnails, template previews, Free Templates and redesigned modal. Refer to the before and after revamp images of the template library.

Before Revamp: 

1. Thumbnail Generation: Templates now automatically generate thumbnails, providing a visual preview of each template's layout and content as shown in the image above. This allows for at-a-glance browsing and makes it simple to choose the right template for your project.
   
2. Template Previews: A new preview option lets you take a closer look at a template before inserting it into your document. Check out the image above!

1. To add a template to your page, all you need to do is to select your desired template and click on the Insert Template button shown in the above template modal image.

2. To know more about Custom Template do visit out Knowledge base article named Custom Template.

---

4. Enhanced Custom Row

The User interface for the Custom Rows have undergone a major change and now displays Global, private and shared rows with refreshed icons neatly stacked on the left hand side, along with a new Multi Selection feature, automatically generated thumbnails, template previews etc. Refer to the before and after revamp images of the Custom Rows.

Before Revamp: 

After Revamp: 

Multiselection: That allows you to select multiple customs rows at once to add to your page. This is a new feature introduce in the release

1. Custom Rows now automatically generate thumbnails, providing a visual preview of each row and content as shown in the image above. This allows for at-a-glance browsing and makes it simple to choose the desired row for your project.
   
2. Row Previews: A new preview option lets you take a closer look at a custom row before inserting it into your document. Check out the image above!
   

---

5. Add New Row

The UI for the Add Row option has undergone a revamp and now boasts a classy new look, as shown in the images below:

---

6. Layout Menu Redesign 

The Loree Editor's layout menu has received a major upgrade. Previously, elements were organized in multiple columns with text descriptions. The new design features a single, scrollable column with distinct icons for each element type, wherein every element enjoys a new comfort of relative categories, namely: 1. Getting Started  2. Layout Elements 3. Custom Elements  4. Interactive Elements 5. External Elements. Refer to the before and after images below.

Before upgrade:

After upgrade:

The following images show what the new user interface looks like for all five categories: 

1. Getting Started: 

2. Layout Elements: 

3. Custom Elements: 

Multiselection: That allows you to select multiple customs element at once to add to your page. This is a new feature introduce in the release

4.  Interactive Elements

5. External Elements 

7. Enhanced Color Picker Interface

A refined color picker interface has been implemented, offering an improved visual and interactive experience.

Before revamp:	After Revamp:

---

8. Upgraded Bubble Menu

To know more about Bubble Menu in detail, please refer the following link: Bubble Menu

9. Improved UI for all Modals

---

10. Improved UI for Accessibility Checker

The Accessibility Checker UI in Loree Editor has been updated for an improved user experience.

What's changed?

1. The new UI displays the total number of accessibility issues as a notification when saving to LMS. refer to the image
   
2. Responsive design: Opens on the right for desktops/laptops. Moves to the bottom for tablets/mobiles with a separate scroll bar.
3. Includes an arrow key for navigation and severity indicators: Critical, Serious, Moderate, and Minor.
   
4. Quick Fix: Allows users to resolve issues directly within the checker, apply changes, and re-check without returning to the editor.

1. Issues not fixable through Quick Fix will provide instructions for manual resolution.
   
2. If no issues are found, a confirmation message will be displayed.
   

1. This update enhances usability while maintaining compliance with WCAG Level AA standards.
   

To know more about Accessibility Checker in detail, please refer the following link:  Accessibility Checker

---

Loree Interactive UI Enhancements

Loree Interactives has received a visual update! Enjoy a refreshed UI for a smoother experience. Access Loree Interactives through the updated left-hand side menu. 

After selecting Loree Interactives, a new left-hand side menu will appear with the following options:

"Loree Interactives" now opens a refreshed dashboard modal with an updated UI for  Create New, Global Interactives, Private Interactives and Shared Interactives dashboard. 

The thumbnails for all Interactives have been updated to accurately reflect their appearance after creation.

Before Upgrade:

 After Upgrade:

Embed lint workflow

After creating an interactive, you can click on the Embed option on the right side of the screen to insert it into the editor. If you need to make changes, click on the Edit option to modify the interactive. Alternatively, you can discard it by clicking on the "X" (Close) icon.

To Embed an existing interactive from My Interactives, Shared Interactives, or Global Interactives, simply click on the Embed button on the right side of the interactive. This will insert the interactive directly into your editor's page.

---

Admin Portal UI Enhancements

We have updated the Loree admin dashboard with a fresh look and improved navigation. The new UI has a modern design, better readability, an organized dashboard, and faster performance. Key sections like "Configure," "Themes," "Color Groups" and Loree interactive style management have been added for easier customisation.

We've updated the font from Source Sans Pro to Lexend and upgraded the dashboard loader to a New Loader for a smoother experience.

Before Update:

After Update:

Loree Interactive - Management

In the Loree Admin Dashboard, go to the Loree Interactive section.  Click the Interactive Section dropdown. Select Management to manage Private, Gobal, and Shared Interactives

Deprecated Features

Admin Dashboard

All customisations for Custom Headers and Custom Links are now managed through Typography under Custom Theme Management.

---

---