Welcome to Loree

Loree On Course Navigation

Here we go! The powerful content editor tool is now on your Blackboard Course Navigation. After a successful configuration of Loree, it can be accessed on all Blackboard Course Navigations. After selecting a course, on the left side navigation bar, you can find course tools under Course Management. Under course tools, you can find out Loree and by clicking on that it will open Loree tool.

Open

Enable Cookies:

To access Loree inside Blackboard LMS in the particular browser we have to allow the browser cookies to launch Loree LTI, without allowing the cookies Loree can’t be launched.

Open

OAuth Verification

In order to use Loree product as an External tool from Blackboard, the user must accept the Blackboard authorization. So that they can easily access Blackboard integrated external applications.

Create folder or item

Loree provides the option to create a new folder or item for Blackboard courses. Folder and Item can be created only after creating Content Area for which you are adding Folders and Items, If you want to create a new Content Area, you have to open the Loree, on the left side of the screen by clicking on icon next to Content Area.

There you can see the “+Add” Icon, this icon can be used for adding a new folder and item. You can select
only one option at a time.

 If you select a folder you have to give a proper name for your folder and then click on add.

If you select an item you have to give a proper name for your item and then click on add.

Edit course content in a Folder or Item

Loree allows users to Edit the course content of the existing folder and item. By clicking on the “Edit” icon from the folder or item on the right side of the screen. By clicking the edit icon, It will open the Loree Editor, where you can design your course contents and you can save them.

Creating a page

Adding a Row

Loree gives the user the ability to customize the structure of the page based on rows and columns. By adding a row, allows you to determine the size of each column and the content.

Pre-determined column sizes are provided based on what has been generally used in many modern page layouts, as shown below.

Once a selection has been made, a secondary menu will appear which allows the user to determine the size of the columns based on percentage. (For example, 50 / 50 will split the column sizes equally)

Custom Rows

Loree allows users to design, create and share custom rows for their own use or for the whole organization.

Once a row has been designed, the user is able to save the row (please see below under “Editing a Row” for further instructions on saving a row) and use the custom row in the future.

Once saved, the user is able to add a new row, and simply click on “Custom Row”, as per the below screengrab:

My Rows

My Rows are rows that have been created by the user and can only be seen by the user who created the row. When saving a custom row, this will always show in the My Rows section.

Editing a Row

Once a row has been created, the user is now able to edit the row by either clicking on the row area or by clicking the row menu, as shown below (The small blue menu icon, upper left corner of the row)

Once selected, the menu will provide the user with few options, including:

• Save Row

• Duplicate

• Delete

• Edit Row

• Row move up or down

Save Row

Once selected, a pop-up (modal) will appear, which allows the user to save the row for use at a later time; this gives the user the ability to both name the row and classify it under a category.

Duplicate

Users are able to copy the entire row by selecting the duplicate option. This allows for quick and easy “copy and pastes” of the entire row and its content. *Particularly useful if the content is very repetitive.

Edit Row

The user is given the ability to change Margins, Padding, Background, and or change the row layout by selecting the fourth menu option.

Margin & Padding

All margins and Padding are defined by pixels and are preset as margin: 0px and Padding: 20px.

Background

Background allows the user to select a color for the particular row selected. The user can choose the background color through a color scaling tool using their mouse, or if a particular color is known the user can either update the background color by the HEX code or by the RGBA code. The user can also choose colors from the Global colors or pre-defined Color groups by selecting the Advanced option. Once we have selected a color it is automatically saved. If the user wants to remove the background color he can click on the clear option or he can also undo the changes using undo option on the top menu.

Row Move Up or Down

Rows are able to be moved either up or down depending on where you would like them positioned on the page. The option to move the rows or columns will appear once the user has made 2 or more rows, columns, or elements. Please refer to the below screengrab where you will notice the additional arrows at the far right of the blue menu.

Options

Loree allows users to easily add content (elements) to each particular column that has been made on the page. Once a user clicks on a column the “plus” button will appear, which opens up a side menu, as shown below:

Each element is able to be individually customized based on individual preferences and also allows for custom elements to be made and placed into the columns.

Images

As a Loree user, selecting images will now give you multiple pre-defined options, which easily add images, images with text, or both in combination. Selecting one of the options below, will add the content to the particular column that has been selected.

Once one of the above has been selected, a pop-up (modal) will appear that will prompt you to either choose an image that has been previously uploaded or to upload a new image/link to an image.
Note: When we upload a new image in the editor the image size must be under 5MB only. If the image size is more than 5MB it will break in the editor itself.

