Creating a visual color picker in admin

Sometimes you may want to add color picker in the admin configuration page of your Magento module or extension. In our case, this is a must-have option for a theme configuration module. To do this, you don't have to download or add new JavaScripts into the module, because Magento includes the jscolor picker by default. Perform the following steps:

1. Create the bookstore_themeoptions.xml file in app/design/adminhtml/default/default/layout with the following code:

   <?xml version="1.0"?>
   <layout version="0.1.1">
     <adminhtml_system_config_edit>
       <reference name="head">
         <action method="addJs">
           <file>jscolor/jscolor.js</file>
         </action>
        </reference>
     </adminhtml_system_config_edit>
   </layout>

2. Open config.xml and inside the <adminhtml> tag, insert the following layout update to the jscolor script in the admin theme panel section:

   <layout>
     <updates>
   ...