Title: Live CSS Preview
Author: Dojo Digital
Published: <strong>7. Juli 2012</strong>
Last modified: 6. April 2026

---

Plugins suchen

![](https://s.w.org/plugins/geopattern-icon/live-css-preview.svg)

# Live CSS Preview

 Von [Dojo Digital](https://profiles.wordpress.org/dojodigital/)

[Herunterladen](https://downloads.wordpress.org/plugin/live-css-preview.2.2.3.zip)

 * [Details](https://de.wordpress.org/plugins/live-css-preview/#description)
 * [Rezensionen](https://de.wordpress.org/plugins/live-css-preview/#reviews)
 *  [Installation](https://de.wordpress.org/plugins/live-css-preview/#installation)
 * [Entwicklung](https://de.wordpress.org/plugins/live-css-preview/#developers)

 [Support](https://wordpress.org/support/plugin/live-css-preview/)

## Beschreibung

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.

## Installation

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

## FAQ

### 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)

## Rezensionen

Zu diesem Plugin liegen noch keine Rezensionen vor.

## Mitwirkende und Entwickler

„Live CSS Preview“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin
mitgewirkt:

Mitwirkende

 *   [ Dojo Digital ](https://profiles.wordpress.org/dojodigital/)

[Übersetze „Live CSS Preview“ in deine Sprache.](https://translate.wordpress.org/projects/wp-plugins/live-css-preview)

### Interessiert an der Entwicklung?

[Durchstöbere den Code](https://plugins.trac.wordpress.org/browser/live-css-preview/),
sieh dir das [SVN-Repository](https://plugins.svn.wordpress.org/live-css-preview/)
an oder abonniere das [Entwicklungsprotokoll](https://plugins.trac.wordpress.org/log/live-css-preview/)
per [RSS](https://plugins.trac.wordpress.org/log/live-css-preview/?limit=100&mode=stop_on_copy&format=rss).

## Meta

 *  Version **2.2.3**
 *  Zuletzt aktualisiert **vor 7 Monaten**
 *  Aktive Installationen **300+**
 *  WordPress-Version ** 5.8 oder höher **
 *  Getestet bis **6.9.10**
 *  PHP-Version ** 7.4 oder höher **
 *  Sprache
 * [English (US)](https://wordpress.org/plugins/live-css-preview/)
 * Schlagwörter
 * [css](https://de.wordpress.org/plugins/tags/css/)[customizer](https://de.wordpress.org/plugins/tags/customizer/)
   [editor](https://de.wordpress.org/plugins/tags/editor/)
 *  [Erweiterte Ansicht](https://de.wordpress.org/plugins/live-css-preview/advanced/)

## Bewertungen

 5 von 5 Sternen.

 *  [  2 5-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/live-css-preview/reviews/?filter=5)
 *  [  0 4-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/live-css-preview/reviews/?filter=4)
 *  [  0 3-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/live-css-preview/reviews/?filter=3)
 *  [  0 2-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/live-css-preview/reviews/?filter=2)
 *  [  0 1-Sterne-Rezensionen     ](https://wordpress.org/support/plugin/live-css-preview/reviews/?filter=1)

[Deine Rezension](https://wordpress.org/support/plugin/live-css-preview/reviews/#new-post)

[Alle Rezensionen anzeigen](https://wordpress.org/support/plugin/live-css-preview/reviews/)

## Mitwirkende

 *   [ Dojo Digital ](https://profiles.wordpress.org/dojodigital/)

## Support

Möchtest du etwas mitteilen? Brauchst du Unterstützung?

 [Support-Forum anzeigen](https://wordpress.org/support/plugin/live-css-preview/)