Adding image

While adding an image it is mandatory to update the file name and the Alt text, while adding an image if we don't update any word or only update space in the Alt text box, add image button will be disabled. So now it will be mandatory to update some text in the alt text box or click Decorative image to add an image.

Embed Icons on Loree Editor

We are now providing the feature to add icons while creating the templates. The icons are accessible on the images element inside the editor and are not applicable for banners and images with text elements. Special Elements will also have Icon access. I,e when the user accesses the special element option inside the editor, they will be able to access the icons. Upon clicking on the Icons inside the element, it will list the icons based on the tag name.

All the Icons will be in SVGs format. Icon Library will have a search filter that can be used to search desired icons.

When we use tags or search filters all the icons will reflect within five seconds. We can update Size, Space, Alignment, Color, Background, and Quick Links to the Icons. We have to update the CSS in order to view Icons on the LMS.

Videos

Videos are easily uploaded to the page, and similar to images, Loree allows users to choose from predefined layouts to assist in completing the page. See below for a screenshot of the layout, options:

Once one of the above has been selected, a pop-up (modal) will appear that will prompt you to either choose a video that has been previously uploaded or to upload a new video/link of a video (YouTube, Vimeo, or other).

After updating the link click add, to add a Video you have to provide the Title name for the Video.

Selecting the video will give you four options as detailed below:

• Video

• Video with Text

• Video and Text aligned

• Video with Heading and Paragraph

Video

Once one of the Videos is selected, a pop-up (modal) will appear that will prompt you to either choose a video that has been previously uploaded or to upload a new video/link of a video (YouTube, Vimeo, or other). Use this option to upload only videos.

Video with Text

Once one of the Videos with Text is selected, a pop-up (modal) will appear that will prompt you to either choose a video that has been previously uploaded or to upload a new video/link of a video (YouTube, Vimeo, or other). Use this option to upload a video with Text on it.

Video and Text aligned

Once one of the Videos with Text aligned is selected, a pop-up (modal) will appear that will prompt you to either choose a video that has been previously uploaded or to upload a new video/link of a video (YouTube, Vimeo, or other). Use this option to upload a video with Text aligned parallel to it.

Video with Heading and Paragraph

Once one of the Videos with Heading and Paragraph is selected, a pop-up (modal) will appear that will prompt you to either choose a video that has been previously uploaded or to upload a new video/link of a video (YouTube, Vimeo, or other). Use this option to upload a video with a Heading and Paragraph text parallel to it.

Text

This element can be used to add text to the page all the default Text Format and fonts and sizes will be taken from the admin dashboard. Selecting the text will give you four options as detailed below:

• Header

• Paragraph

• Heading with paragraph

• QuoteBlock

• Source Format

Source Format

Source format allows the user to copy text or content from another web page source and paste it into Loree. while keeping all the original staying and content the same. This allows the user to easily copy and paste content from various sources without having to manually adjust the styling each and every time if preferred.

Once the user has made the selection, further design options are available, see below:

By clicking the particular column, (similar to selecting a row), it will give you options in the grey menu bar directly above the chosen column. The four options are:

• Duplicate

• Delete

• Copy

• Language

• Move Bottom

Further to the above, the side menu (left) will appear, with design options including:

• Space

• Background

• Border

• Quick Links

Space

Margin pertains to the area directly outside of the column. Adding a margin to either top, bottom left or right will change the border dimensions of the column. All margins are adjustable using pixels as a standard of measure.

Padding pertains to the area directly inside the column. Adding padding to either to top, bottom left or right will move the content within the border of the column. All padding is adjustable using pixels as a standard of measure.

Background

The background option allows the user to change the color of the entire column. Users have the ability to either choose from a color scaling tool or input a specific Hex code or input the specific RGBA code for a color to be applied. Users can also choose the colors from the Global color Palette or from the predefined color groups.

Border

This design element enables users to add a border to the column selected. Its features include changing the color, width, and styling. Width sizes are adjustable using pixels as a standard of measure.

Text - Control Menu

Much like many conventional text writers, Loree gives users the ability to change the text based on various text editing options, these include:

• Style

• Bold

• Italic

• Font

• Size

• Line Height

• Text Color

• Background Color

• Border Color

• Unordered List

• Ordered List

• Word Options

• Alignment

• Insert Link

• Clear Format

Note: Unordered list and Ordered list option will not have style option as shown on the screenshot below:

All other options will have Style option as shown below:

