How to create a custom skin

In this tutorial we're going to take full advantage of the menus full customizability and create a custom skin for a menu. I'm going to use some previously created images which are available for you to download. In order to be able to do this tutorial, the first thing you have to do is install Creative DW Dropdown Menus extension on your computer; if you encounter any problems doing that, check out the "How to install an extension" tutorial. Another important thing you should consider is the creation of a website in Dreamweaver before you start the work; "How to create a website" can help you if any problems occur.


Click here to download the required files for solving this tutorial.


1. Firstly open Dreamweaver and create a new file. Save it and insert a Tabbed menu on the stage.

Insert tabbed menu

Insert tabbed menu

2. From the General tab, create the following structure for the menu. If you're having any trouble with that, visit our „Getting Started Tutorial” tutorial.

Define the menu structure

Define the menu structure

3. Open the Custom Skin Editor from the General tab. Please, before make all the settings that I did in the image:

Open the custom skin editor

Open the custom skin editor

4. Next we'll configure the Custom Skin Editor; apply the changes from the following images:

Configure the custom skin editor 1

Configure the custom skin editor 1

Configure the custom skin editor 2

Configure the custom skin editor 2

As you saw, creating a skin is simple. We just had to name it, put some images for the up and over states of the buttons (since we don't have any submenus), and for the background and separator. Our component's smart resize system makes everything look good and the job is done – simple, fast and good-looking!

5. Click F12 in order to preview the file. It should look like this:

Preview your file

Preview your file

Thank you for your time and I hope this tutorial was useful to you. I invite you to read the rest of our tutorials and check out our other products on www.extendstudio.com. If you have any questions please contact us at support@extendstudio.com.