Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
Custom CSS fields appear in the Advanced tab of the module settings modal and allow users to set custom CSS properties for predefined target elements within the module’s HTML output.
The fields are automatically generated based on the configuration defined in the module’s get_custom_css_fields_config() method.
Custom CSS Fields Configuration
element_one (array)label (string)— Display name for the target element (localized)selector (string)— CSS selector for the target elementno_space_before_selector (bool)— Don’t put a space before the selector
element_two (array)label (string)— Display name for the target element (localized)selector (string)— CSS selector for the target elementno_space_before_selector (bool)— Don’t put a space before the selector
Custom CSS Fields Configuration Example
<?php
class SIMP_SimpleHeader extends ET_Builder_Module {
// ...Rest of implementation
public function get_custom_css_fields_config() {
return array(
'content' => array(
'label' => esc_html__( 'Content', 'simp-simple' ),
'selector' => '%%order_class%% p',
),
'heading' => array(
'label' => esc_html__( 'Heading', 'simp-simple' ),
'selector' => '%%order_class%% h1',
),
);
}
// Rest of implementation...
}