How can I access and modify CSS and HTML code in Loree?

A Guide to Customising Your Course Pages

Loree provides a built-in Code Editor that allows advanced users to view and edit the HTML and CSS behind their course pages. This feature gives you greater control over layout, styling, and fine-tuned design customisation.

Accessing the Code Editor

1. To open the Code Editor.
   
2. Open your course page in Loree Editor
   
3. Click the Code option from the top menu bar.
   
4. This opens the Code Properties window, where you can view the HTML and CSS used to build your page.
   

The Code Properties Window

The Code Properties window is divided into three main sections:

Scope Selector (Top Tabs)

You can choose which level of content you want to inspect or edit:

Page – Displays the HTML and CSS for the entire page. Row – Shows code related only to the selected row. Column – Shows code related only to the selected column. Element- Shows code related only to the selected element

This allows you to precisely target the area you want to customize without affecting the rest of the page.

Code Panels

The window displays two side-by-side panels:

HTML Code – Shows the structural markup of the selected scope. CSS Code – Shows the styling rules applied to that scope. Users can copy the code to their clipboard using the Copy icon at the top of the code panel.

By default, the code is shown in read-only mode to prevent accidental changes.

Actions Available

Export Allows you to download the displayed HTML and CSS in a compressed file format. The exported file will be saved to your browser’s default download folder. Edit  Enables editing of the displayed code. Cancel / Close Exits the Code Properties window without making changes.

Editing the Code

Enabling Edit Mode 

1. Click the Edit button at the bottom of the Code Properties window.
   
2. A warning dialog appears with the message “Editing code may impact existing elements.” This informs users that manual code changes may affect the page layout and behavior.
3. Click Cancel to exit without making any changes, or click Yes, Continue to proceed.
   
4. Once edit mode is enabled, the HTML and CSS fields become editable.
   
5. You can now:
   Modify existing code
   Copy code for external editing
   Apply custom styling or structural changes
6. All changes apply only to the selected scope (Page, Row, or Column), giving you precise control over where the updates take effect.
   

Refer to the GIF below for a visual demonstration of these actions.

Code editing is optional—Loree handles the heavy lifting for you.

• Related Articles

• Loree Dashboard Access

  The Role configuration to access Loree- Dashboard inside the tool. In order to get the Loree Dashboard, you must be enrolled as a “Loree-Admin“ role from the root account level. Below are the steps to create the Loree-Admin role and assign people on ...

• Release notes for Loree A2401.2

  10 January, 2024 BUG FIXES: Html / iframe embedded into paragraph while copy and paste: Issue statement: when users copy and paste an iframe or any HTML content in paragraph, they faced a problem where the HTML mistakenly rendering instead of pasting ...

• Loree - Frequently Asked Questions (FAQ)

  Answers to Your Most Common Queries! Is Loree an LTI? Absolutely! Loree has been developed following the guidelines and specifications of LTI 1.3. Which Learning Management System (LMS) is Loree available for? Loree is accessible to all customers ...

• Loree Admin Dashboard - User Guide

  Welcome to Loree Admin Dashboard Glad! Managing Loree editor interface features via Loree Admin dashboard. Navigation to Loree Admin Dashboard Happy to help you to take a tour of the Loree Admin Dashboard! To access the Loree Admin Dashboard, ensure ...

• Release notes for Loree A2501.3

  Published on: 01/03/2025 New Look, Who's This? Loree Reimagined! We're thrilled to unveil a completely redesigned Loree experience! These release notes will walk you through the key changes, showing you before-and-after comparisons so you can easily ...