Skip to end of metadata
Go to start of metadata


TUTORIAL- ENHANCE THE APPEARANCE OF YOUR COURSE SHELL

 

1. Overview

You have a well-designed online course and you're a great instructor....but do the visual elements of your myCourses shell reflect those qualities?

This tutorial provides you with multiple options for introducing visual elements that will enhance the look and feel of your course. With the simple techniques outlined below, your online course can quickly be transformed to one that visually reflects the vibrancy of your teaching. 

Below is a side by side comparison between the generic look of a default course shell and one that has been transformed using some of the techniques that this tutorial offers.  The customized homepage on the right provides enhanced online presence that the default homepage on the left lacks.

1.1. What are the benefits?

Look and feel communicate important - though not always accurate - messages about the course and the instructor. Quality. Expertise. Relevance. Legitimacy. Organization.

The key benefits to customizing the look of your course include:

  • Makes an impact – Learners want courses that look good. It gives an impression of professionalism and expertise.

  • Attracts attention – We look at things that attract our attention. Once we attract attention a learner may actually start to read our content.

  • Minimizes distractions – A good design adds to the course content and doesn’t “get in the way”. It shouldn’t distract from the learning.

  • Ties the course together – If the course “looks” uniform and alive it gives a sense of belonging.


 

2. Types of visual enhancements

The table below outlines the various types of enhancements that can be made within your course shell.  Some types of enhancements like Navigation bars are applied to your entire course at once.  Other types of enhancements must be applied to the individual elements of your course, such as the text color of a news item or content topic. 

This tutorial will provide you with the simple steps to achieve each type of enhancement listed, click on the enhancement name to move quickly to the corresponding section in this tutorial.

Type of enhancementApplicable location(s) in your course shell
Images & IconsHomepage, Content, Discussions, Dropbox, Quiz
VideosHomepage, Content, Discussions, Dropbox, Quiz
 Text Color & SizeHomepage, Content, Discussions, Dropbox, Quiz

Theme (Background color & images)

Entire course shell
 Navigation BarsEntire course shell
Widgets  Course Homepage
 Replacement StringsHomepage, Content, Discussions, Dropbox, Quiz

3. Images and Icons

One of the easiest ways to dramatically improve the look of your course is through the addition of images and/or icons.  These can be used to emphasize a specific concept covered within a course topic, or they can be used to draw attention to an item that requires student action such as and icon that represents a due date.

The images that you use can be from your own graphics library, from one of the numerous online public photo archives such as Flickr, or from the Icon library below. 

Here are a few of the image resources that some faculty have used, these all offer publicly available free images (some may require attributions)

This Wikipedia article has a very comprehensive list of other sites that offer the same:

If you do end up using images found online be certain to do so under the fair use guidelines and check with your librarian if you are unsure of the use parameters.

3.1. Icon Library

RIT's Innovative Learning Institute has designed a set of commonly used icons for you to use within your online course. These icons can be downloaded to your own computer so that you have the ability to insert them into courses, handouts, or even embed in emails.

For example, if your goal is to attract attention to an assignment, you might add the assignment icon into a news item on your myCourses homepage.
  

 

Or, if you want to add a graphic to emphasize that a content module is for a specific week in the semester, you might add the Week 9 icon in the module overview.


Below is list of the icons that are available. 

  • To download the entire library click ILI myCourses Icon Library.zip
  • Alternatively, you will find many of these icons used in the myCourses online course sample shell.  If you import the sample shell content it will also bring these icons into your course and you will be able to reuse them by selecting them from the course files.
  • After you have downloaded these icons and unzipped (extracted) the folder to your computer, follow the instructions below for inserting images into myCourses. 

3.2. How to insert images/icons

Images can be inserted using the HTML editor and the insert image tool that is built into myCourses.
This editor is recognizable by the toolbar that appears when you add or edit text in a content item, news item, discussion topic, dropbox instructions and quiz items.
 

 