To access the text editing feature, double-click the word or paragraph that you would like to edit.

Divider

The divider features allow users to clearly divided pages with either a line or spacing. The line and spacing options are customizable depending on what particular style you desire. The two screenshots below highlight the divider feature option and the two options of “Line” and “Space”.

Line Divider

Selecting a line will present a clear horizontal line, dividing the page or content. Once the line has been selected, a design menu will appear on the “left-hand side” of the screen, presenting 5 different customizations for the line.

Size

The size options allow the user to adjust the width and height of the line that spans across the page. By default, the line is the full width of the screen. This option is able to be toggled on and off via the checkbox and both the width and height are able to be adjusted to the user's desired size.

Space

Margin pertains to the area directly outside of the row. Adding a margin to either top, bottom left or right will change the border dimensions of the row. All margins are adjustable using pixels as a standard of measure.

Padding pertains to the area directly inside the row. Adding padding to either to top, bottom left or right will move the content within the border of the row. All padding is adjustable using pixels as a standard of measure.

Alignment

Alignment can assist the user in determining where the position of the line in relation to the page. Alignment has three options which are, left align, center align and right align.

Line Style

The line style option allows the user to change the color of the line with either the color scaling tool or if the color is known the user can update the specific HEX code or the specific RGBA code. Users can also choose the colors from the Global color Palette or from the predefined color groups.

There are also, 4 options of style that are able to be applied to the line, which is detailed in the screengrab below:

Background

The last feature of Background enables the user to change the color of the entire row background (not the color of the line). As per the below screen grab, the color red, or HEX code #F30606 was selected and applied to the row. Or RGBA code 243, 6, 6, 255 was selected and applied to the row. Users can also choose the colors from the Global color Palette or from the predefined color groups.

Space Divider

Selecting a line will present a clear horizontal line, dividing the page or content. Once the space divider has been selected, a design menu will appear on the “left-hand side” of the screen, presenting 3 different customizations for the line.

Size

The size options allow the user to adjust the width and height of the line that spans across the page. By default, the line is the full width of the screen. This option is able to be toggled on and off via the checkbox and both the width and height are able to be adjusted to the user's desired size.

Space

Margin pertains to the area directly outside of the row. Adding a margin to either top, bottom left or right will change the border dimensions of the row. All margins are adjustable using pixels as a standard of measure.

Padding pertains to the area directly inside the row. Adding padding to either to top, bottom left or right will move the content within the border of the row. All padding is adjustable using pixels as a standard of measure.

Background

The last feature of color enables the user to change the color of the entire divider. As per the below screen grab, the color red, or HEX code #FD0707 was selected and applied to the divider. Or the RGBA code 253, 7, 7, 255 was selected and applied to the divider. Users can also choose the colors from the Global color Palette or from the predefined color groups.

Table

The table feature allows

the user to easily create and add a table to the page. There are 4 pre-defined styles of tables that are as shown below:

Once selecting the table from the “left-hand menu”, the menu will auto-populate onto the page and the design menu will appear on the left-hand side.

As shown in the above screengrab, the user has the ability to select the number of rows and columns based on the size of the table required. The default table size is 4 rows and 4 columns.

Table Content customization

The editor now allows the user to apply styles for the entire row or the entire column, individual rows, or columns to update the Margins, Padding, Font style, Font Family, and Font size. This is more flexible and gets easy customization for their own table users.

Enable the ‘Select entire Row’ and ‘Select entire Column’ checkboxes to select the entire row and column.

Pro tips on short-cut keys:

Alignment

Alignment can assist the user in determining where the position of the table is in relation to the page. Alignment has three options which are, left align, center align and right align.

Size

The user is able to determine how wide the table is across the page based on a percentage of the page size. By default, the table is set to 100%, which therefore spans across the full width of the page. As an example, the table size shown in the screengrab below has been reduced to 80%.

Space

Margin pertains to the area directly outside of the table. Adding a margin to either top, bottom left or right will change the border dimensions of the table. All margins are adjustable using pixels as a standard of measure.

Padding pertains to the area directly inside the table. Adding padding to either to top, bottom left or right will move the content within the border of the table. All padding is adjustable using pixels as a standard of measure.

Border

The border of the table is able to customized by width, color, and style. 4 options of style are able to be applied to the line, which is detailed in the screengrab below:

Color

Color enables the user to change the color of the background within the table. As per the below screen grab, the color red or HEX code #FF0000 was selected, or RGBA Code 255, 0, 0, 255 was selected and applied to the table. Users can also choose the colors from the Global color Palette or from the predefined color groups.

