Creating a Simple Windows XP Visual Style

As we discussed in Chapter 7, "The Basics of Creating Your Own Skins," a visual style editor such as StyleBuilder is only one of the software packages you need to customize a visual style. You also need image editing software and maybe even drawing software.

But let's look at the type of visual style modifications you can make inside StyleBuilder. You can create simple visual styles (meaning slightly modified) with StyleBuilder itself.

First, open StyleBuilder by selecting Start, All Programs, TGTSoft, StyleBuilder. To create a new style, click the New button on the StyleBuilder toolbar. The Browse for Folder dialog box opens (see Figure 8.3).

Figure 8.3. Specify or create a folder for the new visual style.

Use the dialog box to locate or create a specific folder for the new style. It is important that each style reside in its own folder because the uncompiled style consists of a number of files and folders. Then click OK to continue.

Note

A shellstyle.dll provides the layout and visuals for the various panes found in Windows Explorer.

A message box opens stating that StyleBuilder now supports shellstyle.dlls and that a shellstyle.dll needs to be applied to each of the default Luna color schemes beginning with Blue. The three default color schemes are Blue (Blue), Homestead (Olive Green), and Metallic (Silver).

Note

StyleBuilder has a built-in resource editor named ResBuild that can be used to modify and save shell styles. You can also modify the shell style in StyleBuilder as you would any other interface element. We discuss editing resource files (such as shell styles) in Appendix A, "Using ResHacker."

Rather than attempt to load a shell style for each color scheme (at this point), it is really best to let StyleBuilder load the default Luna shell styles. Click OK. A second dialog box opens, allowing you to browse for a shell style file. Because we are using Luna (the default), just click OK again.

The same two dialog boxes (referenced in the previous paragraph) open for the Homestead color. Click OK and then click OK again. With one more color scheme to go, the same two dialog boxes open, requesting that you select a shell style to load for the Metallic color scheme. Click OK twice and you are returned to the StyleBuilder application window.

Modifying Visual Style Colors

Now you are ready to edit some of the visual style settings to create your own simple visual style. First, you'll work with some color changes and then modify the Blue color scheme (Blue is selected on the Shortcut bar).

To work on a particular part of the interface, click one of the choices provided on the Shortcut bar. For example, if you want to modify the taskbar, click Task Bar. This displays a mock-up of the taskbar and its various elements in the Preview window (see Figure 8.4).

Figure 8.4. Select the interface item you want to modify.

StyleBuilder allows you to modify the color settings of a particular item (the item currently displayed in the Part window) or all the parts of the interface. So, let's say you want to change the color settings for one item, such as the taskbar. Click TaskBarBackground.bmp (the solid rectangle) in the Preview window. This provides a sample of the image in the Part window (some items exist in different states, so the sample in the Part window might consist of more than one graphic element).

In the Properties/Zoom/Colorize window, click the Colorize tab. This gives you access to a set of slider bars that allow you to control the various color settings such as hue, brightness, and saturation (see Figure 8.5).

Figure 8.5. The Colorize tab enables you to modify visual style color settings.

You can modify the color settings for all the interface elements (the default setting) or only the item that is currently displayed in the Part window (in our example, we are using the TaskBarBackground.bmp). To accomplish the latter, select the To Current Part View Only check box. Now you can change the color settings using the slider bars for that particular item; the choices are as follows:

• Hue The position of a particular color on the color spectrum. Each color hue is based on the percent of red, green, and blue (RGB) that makes up the particular hue or color. Slide the Hue bar to change the color.

• Brightness This is the amount of light received from an object. You use the various brightness toolbars to brighten or lighten the colors (to the left darkens; to the right brightens).

• Saturation This relates to the purity of a color in terms of mixing black or white with the color. Slide the Saturation bar to the left to add more black and to the right to add more white.

Adjust each of the sliders to create your new color for the item displayed in the Part window. You can also choose from a selection of preset colors by using the Pick Preset Color spinner box to the right of the colorization sliders.

Tip

The color matrix on the Colorization tab shows the percent of red/green/blue for the currently selected hue. As you move the slider, the different hues are the product of a mixing of red, green, and blue. You can change the numbers in the matrix. For example, if you wanted red as the hue, you would type 100 in each of the red matrix blocks and then change all the other blocks to 0. This gives you a pure red hue.

After you have selected a color for an item, a preview appears in the Part window. The color isn't actually changed on the bitmap file for the item (or all the bitmaps in the visual style if you choose to change all the colors using the new color) until you click the Apply Colorization button.

A warning box opens when you click the Apply Colorization button, letting you know that all bitmaps, glyph files, and color entries will be changed. Click Yes to make the color change. The changes you have made appear on the items in the Preview window.

Note

When you apply a color to all the bitmaps in the visual style (when the To Current Part View Only check box is not selected), the color is applied at different levels depending on the saturation and brightness of a particular item. For example, if you assigned red to everything, red would be applied in different saturation levels to match what is currently used on that bitmap. This means that the different states of an item (such as the Start button) will be different intensities of the new color.

If you applied your color changes to all the interface items, you have, in effect, created a new visual style. If you are working through each of the interface items as we have discussed (changing the colors on each item), you need to select each item and then choose a new color as required.