For example:

  1. To add an image to an existing news item, first edit the news item. 
  2. Then place your cursor with the news item at the location where you want the image to appear.
  3. Click the Insert Image Icon.
    1. A window will appear that prompts you to select an image from one of three locations:
      1. My Computer-allows you to upload images into your course that you have saved on your computer
      2. Course Offering Files-allows to to insert images that you might have already used in your course
      3. URL-Allows you to paste the url to an image from the web (please note, if the owner of the image removes it from the web your image will also be removed from your course)
    2. In most cases you will be uploading an image from your computer, to do so you can either drag the image file into the area that is labeled "Drop file here", or you can click the Upload button to browse your computers folders and select the image file.
  4. Then click Done. 
  5. Next you will be prompted to provide alternative text, this is text that will display should the student be viewing your news item with a device that doesn't support images.  Add appropriate text that describes your image.

The image will appear within your new item and you now have the ability to adjust the image size and position within the news item.

 

To adjust the image size

  1. Click on the image. 
  2. White square handles will appear at the corners of the image. 
  3. Place you cursor over the square handle and then press and hold your mouse button while dragging the handle inwards (to reduce the size) or outwards (to enlarge the size).
  4. When you have reached the desired size, depress the mouse button.

 

To change the position (alignment) of the image

  1. Click on the image
  2. To center the image, click the Align Center icon from the HTML toolbar
  3. To move the picture to the right, click the Align Right icon from the HTML toolbar

4. Videos

Much like images, videos add warmth and color to your course but with additional dimension and depth.  When you embed a video you both improve the look of your course while at the same time adding relevant content.  Embedded videos are a nice way to indicate to your students your commitment to teaching in the online format  and leveraging technology to enhance their learning experience.

 

Utilize TLS Media Services

The recommended approach for adding videos is to coordinate with TLS Media Services
This department will ensure that your videos meet RIT's captioning Guidelines.  The Media Services department will also host video on RIT's streaming video server to ensure playback for students is optimal.  If you have already received an embed code for your videos from TLS Media services then follow the instructions found here for adding these videos to myCourses.

 

Youtube Videos

Youtube videos can be inserted directly into myCourses using the  insert stuff icon from the HTML tool bar that appears when you make edits or add text.

Then select YouTube from the right-side and search for the desired video by name. 

Click Next and then Insert. 

If you do decide to use this method, be certain that the youtube video is captioned and meets RIT's captioning Guidelines, if it does not then contact TLS Media Services department for assistance.

5. Text Color and Size

Increasing the size of text and adding variation to text colors can be a highly effective way to draw emphasis to content. These modifications can be made using the HTML editor.

This editor is recognizable by the toolbar that appears when you add or edit text in a content item, news item, discussion topic, dropbox instructions and quiz items.

 

 

For example:

A common use of increased text size is for drawing student's attention toward news items.  A news item on the course homepage might contain a reminder to students about an assignment due date, such as "Reminder: assignment 1 is due on September 12th".  In this case the instructor might increase the text size of the word reminder by highlighting the word and increasing the size to .  The color of the text might also be adjusted to a bright red so that students are more likely to see the reminder.

6. Themes

Custom themes offer a way to change the color and images of your course page background and navigation bar layout and background. 
Changes to the theme apply to your entire course shell and can provide a dramatic enhancement over the default theme. 

Activating themes is a three step process, 1) you will need to create a new theme, 2) you will need to create a new Navbar and assign your theme, 3) you must activate your new Navbar.  Instructions for completing all three steps can be found below in sections 6 through 7.

6.1. Theme examples

Here is a side by side comparison between the default theme and one where the background color has been customized to blue.

Default Page BackgroundCustom Blue Gradient Background
Default Background ThemeCustom Blue Background Theme

 

 Another theme option is to add left and right page background images, see the example below:

 

The addition of a logo ( in this case a Project Management logo that was created with supalogo.com) to the navigation bar background adds an the effect of a custom course header:

 

6.2. How to access the theme menu

The Themes menu can be accessed from the Navbar menu.

  1. Click on the Edit Course link in the right section of the navbar.
  2. Click on the Navigation and Themes icon to be taken to the Navbars menu.
  3. Click on Themes tab, which is outlined in orange below:




