DMXzone Colorpicker Manual

The Basics: Basic Usage of DMXzone Colorpicker

In this tutorial we will show you how use the DMXzone Colorpicker extension.

*You can also check out the video.

How to do it

1. We've already created our page and now we're going to insert the DMXzone Colorpicker. Click the DMXzone Colorpicker icon and the dialog will appear.

2. You can add an ID for your colorpicker (1) and a title that will be shown in the header of the dialog if enabled (2).
    

3. Select a color format to be used with Dreamweaver Control Behaviors when using the ##color## mask.
   
   

4. We also set an initial color for your colorpicker to be displayed when opened.
   
   

5. For our colorpicker, we choose the Flick design, which is one of the 24 supplied in the extension.

6. For this tutorial, we set the default language to be English (1) and no limitation of the color selection (2).
   
   

7. We will show our colorpicker on focus and button (1) and close it when clicked outside (2).

8. You can enable closing of the colorpicker window using the Escape key on the keyboard (1) and also to change the colorpicker button background when a color is selcted or not (2).

9. We leave the default settings for the colorpicker animation.

10. In the Advanced tab, the elements that we select to be shown are the buttons panel, map, preview and bar.

11. For our colorpicker, we make all buttons available for use (2) and also choose the Hex, RGB and HSV inputs (2).

12. In the Swatches tab we will add some custom swatches from the Add new color button (1), set a name (2) and a custom color (3). You can add as many colors as you want and also delete any of them at any time. When you're done click OK.

13. Now you can save your work and preview the result in the browser.