Css Field Join KC discussion

Since ver 2.5 The CSS field allows adding any CSS properties for element or children tags inside that element. You can also create the styling for different screen sizes (responsive). It works completely automatically, you only need to register it on the map and not further processed anywhere. To make sure that it works, you have to use filters to add master class in your element ==> Use CSS system for my Element KingComposer Editor

Map Usage:

array(
	'name' => 'my-css',
	'label' => 'Field Label',
	'type' => 'css',
	'value' => '{`kc-css`:{`box`:{`margin|`:`10px`}}}', // remove this if you do not need a default content
	//'options' => array(), register css properties, selectors and screens
	'description' => 'Field Description',
)

Example:

Register a new shortcode with filed type: css
add_map(

        array(

            // 1st shortcode element
            'my_shortcode' => array(
                'name' => 'My Shortcode',
                'description' => 'This is my shortcode',
                'icon' => 'my-class-icon',
                'category' => 'Content',
                'params' => array(
                    //1st field
                    array(
                        'name' => 'my-css',
                        'label' => 'Field Label',
                        'type' => 'css',
                        //'options' => array() // Read bellow
                        'description' => 'Field Description',
                    ),
                    //2nd field
                )
            ),

            // 2nd shortcode element

        ) // End Arrays
    );

} // end my_wp_init()

?>

Options Instruction:

'options' => array(
	array(
		'screens' => "any", // use one or many screens, the "any" is desktop screen 
		'Group 1' => array(
			array('property' => 'width', 'label' => 'Width'),
			array('property' => 'font-weight', 'label' => 'Font Weight'),
		),
		'Group 2' => array(
			array('property' => 'margin', 'label' => 'Margin'),
			array('property' => 'border', 'label' => 'Border'),
		),
	),
	array(
		'screens' => "768,479-667", 
		// there are 2 screens. 
		// screen 1st is max-width 768px
		// screen 2nd is min-width: 479px and max-width: 667px
		
		'Group 1' => array(
			array('property' => 'padding', 'label' => 'Padding'),
			array('property' => 'border', 'label' => 'Border'),
		),
		'Group 2' => array(
			array('property' => 'color', 'label' => 'Button Color'),
		),
	),
)

Option "selector" to apply for children tags inside element:


// Use param "selector" to apply for children HTML's tag inside element.
// Example: we have element with HTML code bellow:
// 
// The Button //
// We can apply the styling for the tag inside the element. 'options' => array( array( 'screens' => "any", 'Button' => array( array('property' => 'color', 'label' => 'Button Color', 'selector' => 'a.btn'), array('property' => 'border', 'label' => 'Border', 'selector' => 'a.btn'), ), 'Button Hover' => array( array('property' => 'color', 'label' => 'Button Color Hover', 'selector' => 'a.btn:hover'), // Trigger hover on the button inside the element array('property' => 'color', 'label' => 'Parent Hober Button Color', 'selector' => ':hover a.btn'), // Trigger on the button but hover on the element ), ), )

Default options and list of available CSS properties:

'options' => array(
	array(
		'screens' => "any",
		'Typography' => array(
			array('property' => 'color', 'label' => 'Color'),
			array('property' => 'font-size', 'label' => 'Font Size'),
			array('property' => 'font-weight', 'label' => 'Font Weight'),
			array('property' => 'font-style', 'label' => 'Font Style'),
			array('property' => 'font-family', 'label' => 'Font Family'),
			array('property' => 'text-align', 'label' => 'Text Align'),
			array('property' => 'text-shadow', 'label' => 'Text Shadow'),
			array('property' => 'text-transform', 'label' => 'Text Transform'),
			array('property' => 'text-decoration', 'label' => 'Text Decoration'),
			array('property' => 'line-height', 'label' => 'Line Height'),
			array('property' => 'letter-spacing', 'label' => 'Letter Spacing'),
			array('property' => 'overflow', 'label' => 'Overflow'),
			array('property' => 'word-break', 'label' => 'Word Break'),					
		),

		//Background group
		'Background' => array(
			array('property' => 'background'),
		),

		//Box group
		'Box' => array(
			array('property' => 'margin', 'label' => 'Margin'),
			array('property' => 'padding', 'label' => 'Padding'),
			array('property' => 'border', 'label' => 'Border'),
			array('property' => 'width', 'label' => 'Width'),
			array('property' => 'height', 'label' => 'Height'),
			array('property' => 'border-radius', 'label' => 'Border Radius'),
			array('property' => 'float', 'label' => 'Float'),
			array('property' => 'display', 'label' => 'Display'),
			array('property' => 'box-shadow', 'label' => 'Box Shadow'),
			array('property' => 'opacity', 'label' => 'Opacity'),
		),
	),
	array(
		"screens" => "999,768,667,479",
		'Typography' => array(
			array('property' => 'font-size', 'label' => 'Font Size'),
			array('property' => 'text-align', 'label' => 'Text Align'),
			array('property' => 'line-height', 'label' => 'Line Height'),
			array('property' => 'word-break', 'label' => 'Word Break'),	
		),

		//Background group
		'Background' => array(
			array('property' => 'background'),
		),

		//Box group
		'Box' => array(
			array('property' => 'width', 'label' => 'Width'),
			array('property' => 'margin', 'label' => 'Margin'),
			array('property' => 'padding', 'label' => 'Padding'),
			array('property' => 'border', 'label' => 'Border'),
			array('property' => 'height', 'label' => 'Height'),
			array('property' => 'border-radius', 'label' => 'Border Radius'),
			array('property' => 'float', 'label' => 'Float'),
			array('property' => 'display', 'label' => 'Display'),
		),
	)
)

Read more