StyleBuilder is the only tool that graphically allows you to create visual styles. The interface is a little overwhelming when you first open it up and try to use it, so I wrote this tutorial to give you an overview of the interface you will be dealing with when using StyleBuilder.


This is the general interface you will see:

 main.jpg ( 145.49k ) Number of downloads: 341



Let's start with the menus at the top... We have 6 menus: File, Edit, View, Tools, Actions, Help. These menus have useful items in them so become familiar with their actions.

• File
  New: creates a new visual style
  Open: opens an existing visual style or .sb file
  Save and Save As...: allow you to save your work
  History: a short history of the files you worked on is available
  Exit: exit the program
• Edit
  Undo: undo your last step
  Redo: redo your last step (if you undid it)
  Add New Color Scheme: allows you to add a new color scheme
  Delete Current Color Scheme: allows you to delete the color scheme selected
• View
  Inherited Properties: pulls up properties tab for current part
  Empty Parts and States: allows you to jump to the empty parts/states
  Toolbar: toggle toolbar on/off
  Status Bar: toggle status bar on/off
  Tree List: toggle tree list on/off
  Shortcut Bar: toggle shortcut bar on/off
• Tools
  Test System Style: test your current style
  Options: allows you to edit graphics programs
• Actions
  Set Active Font: toggle between normal, large, and extra large font styles
  Add New Color Scheme: add a new color scheme
  Delete Current Color Scheme: delete the current color scheme
  Compile: compiles your current visual style
  Compile and Apply: compiles your current visual style and applies it to your desktop
  Link and Apply: compiles the ini files and applies them to your visual style
  Email .msstyle: emails the compiled visual style to recipient
  Email source files: emails all the files of this visual style (xml, ini, bmps, etc.)
  Backup: backup the individual files
  Restore: restore your work from a backup
• Help
  Contents: displays the contents of the HTML help files
  Search: search the help files
  Register Software: register StyleBuilder if still in the 30-day free trial
  TGTSoft on the Web: link to software vendor's website
  About StyleBuilder: displays version number

Most of these are pretty straight forward, as you will quickly see.


A good place to start is the help files, though you will find there really isn't too much there.


Before you can make a visual style, you need to set at least one graphics program to edit your work in. To do that go into Tools->Options. You will see this screen:

 1054482641_options.jpg ( 40.58k ) Number of downloads: 155



You can remove an existing program (though if this is the first time you opened StyleBuilder the list will be empty), you can add a new graphics program to work with, and you can change your default program by using the "Move Up" and "Move Down" buttons. The program at the top of your list is the default graphics editing program for StyleBuilder.

Hit "Add", and then type in a name for your program. When you are done, hit the "..." button and browse to your program's executable file and select it. Then you are all done.



Now for StyleBuilder's workspace...

There are 6 Main Areas, and they are:

• Shortcut Bar
• Parts Tree
• Preview Window
• Part Window
• Properties Window
• Properties Tab/Zoom Window

This screenshot should show you what is what.


 main1.jpg ( 160.37k ) Number of downloads: 261



I have pointed out the toolbar across the top along with the font selection list at the top. These items have shortcuts to different options available in the menus at the top of the program.

Following is a quick description of what each section is used for.


Shortcut Bar

 1054485010_shortcutbar.jpg ( 25.01k ) Number of downloads: 152


The shortcut bar contains shortcuts to different areas of the style. This is the quickest and easiest way to navigate around your style. The different shortcuts this bar contains are:

• Windows and Toolbar
• Task Bar
• User Pane
• Tracker & Progress
• Buttons and Controls
• Explorer Bar
• Fonts
• XP Colors
• Classic Colors

The first important point you should notice is that you can select any of the color schemes in this list. If you started a new one through the file menu, you will have blue selected, but you will see links for Homestead and Metallic at the bottom of this list...any other color schemes you add will also display in this fashion, giving you quick access to all your different color schemes.

You'll see what each section contains as you go through this list. You will find you probably won't be using Classic Colors much since you are making an XP Visual Style, but feel free to look through that item as well to see what it contains.

As you choose which section you would like to work with, it will display in the Preview Window, where you can choose which part you'd like to edit.


Parts Tree

 1054485093_partstree.jpg ( 38.52k ) Number of downloads: 152


