Live CSS Preview

توسط Dojo Digital

توضیحات

This plugin adds a textarea to the Customize page that allows theme editors to write, preview, and implement CSS code in real time.
It also includes a frontend CSS editor window with live preview capability.

نصب

Upload the live-css-preview folder to the /wp-content/plugins/ directory.
Activate the plugin through the ‘Plugins’ menu in WordPress.

سوالات متداول

Will the CSS be applied to my live site if I hit “Save & Publish”?

Yes. Your changes are saved to the database and applied immediately to the frontend.

Will the Live CSS Preview allow me to write @media queries?

Absolutely — this is one of its primary features.

My CSS doesn’t seem to apply. How can I override the theme’s CSS?

The plugin adds a livecss class to the <body> element.
Use it to increase specificity when needed:

body.livecss { background-color: red; }

2.1.6

whitespace error removed which may conflict with other plugins

2.1.7

Hardening security (sanitization + escaping)
Cleaning up uninstall logic
Stabilizing CSS injection / preview behavior

2.2.2

New behavior, complete rework.
Front-end Live CSS editor now:
-Loads CSS directly from Appearance Customize Additional CSS
-Saves directly back to Additional CSS
-Applies changes instantly on the front end

Migration
-Automatically migrates existing Live CSS data into Additional CSS on update
-Ensures no CSS is lost during upgrade

Improvements
-Added Minify, Format, and Reset tools in the editor
-Improved compatibility with themes and plugins (including complex layouts)
-Hardened CSS and JS to prevent conflicts (Bootstrap, Toolset, etc.)
-Ensures editor appears above all site elements (z-index handling)

Performance
-CSS now outputs only once using native WordPress methods
-Reduced duplicate rendering and improved front-end efficiency

Cleanup
-Removed redundant Customizer editor (uses native Additional CSS instead)
-Simplified architecture for long-term stability

2.2.3

-Fixed ACE autocomplete suggestions stacking below the Live CSS panel (z-index)
-Fixed Format tool inserting a space after colons in selectors (e.g. a:hover was changed to a: hover); spacing is now applied only to property/value lines
-Removed unused legacy Customizer control PHP file
-Removed duplicate root js/ and css/ folders (only assets/js and assets/css are loaded)