How to add custom css control with elementor free version.

custom-css.php

<?php

use Elementor\Controls_Manager;
use Elementor\Element_Base;
use Elementor\Core\Files\CSS\Post;
use Elementor\Core\DynamicTags\Dynamic_CSS;

// Exit if accessed directly
if (!defined('ABSPATH')) {
	exit;
}
if(defined('ELEMENTOR_PRO_VERSION')){
	return;
}

class Prefix_Custom_Css {
	/**
	 * Add Action hook
	 */
	public function __construct() {
		add_action('elementor/element/after_section_end', [__CLASS__, 'add_controls_section'], 10, 3);
		add_action('elementor/element/parse_css', [$this, 'add_post_css'], 10, 2);
		//add_action( 'elementor/post-css-file/parse', [ $this, 'add_page_settings_css' ] );
		add_action( 'elementor/css-file/post/parse', [ $this, 'add_page_settings_css' ] );
		add_action( 'elementor/editor/after_enqueue_scripts', [$this, 'enqueue_editor_scripts']);
	}

	/**
	 * Replace Pro Custom CSS Control
	 */
	public static function add_controls_section($element, $section_id, $args) {
		if ($section_id == 'section_custom_css_pro') {

			$element->remove_control('section_custom_css_pro');
			$element->start_controls_section(
				'section_custom_css',
				[
					'label' => __( 'Prefix Custom CSS', 'pawshop_toolkit' ),
					'tab' => Controls_Manager::TAB_ADVANCED,
				]
			);

			$element->add_control(
				'custom_css_title',
				[
					'raw' => __( 'Add your own custom CSS here', 'pawshop_toolkit' ),
					'type' => Controls_Manager::RAW_HTML,
				]
			);

			$element->add_control(
				'custom_css',
				[
					'type' => Controls_Manager::CODE,
					'label' => __( 'Custom CSS', 'pawshop_toolkit' ),
					'language' => 'css',
					'render_type' => 'ui',
					'show_label' => false,
					'separator' => 'none',
				]
			);

			$element->add_control(
				'custom_css_description',
				[
					'raw' => __( 'Use "selector" to target wrapper element. Examples:<br>selector {color: red;} // For main element<br>selector .child-element {margin: 10px;} // For child element<br>.my-class {text-align: center;} // Or use any custom selector', 'pawshop_toolkit' ),
					'type' => Controls_Manager::RAW_HTML,
					'content_classes' => 'Theme_pawshop elementor-descriptor',
				]
			);

			$element->end_controls_section();
		}
	}

	/**
	 * @param $post_css Post
	 * @param $element  Element_Base
	 */
	public function add_post_css($post_css, $element) {
		if ($post_css instanceof Dynamic_CSS) {
			return;
		}

		$element_settings = $element->get_settings();

		if (empty($element_settings['custom_css'])) {
			return;
		}

		$css = trim($element_settings['custom_css']);

		if (empty($css)) {
			return;
		}
		$css = str_replace('selector', $post_css->get_element_unique_selector($element), $css);

		// Add a css comment
		$css = sprintf('/* Start custom CSS for %s, class: %s */', $element->get_name(), $element->get_unique_selector()) . $css . '/* End custom CSS */';

		$post_css->get_stylesheet()->add_raw_css($css);
	}

	/**
	 * @param $post_css Post
	 */
	public function add_page_settings_css( $post_css ) {
		$document = \Elementor\Plugin::$instance->documents->get( $post_css->get_post_id() );
		$custom_css = $document->get_settings( 'custom_css' );
		$custom_css = trim( $custom_css );

		if ( empty( $custom_css ) ) {
			return;
		}

		$custom_css = str_replace( 'selector', $document->get_css_wrapper_selector(), $custom_css );

		// Add a css comment
		$custom_css = '/* Start custom CSS for page-settings */' . $custom_css . '/* End custom CSS */';

		$post_css->get_stylesheet()->add_raw_css( $custom_css );
	}

	/**
	 * Enqueue Editor Script
	 */
	public function enqueue_editor_scripts() {
		wp_enqueue_script('prefix-editor-support-js', plugin_dir_path(__FILE__).'inc/widgets/elementor/assets/js/editor-support.js', array('jquery'), '', true);
	}

}
new Prefix_Custom_Css();