The Parts Tree works exactly like Windows Explorer (when used in explorer mode ). The list is a hierarchical list starting with main sections. After you click on a section, it will expand, showing you the parts that make up that section. You can navigate around your style through the parts list quite accurately, however it may be confusing or intimidating to try to make your FIRST style using this list. Once you get to know the program quite well, however, you may find this list makes editing your style quicker due to the control you have over your navigation.

Once you select an item from the part tree, your Preview Window will update to that item.


Preview Window

 1054485179_previewwindow.jpg ( 33.66k ) Number of downloads: 131


The Preview Window displays what section of the style you are working with. There is a "Next" and "Previous" link at the top which will allow you to navigate through your style in the same fashion as the shortcut bar (in other words, using the "Next" link will take you through all the options in the shortcut bar in the same order they are displayed in this bar).

You have a Reset button in this window, which is used to update the Preview Window if you have made changes to the style. For example, often after you have changed a bitmap out, and saved it from your other program, you will have to hit reset in this window to update the view. The "Inactive" and "Disabled" buttons allow you to toggle between the different window styles when in different style sections. In the Windows and Toolbars section, for example, you will start by default on active windows, but you can choose inactive and disabled windows to see what each of these will look like.

In the Preview Window you can mouse-over items to see what the effect is in your style when you mouse over them. Also, if you right-click an item, you can edit that item as well. By clicking on an item, you will update the Part Window.


Part Window

 1054484782_partwindow.jpg ( 23.93k ) Number of downloads: 130


The Part Window shows you which part is currently selected. For example, if your Preview Window is displayed, and you click on the bitmap at the top of the start menu, that bitmap (and all it's states if it's a multistate bitmap, such as a button) will show in the part window.

From here you can choose to edit the bitmap (either through the menu at the top or by right-clicking the bitmap and choosing edit), as well as reset the bitmap. This reset button has the same effect as the reset button in the Preview Window. If you change a bitmap in your graphics program and save it, you will have to (usually) hit the reset button to update the display in StyleBuilder.

Also you will see a "Test" display, through which you can test how the item looks. If this bitmap has a mouseover state, you can mouse-over the "Test" display and see the effect and differences.

In the above screenshot, notice that I have NOT moused-over the "Test" image, so you can see what image is selected of the bottom two bitmaps by the blue side-borders (i.e....the top image is active, and is indicated by the two borders on either side).


Properties Window

 1054485326_propertieswindow.jpg ( 37.24k ) Number of downloads: 124


This is the Properties Window, where you will see all the properties of the current part selected. You can choose "Zoom" at any time and whatever falls underneath your mouse pointer (even outside of the program) will show zoomed 10x in the Properties Tab/Zoom Window. You can also choose "Colorize" to easily alter the color scheme of what you are currently working on...great for when you are just trying to add a second color scheme to your newly-created visual style.

You can also Add or Remove properties, although this isn't usually necessary. In general, you just click a property in the lower window and edit it's contents in the Properties Tab/Zoom Window.


Properties Tab/Zoom Window

 1054485774_propertiestab.jpg ( 25.74k ) Number of downloads: 140


This is the window your selected property will display in (this is also the window the zoom displays in when the zoom tab is selected). You can edit many propeties through here.

In this section we will talk about Substitution values. These are basically just shared resources. In other words, you will have some pre-defined substitution values (such as Tahoma, 8, Bold for font). Now rather than specifying a font for every item, and then if you want to change it for every item, having to do it individually, this one value is created and several different item's fonts are set to $font$. This tells the section that you want to draw from the substitution value...and also if you edit this value, it's updated for all the other items that share that value.

For example, the User Pane has a substitution value for CaptionFont (notated by $CaptionFont$). What this means is that the value for this is actually drawn from another place in the visual style...that way you can edit it and everything else drawing that value will be updated at the same time (designed to keep the style more uniform). However you may want this one item's caption font to be Arial, and another item's caption font to be Tahoma. In this case you could uncheck the "Use Substitution Value" checkbox and edit the font for just this one item. Be careful unchecking this box however, as you cannot undo this change.



In a nutshell, that's StyleBuilder. You will find that many of the areas are just designed to give you more ways to access the same thing. Don't get overwhelmed when you first open the program up...after playing with it for a day or two, you'll know just what's going on and how to get there.

would it be at all possible to update the screen shots, as i am new to the windows customizing scene and would like to be able to follow along, either way, thanks

Sorry, we had some server problems a month or two ago and were working on restoring all the broken links (and images). This tutorial is now fixed.

awesome man you r working really hard