1. Loree Design
  2. Feature and Functionality

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

Editing CSS and HTML Code in Loree: A Guide to Customizing Your Loree page.

View Code

Users have the ability to access and examine the HTML and CSS code that forms the basis of the course pages. To do this, they simply need to select the "View Code" option located in the top menu bar, as per the image below:

Code area

When you click on the "View Code" option in the Menu Bar, a new window will appear, showing you the HTML and CSS code that makes up the course pages. In this view code window, you also have the option to export the code in a compressed format by selecting "Export". The exported file will be saved in your web browser's download folder.

This feature is designed to allow you to easily make design modifications to the HTML and CSS code in your preferred editor.

This is the image that you will see when you click on the "code" option.


Code Properties

With Loree 2.0, users have the flexibility to view the code for different components of their course pages, such as the entire page, row, column, or element. This empowers users to effortlessly pinpoint and modify specific areas within the entire page or section.


Edit Code

The "Edit Code" feature allows users to easily update the HTML and CSS content of a selected component, also known as a block, or the entire page content in the editor. When the user clicks on "Edit Code" without selecting any specific content, it will retrieve the entire page content of the editor. However, if a particular block is selected, it will fetch the HTML and CSS properties of that specific block. This feature provides users with the flexibility to make necessary modifications to the code and customize their course pages according to their preferences.

Here is an image that displays the properties of the code when no specific area of the page has been selected.

code properties if nothing is selected

After selecting the "edit" button at the bottom of the pop-up, you will have the ability to make edits, copy, and modify any of the code for the page, row, column, or element. This allows you to customize and tailor the code to your specific preferences and requirements.


When modifying the code, it's important to be aware that it can affect the layout when viewed in Canvas. However, there's no need to worry! Loree aims to minimize the necessity for code editing, allowing you to concentrate on creating exceptional content without being burdened by technical intricacies.