Site Settings

This function module is for the Super Amin to customize the ULearning instance site for the school. On the System Settings screen [1], click the Site Settings link [2]. Using this function, you can:

Set up the site name [3] – Assign the site a meaningful name.
Set up the site URL [4] – Define an URL for the site in the format of https://yourname.ulearningsa.net (opens in a new tab)
Select site language [5] – Set the site default language and select the language(s) to support.
Pick up the site homepage style from two options [6] and edit the look and feel as well as content to show [7] for the style selected.

Select/Edit the site homepage style – Menu Style

Menu Style homepage is the portal homepage before the users log in the platform. Recommended if you want to customize the menu and content of the page.

Step 1: Set up Menu Style

On the Site Settings screen [1], click to select the Menu Style icon [2], and then click the Edit button [3] to modify the look and feel as well as the content to show for the Menu Style.

Step 2: Customize homepage overview

It opens the Menu Style homepage which is editable (any component with a ✎ or 📷 icon is editable). You can:

Customize your school logo [1].
Customize top navigation tabs [2].
Edit carousel banner - slideshow style of a banner [3].
Add/edit/show/hide/delete a page component, two types of components:
- System built-in - can show/hide only [4] or be editable [5]: such as College/Department, Announcements, etc.
- Added by the user [6] [7] with fixed format defined by the system - can edit/show/hide/delete: including 3 types: Course | Image | Video.

Step 3: Customize Your School Logo

On the Menu style editing screen, click the Logo Edit icon.

To upload a school logo, click the Upload Logo button.
- Formats: png, bmp, jpg, gif.
- Size: up to 2 MB.
- Suggested width x height: 300x50 px.

Select the school logo from your computer and then click the Open button to upload.

It replaces the school logo in use [1].
Click the Confirm button to complete [2].

Step 4: Customize Top Navigation Tabs

On the Menu Style editing screen, click the Edit icon for the top navigation link bar.

It opens the Edit Module pop-up window.
The menu items shown are on the first row [1], you can:
- Click the - (Minus) icon to hide a menu item.
  - Need to keep at least 2 items.
- Click the Pencil (Edit) icon to modify a menu item.
- You can drag to move items to reorder them.
The menu items hidden are on the second row [2], you can:
- Click the + (Plus) icon to show a menu item.
- Click the X (Delete) icon to delete a menu item.
To add a menu button, click the Add Menu Item button [3].

There are 2 types of menu items you can add [1]:

External link - can add/edit/show/hide.
Rich content - can add/edit/show/hide.
To add an External Link item:
- Select the External Link from the dropdown menu [1].
- Click to enter the item name [2].
- Click to enter the link URL in the format of http:// or https:// [3].
- Then click the Confirm button to complete [4].

To add a Rich Content (text and image) item:
- Select the Rich Content from the dropdown menu [1].
- Click to enter the menu item name [1].
- Click to enter the rich content (formatted text, image, links, etc.) [2].
- Then click the Confirm button to complete [3].

The menu item is added.

There is a third type of menu items – the system built-in menu items [1] [2]:

You can modify the menu item name by clicking the Edit icon [1] or hide it from the menu bar by clicking the - (Minus) icon.
But you cannot delete it [2].

Step 5: Edit Carousel Banner - Slideshow Style of a Banner

Click the carousel banner edit button.

Click the Edit Module link.

It opens the Edit Module pop-up window. The images shown is on the first row [1], you can:

Drag to move images to reorder them.
Click the - (Minus) icon to hide an image.
Enter an URL for an image.

The images hidden is on the second row [2], you can:

Click the + (Plus) icon to show an image.
Click the X (Delete) icon to delete an image.
Enter an URL for an image.

To add a menu button, click the Upload Image button [3].

Image formats to support: png, bmp, jpg, jpeg, gif.
Single image size: up to 2 MB.
Recommended Width x height: 1170x320 px - otherwise it will be cropped by the system.

Note: When multiple images are enabled to show, image carousel is enabled for the banner by default.

Step 6: Add/edit/show/hide/delete a page component

There are two types of components:

Added by the user [1] with fixed format defined by the system - can edit/show/hide/delete.
System built-in [2] – can show/hide only or be editable, but cannot be deleted by the users: such as College/Department, Announcements, etc.