editor-support.js

(function ($) {
	"use strict";

	function addCustomCss(css, context) {
		if (!context) {
			return;
		}
		var model = context.model,
			customCSS = model.get('settings').get('custom_css');
		var selector = '.elementor-element.elementor-element-' + model.get('id');

		if ('document' === model.get('elType')) {
		  selector = elementor.config.document.settings.cssWrapperSelector;
		}

		if (customCSS) {
		  css += customCSS.replace(/selector/g, selector);
		}

		return css;
	  }

	elementor.hooks.addFilter('editor/style/styleText', addCustomCss);

	function addPageCustomCss() {

		var customCSS = elementor.settings.page.model.get('custom_css');
		if (customCSS) {
			customCSS = customCSS.replace(/selector/g, elementor.config.settings.page.cssWrapperSelector);
			elementor.settings.page.getControlsCSS().elements.$stylesheetElement.append(customCSS);
		}
	}
	// elementor.settings.page.model.on('change', addPageCustomCss);
	elementor.on('preview:loaded', addPageCustomCss);

})(jQuery);

functions.php

<?php
//include custom css file with the plugin or theme
if (defined('ELEMENTOR_VERSION')) {
  require_once(plugin_dir_path(__FILE__).'inc/widgets/elementor/custom-css.php');
}

Hi, where i should write this code? Thank you very much.

Hi, where i should write this code? Thank you very much.

download those files and connect with your theme or plugin.

Thank you, but exactly where?

Thank you, but exactly where?

in functions.php file or in your base file.

I required the custom-css file but there is no errors but no changes in elementor as well.

Hey, I get an error in my console log

Uncaught TypeError: Cannot read property 'model' of undefined
    at editor-support.js:22

Hello, same problem i get an error in my console
Uncaught TypeError: elementor.settings.page is undefined
at editor-support.js:22
Elementor last version: 3.1.3
Rgds Chichille

@chichille @delennerd
Please, try now, codes are modified and compatible with Elementor latest version: 3.1.3

@iqbalrony
I modified the code and it works fine. The error is gone.
I have not tested this modification with the version prior to 3.1.3
Thank you very much for your quick response

Hello @iqbalrony,
You must modify 'editor-support.js' line 29 because of deprecation since 2.9.0
'elementor.config.settings.page' replaced by 'elementor.config.document.settings'
Rgds

Hello @iqbalrony,
You must modify 'editor-support.js' line 29 because of deprecation since 2.9.0
'elementor.config.settings.page' replaced by 'elementor.config.document.settings'
Rgds

I know, it is soft deprecated now but works fine. this function will be removed on elementor 3.7 version. but thanks for the update. I will fix it.

It show me Notice
Notice: Undefined index: pro_widgets in E:\xampp\htdocs\rnd\wp-content\plugins\elementor\includes\api.php on line 160

Hi,
My problem is to visualize in the editor the elements for which css code has been applied without having to open them one by one. For that I made some modifications of your original code and I would like you to give me your expertise on this subject.

`/** editor-pro.js 5305 */
function addCustomCss(css, context) {
if(!context) { return; }

	var model = context.model,
		customCSS = model.get('settings').get('custom_css'); // 'control' ACE Editor
	var selector = '.elementor-element.elementor-element-' + model.get('id');
	
	if('document' === model.get('elType')) {
		selector = elementor.config.document.settings.cssWrapperSelector;
	}
	
	/**
	 * Finding the edit handle for section / Column / Widget
	 * The first if it is a section / column, Do not modify the internal handles
	 */
	var $elHandle = $(context.el).find('.elementor-editor-element-settings .elementor-editor-element-edit').first();
	
	if(customCSS) {
		css += customCSS.replace(/selector/g, selector);
		
		// Modification de la couleur de la poignée d'édition
		if($elHandle.length > 0) {
			$elHandle.css('color', 'red');
		}
	} else {
		// Reset de la couleur de la poignée d'édition
		if($elHandle.length > 0) {
			$elHandle.css('color', 'white');
		}
	}
	
	return css;
}

elementor.hooks.addFilter('editor/style/styleText', addCustomCss);`

Rgds

Thank you Brother. This gist help me lot. We are building GRID builder for Elementor.