The Theme Style Kit panel

The Theme Style Kit panel (previously named Tools) is located in the Theme Styles editor and provides several handy options explained below.

Reset Theme Style Kit

This option resets all the Style Kit styles. The values on all the Style Kits controls will be reset and you can start a new Style Kit from Scratch. You should now be seeing the layout without the any styles. 

Save Theme Style Kit As...

This is very straight-forward and essentially allows you to "Save as" the Style Kit with another name. You can read more on this in this article.

Export Style Kit CSS

This option will export all the Style Kit-related CSS that is available in your current Style Kit. Clicking the Export CSS button will trigger the following popup, with all the CSS code ready to copy and paste.

Removing page IDs

You will notice that by default, the CSS text contains the ID of the specific page. This means that wherever you put this CSS code, it will only affect the selected Elementor page. 

If you want the exported Style Kit CSS to apply on all your Elementor pages, check the checkbox that says "Remove Page ID from the CSS"

You will then notice that the ID is stripped from the text. Now you can copy this CSS and paste it in your theme's stylesheet, and it should apply for all your elementor pages.

Errors while using the exported CSS?

If you paste the Style Kit CSS in the WordPress customizer or your theme's stylesheet via the WordPress dashboard, you might find some errors triggered. This happens because as of now, the CSS editor in WordPress, does not recognize the modern CSS variables. See the related WordPress ticket here.

Style Kit uses such variables for the background color classes.  You can go ahead and update the CSS, despite any warnings for errors. The CSS will play just fine.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us