Customize the Color Picker Palette

In this topic you will learn how to replace the default colors displayed in the color picker within KTML with your own range of colors. The color picker is displayed from multiple locations, but all use the same color palette - you can access it to change the font color, highlight, or a table's cell background color.

The steps you have to take are:

  1. Open the page which has the KTML editor applied onto it in Dreamweaver or a text editor.

  2. Within the page code, locate the line that looks like the one below. This is a declaration that can contain module properties:

    "module_props": { },

     

  3. Inside the brackets, add the new color picker properties. The format for the module properties is:

    module_name { property_name : property_value }

     

  4. In this case, the property value will be an array of the colors you want to display. You can use either the color's hexadecimal code, or, for some of them the literal description. These will be enclosed in single quotes, and you can have a maximum of 216 entries. For example, to display four colors in the palette, the code you have to have on the page is:

    "module_props": {
    "color_picker" : {
              "colors" : [ '#FF0000', '#00FF00', '#0000FF' , 'gold','green']
    }
    },

 

With this change, you have defined your own custom color picker. All that remains is to save the page and load it in a browser. When you will access the color picker, this is what it will look like: