[return to Part 2] |
|
Creating your own styles
A style is what controls the look and feel of each menu item. You can set the font, size, color, border, and more for both the regular and highlighted states. Let's take a look at the dialog. Click the "Edit Styles..." button to bring it up. Numbers have been added to the screenshot below:
 |
Here is what each numbered control does:
Use the drop-down menu to select a style you would like to edit. Or, type in a new name if you would like to create a new style. Tip: when creating new styles, pick an existing style first which closely matches the one you want to create. It's easier to modify an existing style than to create a completely new one.
Click on the Save button when you want to save the current style. Note that changes to the style are not saved unless you click on the Save button first.
Use Delete when you want to permanently remove the currently shown style. Any menu item which uses the style you delete will switch to another style, usually the first one in the style list.
The Close button closes the dialog, discarding any changes you have made. To save your changes before closing, be sure to use the Save button.
Font Face is a drop-down selector where you can specify which font you wish to use. Select from one of the predefined fonts or type your own font face to use.
Select the font style you want to use. Choose from Normal, Bold, Italic, or Bold Italic.
Specify your font size, in pixels (px) using the drop-down selector.
Choose the color to use for the font using the drop-down selector or enter the hex RGB color you would like to use.
For precise control over the color, double-click on the color selector square. The color selection dialog shown below will appear. Choose from the color-safe selection palette or specify your own RGB values using the real-time color sliders.
 |
The padding value you enter will determine the distance, in pixels, between the edge of the menu item and the border. A sample of how the padding affects the output is shown below, zoomed in to show individual enlarged pixels: In this example, a padding value of 3 was specified. This means that there will be a minimum of 3 pixels between the edge of the font and the start of the border. Here you can see that there is actually 4 pixels. The exact value depends on the font used, the border used, and how the browser displays it.
The text alignment is very straightforward. Determines whether the text is centered, or aligned to the left or right.
Select the type of mouse cursor you want to use when the user moves their mouse over the menu. Choose from a pointer, hand icon, wait icon, resize cursor, and many directional cursors too numerous to list.
Use this drop-down to select the background color for the menu item. Choose a pre-defined value or specify your own RGB hex value.
Double-click on the color box to bring up the color selection dialog. Specify your background color by choosing from the web-safe palette or using the sliders to precisely control the RGB values.
Specify the width, in pixels, of the border you would like to use.
Choose the style of border. You can have no border, a solid border, dashed, double, dotted, grooved, inset, outset, ridge, or solid. Experiment with these to find the best combination.
Choose the cell background color using the drop-down selector or enter the hex RGB color you would like to use.
For precise control over the background color, double-click on the color selector square. The color selection dialog shown below will appear. Choose from the color-safe selection palette or specify your own RGB values using the real-time color sliders.
If you are experienced with CSS, you can enter your own CSS attributes here. CSS attributes are specified in javascript style. Essentially, dashes are removed the words appearing after the dashes have their first letter capitalized. For example, in regular CSS you would specify line height as line-height:"20px" – in this field, you would specify it as lineHeight:"20px" Note that not all browsers support all CSS attributes, so using custom CSS might cause your menu to function incorrectly in some browsers, especially Netscape 4. Be very careful to test your menus in all browsers you would like to support when using custom CSS attributes.
Specify the highlighted state's font color in this drop-down field. The highlighted fields apply for when the user mouses over a menu item.
Double-click on the color box to bring up the color selection dialog. Specify your background color by choosing from the web-safe palette or using the sliders to precisely control the RGB values.
Use the drop-down to specify the highlighted state's background color.
Select the highlighted state's background color using the color selection dialog by double-clicking on the color square.
Select the highlighted state's border color using the drop-down selector.
Double-click on the color box to bring up the color selection dialog to specify the highlighted state's border color.
Similar to #1 green above, this specifies any custom CSS to use for the highlighted state. The same cautions apply with this field as with the other custom CSS field.
Conclusion
Now you know everything you need to create professional menus using Cascadia. Any comments or questions about this tutorial? Please let us know!
[return to Part 2]
Copyright © 2003 BitMotion Software Inc. All rights reserved. "BitMotion" and the BitMotion logo are trademarks of BitMotion Software Inc.
