Initial Set-Up

Initial set-up is easy. In your admin area, navigate to Appearance > CSS Organizer.

• License ID: Enter your license ID.
• CSS Organizer Label: You can replace the "CSS Organizer" label in your WordPress Customizer.
• Hide Default "Additional CSS" Option: By default, WordPress has a single CSS section, which you can hide if you want to only use the CSS Organizer instead. We left it available in case you want to use if for something else or want to go there to copy styles and paste them in the other sections.
• CSS Sections: Determine which sections you would like to organize your CSS in. You can change the label, but after you save a section the slug will become permanent. You can also delete sections or sort them by dragging the | = | markers on the left of each section.

Adding CSS

Navigate to Appearance > Customize or go to the page you want to want to edit on the front-end of your site and click on the Customizer link in the admin toolbar at the top of the screen. It has a paintbrush icon.

The Customizer will appear on the lefthand of the screen. This is where a lot of your site options are held. Scroll down until you see "CSS Organizer" (or whatever you labeled it in the settings above).

You will see all of the sections you created. Click on a section and add your CSS. It works exactly like the default customizer with a live preview. Note that some themes will be overriding some selectors, so you might have to use the !important tag on your CSS in some places.

That's it! Just Publish your edits at the top of the panel and you're done.