Deleting Column

Once selected a pop-up or modal is presented to the user which either allows the user to do one of two:

• Delete the entire column or

• Clear the content in the column

The first option “Delete the entire column” will clear the entire column field and all the content within. Any pre-defined margins or layouts of the column will be deleted.

The second option “clear the content”, will only delete the specific content within the column, however, will leave the layout as it was.

Container

The container feature enables the user to add sub-sections to the row. This allows for a more versatile section and provides space between content.

Alignment

The container is able the be aligned either by default to the left or can be center or right-aligned.

Size

The size can be adjusted based on width, this can be changed based on percentage size, as per the below screenshot.

Space

Margin pertains to the area directly outside of the container. Adding a margin to either top, bottom left or right will change the border dimensions of the container. All margins are adjustable using pixels as a standard of measure.

Padding pertains to the area directly inside the container. Adding padding to either to top, bottom left or right will move the content within the border of the container. All padding is adjustable using pixels as a standard of measure.

Border

The border is able to be adjusted based on the width, color, and style. As with all other border styles through Loree, this is easy to change function and has the color scaling gradient for easy use.

Background

The background color enables the user to change the color of the background within the container. As per the below screen grab, the color red or HEX code #D14A4A was selected, or RGBA code 209, 74, 74, and 255 was selected and applied to the container. Users can also choose the colors from the Global color Palette or from the predefined color groups.

Special Elements

Special Elements allows users to have quick and easy access to the Navigation menu and Icon with text element in Loree.

Navigation menu

In Loree, Now we can create navigation bar elements, and using that we can add logos and other menu items to the navigation bar.

On clicking the navigation option, you can see various navigation bars like Text Navigation, Navigation with an image aligned left, Navigation with an image aligned right, and Navigation with 2 images aligned center.

Duplicate, copy, paste, delete, and move up and down icons are available for the specific menu item.
In the navigation bar, there will be five menu options In which all the style properties like border, color, size, space, Alignment, and background color are customizable.

We can customize the navbar to increase and decrease the number of Navigation menus on the editor itself.

Text Navigation

In text navigation, the menu bars can be customized with text and other style options.

Navigation with an image aligned left

In Navigation with the image aligned left, the menu bars can be customized with an image on the left corner and text on the right edge. Text can be customized using the style options.

Navigation with an image aligned right

In Navigation with the image aligned right, the menu bars can be customized with the image on the right corner and text on the left edge. Text can be customized using the style options.

Navigation with 2 images aligned center

In Navigation with Navigation with 2 image-aligned centers, the menu bars can be customized with two images on the right and left corner and text in the middle. Text can be customized using the style options.

Custom Elements

Custom Elements allows users to have quick and easy access to all elements that have been made previously and saved in Loree.

Creating a custom element

Once a column has been created to your desire, the user is able to save the column as a custom element. See the below screengrab, detailing the initial step:

The top-left icon in the column section menu is the save column button. Once this is clicked a pop-up (modal) will appear, see below:

The user is then able to name the custom element and choose a category that the particular element belongs. If no categories are saved, a new category is able to be created and a category name text box will appear (see below):

Adding a custom element to a column

Once a custom element has been made and saved, it will be added to “My Elements” (See below for further details on My Elements), which will allow quick access for the user to add into the column selected.

“This is a good example” is a custom element that was created for the purposes of this User Guide. Once the user selects the desired element it will automatically populate in the column that was originally selected and prompt the user to either cancel the action or add the custom element. See the below screengrab for visual reference:

Global Elements

Global elements are elements that have been approved by the admin of Loree for global distribution. This enables all users of Loree from an entire organization to access the custom elements that have been made. Only the admin is able to declare whether or not a custom row is distributed globally.

My Elements

My elements are elements that have been created by the user and can only be seen by the user who created the element. When saving a custom element, this will always show in the My Elements section.

Embed URL Block

Loree introduces the “Embed URL“ block for the convenience of updating the iframes in the editor directly. For example, YouTube iframe links or any iframe links to get on the page.

Loree Template Pages

The Loree will allow the user to create a page with the existing templates they have under ‘My Templates. Saved templates are listed under the My templates.

Select the template that needs to be added to the page. Now you can see the template in the editor with pop-up Add and Cancel. Click add to edit/save the template to the unit.

Once added you can see the alert showing the Custom template added successfully.

Viewing Components

