Thz Box Style is full layout option type with visual reference for border, border radius and background.
option snippet simple
'option_name' => array( 'type' => 'thz-box-style', 'label' => __('Option label', '{domain}'), 'desc' => esc_html__('Option description.', '{domain}'), 'help' => esc_html__('Option help.', '{domain}'), 'value'=> array(), 'preview' => true, // display border,boxshadow and bacground preview, 'popup' => true, // display option in a popup 'button-text' => esc_html__('Customize box style', '{domain}'), // popup button text // displays only margin and padding 'disable' => array('layout','borders','boxshadow','borderradius','boxsize','background') /* Disable array disables specific option sections layout padding margin borders borderradius boxsize boxshadow background video // display background but disable background video option */ )
option snippet full
'option_name' => array( 'type' => 'thz-box-style', 'label' => __('Option label', '{domain}'), 'desc' => esc_html__('Option description.', '{domain}'), 'help' => esc_html__('Option help.', '{domain}'), 'value'=> array( 'layout' => array( 'display' => 'default', 'float' => 'default', 'clear' => 'default', 'overflow' => 'default', 'opacity' => '', 'visibility' => 'default', 'position' => 'default', 'top' => 'auto', 'right' => 'auto', 'bottom' => 'auto', 'left' => 'auto', 'z-index' => 'auto', ), 'padding' => array( 'top' => '', 'right' => '', 'bottom' => '', 'left' => '', ) , 'margin' => array( 'top' => '', 'right' => '', 'bottom' => '', 'left' => '', ) , 'borders' => array( 'all'=> 'same', 'top'=> array( 'w' => '', 's' => 'solid', 'c' => '' ), 'right'=> array( 'w' => '', 's' => 'solid', 'c' => '' ), 'bottom'=> array( 'w' => '', 's' => 'solid', 'c' => '' ), 'left'=> array( 'w' => '', 's' => 'solid', 'c' => '' ) ), 'borderradius' => array( 'top-left' => '', 'top-right' => '', 'bottom-right' => '', 'bottom-left' => '', ), 'boxsize' => array( 'width' => '', 'height' => '', 'min-width' => '', 'min-height' => '', 'max-width' => '', 'max-height' => '' ), 'boxshadow' => array(), 'background' => array( 'type' => 'none', ), 'css'=>'' ) )
option snippet frontend print helper function
// css print $box_style = thz_get_theme_option('option_name'); $box_style_print = thz_print_box_css($box_style); if(!empty($box_style_print)){ $css = '.some_element{'.$box_style_print.'}'; }