Create Item Styles.

We need six styles.

Style Name

Description

Level-1

Styling top-level items without submenu.

Level-1-arrow

Styling top-level items with submenu.

Level-2

Styling second-level items without submenu.

Level-2-arrow

Styling second-level items with submenu.

Level-3

Styling third-level items.

Purchase-btn

Special style for Purchase item.

Create images* for our styles and save it in the HorMenu folder.

Image

Image Size

File Name

Description

15 x 34

hm_1st_arrow.gif

For Level-1-arrow style normal state (white arrow with the transparent bg)

15 x 34

hm_1st_over_arrow.gif

For Level-1-arrow style mouse over state (black arrow with the transparent bg)

12 x 25

hm_2nd_arrow.gif

For Level-2-arrow style normal state (white arrow with the transparent bg)

12 x 25

hm_2nd_over_arrow.gif

For Level-2-arrow style mouse over state (black arrow with the transparent bg)

* you can use any graphic formats usually supporting by the web browsers.

In our example the images have the transparent bg. We applied the background color within our table to make the images well visible.

The images width is calculated as a sum of arrow width and a desired left margin.

Switch to the Style Editor.

Create Level-1 Style.

1. Press Create New Style button AddButton
2. Change default style name Default Style (2) to Level-1
3. Select Blue icon (optionally) and press OK button
4. Set Font Size as 12 px
5. Turn Button Width check box on and set Width as 125 px
6. Turn Button Height check box on and set Height as 34 px
7. Set Margin left as 25 px
8. Set Margin right as 15 px
9. Set Text Normal color as #FFFFFF.
10. Turn Text Current check box on
11. Set Button Over Color as #FFB70F
12. Turn Button Current check box on
13. Set Button Current Color as #FFB70F

Now the Item Style panel should look as follows:

Create Level-1-arrow Style

1. Press Create New Style button.
NOTE: Every new style that you add into a list has all the parameters of the currently selected style. This case recently created Level-1 style.
2. Change default style name Level-1 (2) to Level-1-arrow
3. Select Blue_arrow icon (optionally) and press OK button. As our Level-1-arrow style is a copy of the Level-1 style we only need to change those of the parameters which are different.
Namely:
4. Set Margin left as 35 px
5. Turn Bg Images check box on
6. Select Normal right image box and browse hm_1st_arrow.gif file by Browse button
7. Turn Over check box on
8. Select Over right image box and browse hm_1st_over_arrow.gif file by Browse button
9. Turn Current check box on
10. Select Current right image box and browse hm_1st_over_arrow.gif file by Browse button

Now the Item Style panel should look as follows:

Create Purchase-btn Style

1. Select Level-1 Style in the style combo box.
2. Press Create New Style button.
3. Change default style name Level-1 (2) to Purchase-btn
4. Select Orange icon (optionally) and press OK button. As our Purchase-btn style is a copy of the Level-1 style we only need to change those of the parameters which are different.
Namely:
5. Set Margin left as 32 px
6. Set Text Normal color as #FFB70F

Create Level-2 Style

1. Select Level-1 Style in the style combo box.
2. Press Create New Style button.
3. Change default style name Level-1 (2) to Level-2
4. Select Grey icon (optionally) and press OK button. As our Level-2 style is a copy of the Level-1 style we only need to change those of the parameters which are different.
Namely:
5. Select font family Arial,Helvetica,sans-serif in the Font combo box
6. Set Text Align as Center by pressing AlignHCenterButton button
7. Set Button Height as 25 px

Now the Item Style panel should look as follows:

Create Level-2-arrow Style

1. Press Create New Style button.
2. Change default style name Level-2 (2) to Level-2-arrow
3. Select Grey_arrow icon (optionally) and press OK button. As our Level-2-arrow style is a copy of the Level-2 style we only need to change those of the parameters which are different.
Namely:
4. Turn Bg Images check box on
5. Select Normal right image box and browse hm_2nd_arrow.gif file by Browse button
6. Turn Over check box on
7. Select Over right image box and browse hm_2nd_over_arrow.gif file by Browse button
8. Turn Current check box on
9. Select Current right image box and browse hm_2nd_over_arrow.gif file by Browse button

Now the Item Style panel should look as follows:

Create Level-3 Style

1. Press Create New Style button.
2. Change default style name Level-2-arrow (2) to Level-3
3. Select Sunny icon (optionally) and press OK button. As our Level-3 style is a copy of the Level-2-arrow style we only need to change those of the parameters which are different.
Namely:
4. Set Text Align as Left by pressing AlignHLeftButton button
5. Set Margin left as 21 px
6. Set Margin Right as 10 px
7. Set Button Width as 145 px
8. Set Button Height as 26 px
9. Set Button Over Color as #B6B6B6
10. Set Button Current Color as #B6B6B6
11. Turn Bg Images check box off

Now the Item Style panel should look as follows:

Congratulations! All styles are created.

How to create CSSMenuTools Horizontal Menu Advancer structure see Step 5.