start_controls_section( 'kng_custom_css_section', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Custom CSS', 'king-addons'), 'tab' => Controls_Manager::TAB_ADVANCED ] ); $element->add_control( 'kng_custom_css_switch', [ 'label' => esc_html__('Enable Custom CSS', 'king-addons'), 'type' => Controls_Manager::SWITCHER, 'prefix_class' => 'kng-custom-css-', 'frontend_available' => true ] ); $element->add_control( 'kng_custom_css', [ 'type' => Controls_Manager::CODE, 'label' => esc_html__('Custom CSS', 'king-addons'), 'description' => esc_html__('Use "[current-element]" keyword as selector to target the current element. You can also use all CSS pseudo-classes, for example "[current-element]:hover" adds action when mouse hover over the current element.', 'king-addons'), 'default' => '[current-element] { }', 'language' => 'css', 'render_type' => 'ui', 'label_block' => true, 'frontend_available' => true, 'condition' => [ 'kng_custom_css_switch!' => '' ] ] ); $element->end_controls_section(); } public static function renderCSS($raw_css, Element_Base $element): void { if (!empty($element->get_settings_for_display('kng_custom_css_switch'))) { $element_settings = $element->get_settings(); if (empty($element_settings['kng_custom_css'])) { return; } $css = trim($element_settings['kng_custom_css']); if (empty($css)) { return; } $css = str_replace('[current-element]', $raw_css->get_element_unique_selector($element), $css); $raw_css->get_stylesheet()->add_raw_css($css); } } }