WordPress 3.5 came with a new color picker and it’s pretty cool, but the developers didn’t expose all the tweakable elements. Flint uses the palette feature – that’s how you get to choose your own swatch colors :) But the size of the color picker and the way the controls work were not set up in a way where a designer could tweak them in a theme file.
You can go into the JavaScript file however and just change the settings yourself. It’s very unlikely that WordPress will update that file anytime soon, and even if they do, it only wipes out your tiny change which you can fix again at any time. Here’s what you do.
You have two things you can tweak -> the size of the color picker and whether to show the color selection in the main box or the slider on the right. The image included above shows my picker at 500 pixels wide and using the “hsl” layout. The default is “hsv” which, as you can see in your own installation, has the color selection in the main window.
Do NOT do this if you do not have a code editor with which to edit the files. Using anything but a text editor designed for code will break these files.
- Use an FTP program and FTP into your server
- Navigate to this directory wherever WP is installed: /wp-admin/js/
- Find these two files: color-picker.js and color-picker.min.js
- Download the file to your desktop
- Open the first file with a text editor
- Search for: 255
- Change 255 to 400 or even 500. That is the pixel width of the color picker
- Look for “hsv” very near to your current location
- Change “hsv” to “hsl”
- Save and close the file
- Open the second file and repeat the steps above
- Upload the files back into /wp-admin/js/
Visit one of your Flint pages and you should now have the BIG color picker with the color selector on the right. If you prefer the default color selector in the main window and the light/dark slider on the right, change the “hsl” back to “hsv”.