Support

Account

Home Forums Feature Requests Customise Color Picker Swatches Reply To: Customise Color Picker Swatches

  • Kudos to you guys for trying to solve this. I tried above solution but can’t get it to work 100%.

    I managed to solve to things:

    1. When changing palettes the mode in iris changes aswell. i solved this by adding: mode: ‘hsv’,(See documentation: http://automattic.github.io/Iris/). This is standard in wpColorPicker that acf uses.
    2. Sometimes the values in the hex value box didn’t change when i did changes on the color picker, i think that is solved now.

    See my revised jquery code below:

     <script>
            jQuery(document).ready(function($){
              if ($('.acf-color_picker').length) {
                $('.acf-color_picker').each(function() {
                  $( this ).iris({
                    mode: 'hsv',
                    palettes: ['#e40571', '#4b63a4', '#ffcb05', '#fff', '#000'],
                    change: function(event, ui){
                      $(this).find('.wp-color-result').css('background-color', ui.color.toString());
                      $(this).find('.wp-color-picker').val(ui.color.toString());
                    }
                  });
                });
              }
            });
            </script>

    HOWEVER
    I use Flexible Content for some of my color picker fields and those are not initialized on page load. Therefore above hack doesn’t affect them.

    I think the best solution is to do these changes when ACF initializes.

    The only way i could accomplish this was to change the file: /wp-content/plugins/advanced-custom-fields-pro/js/input.min.js

    Which isn’t good since it will get removed on updates.

    I would really appreciate if Elliott or someone could help to solve this via a function or a plugin.

    Best regards
    Anton