{"id":2521,"date":"2018-04-18T19:37:52","date_gmt":"2018-04-19T02:37:52","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=2521"},"modified":"2018-04-18T19:37:52","modified_gmt":"2018-04-19T02:37:52","slug":"defining-custom-css-fields-for-modules","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/developers\/divi-module\/defining-custom-css-fields-for-modules\/","title":{"rendered":"Defining Custom CSS Fields For Modules"},"content":{"rendered":"

Note:<\/strong> This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.<\/p><\/blockquote>\n

Custom CSS fields appear in the Advanced<\/em> tab of the module settings modal and allow users to set custom CSS properties for predefined target elements within the module\u2019s HTML output. The fields are automatically generated based on the configuration defined in the module\u2019s get_custom_css_fields_config()<\/code> method.<\/p>\n

Custom CSS Fields Configuration<\/h2>\n
    \n
  • element_one<\/strong> (array)<\/em>\n
      \n
    • label<\/strong> (string)<\/em> \u2014 Display name for the target element (localized)<\/li>\n
    • selector<\/strong> (string)<\/em> \u2014 CSS selector for the target element<\/li>\n
    • no_space_before_selector<\/strong> (bool)<\/em> \u2014 Don\u2019t put a space before selector<\/li>\n<\/ul>\n<\/li>\n
    • element_two<\/strong> (array)<\/em>\n
        \n
      • label<\/strong> (string)<\/em> \u2014 Display name for the target element (localized)<\/li>\n
      • selector<\/strong> (string)<\/em> \u2014 CSS selector for the target element<\/li>\n
      • no_space_before_selector<\/strong> (bool)<\/em> \u2014 Don\u2019t put a space before selector<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

        Custom CSS Fields Configuration Example<\/h2>\n