Changing the Course Homepage and Navigation Bar (NavBar)

What is Possible with the Course Homepage and Navigation Bar? (NavBar)

Navigation Bar:

• Re-order default NavBar links.
• Create custom links to documents or websites.

Course Homepage:

• Create custom widgets.
• Copy and modify existing widgets.

27 May 2009

Changing the Navigation Bar (NavBar)

The Navigation Bar (NavBar) is the top strip of the course pages, containing the course name and various links. It remains visible throughout the course site.

The NavBar has four different areas for displaying links: Top Left, Top Right, Bottom Left, and Bottom Right. Between the top and bottom areas is the template, which includes the department and course name.  Please leave the the top-left NavBar section as it is, since those links are consistent across all ICON courses. Do feel free, however, to add, delete, and move links in the bottom-left. In fact, you will save your students needless clicking by removing any default links you don’t plan to use.

Displaying Your Departmental Template

Some departments have their own individualized ICON templates, which may or may not be displayed initially. If the central NavBar area of your ICON course does not identify your department, you can check to to see if a departmental template is available and, if so, select it. Here's how:

1. Click the Edit Course link on the homepage Course Tools widget or on the bottom-right NavBar.
2. Click Navbars in the listing.
3. From the Template drop-down list, select the template for your department. If there isn't one, you can keep the Course Default Template.
4. Click Save at the bottom of the screen.
5. To return to your course homepage, click Course Home in the NavBar

Adding a NavBar Link for an ICON Tool

If you want to use an ICON tool that is not currently displayed in the NavBar, you will need to activate the link for that tool:

1. Click the Edit Course link on the homepage Course Tools widget or on the bottom-right NavBar.
2. Click Navbars in the listing.
3. Click the tab for the NavBar section where you want to display the link (usually Bottom Left).
4. Click the link name in the Inactive Links box on the left.
5. Click the > button to move the link to the Current Active Links box.
6. Click Save.
7. To return to your course homepage, click Course Home in the NavBar.

Adding/Editing a Custom NavBar Link for a URL or Course File

To add a custom link to the NavBar:

1. Click the Edit Course link on the homepage Course Tools widget or on the bottom-right NavBar.
2. Click Navbars in the listing.
3. Click the tab for the NavBar section where you want to display the link (usually Bottom Left).
4. Click New Link (bottom).
5. Enter the display name (preferably short). This name will appear in your NavBar.
6. Enter a URL or click Browse to locate a file in your Manage Files area.
7. Choose whether to display the website/course file in the Bottom Frame (NavBar still visible), Entire Window (NavBar no longer visible), or a new browser window (you can specify the height and width of the new window).
8. Click Save to close the popup window.
9. The custom link appears in the Inactive Links box, marked with a [C].
10. Click the > button to move the link to the Current Active Links box.
11. Click Save.
12. To return to your course homepage, click Course Home in the bottom-left NavBar.

To edit a custom link in the NavBar:

1. Click the Edit Course link on the homepage Course Tools widget or on the bottom-right NavBar.
2. Click Navbars in the listing.
3. Click the tab for the NavBar section where the link is located (usually Bottom Left).
4. Click the link name in the Current Active Links box.
5. Click Edit Link.
6. Make your edits and click Save to close the Edit Link popup window.
7. Click Save in the Edit Navigation Bar window.
8. To return to your course homepage, click Course Home in the NavBar.

Re-ordering Links on the NavBar

1. Click the Edit Course link on the homepage Course Tools widget or on the bottom-right NavBar.
2. Click Navbars in the listing.
3. Click the tab for the NavBar section where the links are located (usually Bottom Left).
4. Click a link name in the Current Active Links box.
5. Click Up or Down to move the link. The higher up the link is on the left, the further to the left it will appear relative to the other links in the NavBar.
6. Click Save.
7. To return to your course homepage, click Course Home in the NavBar.

Removing a Link from the NavBar

1. Click the Edit Course link on the homepage Course Tools widget or on the bottom-right NavBar.
2. Click Navbars in the listing.
3. Click the tab for the NavBar section where the link is located (usually Bottom Left).
4. Click the link name in the Current Active Links box.
5. Click the < button to move the link to the Inactive Links box.
6. You can delete a custom link completely by selecting the link and then clicking the Delete Link button. You can delete only the custom links you yourself have created. To remove ICON's predefined links from your NavBar, you need to move them to the Inactive Links box.
7. Click Save.
8. To return to your course homepage, click Course Home in the NavBar.

5 October 2009

Changing the Homepage Widgets

The Homepage—that is, everything below the NavBar—is made up of separate design elements called Widgets, easily identified by their rectangular shape and colored titlebar (e.g., Role Switch and News).

To make any changes in the default homepage widgets, create a copy and give it a new name and then modify the copy.

Although you could create a new homepage by clicking Edit Course in the right NavBar and then clicking Homepages and New Homepage, you would have to start with any entirely blank pallet.

Once you have made a copy of the default homepage, you can move or delete the default widgets, select from other available ICON widgets, or create your own. You can even forget about widgets altogether and use an ICON tool (such as Content) or an external website as your course homepage. Links to other ICON course areas will still be available in the NavBar.

Start by copying the default homepage:

1. Click Edit Course (right NavBar).
2. Click the Homepages link.
3. Click the Copy Course Default icon next to the Course Default homepage.
4. Enter a name, and optionally a description, for the homepage.
5. If you wish to make an ICON tool or external website your homepage, click Set my homepage as a tool or url. Then either select Make this homepage a tool and choose the tool from the dropdown menu OR click Make this homepage a webpage and enter the url.
6. Click Save.
7. Click Homepages (top, not left) to see a listing of your homepages.
8. Click the Set button next to the new homepage to set it as the active homepage.

