live-css-preview

plugin

2.1.6 • public • Published 2 days ago

Write, preview & implement CSS code in real time from the WordPress Customizer or the frontend.

csscustomizewp

Description

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.

Frequently Asked Questions

2.1.6

whitespace error removed which may conflict with other plugins

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; }

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.

Screenshots

Live CSS Snapshot 1

Live CSS Snapshot 1

Live CSS Snapshot 2

Live CSS Snapshot 2