Title: True Global CSS Variable Linking Support Last modified: June 26, 2020 --- # True Global CSS Variable Linking Support * Resolved [utsavmadaan823](https://wordpress.org/support/users/utsavmadaan823/) * (@utsavmadaan823) * [5 years, 11 months ago](https://wordpress.org/support/topic/true-global-css-variable-linking-support/) * Thanks for the plugin. * I have one request. I want that colors defined in CCP can be used everywhere and whereever they are used instead of directly saving hex color it saves css variable instead (not – #ffffff but var(–color_text_primary). So what it would mean is change colors in CCP and than everywhere where colors from CCP are used they will be changed since they are linked to css variable not to hard coded hex color. I am already doing this thing with CCP + ACF + Elementor + Custom Code but now when i am starting with Gutenberg again this issue. Can this featured be added in CCP ? - This topic was modified 5 years, 11 months ago by [utsavmadaan823](https://wordpress.org/support/users/utsavmadaan823/). Viewing 2 replies - 1 through 2 (of 2 total) * Thread Starter [utsavmadaan823](https://wordpress.org/support/users/utsavmadaan823/) * (@utsavmadaan823) * [5 years, 11 months ago](https://wordpress.org/support/topic/true-global-css-variable-linking-support/#post-13041314) * Ok i was able to achieve it myself by using Gutenberg’s API method add_theme_support. * Code for reference – * ``` //gutenberg + ccp integration - will add ccp colors as palette in Gutenberg + when used in Gutenberg blocks - will be linked to css variable instead of setting hardcoded hex color add_action('plugins_loaded',function(){ //mention ccp keys which you want to integrate with acf $builder_replacement_array=[ 'color_widget_primary', 'color_widget_primary_plus', 'color_widget_secondary', 'color_widget_secondary_plus', 'color_body_background', 'color_widget_background_primary', 'color_widget_background_secondary', 'color_border_main', 'color_border_alternate', 'color_success', 'color_error', 'color_warning', 'color_text_heading', 'color_text_primary', 'color_text_primary_plus', 'color_text_secondary', 'color_one', 'color_two', 'color_three', 'color_four', 'color_five', 'color_light', 'color_dark', 'color_theme_type', ]; $gutenburg_global_styles_array = array(); $gutenburg_compatibility_css=''; foreach ($builder_replacement_array as $color_variable) { $prepared_color_variable = "var(--{$color_variable})"; array_push($gutenburg_global_styles_array,array( 'name' => custom_make_it_human_readable($color_variable), 'slug' => $color_variable, 'color' => $prepared_color_variable, ) ); $color_variable = str_replace('_','-',$color_variable); $gutenburg_compatibility_css .= ".has-{$color_variable}-background-color{background-color:{$prepared_color_variable};}.has-{$color_variable}-color{color:{$prepared_color_variable};}"; } add_theme_support('editor-color-palette',$gutenburg_global_styles_array); custom_inline_enqueue('wp_enqueue_scripts',true,$gutenburg_compatibility_css,'custom-gutenberg-ccp-integration-css'); custom_inline_enqueue('admin_enqueue_scripts',true,$gutenburg_compatibility_css,'custom-gutenberg-ccp-integration-css'); }); // custom - wp - inline enqueue css or javascript function custom_inline_enqueue($enqueue_action,$is_css,$css_or_script,$css_or_script_name,$footer = false){ add_action($enqueue_action,function()use($enqueue_action,$is_css,$css_or_script,$css_or_script_name,$footer){ if($is_css){ wp_register_style($css_or_script_name,false); wp_enqueue_style($css_or_script_name); wp_add_inline_style($css_or_script_name,$css_or_script); }else{ if($footer){ wp_register_script($css_or_script_name,false,array(),false,true); wp_enqueue_script($css_or_script_name,false,array(),false,true); }else{ wp_register_script($css_or_script_name,false); wp_enqueue_script($css_or_script_name); } wp_add_inline_script($css_or_script_name,$css_or_script); } }); } ``` - This reply was modified 5 years, 11 months ago by [utsavmadaan823](https://wordpress.org/support/users/utsavmadaan823/). * Thread Starter [utsavmadaan823](https://wordpress.org/support/users/utsavmadaan823/) * (@utsavmadaan823) * [5 years, 11 months ago](https://wordpress.org/support/topic/true-global-css-variable-linking-support/#post-13041321) * It was fairly easy than Elementor integration, for Elementor i took a longer route – 1. Create ACF Options with Fields same as CCP color keys 2. Link ACF Option Fields with CCP color keys 3. Link Elementor Block value with ACF Option Field value * Wish that these features could be baked in the plugin. My shared code may not be ideal as written with many time constraints but certainly working fine. If anyone needs any help with the shared code let me know. Viewing 2 replies - 1 through 2 (of 2 total) The topic ‘True Global CSS Variable Linking Support’ is closed to new replies. * ![](https://ps.w.org/kt-tinymce-color-grid/assets/icon-256x256.png?rev=1095993) * [Central Color Palette](https://wordpress.org/plugins/kt-tinymce-color-grid/) * [Frequently Asked Questions](https://wordpress.org/plugins/kt-tinymce-color-grid/#faq) * [Support Threads](https://wordpress.org/support/plugin/kt-tinymce-color-grid/) * [Active Topics](https://wordpress.org/support/plugin/kt-tinymce-color-grid/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/kt-tinymce-color-grid/unresolved/) * [Reviews](https://wordpress.org/support/plugin/kt-tinymce-color-grid/reviews/) ## Tags * [global](https://wordpress.org/support/topic-tag/global/) * 2 replies * 1 participant * Last reply from: [utsavmadaan823](https://wordpress.org/support/users/utsavmadaan823/) * Last activity: [5 years, 11 months ago](https://wordpress.org/support/topic/true-global-css-variable-linking-support/#post-13041321) * Status: resolved