Modifying the look and feel of a sub portal in the intralearn lms
This presentation is the property of its rightful owner.
Sponsored Links
1 / 29

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


  • 89 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

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

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Modifying the look and feel of a sub portal in the intralearn lms

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

Dan Sherman

LINGOs Learning Technologist


What we ll cover

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

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

Replacing an Image in a Page

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


Replacing an image in a page1

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 page2

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 page3

Replacing an Image in a Page

Step 3:

Make a record of the image’s dimensions.


Replacing an image in a page4

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 page5

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 page6

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 page7

Replacing an Image in a Page

Step 7:

Save with identical name of GIF image you are replacing.


Replacing an image in a page8

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 page9

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 page10

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”


Replacing an image in a page11

Replacing an Image in a Page

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.


Modifying a specific 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 page1

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 page2

Modifying a Specific Page

Step 3:

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


Modifying a specific page3

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 page4

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

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 interface1

Changing the LMS Interface

  • This document is extremely easy to edit.

  • A few key tips:

  • Make sure to enable Macros when prompted.

  • Make a copy of the text you would like to change and do a search within the Excel document to find it.

  • Upload the .xml document created when you save. NOT the spreadsheet.

  • Notify Dan after you have uploaded the .xml document. Your site’s database must be updated in order to see the changes.


Changing the lms interface2

Changing the LMS Interface

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 interface3

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 interface4

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 size

requirements: the left hand side banner can be no larger than 120 pixels in width; the top banner

frame can be no larger than 54 pixels in height.


Changing the style of text in the lms

Changing the Style of Text in the LMS

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 lms1

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 get

the class name


Changing the style of text in the lms2

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.


Available modifications to the scorm window

Available Modifications to the SCORM window.

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.


  • Login