Changing the NavBar, homepage widgets, and course colors
In this section:
Changing the NavBar
ICON’s NavBar has four different areas for displaying links: Top Left, Top Right, Bottom Left, and Bottom Right. Some UI departments have their own individual templates, which determine what NavBar links are displayed initially and the appearance of the center NavBar area (this template may not be displayed initially). It's a good idea to leave the the Top-Left and Top-Right NavBar sections as they are. Do feel free, however, to add, delete, and move links in the Bottom-Left and Bottom-Right NavBar sections. In fact, you can save your students needless clicking by removing any default links you don’t plan to use.
Note: The instructions below suggest that you access ICON’s NavBar
editor by clicking the tiny in
the upper-left corner. However, you can also access the NavBar editor
by clicking Edit Course and then clicking Navigation Bars.
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:
- Click the tiny
Edit NavBar link in the left-topmost corner.
- Open the Template droplist by clicking the down arrow.
- If a template for your department is listed, select it (otherwise keep the Course default template).
- Click Save.
- 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 a an ICON tool that is not currently displayed in the NavBar, you will need to activate the link for that tool:
- Click the tiny
Edit NavBar link in the left-topmost corner.
- Click the tab for the NavBar section where you want to display the link (preferably Bottom Left or Bottom Right).
- Click the link name in the Inactive Links box.
- Click the > button. The link name jumps to the Current Active Links box.
- Click Save.
- 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 in the NavBar:
- Click the tiny
Edit NavBar link in the left-topmost corner.
- Click the tab for the NavBar section you wish to edit (preferably Bottom Left or Bottom Right).
- Click New Link.
- Enter the link name (preferably short).
- Enter a url or browse for a file in your Content Area.
- Choose whether to display the website/course file in a new browser window or to display it in the bottom frame your ICON course.
- Click Save to close the popup window.
- The custom link appears in the Inactive Links box, marked with a [C].
- Click the > button. The link name jumps to the Current Active Links box.
- Click Save.
- To return to your course homepage, click Course Home in the NavBar.
To edit a custom link in the NavBar:
- Click the tiny
Edit NavBar link in the left-topmost corner.
- Click the tab for the NavBar section that has the link you wish to edit.
- Click the link name in the Current Active Links box.
- Click Edit Link.
- Make your edits and click Save to close the New Link popup window.
- Click Save in the Edit Navigation Bar window.
- To return to your course homepage, click Course Home in the NavBar.
Re-ordering Links on the NavBar
- Click the tiny
Edit NavBar link in the left-topmost corner.
- Click the tab for the NavBar section that has the links you wish to re-order.
- Click the link name in the Current Active Links box.
- Click
Up to move the link left, or click
Down icon to move the link right.
- Click Save.
- To return to your course homepage, click Course Home in the NavBar.
Removing a Link from the NavBar
- Click the tiny
Edit NavBar link in the left-topmost corner.
- Click the tab for the NavBar section that has the link you wish to delete.
- Click the link name in the Current Active Links box.
- Click the < button. The link is moved to the Inactive Links box.
- Click Save.
- To return to your course homepage, click Course Home in the NavBar.
Changing the Homepage Widgets
In addition to the NavBar, your default course homepage contains several areas called “widgets” (a widget is a box with something in it, such as News or Role Switch). You can add or delete icon widgets and even create new ones, and you can rearrange them on the page.
Adding ICON Widgets to Your Homepage
A homepage is divided into five areas (the entire area below the NavBar). You can place widgets in any of these areas.
To add one of ICON’s built-in widgets to your Homepage:
- Click the tiny
in the bottom right-most corner (you may have to scroll or expand your window to see it). If you get an error massage, shorten your course title to 50 or fewer characters and try again.
- Select the tab for the area that will contain the widget (or click the desired area on the graphic).
- Click the widget name in the Available Widgets box.
- To activate the widget, click the > right-pointing icon. The widget name jumps to the Active Widgets box.
- If you wish to re-order the widgets, select one you wish to move and click the Up or Down arrows (if you are in the Header or Footer area, clicking Up moves the widget to the left, and clicking Down moves it to the right).
- Click Save and then OK.
- Click another tab to add widgets on another area of the homepage (optional).
- To return to your course homepage, click Course Home in the NavBar.
Creating Custom Widgets
First you'll create and name the widget box:
- From the Course Home, click Edit Course in the NavBar.
- Click
Homepages (top).
- Click Create New Widget.
- Enter a name and description and click Save.
- Adjust the widget’s width (percentage of this homepage area) and alignment, if desired, and click Save.
Now you’re ready to enter the widget contents using the built-in html editor.
- Click the Custom Code tab.
- Click HTML Editor.
- In the HTML Editor popup window, delete Enter custom HTML here and
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).
- Click Insert to close the html editor and then click Save.
- Click Go to Course
(top right).
Next, you'll place the new widget on your homepage.
- Click the tiny
in the bottom right-most corner (you may have to scroll to see it).
- Select the tab for the homepage area that will contain the widget.
- In the Available Widgets box, click the name of the widget you just created.
- Click the > right-pointing icon. The widget name jumps to the Active Widgets box.
- If you wish to re-order the widgets, select the one you want t move and click the Up or Down arrows (if you are in the Header or Footer area, clicking Up moves the widget to the left, and clicking Down moves it to the right).
- Click Save and then OK.
- 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).
- Create and save the Widget. (The widget must be saved before you can enter release conditions.)
- Click the Release Conditions tab.
- Click Add New.
- Select a Condition Type and specific item from the dropdown lists (you may need to scroll) and click Save.
- Click Close.
Changing the Course Colors
- From the Course Home, click Edit Course in the NavBar.
- Click in the box for the color you wish to change.
- In the popup window, click the desired color and click Set. The popup window closes, and the new color appears in the Course Colors box.
- Click Save Changes.
- To return to your course homepage, click Go to Course
(top right).
You can revert to the original course colors by clicking the Restore
Default icon.