UCLACenter for Digital Humanities
   HOME  |  ECAMPUS COURSE SITES  |  INSTRUCTIONAL TECHNOLOGY RESOURCES

Instructor Help: Personalizing Your Course Site

You can change the appearance of your course website by choosing different colors or background patterns, or changing the icons for the links and materials you add. You can also move items around so they are easier for your students to find, remove tools and items you do not wish to use, or organize your site by grouping related items on subsidiary pages.

  1. How do I change colors on my page?
  2. How do I return to the original colors on my pages?
  3. How do I use a background image?
  4. How do I add or change the heading on my pages?
  5. How do I change the icon or title of an item on my page?
  6. How do I move things around on my pages?
  7. How do I hide items on my pages so my students don't see them until I want them to?
  8. How do I delete items from my web site?
  9. How do organize my items on separate pages?

1. How do I change colors on my page?

You can choose from Predefined Schemes, or make your own Custom Scheme, as described below. These instructions show you how to change the colors for individual pages. Click here to jump to instructions for changing the colors on your entire course site.

Predefined Schemes:

You can choose one of the predefined color schemes for the Homepage or an Organizer Page.

  1. At the Homepage or at an Organizer Page, click Customize page colors which is located on the right navigation bar, under Actions > Customize.
  2. screenshot

  3. The Customize Page Colors screen appears, displaying the predefined color schemes. In the Color Set column, choose one of the predefined color schemes by selecting the radio button for the appropriate set.
  4. screenshot

  5. Click Update. The chosen color scheme is applied.

Custom Schemes:

You can create a custom color scheme for the Homepage or an Organizer Page by selecting the colors for text, links, visited links, and background.

  1. At the Homepage or at an Organizer Page, click Customize page colors which is located at the right navigation bar, under Actions > Customize.
  2. screenshot

  3. The Customize Page Colors screen appears. In the Color Set column, select Custom. In the Colors column, click one of the following: Set text color, Set link color, Set visited link color, or Set background color.
  4. screenshot

  5. A color palette appears.To preview a color, click one of the colored squares and click Preview. The color appears in the frame to the right of the color palette. In the Color Value text box, you can also type an HTML hexadecimal color code and click Preview. To choose the color, click Update. The Customize Page Colors screen appears.
  6. screenshot

  7. Repeat steps 2 to 3 to select a custom color for another screen element. When finished with all your selections, click Update on the Customize Page Colors screen. The custom color scheme is applied to that page.

Changing Colors for Your Entire Course Site:

  1. On the Course Menu, under Designer Links, click on Course Settings.

    screenshot

  2. Under Customize Course Appearance, click on Customize course colors.

    screenshot

  3. On the Customize Course Colors screen, choose one of the predefined Color Sets, or choose Custom and define the colors in the Color Preview window on the right. When finished, click Update to apply the colors. These selections will affect every page in the course website.

    screenshot

To top


2. How do I return to the original colors on my pages?

For individual pages:

  1. At the Homepage or at an Organizer Page, click Customize page colors which is located on the right navigation bar, under Actions > Customize.
  2. screenshot

  3. The Customize Page Colors screen appears. Scroll to the bottom of the screen, and click Course default. The color scheme that is specified in Course Settings is applied.
  4. screenshot

To change all course site pages back to the original colors:

  1. On the Course Menu, under Designer Links, click on Course Settings.

    screenshot

  2. Under Customize Course Appearance, click on Customize course colors.

    screenshot

  3. On the Customize Course Colors screen, click Server default to apply the default colors. This selection will affect every page in the course website.

    screenshot

To top


3. How do I use a background image?

You can add or modify a background image on the Homepage or an Organizer Page. Images must be in gif or jpg format. The image may either be selected from the WebCT-Files or uploaded from your computer to your My-Files folder. For information on uploading files to your My-Files folder, see Uploading Materials/ WebDAV .

  1. From the Homepage or an Organizer Page, under Customize, click Modify/Add background image.

    screenshot

  2. The Modify/Add Background Image for Page screen appears. To add or modify a background image from a file, select Use file. In the text box, enter the filename of the background image, or to select the file, click Browse.

    screenshot

  3. Click Update. The background image is updated.

To use the background image as specified in Course Settings, select Use course default at step 2.

screenshot

To top


4. How do I add or change the heading on my pages?

