Changing Board Appearance

Changing Board Appearance

You can alter a board’s appearance—including background colors, menu buttons, and other images—by choosing a new scheme. And if none of the 12 choices included with WebBoard 4.0 is exactly what you want, you can refine the scheme by altering the colors of each element with the WebBoard color selector. You can also tell WebBoard to use different images for items such as left frame background, menu buttons, or all WebBoard images. All along the way, you can preview your changes to make sure the new colors and images look like you’d imagined. Finally, you can save your changes as a new scheme so that you can use it for a different board or simply give yourself the option of switching back to a default scheme without losing your customized creation.

Note
In upgrading from a previous version, you cannot preserve board color changes made via the color selector. You will have to reapply those changes using the Custom Color area of the Change Board Appearance page. In future upgrades, changes saved as a scheme will be maintained.

Selecting, Previewing and Applying Schemes

Applying a new scheme is simple and you can return to the default scheme at any time. Even if you are completely content with the default look and feel, you may want to preview the other schemes, just to see what’s available.

To apply a new scheme, follow these steps:

On the Management Menu, click Change Appearance. The Change Board Appearance page appears.
In the Select Scheme area, click the down arrow to view the drop-down list of schemes.
Click a scheme to select it and then click Preview to see what it looks like. The scheme preview window opens, showing all aspects of the scheme. For example, you can see the color of visited and unvisited links in both frames, background colors, menu buttons, expansion box images, and so on. You may also want to set up a board to test and develop different schemes. Viewing a scheme on a board differs slightly from the preview.
After you are done previewing schemes, select the one you want and click Apply. WebBoard applies the scheme to the board you are logged into. Other boards are not affected. Reload the page to see the scheme in all frames (the top menubar frame, left conference list frame, and right message frame).
To restore the default scheme, repeat steps 1 and 2, select Default from the drop-down list, and click Apply.

Changing the Image Path

You can replace any of the scheme’s graphics with your own. Of course, you’ll want to be very careful to use graphics that fit into the page layout and work with other elements of the design. For example, you could change the background image in the left frame All Messages view to a subtle wallpaper with your university mascot. Or replace the attention icon exclamation marks with yellow stars.

By default, all graphics for a board’s HTML pages are stored in the primary WebBoard installation’s WebBoard\Images folder. The Images folder contains the standard WebBoard images and a subfolder for each scheme. Each folder contains all the images used by WebBoard, including for online help and chat. There are over 70 images used by WebBoard in each folder. You save your custom images in a new subfolder of the Images folder, along with copies of the unchanged images from the scheme you are basing this customization on. Then you tell WebBoard to use the images from that subfolder and save your changes to a custom scheme with a new name.

To customize the images used by a scheme, follow these steps:

Create GIF files of the images you want to use, noting the following:
- Store them in a subdirectory of the Images folder. Give the folder a meaningful name, for example, corp_logo.
- The graphics must have the same names as the graphics they are replacing.
- Copy any unchanged images from the subfolder for the scheme you will be using to the new subfolder.
Scroll down to the Images area of the Change Board Appearance form.
Enter the URL path to the subdirectory you just created.
- You can use the wbimages alias, which is the location of the main image folder. (Specifying the location of the images folder is described in Chapter 5, Managing Your WebBoard Site.)
- You can also specify a full URL, such as http://your.company.com/webboard/custom_images.

Customizing Board Colors

Although the numerous schemes provide a variety of colors and color combinations, you may want something you can’t find. WebBoard lets you completely revamp scheme colors or perform a couple moderate tweaks. Colors you can affect include colors of the background for top, left, and right frames; text, visited links, unvisited links, and active links for the left and right frames; and the table and table contrast color for the right frame.

In the Colors section of the change Board Appearance form, you can set colors as hexadecimal values, accepted color names, or by using the built-in Color Selector applet. For convenience, WebBoard includes a color swatch table showing you the colors and names recognized by your current browser. The Color Selector lets you choose colors by sight, but then puts their hexadecimal value in the color fields. The values shown in the color fields before you begin to make changes are for the currently selected scheme or your last modification.

All of the WebBoard schemes except two—Caribbean Sunset and WebBoard Classic—use a background image for the left frame. If you change the background color for a scheme with a background image, the image covers the new color settings and it will appear as though the color didn’t change. To create a scheme with a different left frame background color either start with a scheme with no background image or do not include the background image (back.gif) file in the new images subfolder. Removing the background image from an image folder affects all schemes that use that folder.

Using the color selector

To change the color using the Color Selector, click the striped button next to the item you want to change. The Color Selector opens in a separate window. Move your mouse over the Color Selector and the background of the window changes to show you the color. When you find a color you like, click your mouse. The hex value is placed in the field, and the Color Selector closes. The Color Selector requires a level 4 or higher browser.

Click save to view the current scheme. If you still want to make changes, repeat the above steps until you have them the way you want.

Using the color name

To change a color using a color name, type the new name into the appropriate field. To see the color swatch table, click the first link on this page.

Click save to view the current scheme. If you still want to make changes, repeat the above steps until you have them the way you want.

Hexidecimal color entries

To change a color using a hex value, type the new value into the appropriate field. The Hex values represent RGB or 24-bit color values. Each pair of the three pairs accepts values from 0 to FF in Hex format, which is 0 to 255. WebBoard pairs the numbers as RBGRBG, where the number F00F00 is Red only, 0F00F0 is Blue only and 00F00F is Green only. For example, 882F41 (R=8F, B=84, G=21) is a mauve color and 27B3AE (R=23, B=7A, G=BE) is a teal color.

Please note that while this method offers the greatest variety of color, most are not considered to be "Web Safe" colors. It is wise to review the results on several displays when choosing colors by their Hex values.

Click save to view the current scheme. If you still want to make changes, repeat the above steps until you have them the way you want.

Previewing Customized Schemes

WebBoard’s preview feature allows you to see how your settings will look without actually applying them to the current board. When you think you’ve got your custom image and color settings the way you want them, click Preview to see your changes. A separate window opens with a sample of a typical board. If you still need to adjust the colors or images, repeat the procedures in the previous sections until you have them how you want them.

Saving Customized Schemes

You can choose to apply the changes and save them as a custom scheme. The custom scheme appears in the drop-down list of schemes and can be applied to other boards. To save your changes as a custom scheme, check the Save scheme as checkbox and type a name for the scheme in the text box. This name will appear in the drop-down list of schemes. A message asks you to choose another name if the name you chose is already in use. You do not need to create a custom scheme in order to apply the changes to the current board.

Applying Customized Schemes

Click Apply to apply changes to the current board. You may apply the changes to the current board without saving a scheme.

Note
If you apply another scheme to the board and have not saved your current settings as a new scheme, all your current settings will be lost.