Top Previous Next

Create Item Styles.

We need seven styles.

Style Name

Description

Top

Some special top edge. E.g. rounded corners.

Bottom

Some special bottom edge. E.g. rounded corners.

Level-1

Styling first-level items without submenu.

Level-1-arrow

Styling first-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.


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

Image

Image Size

File Name

Description

top

169 x 3

top.gif

For Top style

bottom

169 x 3

bottom.gif

For Bottom style

level_1

169 x 30

level-1.gif

For Level-1 style normal state

level-1-over

169 x 30

level-1-over.gif

For Level-1 style mouse over state

level-1-arrow

169 x 30

level-1-arrow.gif

For Level-1-arrow style normal state

level-1-arrowover

169 x 30

level-1-arrowover.gif

For Level-1-arrow style mouse over state

level-2

169 x 27

level-2.gif

For Level-2 and Level-3 styles normal state

level-2-over

169 x 27

level-2-over.gif

For Level-2 and Level-3 styles mouse over state

level-2-arrow

169 x 27

level-2-arrow.gif

For Level-2-arrow style normal state

level-2-arrowover

169 x 27

level-2-arrowover.gif

For Level-2-arrow style mouse over state

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


Switch to the All Styles Tab.

Create Top Style.

1. Press Create New Style button AddButton
2. Change default style name "AcrdMenu2" to "Top" and press OK button.
3. Set Font Size as 0.
4. Select Cursor as default.
5. Set Normal Bg color as Transparent.
6. Set Over Bg color as Transparent.
7. Set Current Bg color as Transparent.
8. Turn Bg Images check box on.
9. Select Normal Bg image box and browse top.gif file by using Browse button. After file is selected you'll get a message:
ItemHeightQuestionDialog
Press Yes button.
10. Select Over Bg image box and browse top.gif file by using Browse button.
11. Select Current Bg image box and browse top.gif file by using Browse button.

Create Bottom 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 Top style.
2. Change default style name "AcrdMenu2" to "Bottom" and press OK button. As our Bottom style is a copy of the Top style we only need to change those of the parameters which are different.
Namely:
3. Select Normal Bg image box and browse bottom.gif file by Browse button.
4. Select Over Bg image box and browse bottom.gif file by Browse button.
5. Select Current Bg image box and browse bottom.gif file by Browse button.

Create Level-1 Style.

1. Press Create New Style button.
2. Change default style name "AcrdMenu2" to "Level-1" and press OK button. Now Level-1 style has the parameters of the Bottom style, thus we need to make necessary changes
3. Set font Size as 12.
4. Set Indent as 20.
5. Select Cursor as pointer.
6. Set Text Normal color as #FFFFFF
7. Set Text weight as Bold by pressing BoldButton button.
8. Set Text Over color as #24ACCE.
9. Set Text Current color as #BBBBBB.
10. Select Normal Bg image box and browse level-1.gif file by Browse button. After file is selected you'll get a message. Press Yes button.
11. Select Over Bg image box and browse level-1-over.gif file by Browse button.
12. Select Current Bg image box and browse level-1.gif file by Browse button.

Create Level-1-arrow Style.

1. Press Create New Style button.
2. Change default style name "AcrdMenu2" to "Level-1-arrow" and press OK button.
3. Select Normal Bg image box and browse level-1-arrow.gif file by Browse button.
4. Select Over Bg image box and browse level-1-arrowover.gif file by Browse button.
5. Select Current Bg image box and browse level-1-arrow.gif file by Browse button.

Create Level-2 Style.

1. Press Create New Style button.
2. Change default style name "AcrdMenu2" to "Level-2" and press OK button.
3. Set Font Size as 11.
4. Set Indent as 30.
5. Set Text Normal color as #68838B.
6. Set Text weight as Normal by pressing BoldPressedButton button.
7. Set Text Over color as #FFFFFF.
8. Select Normal Bg image box and browse level-2.gif file by Browse button. After file is selected you'll get a message. Press Yes button.
9. Select Over Bg image box and browse level-2-over.gif file by Browse button.
10. Select Current Bg image box and browse level-2.gif file by Browse button.

Create Level-2-arrow Style.

1. Press Create New Style button.
2. Change default style name "AcrdMenu2" to "Level-2-arrow" and press OK button.
3. Select Normal Bg image box and browse level-2-arrow.gif file by Browse button.
4. Select Over Bg image box and browse level-2-arrowover.gif file by Browse button.
5. Select Current Bg image box and browse level-2-arrow.gif file by Browse button.

Create Level-3 Style.

1. Select Level-2 Style in the style combo box.
2. Press Create New Style button.
3. Change default style name "AcrdMenu2" to "Level-3" and press OK button.
4. Set Indent as 40.
5. Set Text Normal color as #24ACCE.

Congratulations! ?All styles are created.


How to create CSSMenuTools Accordion Menu Advancer structure see Step 4.