These headings are called Textblocks. You can also add textblocks to the bottom of your pages, like footers. Textblocks can contain images and links, and have colored texts and backgrounds. You can add more than one, and move them up and down to change their order.

  1. From your course Homepage, or the page you want to add a heading to, select the Designer Options tab.

    screenshot

  2. Under Actions > Options: Textblocks, click Add upper textblock (or Add lower textblock, if you'd like to add one to the bottom of your page).

    screenshot

  3. The Add Upper Text/Image in Page screen appears (or the Add Lower one). There are several features of the textblock you can customize, or leave blank if you don't want them. Set them as desired:

    • Layout: this is where you can choose a background color, if desired.
    • Text Heading: this will appear at the top of the textblock, if you add text here. You can enter the heading text and control its alignment, style, color, and size. Leave blank if you wish.
    • Text: this is usually the main substance of your textblock. Enter your text in the large textbox. You can use HTML tags if you wish, to add links or further customize the text. You can also control the alignment, style, color, and size of your text..
    • Image: you can add an image and control whether it appears above, below, or alongside your text.
    • Image Caption: if you added an image, you can add a caption for it, and set the caption's alignment, style, color, and size.

  4. Click Add at the bottom when you are finished.

    screenshot

To change or update a textblock:

  1. On the page with the textblock, select the Designer Options tab.

    screenshot

  2. Click the round button to the left of the textblock:

    screenshot

  3. Under Actions > Options: Textblocks, click Edit.

    screenshot

  4. Change options as desired. Click Update when finished.

To delete a textblock, follow steps 1 and 2 above. At step 3, choose Delete instead of Edit.

To top


5. How do I change the icon or title of an item on my page?

  1. Make sure that the Designer Options tab is selected.

    screenshot

  2. Click on the small round button to the left of the item you wish to change.

    screenshot

  3. In the right column, under Actions > Options: Links, click Edit.

    screenshot

  4. The Update Link screen appears. If you wish to change the title of the item, type the new name in the box next to Title.

    screenshot

  5. If you wish to change the icon, click on the Browse button next to Icon filename. In the new window, click on WebCT-Files to open the folder (if nothing appears beneath it). Then click on Icons . A number of different icon sets will appear, and you can click on the name of each to find a list of the icons it includes. Click on the small magnifying glass to preview the image. (see Note on Icon Collections below)

    When you have found the icon you wish to use, select it and click on the Update button at the bottom of the screen. The window will close and you will return to the Update Link screen.

    screenshot

  6. When the title and icon are set as you want them, click on the Update button to apply the changes.

    screenshot

NOTE ON ICON COLLECTIONS: You may wish to begin looking through the icon collection called webct_photo_trans. These icons are "photos" with "transparent" backgrounds. To preview most of the icons available visit the Icon Library assembled by Dalhousie University.

If you wish, you can upload your own images for icons; they must be in the .jpg or .gif format. You will then find them in the My-Files folder instead of the WebCT-Files folder when you click Browse at step 5. One good source for icons is www.hotcliparts.com/Icons. Another good source is the Google Advanced Image Search -- limit the desired file size to "small" and you will be more likely to find icon-type images. Remember to consider copyright ownership before using an image on your website.

To top


6. How do I move things around on my pages?

  1. Make sure that the Designer Options tab is selected.

    screenshot

  2. Click on the small round button to the left of the item you wish to move.

    screenshot

  3. In the right column, under Actions > Options: Links, click on the button Move backward, Move forward, or Move to organizer page as you wish.

    screenshot

Click on the "move" buttons as many times as you need to arrange the items in the order you want: they will only move forward or backward one space at a time.

To top


7. How do I hide items on my pages so my students don't see them until I want them to?

There two ways you can "hide" items from your students, so that you still see them but your students do not. The item or tool is not deleted from your web site. You can use the Hide button to hide an item from all students, or you can use the Specify selective release button to hide an item from certain students or until a certain date has passed.

Hiding an item from all students:

  1. Make sure that the Designer Options tab is selected.

    screenshot

  2. Click on the small round button to the left of the item you wish to hide.

    screenshot

  3. Under Actions > Options: Links, click Hide.

    screenshot

  4. The item will now appear with the word "hidden" under its title. This means it is visible to you and other designers, but not to students.

    screenshot

  5. To make a hidden item visible to your students, follow the steps above, choosing Reveal instead of Hide.

Specifying selective release:

  1. Make sure that the Designer Options tab is selected.
    screenshot

  2. Click on the small round button to the left of the item you wish to set conditions for.

    screenshot

  3. Under Actions > Options: Links, click Specify selective release.

    screenshot

  4. Under Selective Release, there are various criteria you can set to choose who can access your item and when. You can choose any or all of these criteria. The most commonly used settings are "Releasing after" a certain date, and/or "Releasing until" a certain date. Make the appropriate selections for your item, and click Update when you're done.

    screenshot

  5. The item will now appear with the word "Conditional" underneath. This indicates to you that it has a selective release specified. Students will not see the word "Conditional," and they will not see the item at all until they meet the release criteria (e.g., the release date has passed, or the student is on your list of selected students with access).
    screenshot

To top


8. How do I delete items from my web site?

If you are certain that you will not use a tool, link, or item, you can delete it from your course web site by following these steps:

  1. Make sure that the Designer Options tab is selected.

    screenshot

  2. Click on the small round button to the left of the item you wish to delete.

    screenshot

  3. Under Actions > Options: Links, click Delete.

    screenshot

  4. A window will open warning that you are about to delete an item. Click OK to proceed.

    screenshot

  5. The item no longer appears on your course site. If you want to add it again, you must follow the steps for Adding Materials or Adding Links.

To top


9. How do organize my items on separate pages?

Please visit Organizing Materials and Icons for detailed instructions on creating separate pages and arranging your materials.

To top