Comments (5)
Thanks for pointing out that small error with the braces. I've fixed that up now.
If I get some time, I'll look into that wp-color-picker-alpha.
from customizer-custom-controls.
I've created a new control that uses the modified WP ColorPicker script. You can find the details of its usage in the readme file.
I've also update my original blog post with those usage details as well.
Just as a sidenote, you're not able to specify the default colour palette with this control (i.e. the small colour swatches at the bottom of the control). I tried getting that functionality to work but had some issues with getting the control to render properly. I'm pretty sure the default Color Control in Core doesn't support specifying those Palette options either so I'll need to look into it further to see if it's actually possible. It might be a limitation with WPColorPicker. I'm not sure yet so I'll need to do some more investigation. In the meantime though, the actual control with Alpha channel selection works as expected.
from customizer-custom-controls.
I've worked out how to specify the palette colours now, so I've updated the control to allow you to specify the 8 palette colours that appear at the bottom of the control.
The WPColorPicker script has issues when mixing HEX colours and RGBa colours in the palette. I recommend not mixing colours and either use all HEX values, or all RGBa values.
When specifying all Hex values in the Palette, it’s best to set 'resetalpha' => true
(or just don’t specify this option as the default value is true). When using all RGBa values in the Palette, it’s best to set 'resetalpha' => false
.
from customizer-custom-controls.
Hi,
I am trying to pass a palette to the control but it doesn't work. I followed the instructions on your blog.
This is my control:
$wp_customize->add_control( new Skyrocket_Alpha_Color_Control( $wp_customize, 'primary_nav_text_color', array(
'label' => __( 'Text color', 'rwp' ),
'section' => 'primary_navigation_section',
'settings' => 'primary_nav_text_color',
'input_attrs' => array(
'palette' => array(
'#aaaaaa',
'#ffffff',
'#dd3333',
'#dd9933',
'#eeee22',
'#81d742',
'#1e73be',
'#8224e3',
)
),
)
)
);
But the palette is not applied:
I have also tried to modify the colors of the default palette here and it does not make any difference either. Do you have any suggestions? :
class Skyrocket_Alpha_Color_Control extends WP_Customize_Control {
/**
* The type of control being rendered
*/
public $type = 'wpcolorpicker-alpha-color';
/**
* ColorPicker Attributes
*/
public $attributes = "";
/**
* Color palette defaults
*/
public $defaultPalette = array(
'#cf00ea',
'#e82586',
'#dd3333',
'#dd9933',
'#eeee22',
'#81d742',
'#1e73be',
'#8224e3',
);
from customizer-custom-controls.
@ASL07 This appears to be working fine for me.
I just copied your colours into my sample theme, and the palette changed as expected.
Here's a short vid of that: https://share.getcloudapp.com/geuWOeXr
Also, here's a screenshot of where I've changed the palette to a selection of greys, without any issue:
This is a sample theme with all my Custom Controls and all the default Customizer Controls, which you're welcome to download and try.
https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Theme
And here's the code from that last screenshot:
$wp_customize->add_control( new Skyrocket_Alpha_Color_Control( $wp_customize, 'sample_wpcolorpicker_alpha_color',
array(
'label' => __( 'WP ColorPicker Alpha Color Picker', 'skyrocket' ),
'description' => esc_html__( 'Sample color control with Alpha channel', 'skyrocket' ),
'section' => 'sample_custom_controls_section',
'input_attrs' => array(
'palette' => array(
'#aaaaaa',
'#bbbbbb',
'#cccccc',
'#eeeeee',
'#ffffff',
'#333333',
'#222222',
'#000000',
)
),
)
) );
from customizer-custom-controls.
Related Issues (20)
- Add package to Composer HOT 3
- TinyMCE Custom Control HOT 3
- sortable pill checkbox doesnot update visually on customizer HOT 2
- Multi Select in sortable repeater HOT 3
- Dropdown Select2 Control (single select) placeholder not displayng HOT 1
- Can you make more controls? HOT 3
- Sortable Pill Checkbox Custom Control does not remain in place after saving. HOT 8
- Error Uncaught TypeError: $(...).sortable is not a function HOT 3
- Skyrocket_Alpha_Color_Control hangs whenever you slect several colors from the palette too fast HOT 2
- React based custom control HOT 1
- Enqueuing Google Fonts HOT 3
- Slider control doesn't work if "step" is less than 1 HOT 3
- How do I load it into my plug-in HOT 3
- [NEW FUNCTION] Responsive controls HOT 3
- Multi Select Dropdown don't removing last value when clearing the list HOT 5
- Image Checkbox control not loading saved values HOT 5
- Google font custom control is displaying an error. HOT 1
- Getting an error in Goole font custom control. HOT 2
- Slider step size cannot be smaller than 1 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from customizer-custom-controls.