Kirki: New Control Request: Separator Control

[Vishal-Deshpande]

I would like to request new control "separator".

Customizer lacks space and some times you need

---

hr line to visually separate controls. I searched in docs but could not find anything similar.

Can we have separator control to better manage the messy customizer. Color, thickness choices would be handy.

Redux has something similar to this https://docs.reduxframework.com/core/fields/divide/

[ghost]

Oh yes please. Great request on this.
On 31 Mar 2016 12:02 pm, "PlayerThemes" [email protected] wrote:

I would like to request new control "separator".

Customizer lacks space and some times you need

---

line to visually separate controls. I searched in docs but could not find
anything similar.

Can we have separator control to better manage the messy customizer.
Color, thickness choices would be handy.

Redux has something similar to this
https://docs.reduxframework.com/core/fields/divide/

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

[aristath]

Actually we used to have a "separator" control back in version 0.8 if I remember correctly.
Then we introduced the "custom" control and a separator was no longer needed.

You can add one like this:

Kirki::add_field( 'my_config', array(
    'type'        => 'custom',
    'settings'    => uniqid( 'separator' ),
    'section'     => 'my_section',
    'default'     => '<hr>',
    'priority'    => 23,
) );

You can change the <hr> to something like <div style="padding: 5px; border-top: 1px red; border-bottom: 5px blue;"></div> or just do whatever you want with it!
I've seen most people use it as a contextual separator using a div properly styled with a title included. :+1:

[rahulv3a]

Just sharing my way of doing the same:

Kirki::add_field( 'my_config', array(
    'type'        => 'custom',
    'settings'    => uniqid( 'separator' ),
    'section'     => 'my_section',
    'default'     => '<div class="customizer-separator"></div>',
    'priority'    => 23,
) );

Then load a CSS file in the customizer.

function my_customizer_controls_styles() {
  $current_theme_version = wp_get_theme()->get( 'Version' );
  wp_enqueue_style( 'customizer', get_template_directory_uri() . '/inc/customizer/css/main.css', array(), $current_theme_version );
}
add_action('customize_controls_enqueue_scripts', 'my_customizer_controls_styles');

Then add custom cutomizer CSS in main.css. Using a css class instead of incline css helps if we decide to tweak styles for the separator later on.

.customizer-separator {
  /*  styles for separator goes here */
}

I usually add the following styles to main.css in order to make it visually more appealing.

#customize-theme-controls .accordion-section-content {
  background-color: #fff;
}

#customize-theme-controls .accordion-section-content li {
  padding-bottom: 14px;
  border-bottom: 1px solid #f5f5f5;
}

#customize-theme-controls .accordion-section-content li:last-of-type,
#customize-theme-controls .accordion-section-content li.customize-section-description-container {
  padding-bottom: 0;
  border-bottom: none;
}