Introduction

One of the most important features of the MX CSS Dynamic Menus, might be for some the database connectivity, and for some the fact that it can generate menus from a textarea. What is common for all, is the  possibility to use skins on the menus. With some images and a little alteration of the Cascading Style Sheet file, you can modify the way your menus look like.

All files created in this tutorial are included in the downloaded package, as a zip file, so you can compare the final results that you get.

In this tutorial you will learn step by step how to create your own skin, complete with your images and colors. This way, when adding a menu to your site it will be in sync with the theme, in little time and with no problems.

In order to follow this tutorial, you have to meet the following software and knowledge prerequisites:

• Have the MX CSS Dynamic Menus extension installed
• Have a set of images to use for your menu (all images used in this tutorial can be found in the attached package)
• Have installed a photo editing software that allows cutting pictures to the desired size. One such program is Macromedia Fireworks
• Some basic knowledge of CSS is required. You can read the very basics on the CSS Primer section of this help file
• You must know what size (both width and height) you want for your menu items, so that images can be adjusted easy

In this tutorial you will learn how to customize the horizontal menu, as the vertical and tab ones are done the same way, and the end result will look similar to the image below:

Proceed to the next section to start building your own skin.