Modifying the Look and Feel of a Sub Portal in the Intralearn LMS.

Dan Sherman

LINGOs Learning Technologist

What we’ll cover

• Skills you’ll need• How to find the images/code to change• Replacing images in the sub portal• Modifying specific pages• Changing the LMS interface.• Changing the style of text in the LMS• Available modifications to the SCORM

window.

Skills Required

• Administrator access to a level 2 portal

• Basic knowledge of HTML

• Basic knowledge of Image editing software

• Basic knowledge of CSS is helpful.

Replacing an Image in a Page

We will change the logo in the upper left of your sub portal

Replacing an Image in a Page

Step 1:Refer to the “Customize Your System” PDF for a complete map of all images – OR –

Right click on the graphic and choose “Properties” from the drop down menu.

Replacing an Image in a Page

Step 2:Right click on the graphic and choose “Properties” from the drop down menu.

Make record of the image’s file path address.(you’ll need this to save and upload your modified image later)

Replacing an Image in a Page

Step 3:Make a record of the image’s dimensions.

Replacing an Image in a Page

Step 4:Create a blank document the same size as the image you are replacing.

Replacing an Image in a Page

Step 5:Add your logo.

Please note:I like to use a transparent stage in my Photoshop documents and add 10 – 20 pixels to the bottom of my document.

This has the effect of pushing the left nav bar contents down slightly.

Replacing an Image in a Page

Step 6:Save as a GIF image.

Please note:If you added extra space at the bottom of the graphic in Step 5, make sure Transparency is enabled when you save your image as a GIF file.

Replacing an Image in a Page

Step 7:Save with identical name of GIF image you are replacing.

Replacing an Image in a Page

Step 8:Upload your image. Log into your sub portal as Administrator.

Under “System” (the page that automatically loads, select “File Upload” option

Replacing an Image in a Page

Step 9:Refer to your notes in step 2. The directory for the image can be found in the file path you recorded.Select that directory from the drop down menu list.

Replacing an Image in a Page

Step 10:Click “Browse” and select your to your newly created file on your local machine in the resulting dialog box.

Select your file and choose “File Upload”

1. The most important thing to remember is that the name of any replacement file must match exactly the name of the original file.

2. Files are not retrievable once they have been uploaded. Backing up the original files is recommended.

3. Remember that you can right-click (Macintosh Ctrl/Click) any image to check its file name for replacement.

Replacing an Image in a Page

Modifying a Specific Page

Step 1:Navigate to the page you wish to change in the LMS.

Please note that the LMS operates in a frameset.

Modifying a Specific Page

Step 2:Right-click on the page and choose “properties”.

Make a record of the page’s address or URL.

Modifying a Specific Page

Step 3:Right-click again on the page and choose “View Source”.

Modifying a Specific Page

Step 4:Right-click again on the page and choose “View Source”.

Save this code on your local machine with the same file name as specified in Step 3.

In this example that would be “welcome.html”

Modifying a Specific Page

Step 5:Edit the code in your preferred HTML editing environment.(you can use notepad, but be sure to save the file with a .html extension when done.

Changing the LMS Interface

Step 1:Much of the text viewed by students can be changed in the LMS via the customlanguage.xls document available in the Shared Documents section of the LMS area of SharePoint.

Changing the LMS Interface

This document is extremely easy to edit.A few key tips:1. Make sure to enable Macros when prompted.2. Make a copy of the text you would like to change and do

a search within the Excel document to find it.3. Upload the .xml document created when you save. NOT

the spreadsheet.4. Notify Dan after you have uploaded the .xml document.

Your site’s database must be updated in order to see the changes.

Changing/adding links to the left nav bar:The links in the left nav bar are images, so they can be replaced using the previous instructions for updating images. To make any invisible, create a 1X1pixel transparent gif and give it the same file name.

Changing the LMS Interface

Changing/adding links to the left nav bar – Adding HTML Conent.

Navigation frame files are encrypted *.cfm (Cold Fusion) files.Each file contains an embedded link to a custom HTML file that you may customize.(located in the same directory as it’s parent .cfm file. All files are clearly listed in “Customizing Your System PDF”

All custom additions will be below the last standard button/icon and above the log-off button or Powered by logo.

Initially this area will appear blank, but if you modify the HTML page, your code will show up there.

Changing the LMS Interface

Changing the Left Nav and Top Frame Background Images.

The Background image for the left nav bar (leftbkg.jpg, topbkg.jpg) can be edited with dramatic effect.

These images are displayed in the background of a table cell, and thus repeat. There are 2 main options for changing these graphics. The first option is to create a small graphic which is repeated, creating a solid graphic background. The second is to create a large graphic which can include text, logos, etc. This graphic must be large enough to not repeat on modern high resolution monitors.

Note:The left-side navigation frame and the top banner frame have specific, maximium sizerequirements: the left hand side banner can be no larger than 120 pixels in width; the top bannerframe can be no larger than 54 pixels in height.

Changing the LMS Interface

The LMS allows for easy modification of font size, face and color via universal stylesheet.

This style sheet is easily modified by logging in and choosing “Styles” under System Management.

Changing the Style of Text in the LMS

Modify the stylesheet hear and then click the Modify button.

NOTE: A change to a class will affect every page that uses that class, not just the page you used to getthe class name

Changing the Style of Text in the LMS

To locate a page element’s associated class:1. Right-click on a designated page and select View Source to view HTML source code. Style sheet information will display in table tags (typically td or tr). The style sheet attributes always begin with " class =". Example: < tr class=txtth >2. Select the class you wish to modify.

TIP:It often will speed up your process of finding the needed class if you do a search for a string of words you know you want to change.

Changing the Style of Text in the LMS

In general, portal administrators cannot modify the window SCORM content displays in. The exception to this is the logo in the upper left corner, This custom logo is called "lrnlogo.gif." You customize this image in the same way as all other images.

To change color or font of this window, please contact Dan Sherman.

Available Modifications to the SCORM window.