Loree allows users to view the various outlines of each section, component row, or column on the screen.

For example, in the image below, the various components on the page are individually identifiable, delineated by a dotted line boundary. This function is able to be toggled on and off by clicking the “Outline” button in the top black menu bar.

Preview

This feature provides a live preview of the page being designed.

Clicking on the preview option opens the modal in preview mode.

Device Selection

It allows the user to select the orientation of the page being designed based on the target device on which the page is intended to be viewed. A modal will appear with the three predefined screen sizes in the middle-upper section of the screen:

• Desktop

• Tablet

• Mobile

View Code

The View Code option is for advanced users; This feature enables users to view the underlying HTML and CSS code for the course pages. The “View Code” selection can be made in the top menu bar, as shown below:

Upon selection on the Toolbar, a new window will pop up (modal), displaying the HTML/CSS content of the page.

At the bottom of the view code window, an option to export the code in compressed form is available (‘Export to ZIP’). This file is saved in the download folder of the web browser.

This functionality is provided in order to allow the user to make design modifications directly onto the HTML / CSS code in their preferred editor.

Once a user clicks on “Code” the below screengrab will appear:

Edit Code

The edit code feature allows the user to update HTML and CSS content within a selected component (also referred to as a block) or for the entire page content on the editor.

If the user clicks on Edit Code with no selected contents, it will fetch the whole editor page content and if a particular block is selected then, it will fetch the particular block’s HTML and CSS properties.

Once the Edit code is clicked (Code, in between Redo and Accessibility checker options) based on the Feature list in the admin dashboard feature configuration, the editor block will be fetched and you can copy only the HTML or CSS property just by clicking the Copy Code button on the top right corners

or click the Edit button to edit the HTML and CSS content:

Once the desired edition is completed, click Update to save the edited content to the Loree editor or click the Don’t update button if you changed your mind about updating the content. 

Loree edit code also gives you a special option of Exporting your page content by just clicking the Export button at the bottom of the Code modal.

Accessibility Checker

The Accessibility Checker option is provided inside Loree Editor to check if there are any accessibility issues on the page, once the page is created. It checks the HTML and highlights the elements with the error and description.

Now, we can see that the Accessibility checker option displays the total number of accessibility issues like a notification on the accessibility icon when we click on the save to LMS option. Click on the Check Accessibility button in the top right corner it will show the list of improvements that need to be done for the template. This allows the user to go through all the discovered issues and fix them without leaving the accessibility checker and it also provides some quick fixes in the accessibility tray itself.

The accessibility checker tray will be responsive based on the device of the user. For large resolution screens like Desktop and Laptops, the Accessibility checker will open on the right side section of the screen and for small screen resolution like Tablet, Mobile, the Accessibility checker will be at the bottom of the editor and will also have a separate scroll bar in the checker.

The new accessibility checker does have the privilege to switch between the number of issues in the editor. The accessibility checker tray itself provides an arrow key to navigate among the issues and it will also show the user the severity of the accessibility issue for the particular elements. The severity will be based on Critical, Serious, Moderate, and Minor issues and will also have the details of the issues and an option to fix them as a quick fix in the checker itself. We can also click on the colored dot in the editor to move to that particular issue. Once the issue is fixed the severity color tagged in the editor will be removed. We can update the quick fix and click on the apply button to make the required changes. There is also a re-check button on the checker to check for the issues again without going back to the editor.

When you are working on a particular issue it will be shown in a colored box based on the severity of the Loree editor as marked below:

If there are any issues that cannot be fixed as a quick fix in the accessibility checker, those issues can be fixed in the Loree editor directly and the instructions to fix the issue will be provided in the accessibility checker tray.

If the page content has no accessibility issues, it will show the below message:

If the user fixes all the accessibility checker issues on the page, then the first issue will have the below message on the accessibility checker tray:

H5P

Loree 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, etc by the H5P provider. Inside the Loree editor, you can create a new H5P interactive, Edit the existing one, or delete the existing one.

IMPORTANT NOTE:

All the H5P interactives should enable the “Display Embed button” to get the embed URL for the H5P interactive Iframe like in the below image.

If the organization doesn’t want to show the Embed button in the H5P interactives, please disable the “Display toolbar below content” and enable the “Display Embed button”

Loree Interactives

The complete Loree Interactives user guide is available on page → Loree Interactive in the Loree User guide.

Loree Admin Dashboard

The complete Loree Admin Dashboard user guide is available on page → Loree - Blackboard Admin Dashboard User Manual.