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

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:


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.

 

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.


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.



    • Related Articles

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

    • Release notes for Loree A2303.8

      To add a new table inside editor based on new workflow When using Loree, clicking on the "Table" option in the elements section will open a modal where you can specify the number of rows and columns, as well as the header options and captions for the ...

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

    • Release notes for Loree A2004.4

      H5P interactive Integration Loree 2.0 introduces H5P interactives inside the Loree editor in which you may create different interactives provided by the H5P WordPress provider. Some of the features like Hotspots, Multiple-choice questions, Accordion, ...