WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING

Transcription

1 Slide 1 WELCOME TO CORNERSTONE ONDEMAND LMS FUNCTIONALITY TRAINING UI Maintenance: How To Edit The Interface, The Navigation And Custom Pages

2 Slide 2 OBJECTIVES At the end of this session, you should be able: To change or customize the appearance of the page/lms header To change the overall color palette To know what options are available with custom widgets To know how to use custom widgets to change the appearance or layout of a page To know the difference between a custom widget and a pre-built widget To know how to add images and insert custom HTML using the custom content widgets To know how to customize the layout and arrange the custom and pre-built widgets To know what best practice methods to edit HTML in To know what HTML editing tools are available

3 Slide 3 WHAT CAN I CUSTOMIZE? The elements that are typically customizable in a Learning Management System are: fonts/colors themes images layout logo

4 Slide 4 PAGE/LMS HEADER In order to edit/configure the page or LMS header, an administrator will need to log into their Cornerstone instance and navigate to the Admin button on the top navigation and click, Tools. Under Core Function, certain configurations can occur, like changes to the theme and logo. Once the administrator has reached the theme and logo then be sure to locate your division and OU.

5 Slide 5 PAGE/LMS HEADER Always click on the grey Submit button at the bottom left corner when you are done with your changes.

6 Slide 6 CUSTOM WIDGETS

7 Slide 7 LAYOUT AND ARRANGEMENT Before you start editing your content or creating a new page to insert content into, you need to determine how you want the page to be laid out. This is the area where you can determine the elements on the page using a grid.

8 Slide 8 LAYOUT AND ARRANGEMENT To choose a layout, click the options icon in the top left corner of the main cell. Once you choose a layout and insert content, you cannot change the layout without clearing the content. Once you have the layout you can resize the cells by dragging them. You can split each cell vertically and horizontally.

9 Slide 9 CUSTOM WIDGETS In order to configure custom widgets first Locate the custom page you want to edit Under Options, click the Edit icon Remember, true customization is only available in the HTML widget in the Cornerstone platform.

10 Slide 10 CUSTOM WIDGETS Demonstration of: HTML widgets Dynamic widgets Static widgets

11 Slide 11 CUSTOM WIDGETS HTML Widgets Custom layouts Content (text, images, interactive elements) This is an example of the use of CSS and custom HTML as well as interactive JavaScript elements. With custom HTML there is more design options available.

12 Slide 12 CUSTOM HTML 1 Drag the HTML widget into the cell that you would like to display the custom content. Make sure to select the HTML tab. 2

13 Slide 13 CUSTOM HTML You can either edit the HTML directly in the editor, or you can work on it using a desktop editor and then paste it into the editor window. NOTE: I would suggest using a desktop editor if you want to keep your sanity.

14 Slide 14 CUSTOM HTML After you have finished editing the HTML, you ll see your changes in the cell that you placed the HTML widget. If you need to make further changes, just click the gear icon in the upper right corner of the cell. It will show up when you hover your mouse over the cell.

15 Slide 15 BEST PRACTICES If I need to edit the HTML, how should I do that? Once you have the layout you can resize the cells by dragging them. You can split each cell vertically and horizontally.

16 Slide 16 WEBSITE EDITING What is HTML? Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening <element> and closing </element> tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. The example on the right shows three common HTML tags. <h1> specifies heading text, good for page titles <p> specifies paragraph text, good for body text <img> displays an image specified by a src (source file)

17 Slide 17 WEBSITE EDITING What is CSS? With HTML you've given a basic structure to your web page, but there's not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page). The example on the right shows how CSS is used to change the appearance of the three HTML elements. h1 The heading text is center-aligned. p The paragraph text is red, bold, and center-aligned. img The image is resized to 150px by 100px.

18 Slide 18 WEBSITE EDITING

19 Slide 19 WEBSITE EDITING

20 Slide 20 CONCLUSION New Commerce Learning Center Coming June 1, 2015!