Author: Ravi Shakya
Author URI: https://bizbergthemes.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 0.3
By using this control, you can select different colors for different devices ( Laptop / Tablet / Mobile ).
add_action( 'init' , function(){
Kirki::add_field( 'bizberg', array(
'type' => 'color-normal-hover',
'label' => 'Body Background',
'section' => 'detail_page',
'settings' => 'body_background',
'default' => json_encode(
array(
'colors' => array(
'normal_desktop' => '#8224e3',
'normal_tablet' => '#1e73be',
'normal_mobile' => '#81d742',
'hover_desktop' => '#eeee22',
'hover_tablet' => '#dd9933',
'hover_mobile' => '#dd3333'
),
'devices' => array(
'desktop',
'tablet',
'mobile'
)
)
)
) );
});$body_background = get_theme_mod( 'body_background' );
$body_background = json_decode( $body_background, true );
echo esc_attr( $body_background['colors']['normal_desktop'] );Parameters
Note: Defalult value is required for this to work.
colors - (array) (required) If you don't want any colors by default just pass an empty string. eg. 'normal_desktop' => '' 'normal_tablet' => ''
'colors' => array(
'normal_desktop' => '#8224e3',
'normal_tablet' => '#1e73be',
'normal_mobile' => '#81d742',
'hover_desktop' => '#eeee22',
'hover_tablet' => '#dd9933',
'hover_mobile' => '#dd3333'
),devices - (array) (required) You can choose all three devices or just one.
'devices' => array(
'desktop',
'tablet',
'mobile'
)You will need to install the kirki plugin first https://wordpress.org/plugins/kirki/
If you want to use 'transport' => 'postMessage', you can use this js and php code to change the css on the previewer without refreshing the page.
jQuery(document).ready(function(){
var controls = {
'body_background':{ // Your control name
'normal' : {
'element' : 'body a', // element to target
'property' : 'color' // CSS property
},
'hover' : {
'element' : 'body a:hover',
'property' : 'color'
},
},
'body_background4':{ // Your control name
'normal' : {
'element' : 'body', // element to target
'property' : 'background' // CSS property
},
'hover' : {
'element' : 'body:hover',
'property' : 'background'
},
},
};
jQuery.each(controls , function(index, control) {
wp.customize(
index, function( value ) {
value.bind(
function( to ) {
var toArray = JSON.parse( decodeURI( to ) );
var style = '<div class="kirki_color_normal_hover_' + index + '">' + "\n";
style += '<style>' + "\n";
// For desktop
if( toArray.colors.normal_desktop != undefined ){
style += control.normal.element + '{' + control.normal.property + ':' + toArray.colors.normal_desktop + ' !important}' + "\n";
}
if( toArray.colors.hover_desktop != undefined ){
style += control.hover.element + '{' + control.hover.property + ':' + toArray.colors.hover_desktop + ' !important}' + "\n\n";
}
// For tablet
style += '@media (min-width: 481px) and (max-width: 1024px){' + "\n";
if( toArray.colors.normal_tablet != undefined ){
style += control.normal.element + '{' + control.normal.property + ':' + toArray.colors.normal_tablet + ' !important}' + "\n";
}
if( toArray.colors.hover_tablet != undefined ){
style += control.hover.element + '{' + control.hover.property + ':' + toArray.colors.hover_tablet + ' !important}' + "\n";
}
style += '}' + "\n\n";
// For mobile
style += '@media (min-width: 320px) and (max-width: 480px){' + "\n";
if( toArray.colors.normal_mobile != undefined ){
style += control.normal.element + '{' + control.normal.property + ':' + toArray.colors.normal_mobile + ' !important}' + "\n";
}
if( toArray.colors.hover_mobile != undefined ){
style += control.hover.element + '{' + control.hover.property + ':' + toArray.colors.hover_mobile + ' !important}' + "\n";
}
style += '}' + "\n";
style += '</style>' + "\n";
style += '</div>';
jQuery('.kirki_color_normal_hover_'+index).remove();
jQuery('body').append( style );
}
);
}
);
});
});add_action( 'wp_head', 'my_custom_styles' );
function my_custom_styles(){
$controls = [
'body_background' => [ // Your control name
'normal' => [
'element' => 'body a', // element to target
'property' => 'color' // CSS property
],
'hover' => [
'element' => 'body a:hover',
'property' => 'color'
],
],
'body_background4' => [ // Your control name
'normal' => [
'element' => 'body', // element to target
'property' => 'background' // CSS property
],
'hover' => [
'element' => 'body:hover',
'property' => 'background'
],
],
];
$css = '';
echo "\n<style>";
foreach ($controls as $key => $value) {
$db_colors = get_theme_mod( $key );
$db_colors = json_decode( $db_colors , true );
if( !empty( $db_colors['colors']['normal_desktop'] ) ){
$css .= $value['normal']['element'] . '{' . $value['normal']['property'] . ':' . $db_colors['colors']['normal_desktop'] . '}';
}
if( !empty( $db_colors['colors']['hover_desktop'] ) ){
$css .= $value['hover']['element'] . '{' . $value['hover']['property'] . ':' . $db_colors['colors']['hover_desktop'] . '}';
}
if( !empty( $db_colors['colors']['normal_tablet'] ) ){
$css .= '@media (min-width: 481px) and (max-width: 1024px){';
$css .= $value['normal']['element'] . '{' . $value['normal']['property'] . ':' . $db_colors['colors']['normal_tablet'] . '}';
$css .= '}';
}
if( !empty( $db_colors['colors']['hover_tablet'] ) ){
$css .= '@media (min-width: 481px) and (max-width: 1024px){';
$css .= $value['hover']['element'] . '{' . $value['hover']['property'] . ':' . $db_colors['colors']['hover_tablet'] . '}';
$css .= '}';
}
if( !empty( $db_colors['colors']['normal_mobile'] ) ){
$css .= '@media (min-width: 320px) and (max-width: 480px){';
$css .= $value['normal']['element'] . '{' . $value['normal']['property'] . ':' . $db_colors['colors']['normal_mobile'] . '}';
$css .= '}';
}
if( !empty( $db_colors['colors']['hover_mobile'] ) ){
$css .= '@media (min-width: 320px) and (max-width: 480px){';
$css .= $value['hover']['element'] . '{' . $value['hover']['property'] . ':' . $db_colors['colors']['hover_mobile'] . '}';
$css .= '}';
}
}
echo esc_attr( $css );
echo "</style>\n";
}= 0.3 =
- Added alpha control
= 0.2 =
- Fixed CSS
- Added description field
- When clicked on customizer devices icon, change the content on modal as well ( if the modal is opened )
= 0.1 =
- Initial Release