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 element
  • no_space_before_selector (bool) — Don’t put a space before selector
• element_two (array)
  • label (string) — Display name for the target element (localized)
  • selector (string) — CSS selector for the target element
  • no_space_before_selector (bool) — Don’t put a space before selector

Custom CSS Fields Configuration Example