# Custom Colorpicker **URL:** \ **Category:** Developers\ **Created:** [February 24, 2016, 4:51am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261 "2016-02-24T04:51:35Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![pc1](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pc1/32/793_2.png) [@pc1](https://community.wpbeaverbuilder.com/u/pc1)\ **Post date:** [February 24, 2016, 4:51am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/1 "2016-02-24T04:51:35Z")
Hi, I am trying to integrate a custom field in my custom module plugin. I am using [this colorpicker.](https://github.com/Codestar/codestar-wp-color-picker) My code looks like this - ```auto add_action('fl_builder_control_uabb-color', 'fl_uabb_color', 1, 4); add_action( 'wp_enqueue_scripts', 'fl_uabb_color_assets', 100 ); /** * Custom fields */ function fl_uabb_color($name, $value, $field, $settings) { echo ''; } /** * Custom field styles and scripts */ function fl_uabb_color_assets() { if ( class_exists( 'FLBuilderModel' ) && FLBuilderModel::is_builder_active() ) { wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_style( 'cs-wp-color-picker', BB_ULTIMATE_ADDON_URL . 'fields/color-picker/css/cs-wp-color-picker.min.css', array( 'wp-color-picker' ), '1.0.0', 'all' ); wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 ); wp_enqueue_script( 'wp-color-picker-new', admin_url( 'js/color-picker.min.js' ), array( 'iris' ), false, 1 ); wp_enqueue_script( 'cs-wp-color-picker', BB_ULTIMATE_ADDON_URL . 'fields/color-picker/js/cs-wp-color-picker.min.js', array( 'wp-color-picker-new' ), '1.0.0', true ); $colorpicker_l10n = array( 'clear' => __( 'Clear' ), 'defaultString' => __( 'Default' ), 'pick' => __( 'Select Color' ), 'current' => __( 'Current Color' ), ); wp_localize_script( 'wp-color-picker-new', 'wpColorPickerL10n', $colorpicker_l10n ); } } ``` But this has modified the existing color picker in such a away - [http://goo.gl/s33T8A](http://goo.gl/s33T8A) The color gradient vanishes. Please help me to debug the exact conflict. Also tell the ways to integrate this color picker into my plugin. ---
**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\ **Post date:** [February 24, 2016, 8:33am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/2 "2016-02-24T08:33:30Z")
Hey Nik, I’ve moved your thread to the Custom Module section. Also, I’ve already assigned another member of our team to assist you with your concern. 🙂 Ben ---
**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\ **Post date:** [February 24, 2016, 9:25am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/3 "2016-02-24T09:25:11Z")
Hey Nik, Our picker is built on Iris as well, so it looks like there is a conflict there somewhere. I’ll have to do some digging, so I’ve filed an issue to get this fixed. Thanks! Justin ---
**Author:** ![pc1](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pc1/32/793_2.png) [@pc1](https://community.wpbeaverbuilder.com/u/pc1)\ **Post date:** [March 29, 2016, 5:29am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/4 "2016-03-29T05:29:09Z")
Hi Justin, Is there any update on the conflict which I mentioned above? All I needed was a RGBA option using this color picker. Can you please guide me with it? ---
**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\ **Post date:** [March 29, 2016, 10:17am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/5 "2016-03-29T10:17:17Z")
Hey PC, That conflict will be resolved in the 1.7.6 update going out today. Give that a shot and let me know how it goes. Justin ---
**Author:** ![pc1](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pc1/32/793_2.png) [@pc1](https://community.wpbeaverbuilder.com/u/pc1)\ **Post date:** [March 31, 2016, 4:43am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/6 "2016-03-31T04:43:17Z")
Hi Justin, It seems the conflict is resolved. I have also integrated custom color picker. Seems it works fine. But I need your help with preview section. How do I make it live preview like other fields? How does preview work for custom fields? Also if I do not pass the preview array to the field, it should work with AJAX call, like in other fields. But doesn’t work so. Guide me with it too! ---
**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\ **Post date:** [March 31, 2016, 9:18am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/7 "2016-03-31T09:18:58Z")
Hi pc, I don’t think that’s currently possible, but if you send me a copy of your module to test, I can find a solution for you. Thanks, Justin ---
**Author:** ![pc1](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pc1/32/793_2.png) [@pc1](https://community.wpbeaverbuilder.com/u/pc1)\ **Post date:** [March 31, 2016, 10:59pm UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/8 "2016-03-31T22:59:03Z")
[Content Hidden] ---
**Author:** ![pc1](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pc1/32/793_2.png) [@pc1](https://community.wpbeaverbuilder.com/u/pc1)\ **Post date:** [April 4, 2016, 4:01am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/9 "2016-04-04T04:01:31Z")
Hi Justin, Hope your weekend was good! Any update with the custom color picker? ---
**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\ **Post date:** [April 4, 2016, 9:18am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/10 "2016-04-04T09:18:56Z")
Hi pc, I did, thanks! I’m a bit behind on support but will be having a look at this today. Justin ---
**Author:** ![justin](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/justin/32/16_2.png) [@justin](https://community.wpbeaverbuilder.com/u/justin)\ **Post date:** [April 4, 2016, 10:07am UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/11 "2016-04-04T10:07:19Z")
Hi pc, There might be a better preview API we can implement in the future, but for now, this should work for you… ```auto $( 'body' ).delegate( '.cs-wp-color-picker', 'change', function( e ){ var input = $( this ), preview = input.closest( '.fl-field' ).data( 'preview' ), i = null; if ( 'css' == preview.type ) { if ( 'undefined' != typeof preview.rules ) { for ( i in preview.rules ) { FLBuilder.preview._previewCSS( preview.rules[i], e ); } } else { FLBuilder.preview._previewCSS( preview, e ); } } } ); ``` Let me know if you have any questions about that. Justin ---
**Author:** ![pc1](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/pc1/32/793_2.png) [@pc1](https://community.wpbeaverbuilder.com/u/pc1)\ **Post date:** [April 4, 2016, 11:44pm UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/12 "2016-04-04T23:44:19Z")
Hi Justin, Thanks you very much for your help! Finally, we are able to resolve color picker issue & its working perfect now. RGBA Color Picker - [http://bsf.io/p8vws](http://bsf.io/p8vws) Regards, Pratik ---
**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\ **Post date:** [April 27, 2019, 10:22pm UTC](https://community.wpbeaverbuilder.com/t/custom-colorpicker/7261/13 "2019-04-27T22:22:29Z")