Because you see a preview of how the selected item looks in comparison to the other items in the Preview window (after you have applied the new colorization), you can use a system of trial and error to put together a complete color scheme. Color changes can be applied to an item as often as needed.

Obviously, this process can be time-consuming, but you should work through all the items in the Parts tree until you have a consistent color scheme for all the interface items. If you change all the colors for the Blue color scheme (and apply them), you should rename that color scheme on the Shortcut bar. Right-click the color group button (on the Shortcut bar) and select Rename. Then type a new name for the color group and click OK.

Obviously, if you don't want to redo all the colors that are available in one of the default color schemes (Blue, Homestead, and Metallic), you should create a new color scheme and then modify the colors it contains. This negates you overriding colors in one of the existing color schemes.

On the Colorize tab, click the New Colorized Scheme button. Type a new name for the color scheme and then click OK. The color scheme now appears as a group button on the Shortcut bar. You can select it and then change the colors for the various interface elements as you see fit.

Note

You might wonder why every new style you create is called style. The name applied to the visual style you use when selecting that visual style (using your skinning software) isn't specified until you compile the new .msstyle file. The style is compiled the first time you click the Apply button.

You should apply your changes to Windows to get a good idea of how your changes look. Click the Apply button on the StyleBuilder toolbar. The Style Name dialog box opens. You must provide a name for your style (using 10 alphanumeric characters and no spaces). Type the name for your style and then click OK. The style is compiled and the changes you have made are applied to the Windows interface.

As you make further changes to the style, you need to click the Apply button each time you make changes. Be sure to save these changes to the style by clicking the Save button on the StyleBuilder toolbar.

So, modifying colors in StyleBuilder is one way to create some simple changes that create a custom visual style. Another possibility in terms of simple changes to a visual style is to manipulate some of the properties of the bitmap that represent a particular interface item. The next section discusses item properties.

Changing Interface Item Properties

Another way to make simple modifications to visual style elements within StyleBuilder is to work with some of the properties related to a particular element. Font settings, margin settings, and other settings can change the look of an interface element, such as the Start button or taskbar.

You can modify these settings by selecting an item in the Preview pane. Make sure that the Properties tab is selected in the Properties/Zoom/Colorize window. For example, say you want to adjust some of the Start button properties. You would select Task Bar on the Shortcut bar and then click the Start button in the Preview window. This places the Start button in the Part window. Now you can look at the properties related to the Start button and see whether modifying any of these will change the look of the Start button (see Figure 8.6).

Figure 8.6. You can view and modify the properties of a visual style element.

One property that you can change for the Start button is the font used. Click the Font property line in the Properties box (refer to Figure 8.6). The Font dialog box opens (see Figure 8.7). You can now click the Change button on the right side of the Properties box and select a new font, font attributes such as bold, and a new font size.

Figure 8.7. Change the font of visual style elements.

After making your font changes, click the OK button. To view the change in either the Preview window or the Part window, click the appropriate Reset button (in the window). The font changes you have chosen are now shown on the part you are currently working with.

In most cases, the visual style elements are made up of .bmp files. If you look at the BGType property in the Properties box for a particular item and see ImageFile, this means that a bitmap file exists for the item. To make any dramatic changes to a bitmap, you need to go outside StyleBuilder and edit the image in image editing software (a topic we cover in "Creating Complex Visual Styles").

A few items, however, are simple rectangles containing a fill color. For example, the listview item (found by selecting the Buttons and Controls subgroup) is the item that provides the background color for list boxes, combo boxes, and spinner boxes. You can change the fill color for this item by selecting the FillColor property (see Figure 8.8).

Figure 8.8. Some objects are simple rectangles, and you can change their fill colors.

Now you can change the fill color for the item. Click the Pick button to open the Color dialog box. Click a color provided in the Basic colors area to change the color. Or click a color on the color palette and add it to the custom colors. You can then select this color as the new color to use.

Click OK to close the Color dialog box. You can then click the Reset button in the Preview window to get a preview of how your new color will look on the affected visual style elements.

Other properties you can tweak as far as color goes are the AccentColorHint and the FillColorHint. In some cases, this makes a change to the item. However, in some cases, depending on the degree that the property is used by the item, you will see little or no change when you edit these properties.

Changing item properties is a trial-and-error process. As you change items, click the Apply button to see how these changes look when applied to Windows XP. If you don't like a particular change, change it back to the original settings. When you make changes you want to keep, click the Save button to save the changes as part of your visual style.

Modifying Visual Style Fonts

You can also change the font size used by your visual style. In Chapter 2, "Basic Windows XP Interface Modifications," we discussed how easily you can change the default font size for the Windows XP interface on the Appearance tab of the Display Properties dialog box.

You can apply these font sizes directly to your StyleBuilder visual style, click the Font drop-down box on the far right of the StyleBuilder toolbar, and select from one of the three font size choices: normal fonts (the default), large fonts, and extra large fonts.

Creating new styles by making basic modifications to visual style elements in StyleBuilder can produce some interesting results. However, if you want to create dramatic changes to the interface, you need additional software. The next section discusses creating more complex visual styles.