From this menu you can Preview, Copy, and Delete existing themes. Like custom links and navbars, you can only delete a theme if you are the one who created it.

6.3. Creating a custom theme

  1. Click the Create Theme button at the top of the Themes menu.
  2. Enter a Name and Description for the theme.
  3. Change the layout of the theme with the Change Layout button. There are many different layouts described by the accompanying text underneath each one. 
    These layouts dictate how the course navigation bar is structured, the "Classic" layout is usually your best option as it matches the RIT's default layout and students will find it familiar.
  4. Use the instructions below to then make your desired customizations to the theme
  5. Inspect the preview at the bottom of the page to see what your theme will look like.
  6. Click Save once you are finished creating or editing your theme.

6.3.1. To customize the page background

  1. Click on the label "Page Background" to access the Page Background Properties menu.
    1. Page Colors: Adjust the color of the page's background.  For a fade effect, select Fill Type "Gradient" and then select a start and end color.
    2. Background Image: Insert an image as the page's background.
  2. For more intricate combinations you can also adjust the left, right, and homepage backgrounds. 
    1. The most common use of these is to add images to the left or right page backgrounds, such as diagrams or quick reference visuals for students.

When selecting colors for your page background, consider using a tool such as Color Scheme Designer, to assist with select a range of colors that complement each other.  This way when you stylize your widgets titlebars with custom colors they will match nicely with your page background.

Ideas for adding page backgrounds including using subtle patterns, such as those found here: subtlepatterns.com/

If you are considering a photo as your background then find one that is both free (under the creative commons license) as well as one that is 1920x1080 in dimensions or larger.  A good resource is : http://www.flickr.com/groups/809956@N25/

 

6.3.2. To customize the navigation bar background

  1. Click on a section of the theme such as Navbar Background to access the Background Properties menu.  Then click on the specific area of the navbar that you wish to customize.
    The most common use of this is to click left logo and add an image to serve as your visual course header.  Other options include:
    1. Color or Image: Fill the section with a color or image.
    2. Image Repeat: Repeat the image if it does not fill the whole area.
    3. Vertical and Horizontal Position: Control the position of the image.
    4. Margins: Introduce margins to the section.
    5. Borders: Customize the borders around that section.

6.3.3. To customize the look of the links on the navigation bar

  1. Click on the label "Main Link Area" to access the Link Area Properties menu.
    1. Container Styles: Adjust the look and feel of the area surrounding the links.
    2. Link Styles: Customize the look and feel of the links themselves, and introduce hover effects for the links.

6.4. Setting a custom theme

Custom themes can only be set while creating a navbar, unfortunately they can't be applied to your existing navbar so if you choose to use a custom them be prepared to also create a custom navbar.
When creating a navbar, click the Set Theme button and choose your custom theme.

Information on Creating a Navbar can be found in the section entitled Creating a custom Navbar.

7. Navigation Bars

When you enter your course for the first time, you will notice that there are already links on the navigation bar. These links are part of the default navigation bar.

The default myCourses navigation bar outlined in blue:

The default course navigation bar gives you some general course-related links to work with from the start. You can customize your navigation bar to ensure that it has all the necessary course-related links.

7.1. Accessing the Navbars menu:

Method A: Hover over one of the links in the navbar (e.g. Content, Calendar, Classlist). A cog icon will appear to the left of the leftmost link in the navbar (by default this is Content). Click the cog icon and you will be taken to the Navbars menu.

Method B: Click on the Edit Course link in the bottom-right section of the navbar. Click on the Navigation and Themes icon to be taken to the Navbars menu.

7.2. Creating a custom Navbar:

  1. Click on the blue button Create Navbar
  2. Enter a name for your new Navbar
  3. Click Change Theme and select your newly created theme or use the RIT Template theme.
  4. IMPORTANT STEP:  You must add Links to your new Navbar otherwise both you and your students will not be able to access any content or other areas within the course. 
    Click Add Links and check the boxes next next to the links you wish to add.  See the image below to reference the position RIT standard links., it is recommended that you add these links to you custom navbar.  For detailed instructions on how to add/edit links to your navbar see the Editing your Navbar section
  5. Click Save and Close
  6. Apply your new Navbar by selecting it from the dropdown list and clicking Apply