For the components added by the users, click the Setting icon [1] and you can:

Edit the component by clicking the Edit Module link [2] and then follow the screen instructions to edit.
Hide the component by clicking the Hide Module link [3].
Delete the component by clicking the Delete Module link [4].

Re-order the components by clicking the Move up/down icon [1] [2].

For the system built-in components – editable items, click the Setting icon [1] and you can:

Edit the component by clicking the Edit Module link [2] and then follow the screen instructions to edit.
Hide the component by clicking the Hide Module link [3].

Note: You cannot delete this type of components.

For the system built-in components – show/hide only items, click the Setting icon [1] and you can:

Hide/Show the component by clicking the Hide/Show Module link [2].

Note: You cannot delete this type of components.

To add a new component, go to the bottom of the page, then click the Add Module button.

It opens the Add Module pop-up window, select the component type you want to add:

The Course (Courseware) type [1].
The Image type [2].
The Video type [3].

The sample look will be displayed below based on the type you selected [4].

Then click the Confirm button [5] to open the Edit Module pop-up window to add the component type you selected.

Step 7: Add a Course (Courseware) type component

Click to enter the component name/title [1].
Select the course(s) you want to include [2].
The selected course(s) show in the right column [3].
When you’re done, click the Confirm button [4].

The course component is added at the bottom of the page.

Step 8: Add an Image type component

Click to enter the component name/title [1].
Click the Upload Image button [2].

The image uploaded is listed and you can click the - (Minus) icon to remove it if you do not like it [1].

You can enter a name for the image [2].
You can also enter an URL for the image [3].
To include more images into the component, click the Upload Image button [4].
When you’re done, click the Confirm button [5].

Note:

Recommended image aspect ratio: 16:9.
Formats: png, jpg, gif, jpeg, bmp.
Single image size: up to 2 MB.

The image component is added at the bottom of the page.

Step 9: Add a Video type component

Click to enter the component name/title [1].
Click the Upload Video button [2].

The video uploaded is listed and you can click the - (Minus) icon to remove it if you do not like it [1].

You can enter a name for the video [2].
To include more videos into the component, click the Upload Video button [3].
When you’re done, click the Confirm button [4].

Note: Recommended video aspect ratio: 16:9; Formats: mp4; Single video size: up to 500 MB.

The video component is added at the bottom of the page.

Select/Edit the site homepage style – Login Style

Recommended if you want to keep the homepage clean with a login box.

Step 1: Set Up Login Style

On the Site Settings screen, click to select the Login Style icon [1] (the site homepage is set as Login Style after it is selected).
Then, click the Edit button [2] to modify the look and feel as well as the content to show for the Login Style.

Step 2: Login Page

It opens the Login Style homepage which is editable. You can:

Customize your school logo and the page background images [1].
Customize the Useful Links at the bottom [2].

Step 3: Customize your school logo

On the Login Style editing screen, click the Logo/Background Edit icon at the left upper corner.

To upload a school logo, click the Upload button.

Note:

Formats: png, bmp, jpg, gif.
Size: up to 2 MB.
Suggested width x height: 120x120 px.

After the logo is uploaded, click the OK button.

The logo is now updated.

Step 4: Customize the page background images

On the Login Style editing screen, click the Logo/Background Edit icon at the upper left corner.

Click the Background tab [1].
To upload an image, click the Upload Image button [2].

Note:

Image Formats: png, bmp, jpg, jpeg, gif.
Size: up to 5MB.
Width x Height: 1920x1080 px or larger (smaller images will be still displayed in its original dimension and placed in the center of the page).
The images will be displayed in the order you upload them.

Select the image(s) you want to use as the page background [3]. Note: Selecting multiple images will enable carousel – slideshow of the images selected

4.After you’re done, click the OK button [4].

The page background is now updated.

Step 5: Edit the Useful Links

Click the Pencil (Edit) icon for the Useful Links at the bottom of the page.

It opens the Edit Links pop-up window.

Click the Add button to add useful links.

Click to enter the link name [1].
Click to enter the URL in the format of http:// or https:// [2].
To add more links, click the Add button [3].
To remove a link, click the Delete icon [4].

Note:

Add up to 10 links
Link name up to 20 characters
Can drag to move links to reorder

The useful link is now added.

Privilege-settings LTI Apps