Theme Editor Options

The Theme Editor provides, in general, two kinds of options :

•	Those that alter the color of fonts, cell backgrounds and borders

•	Those that control the use of background images and icons

The following subsections discuss each of these.

Changing color settings for an Exhibit theme

Whether you’re changing the color of fonts, the color of a background or of a border, the mechanism remains the same:

1.	Locate the attribute you are interested in changing in the Theme Editor. For example, if you were interested in changing the color behind the basic tools found at the bottom of the Control Panel, you would locate the color controls for #basictools.

2.	Change the color setting by either typing in a new hexadecimal color value in the type-in field, for example to change from light gray to purple, you might substitute #7a7cb7 for #ececec,

or

Alternatively, use the interactive Color Selector by clicking the colored square to the right associated with the attribute of interest. The Color Selector shown in Figure  will open.

Move the Color Selector “cross hair” over the color that you want to sample and click once. The selection will appear in the color box below, next to its hexadecimal value. You can alter its shade or lightness by clicking again in the graduated bar to the right. The upper part of the bar will lighten the hue, the lower part of the bar will darken the hue.

Click the Apply button to link the selection to the attribute.

3.	Click the Submit button at the bottom of the Theme Editor to lock in your change(s).

Changing an image or icon for an Exhibit theme

Whether you are substituting an image or icon, the procedure remains the same.

1.	Locate the attribute you are interested in changing in the Theme Editor. As an example, we’ll use #header_image, the image that appears at the top of users’ Navigation Control Panel in an Exhibit site.

The PORTALADMIN GUI shows the name of the image currently in use, xwnp-sm.gif in this case, which can be found on the Xinet Portal server inside the directory, ...Site_Name/templates/images

It is worthwhile opening the current image for reference in an image-editing program to examine its attributes before proceeding. In our example, xwnp-sm.gif is an Indexed, 280 pixel x 23 pixel GIF. Using a similarly-sized image to replace it, although not mandatory, will avoid dramatic reassignment of page real estate upon substitution.

For reference when developing new icons, the default Exhibit site Icon-, Short-, and Long- view browse icons are primarily transparent PNGs or GIFs, 24 pixels wide by 20 pixels tall. The rectangle depicting the view is 14 pixels wide by 18 pixels tall. Designing within this framework should give you new icons in keeping with the icons that ship with Xinet Portal.

2.	Click on the original image displayed in the Theme Editor. This will open an image-selection dialog box.

3.

Choose an image from the pop-up list or use the Upload button to place a copy of the new image in the directory ...Site_Name/templates/images, as shown in Figure 3. It is up to you when uploading a new image whether you want to overwrite the existing image or to use a unique name for the image you are importing.

4.	If the new image is not already selected in the pop-up list, use the pop-up list to select it. Click the Use Select Image button to register your selection. You’ll see the change, immediately, in the Theme Editor.

5.	The Theme Editor also allows you to set other attributes for the display of the new image. Use the pop-up buttons to set the image’s background position and background repeat properties.

• The left background-position button allows you to position the image in the frame horizontally. The right background-position button allows you to position the image in the frame vertically. They will not have any effect if the image fills its frame entirely.

• The background-repeat option allows you to determine how the image will be repeated within its frame, if it does not entirely fill the frame.

6.	Click the Submit button at the bottom of the Theme Editor to register the change. Users who refresh their browsers will see the change immediately.