After following the instructions in the Creating a custom Navbar section above, you can edit the navbar by clicking it in the Navbars menu.

  1. Name: Change the name of the navbar. This will allow you to tell it apart from other navbars you might create when viewing them in the Navbars menu.
  2. Description: The description of the navbar appears below its name in the Navbars menu.
  3. Change Theme: Choose from a Theme in your course. You will only be able to change Themes if you are creating a new navbar with the Create Navbar button on the Navbars menu. More information on Themes is available in the Themes section below.
  4. Links: This section allows you to change what links appear in your navbar.
  1. To add a link to a section of the navbar, click the Add Links button in the section of the navbar you want to add the link to: top-left, top-right, bottom-left, and bottom-right.
  2. Check the boxes next to the links you want to add to the sidebar.
  3. Click the Add button .
  4. Reorder the links by dragging and dropping them. You can even move the links from one section of the navbar to another!

To delete a link, hover over the link and click on the X icon that appears in the top-right corner of the link icon.

7.4.1.1. Adding custom links from the Edit Navbar menu

  1. Click on the Create Custom Link button   in the Edit Navbar menu.
  2. Several options for the link to be created will appear:
    1. Name: Choose the name of your link as it will appear in the navbar.
    2. Icon: Choose the link's icon that will display in the custom links list. You can upload a picture or choose from existing files in the course.
    3. Description: Enter the description that will appear for this link in the custom links list.
    4. URL: This is where the link will take users who click on the link in the navbar. You can choose a URL to another place on the internet or insert a Quicklink pointing to another piece of content in the course (e.g. a certain quiz, a discussion topic, or a content topic).
    5. Behavior: This lets you choose whether the link opens in the same window, the same window with no navbar, or a new window. If you choose to have the link open in a new window, some additional options are available:
      1. Width and Height: You can customize how large the window that opens up will be.
      2. Browser Attributes: You can choose whether this new window features a Menubar and Toolbar or not.
  3. When finished creating your custom link, click the Create button .
  4. Move the link to where you want it to display by dragging and dropping it.

7.4.1.2. Managing custom links and custom link groups

From the Navbars menu, click on the Custom Links tab, outlined in orange in the picture below:



Click on the title of a custom link to edit that link. Click on the action arrow next to a custom link to Copy or Delete the link.

 

You can only delete custom links from the custom links list if you were the one who made the link.

The Create Link Group button allows one to create link groups. They function similarly to links, but when a user clicks on one, a menu drops down from the link offering more links instead of taking the user to another webpage. This is useful if you have many links you want to include in the navbar but also want to minimize clutter.

Creating a link group is very similar to creating a custom link (you can refer to the adding custom links section above for an overview on what the different options mean). The only difference is the last option, which allows you to choose from an existing link or create a new one on the spot.

Here is a custom link group in action, outlined in blue:

8. Widgets

Widgets are small boxes that can be added, edited, removed, or rearranged on a course homepage.  Every course shell in myCourses has a default set of widgets that include: News, Calendar, Updates, Academic Honesty Policy, ADA Statement, and myCourses Communication Policy.  It is encouraged that you retain these default widgets on your homepage to ensure students are aware of these important policies.

In addition to these default widgets, each instructor can create custom widgets that contain content or tools that are specific to their course.  For example, a Spanish course might add a custom widget that displays a “Spanish word of the day”.  Or in a course where an instructor uses video content, a custom widget might include a youtube channel feed. Widgets can be derived from external sources on the web, or they can be created by adding text, images, videos, or links to discussions within myCourses.

For detailed instructions on how to add, edit, and change these widgets, see the Tutorial- Homepage Customization.

9. Replacement Strings

Replacement strings offer a unique way to personalize your messages to students.  For example, a welcome message can utilize a replacement string to bring in the student's name. 

For detailed instructions see, Replacement Strings documentation