Customizing the Homepage

Back to Homepage Design Overview

Overview of Customizing the Homepage

Click any of the following items to access an explanation of the feature:

Colours | Counter | Background Image | Banner | Header | Footer

The possible components of a Homepage, listed in order of appearance from the top to the bottom of the page, include a banner, a header message, icons representing various links to course content items and tools, a footer message, and a counter. The counter is the only component that has an alternate position, directly below the banner. You can also select a colour set and a patterned background image and apply it to the Homepage.

Note: icons can be rearranged from the Organize Icons option in the main Homepage toolbar.

Colours | Toolbar | Top

You can change the look of your Homepage by choosing the colours that are applied to your background (bg.), text, links and visited links. The initial colour set of the Homepage is usually the Global Default setting which you specify by selecting Course Settings Colours. The Global Colour set is in effect until you choose another colour set.

Click Colours to bring up the Colour Set Editor screen. The Colour Set Editor screen is displayed in the main page frame. The Global Colour Set and the Current Page Colour Set are indicated above the table (Figure 2).

The Global Colour set is often one of the four predefined sets specified by WebCT in the Set No. column. To select one of the other predefined sets, click on the set number button. The page will change back to the Homepage with the selected colour set applied.

You can also choose to display your page in the Browser Default colours as set in your viewer's Netscape Navigator or Internet Explorer preferences. To do so, click Browser Default.To revert back to the Global Default setting, click Global Default. In both cases, after you click either Global Default or Browser Default, the page will change back to the Homepage with the selected colour set.

Click Back at any time to return to the Homepage if you do not wish to change the current colour set.

To customize your colour set, you must first choose the colours for each attribute. Press Custom to make those custom colours the defaults. To select a custom colour for a background, text, links and visited links, click one of the cells in the Custom row. For example, if you wish to customize the Text colour, click the Custom cell in the Text column. The Custom Colour Editor screen appears (Figure 3):

Click on one of the coloured squares to preview that colour in the frame to the right of the colour palette. Alternatively, enter a hexadecimal value in the Colour Value text box and click Preview to view the colour to which it corresponds. Once you have selected the colour you desire, click Update to choose it or Cancel to keep the original colour. When you have selected all of your custom colours, press Custom in the Colour Set Selector table to apply the Custom colours to your page.

Click Reset to change the custom colour for that attribute to your browser default.

Note: although Reset changes the custom colour to white, it will not necessarily show up as white in your WebCT page. If you have chosen your Web browser defaults to override document/program colours, it will show up as the browser default colour. If, in your Web browser, you have chosen document/program colours to override your browser defaults and you do not specify a custom colour for one of the attributes, that attribute will take on the WebCT Global default colour.

Counter | Toolbar | Top

The counter provides the number of times the Homepage has been accessed. It may be placed at the top or bottom of your screen (or you can exclude it completely) by pressing on the respective radio button. Click Counter to bring up the Counter Page Editor screen in the main page (see Figure 4). This screen gives you four display options, a link to Configure, and the current configuration display of the counter on the Homepage:

Figure 4   Counter Editor Screen

An asterisk appears beside the Global Default option of the counter (you can change this from your Homepage through Course Settings Counter). Choosing the Global Default display option uses the global default counter display option (Top, Bottom, or None). Note: if you choose Global Default, the counter's appearance on the page will be affected whenever the global default setting is changed (from the Course Settings section).

Click Update to save any changes made to the counter. Cancel restores the previous counter configuration.

The counter provides the number of times the Homepage has been accessed. It may be placed at the top or bottom of the Homepage, by selecting the Top or Bottom radio buttons respectively. To exclude the counter from the Homepage, select None. Press Update to save the display position or Cancel to restore the previous counter configuration. The main page frame returns to the Homepage where the counter configuration is displayed accordingly. The Designer Frame still displays the Customize Homepage toolbar.

To edit the style of the counter, click Configure... to display the Counter Editor in the main page frame. (See Figure 5).

Figure 5   Counter Editor screen

On the Counter Editor Page, the current configuration of the counter is displayed for reference. The configuration options include six digit styles and a set of counter attributes to customize and select. Update returns to the Counter Chooser page, with any changes made to the configuration of the counter being reflected. Reset sets the access count of the counter back to 0 (Note: due to browser caching, you may not see evidence of this unless you restart your browser). Cancel returns you back to the Counter Chooser page without making any changes to the counter appearance.

To begin configuring the counter, toggle the desired digit style. To customize the counter attributes, use the following values as a guideline:

• Frame Thickness: Thickness values range from 0 to 9, where zero indicates noframe and 9 indicates the thickest frame possible.

• Frame Colour: A frame colour may be chosen from the list of available colours in the drop-down menu.

• Number of Digits: The values that you can choose from range from 5 to 10 digits. Count access values will be padded with zeros at the beginning if the selected number of digits exceeds the number of digits in access count.

• Text Before: You can embed the counter into a message. If you wish to have text before the counter, type it into the Text Before text box. Use HTML to format the text, if desired.

