- Site Template
- WordPress Theme
- Blogging Theme
- CMS Theme
- Marketing Template
- eCommerce Theme
- Forum Theme
- Flash Template
- PSD Web Template
- .NET Script
- PHP Script
- HTML5 Code
- CSS Style
- Edge Animate Template
- Muse Template
- TypeEngine Theme
- Static Site Generator
- Sketch Template
CodeCanyon CSS Live Editor WordPress Plugin 9495573
Plugin \ Add-ons
Preview \ Live \ Scss \ Tools \ Website \ Visual \ Frontend \ Checking \ Design
Plugin - CSS Live Editor WordPress Plugin 9495573 by GambitTech @ CodeCanyon
Plugin \ Add-ons
CSS Live Editor helps you to fix up the styles of your website straight from your frontend, with a live preview!
Have you ever wanted to adjust some CSS in your website, and you find yourself going BACK into the backend just to edit your page or add some customized CSS? Then after previewing your site, you find that you still need more adjustment? If you have, then this plugin is for you.
Put in your CSS in the editor window, and your styles will be applied directly to your website as you type . This live preview is so helpful and will save you time when finding out the perfect style. When you’re done, then just click the save button and your styles would be saved.
CSS Live Editor is for both expert and novice web developers and designers .
You can use plain CSS or SCSS syntax in the editor. And because of this, you can use variables, functions and nesting. This makes the CSS Live Editor really powerful. For example, you can add your variables for your ‘entire site’ styles, then use them in the different parts, such as the styles ‘specific for this page’.
Error checking is also built-in , so when you have an error, an indicator will be displayed near where the error occurred. Hover your mouse over the indicator and the error message will show up to help you figure things out. CSS Live Editor has 2 levels of error checking. Saving your CSS can sometimes show you error messages.
Why and Where to Use This
You can use it for tweaking and even while developing your website.
We ourselves use this for creating styling websites for our clients. We found that editing your styles along with a live preview of how the entire site would look like is a powerful time-saving tool. SCSS and nesting rules also ensure that your code is small and tidy.
Here’s a good tip for you: Use CSS Live Editor with your browser’s inspector or developer console, so that you can quickly get the id and/or class names that you need.
- Edit CSS from the frontend,
- View a live preview of your CSS as you type,
- Use plain CSS or SCSS syntax: use variables, functions and nesting,
- Syntax error checking with error annotations,
- Apply styles to your entire site, all pages or post types or even specific pages,
- Little overhead since SCSS is compiled when it’s going to be used,
- The Editor is only available if you have privileges to edit your theme,
- Only the CSS needed for your site is loaded in the frontend,
- Cleanly coded in WordPress standards
Having Trouble with the Plugin?
Head over to the support tab and check out the FAQs, or submit a support ticket !
Enjoying the Plugin?
Be sure to leave a rating and review and show us some love.
Check out Our Other Stuff
* Initial release
Keywords: css, design, dev, development, editor, error checking, frontend, live, live preview, preview, scss, tools, visual, website.
Android, Builder, Business, Clean, Corporate, Creative, Design, Ecommerce, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Retina, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest Vina Kenzo Responsive VirtueMart Joomla Template 17965890
- ThemeForest Supermarket Responsive Magento 1 & 2 Theme 18447995
- ThemeForest Sunny Simple and Minimal WordPress Theme 17504470
- ThemeForest Max Automotive All About Cars PSD Template 18465274
- ThemeForest Retail Mail Responsive E-mail Templates set & Online Access 18457241
- ThemeForest Infinity Onepage Creative PSD Template 18206235
- ThemeForest Grade Engineering Manufacturing & Industrial Product Showcase WP Theme 17334925
- ThemeForest Lupill Agency Portfolio HTML Template 18467514
- ThemeForest Geodeo Coupon & Deals HTML Template 18466562
- ThemeForest SQSTUDIO Multipurpose Template 18216792