A project represents a set of buttons, but this set is much more than just a disorderly bunch of buttons. As we have seen earlier, buttons exist on a global background. This implies that they are arranged on that background in some specific order and in a particular layout. The order of the buttons is the order in which they are listed in the grid. This order can be changed by simply dragging a button to a new position. See the topic on the grid.

The layout of the buttons can be specified in the Layout dialog shown below. You can invoke this dialog from the obvious places (Edit menu or the toolbar) or by double-clicking on the background in the Preview panel. Whatever layout you choose, it will be exactly maintained when you produce your output.




The left side of the dialog deals with the two bottommost Layers common to all buttons: Global Color and Global Texture.


Global Color is very simple: it lets you specify the solid color of this layer by clicking the Select Color button. It is usually best to set it as close to the color/tone of the Global Texture as possible, since this color may end up being used by some output formats (e.g., GIF) for partially transparent pixels. This recommendation obviously doesn't apply to all circumstances, e.g., when blending the Global Color with a partially transparent Global Texture.


Global Texture lets you specify the global background texture. The operation of most controls in this group is very similar to those in the Texture and Molding groups of the Properties Panel, so please refer to that topic for a more in-depth discussion. In short, you can Open (load) a texture into the background or Clear it, and specify how it fills the Preview (and ultimately the output). The texture is always tiled. Enabling Mirror will flip adjacent tiles. Enabling the Transparent checkbox will use transparency (if any) of the texture. Texture X/Y Offsets let you adjust the tiled texture position relative to the top/left corner of the Preview/output panel.



The right side of the dialog deals with button layout per se.


Buttons Position group lets you specify Left and Top Margins, i.e., distances between the edges of the Preview/output panel and the adjacent row or column of buttons. Distance between buttons is undoubtedly self-explanatory.



Button Alignment specified the overall layout of the button "bar" or "menu".


Vertical alignment places buttons in a single vertical column.


Horizontal alignment places buttons in up to 3 horizontal lines or rows. The distribution of buttons between lines is governed by the Number of buttons on group which specifies how many buttons are to be placed on The first line and how many should go on The second line. Any buttons that don't fit on either of them will "spill over" onto the third and last line.

To place all buttons on a single line (which would be the most common arrangement) set The first line value to any number greater than or equal to the total number of buttons in your project. Any large number will do, which is why the default value is 99.

To have 2 buttons on the first row, 3 on the second, and the remaining ones on the third row, you'd set The first line to 2 and The second line to 3. Sixth and further buttons that don't fit on the first two rows will end up on the third row.


Don't forget that you can make further adjustments to individual button's position using Button X/Y Offset values in the Background group of the Properties Panel, but it's best to leave such advanced positioning for the last stage of the most creative projects. Make sure you are satisfied with button Captions and sizes first, adjust positioning next. This is of course not a "hard" rule but simply a suggestion.



All Offsets, Margins, and Distances are specified in pixels, and these values can be negative. Note that any negative values in the Buttons Position group will preclude you from producing a pure HTML output file: the file produced will be HTML with CSS used for absolute button positioning, which should present no problems for modern Internet browsers.