Now you're ready to make your changes. (If you set your homepage as an ICON tool or a url, you're already finished. Just click Course Home (left NavBar) to view it.

Adding/Hiding/Re-Ordering ICON's Predesigned Widgets

1. Go to your course homepage and look in the far bottom-right corner. If you see a tiny pencil icon, click it to go directly to your active course homepage. If you don't see a pencil icon, click Edit Course in the right NavBar and click on Homepages. Then click on the name of the homepage you wish to edit. If the only course homepage you see listed is the default, you will need to copy it, since you can't edit the default homepage (see above instructions for copying the default homepage). Then you can click on the name of the copy.
2. Made your edits:
   • To add a widget, find it in the list of widgets, click in the box to select it, and click Save. The widget will appear in the list of active widgets.
   • To move a widget within the same panel, find it in the list of active widgets. Click the drop-down arrow and select either Move Up or Move Down from the list of options.
   • To move a widget to another area of the screen, click the drop-down arrow and select Move To. Select the screen area where you want the widget to appear (eg. Left Panel, Header, etc.).
3. To view edited course homepage, click Course Home in the NavBar.

Creating Custom Widgets

You can also design your own widgets to display pictures, text, links, etc. Many instructors want to create custom widgets to display a picture or create a direct link to important course documents (such as the syllabus). Creating a custom widget involves three main steps: creating the widget, adding content to the widget, and adding the widget to the course home page. Once you've created a widget you may wish to add release conditions to specify who can view it and under what circumstances.

First you'll create and name the widget:

1. On the Course Home page, click Edit Course in the NavBar.
2. Click   Widgets (bottom) .
3. Click New Widget (top).
4. Enter a name and description.
5. On the Customize tab, you can change the widget's color and other display options if you wish.
6. Click Save.

Now you’re ready to enter the widget contents using the built-in HTML editor:

1. Click the Content tab.
2. In the HTML Editor, type in your own widget contents. Notice the special-purpose tools in the menu, especially    Insert image and   Insert QuickLink (use QuickLink to link to a course tool or content or to an outside URL).
3. Click Insert to close the HTML editor (if necessary) and then click Save (you may have to scroll right to see the Save button).
4. Click Course Home (left NavBar) to return to your course homepage.

Next, you'll place the new widget on your homepage.

1. Go to your course homepage and look in the far bottom-right corner. If you see a tiny pencil icon, click it to go directly to your active course homepage. If you don't see a pencil icon, click Edit Course in the right NavBar and click on Homepages. Then click on the name of the homepage you wish to edit. If the only course homepage you see listed is the default, you will need to copy it, since you can't edit the default homepage (see above instructions for copying the default homepage). Then you can click on the name of the copy.
2. Click the Add Widget button on the area of the screen where you want the widget to appear.
3. Click the check box next to your new widget to select it and click Save.
4. To move the widget within the same screen area, find click the drop-down arrow for the widget and select either Move Up or Move Down.
5. To move the widget to another area of the screen, click the drop-down arrow and select Move To. Select the screen area where you want the widget to appear (e.g., Left Panel, Header, etc.).
6. To return to your course homepage, click Course Home in the top-left NavBar.

Restricting Access to Homepage Widgets

You can restrict access to widgets based on group membership or completion of a certain online task.

Note:  If you plan to restrict access to a widget based on group membership and you haven’t yet created the group, create it now, before you proceed with step 1 (see Creating Groups).

1. Create and save the widget.  (The widget must be saved before you can enter release conditions)
2. To edit a widget, click Edit Course (right NavBar) and click Widgets. Click the Edit icon next to the widget.
3. Click the Release Conditions tab.
4. Click Create and Attach.
5. Select a Condition Type and specific item from the dropdown lists (you may need to scroll) and click Save. For example, to restrict a widget to a particular group, you would select Group Enrollment as the Condition Type, and then the specific group from the Condition Details.
6. Click Save to apply the release condition.

Modifying a Custom Widget

To make a modification to a custom widget, you must change the widget; then delete the unchanged version of the widget from the homepage and add the changed version. Begin by modifying the widget:

1. Click Edit Course in the far-right NavBar or in the Course Tools widget on your course homepage.
2. Click Widgets (bottom).
3. Click the Custom Widgets tab.
4. Scroll down until you see the the widget you wish to modify and click the Edit icon to the right. (If there is not Edit icon, then you don't have the necessary rights to edit the widget.)
5. Click the Content tab.
6. Enter your changes in the Contents textbox and click Save.

Next, delete the unchanged version of the widget from your homepage:

1. Click Homepages in the Course Admin Tools menu at left.
2. Click on your active copy of the course default.
3. Click the Content/Layout tab.
4. Click the down arrow in the widget you want to replace and select Remove from Homepage in the dropdown menu.

Now add the changed version of the widget:

1. Click Add Widget in the panel where you want to place the revised widget.
2. Click to place a checkmark in the box to the left of the widget and click Save. The widget will appear in the Content/Layout panel.
3. If you wish to move the widget up, click the arrow to open the dropdown menu and select Move Up. Repeat as many times as necessary.

5 October 2009

Changing the Course Colors

1. From the Course Home, click Edit Course in the bottom-right NavBar.
2. Click the Course Offering Information link.
3. Click the colored boxes to change the defaults. Click Save.
4. To return to your course homepage, click Course Home  (top left).

You can revert to the original course colors by clicking the   Reset Default Color icon.

19 November 2007