The StyleBuilder Interface, An Overview
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
This is the general interface you will see:
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.
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
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
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
Test System Style: test your current style
Options: allows you to edit graphics programs
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
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:
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:
This screenshot should show you what is what.
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.
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:
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.
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.
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.
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).
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
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.
Joined: 1-February 05
Member No.: 27,590
Joined: 9-February 03
From: Jacksonville, FL
Member No.: 1
Joined: 30-January 05
Member No.: 27,453
Time is now: 18th May 2013 - 12:08 PM
Webber Enhanced skin created by Im4eversmart of RuneHQ.