• Text After: You can embed the counter into a message. If you wish to have text after the counter, type it into the Text After text box. Use HTML to format the text, if desired.

Background Image | Toolbar | Top

You can change the look of your Homepage by changing the background. The initial background of the Homepage is usually the Global Default setting which you specify by selecting Course Settings Bg. Image.

Click Bg. Image in your Customize toolbar to bring up the following Background Image Editor screen (see Figure 6). The current background image is displayed at the top of this screen.

Figure 6   Background Image Editor screen

To select an image to display in the background of the Homepage, an image file must be provided. This image file must either be selected from the WebCT built-in files or uploaded from your computer files. The filename of the background image file may be typed into the Filename text box, or you can click Browse... to proceed to the WebCT Browser to select an image file.

Press Update to apply your background image selection and Cancel to restore the previous background image.

Banner | Toolbar | Top

You can further customize your Homepage by modifying your banner. The initial banner of the Homepage is usually the Global Default setting which you specify by selecting Course Settings Banner.

Click Banner in your Customize toolbar to bring up the following Banner Design screen (see Figure 7). The current banner image is displayed at the top of this screen.

Figure 7   Banner Design screen

You may choose one of four options for a banner: Image, Text, Default or None. To select an image to display in the banner of the Welcome Page, an image file must be provided. After making your choices, click Update to save your your banner selection or Cancel to restore the previous banner image.

• Filename: The Filename option enables you to select an image from the WebCT built-in files or upload it from your computer files. The filename of the banner image file may be typed into the Filename text box, or you can click Browse... to proceed to the WebCT Browser to select an image file.

  You can preview images and select them using the WebCT Browser. After clicking Pick in the WebCT Browser, the path of the file chosen will appear in the filename box of the Banner Design screen. Click Update to apply your new banner image to the Homepage, or Cancel to restore the previous banner. The main page frame will return back to the Homepage.

  If you wish to use a background image which is not part of the WebCT built-in files, or the current set of course files, you must upload the new file into the set of course files. See Uploading a file from your local computer for more information on this.

• Text: If you choose the Text option, your course banner will display the WebCT scholar logo along with an italicized text message that you provide. Click the radio button to the left of the Text option and type a banner message in the text box beside the Text option. Click Update to apply your Text banner message to the Homepage, or Cancel to restore the previous banner. The main page frame will return you to the Homepage.

• Default: The Default option displays the course name or description as provided by you upon creation of the course (the description can only be changed by you, the system administrator). The WebCT scholar logo appears beside the Default description. Click Update to apply your Default banner message to the Homepage, or Cancel to restore the previous banner. The main page frame will return back to the Homepage.

• None: You can choose not to display a Homepage banner by selecting the radio button to the left of the None option. Click Update to exclude a Homepage banner or Cancel to restore the previous banner. The main page frame will return back to the Homepage.

Header and Footer | Toolbar | Top

You can build headers and footers using 'components'. Currently, the only type of component available is the Text and Image component. These components can be added, deleted, moved up or down the page, or modified. Press Header or Footer in the Customize toolbar to see a toolbar titled Header: or Footer: (see Figure 8), depending on which button you clicked in the Customize toolbar.

Figure 8   Header/Footer toolbar

Each component of a header or footer has a radio button associated with it. A horizontal line separates components (see Figure 9).

Figure 9   Example Header or Footer with radio buttons

Back:

Clicking Back returns you to the main Homepage toolbar and hides the radio buttons and horizontal lines beside each item on the page.

Add:

To add a component, simply click Add in the Header or Footer toolbar The following toolbar will come up:

Figure 10   Add a Header or Footer toolbar

The only currently available component is the Text/Image component. Upcoming releases will have more types of components. Click on Text/Image to add a new Text and Image component (see Adding and Updating Text and Image Components for help on this).

The rest of the buttons, Delete, Edit, Up, and Down, require you to first click on the radio button beside the component to select it. Then you may click any of the buttons to do the following:

Delete:

To delete a header or footer, select the radio button beside the component you wish to delete, then click the Delete button. A pop-up window will appear asking for confirmation of the deletion:

Figure 11   Confirmation of deletion pop-up window

Select OK to delete the component from the page, or Cancel to return to the unmodified page.

Up:

To move a header or footer up, select the radio button beside the component you wish to move and click Up. This moves the selected component up the page by one position. If the selected component is the first component on the Homepage, this operation will have no effect. In the example below, moving the component with the heading 'Dr. C Icon' will result with the following layout:

Figure 12   The Header and Footer example from above after applying the "Move-Up" feature

Down:

To move a header or footer down select the radio button beside the component you wish to move and click Down. This moves the selected item down the page by one position. If the selected component is the last one on the page, this operation will have no effect. In the example above, moving the component with the heading 'Dr C Icon' will result with the original layout as seen in Figure 9.

Edit:

To edit a header or footer, select the radio button beside the component you wish to edit and then clickEdit. This allows you to modify the information for the selected component (see Adding and Updating Text and Image Components for help on this).

Pressing Update will update the component, whereas Cancel will return to the page without making any changes.

[ Toolbar | Top ] [ Help Index ]