Title: Output CSS is empty
Last modified: January 31, 2020

---

# Output CSS is empty

 *  Resolved [creativemanner](https://wordpress.org/support/users/creativemanner/)
 * (@creativemanner)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/output-css-is-empty/)
 * I’m trying to use output function to get inline css to custom color background,
   but isn’t return any value, just the empty tag
    <style id=”kirki-inline-styles”
   ></style>
 * In preview on customizer did work the preview changed, but seems the changes 
   isn’t save
 * Version used:
    Tested on stabled version and the develop version 3.0.45
 * Code to reproduce the issue (config + field(s))
 *     ```
       if ( class_exists( 'Kirki' ) ) {
           //setup Kirki config
       Kirki::add_config( 'vemo_config', array(
       	'capability'    => 'edit_theme_options',
       	'option_type'   => 'theme_mod',
       ) );
   
       Kirki::add_panel( 'theme_colors_panel', array(
           'priority'    => 10,
           'title'       => esc_html__( 'Theme Colors', 'kirki' ),
           'description' => esc_html__( 'Select your theme colors', 'kirki' ),
       ) );
   
       Kirki::add_section( 'theme_colors_section', array(
           'title'          => esc_html__( 'Theme Colors', 'kirki' ),
           'description'    => esc_html__( '', 'kirki' ),
           'panel'          => 'theme_colors_panel',
           'priority'       => 160,
       ) );
   
       Kirki::add_field( 'accent_color', array(
       	'type'        => 'color',
       	'settings'    => 'color_setting_hex',
       	'label'       => __( 'Color Control (hex-only)', 'kirki' ),
       	'description' => esc_html__( 'This is a color control', 'kirki' ),
       	'section'     => 'theme_colors_section',
       	'default'     => '#0088CC',
       	'transport'   => 'auto',
       	'output' => array(
       		array(
       			'element'  => 'body',
       			'property' => 'color',
   
       		),
       		array(
       			'element'  => '.decoration-inside',
       			'property' => 'background-color',
       		),
       	),
       ) );
   
       }
       ```
   

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Ari Stathopoulos](https://wordpress.org/support/users/aristath/)
 * (@aristath)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/output-css-is-empty/#post-11931393)
 * This usually happens if you load the fields in a hook like for example `customize_register`
   instead of directly.
    Perhaps this is what happens here too? The code you posted
   above looks fine
 *  Thread Starter [creativemanner](https://wordpress.org/support/users/creativemanner/)
 * (@creativemanner)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/output-css-is-empty/#post-11932006)
 * Thanks for the reply Ari,
 * I have understrap customizer file do you think this is the conflict?
 *     ```
       <?php
       /**
        * understrap Theme Customizer
        *
        * @package understrap
        */
   
       // Exit if accessed directly.
       defined( 'ABSPATH' ) || exit;
   
       /**
        * Add postMessage support for site title and description for the Theme Customizer.
        *
        * @param WP_Customize_Manager $wp_customize Theme Customizer object.
        */
       if ( ! function_exists( 'understrap_customize_register' ) ) {
       	/**
       	 * Register basic customizer support.
       	 *
       	 * @param object $wp_customize Customizer reference.
       	 */
       	function understrap_customize_register( $wp_customize ) {
       		$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
       		$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
       		$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
       	}
       }
       add_action( 'customize_register', 'understrap_customize_register' );
   
       if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
       	/**
       	 * Register individual settings through customizer's API.
       	 *
       	 * @param WP_Customize_Manager $wp_customize Customizer reference.
       	 */
       	function understrap_theme_customize_register( $wp_customize ) {
   
       		// Theme layout settings.
       		$wp_customize->add_section(
       			'understrap_theme_layout_options',
       			array(
       				'title'       => __( 'Theme Layout Settings', 'understrap' ),
       				'capability'  => 'edit_theme_options',
       				'description' => __( 'Container width and sidebar defaults', 'understrap' ),
       				'priority'    => 160,
       			)
       		);
   
       		/**
       		 * Select sanitization function
       		 *
       		 * @param string               $input   Slug to sanitize.
       		 * @param WP_Customize_Setting $setting Setting instance.
       		 * @return string Sanitized slug if it is a valid choice; otherwise, the setting default.
       		 */
       		function understrap_theme_slug_sanitize_select( $input, $setting ) {
   
       			// Ensure input is a slug (lowercase alphanumeric characters, dashes and underscores are allowed only).
       			$input = sanitize_key( $input );
   
       			// Get the list of possible select options.
       			$choices = $setting->manager->get_control( $setting->id )->choices;
   
       				// If the input is a valid key, return it; otherwise, return the default.
       				return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
   
       		}
   
       		$wp_customize->add_setting(
       			'understrap_container_type',
       			array(
       				'default'           => 'container',
       				'type'              => 'theme_mod',
       				'sanitize_callback' => 'understrap_theme_slug_sanitize_select',
       				'capability'        => 'edit_theme_options',
       			)
       		);
   
       		$wp_customize->add_control(
       			new WP_Customize_Control(
       				$wp_customize,
       				'understrap_container_type',
       				array(
       					'label'       => __( 'Container Width', 'understrap' ),
       					'description' => __( 'Choose between Bootstrap\'s container and container-fluid', 'understrap' ),
       					'section'     => 'understrap_theme_layout_options',
       					'settings'    => 'understrap_container_type',
       					'type'        => 'select',
       					'choices'     => array(
       						'container'       => __( 'Fixed width container', 'understrap' ),
       						'container-fluid' => __( 'Full width container', 'understrap' ),
       					),
       					'priority'    => '10',
       				)
       			)
       		);
   
       		$wp_customize->add_setting(
       			'understrap_sidebar_position',
       			array(
       				'default'           => 'right',
       				'type'              => 'theme_mod',
       				'sanitize_callback' => 'sanitize_text_field',
       				'capability'        => 'edit_theme_options',
       			)
       		);
   
       		$wp_customize->add_control(
       			new WP_Customize_Control(
       				$wp_customize,
       				'understrap_sidebar_position',
       				array(
       					'label'             => __( 'Sidebar Positioning', 'understrap' ),
       					'description'       => __(
       						'Set sidebar\'s default position. Can either be: right, left, both or none. Note: this can be overridden on individual pages.',
       						'understrap'
       					),
       					'section'           => 'understrap_theme_layout_options',
       					'settings'          => 'understrap_sidebar_position',
       					'type'              => 'select',
       					'sanitize_callback' => 'understrap_theme_slug_sanitize_select',
       					'choices'           => array(
       						'right' => __( 'Right sidebar', 'understrap' ),
       						'left'  => __( 'Left sidebar', 'understrap' ),
       						'both'  => __( 'Left & Right sidebars', 'understrap' ),
       						'none'  => __( 'No sidebar', 'understrap' ),
       					),
       					'priority'          => '20',
       				)
       			)
       		);
       	}
       } // endif function_exists( 'understrap_theme_customize_register' ).
       add_action( 'customize_register', 'understrap_theme_customize_register' );
   
       /**
        * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
        */
       if ( ! function_exists( 'understrap_customize_preview_js' ) ) {
       	/**
       	 * Setup JS integration for live previewing.
       	 */
       	function understrap_customize_preview_js() {
       		wp_enqueue_script(
       			'understrap_customizer',
       			get_template_directory_uri() . '/js/customizer.js',
       			array( 'customize-preview' ),
       			'20130508',
       			true
       		);
       	}
       }
       add_action( 'customize_preview_init', 'understrap_customize_preview_js' );
       ```
   
 *  Thread Starter [creativemanner](https://wordpress.org/support/users/creativemanner/)
 * (@creativemanner)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/output-css-is-empty/#post-11932018)
 * Disabled it the file above but nothing changed. Styles are not there. 🙁
 *  Thread Starter [creativemanner](https://wordpress.org/support/users/creativemanner/)
 * (@creativemanner)
 * [6 years, 9 months ago](https://wordpress.org/support/topic/output-css-is-empty/#post-11934865)
 * Got it working my bad 🙂
 *  [Ari Stathopoulos](https://wordpress.org/support/users/aristath/)
 * (@aristath)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/output-css-is-empty/#post-11937732)
 * Great. What was the issue? Just so that I keep it in mind if someone comes along
   with a similar problem 🙂
 *  Thread Starter [creativemanner](https://wordpress.org/support/users/creativemanner/)
 * (@creativemanner)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/output-css-is-empty/#post-11938736)
 * config_id on fields 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Output CSS is empty’ is closed to new replies.

 * ![](https://ps.w.org/kirki/assets/icon-256x256.jpg?rev=3518366)
 * [Kirki – Freeform Page Builder, Website Builder & Customizer](https://wordpress.org/plugins/kirki/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/kirki/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/kirki/)
 * [Active Topics](https://wordpress.org/support/plugin/kirki/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/kirki/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/kirki/reviews/)

 * 6 replies
 * 0 participants
 * Last reply from: [creativemanner](https://wordpress.org/support/users/creativemanner/)
 * Last activity: [6 years, 8 months ago](https://wordpress.org/support/topic/output-css-is-empty/#post-11938736)
 * Status: resolved