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

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

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.

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.

Open

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.

Open

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

Open

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

Open

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.

Open

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.

Open

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

Open

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)

Open

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.

Open

Open

Open

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

Open

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.

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)

Open

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

• Save Row

• Duplicate

• Delete

• Edit Row

• Row move up or down

Open

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.

Open

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.

Open

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

Open

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

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.

Open

Open

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.

Open

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:

Open

Open

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.

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.

Open

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.

Open

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.

Open

Open

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.

Open

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

Open

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.

Open

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:

Open

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

Open

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

Open

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

• Video

• Video with Text

• Video and Text aligned

• Video with Heading and Paragraph

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.

Open

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.

Open

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.

Open

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.

Open

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 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:

Open

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

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.

Open

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.

Open

Open

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.

Open

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:

Open

All other options will have Style option as shown below:

Open

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

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

Open

Open

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.

Open

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.

Open

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

Open

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.

Open

Open

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

Open

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.

Open

Open

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.

Open

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.

Open

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.

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.

Open

Open

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:

Open

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.

Open

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.

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.

Open

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.

Open

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

Open

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.

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:

Open

Open

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.

Open

Open

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

Open

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.

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.

Open

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

Open

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

Open

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.

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.

Open

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.

Open

Open

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

Open

Open

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

Open

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.

Open

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.

Open

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

Open

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

Open

Open

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.

Open

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.

Open

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.

Open

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

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:

Open

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:

Open

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):

Open

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.

Open

“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:

Open

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

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.

Open

Open

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.

Open

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.

Open

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

Open

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.

Open

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

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