|
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
|
|
|
169 x 3
|
top.gif
|
For Top style
|
|
|
169 x 3
|
bottom.gif
|
For Bottom style
|
|
|
169 x 30
|
level-1.gif
|
For Level-1 style normal state
|
|
|
169 x 30
|
level-1-over.gif
|
For Level-1 style mouse over state
|
|
|
169 x 30
|
level-1-arrow.gif
|
For Level-1-arrow style normal state
|
|
|
169 x 30
|
level-1-arrowover.gif
|
For Level-1-arrow style mouse over state
|
|
|
169 x 27
|
level-2.gif
|
For Level-2 and Level-3 styles normal state
|
|
|
169 x 27
|
level-2-over.gif
|
For Level-2 and Level-3 styles mouse over state
|
|
|
169 x 27
|
level-2-arrow.gif
|
For Level-2-arrow style normal state
|
|
|
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 |
| 2. |
Change default style name "AcrdMenu2" to "Top" and press OK button. |
| 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:
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 |
| 5. |
Select Cursor as pointer. |
| 6. |
Set Text Normal color as #FFFFFF |
| 7. |
Set Text weight as Bold by pressing 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. |
| 5. |
Set Text Normal color as #68838B. |
| 6. |
Set Text weight as Normal by pressing 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. |
| 5. |
Set Text Normal color as #24ACCE. |
Congratulations! All styles are created.
How to create CSSMenuTools Accordion Menu Advancer structure see Step 4.
|
