There are some cases when we need WordPress CSS editor plugin. For example, when we are using a WP theme that has no option to customize menu background.
In this condition we need to find out unique CSS selector that controls menu background. Sometimes that task can become very complex.
Especially for someone new to WordPress or someone who doesn’t know how to work with code.
Another example is logo position and size. There are many themes that don’t offer custom logo position and resizing. This too may be a big headache if you are not a pro in CSS and HTML.
But here steps wonderful WordPress development community. CSS customizer plugins are available to help edit CSS live on WordPress frontend.
These plugins keep changes saved in database that don’t get erased with theme updates.
If you are running WordPress website, and you are not a CSS expert, a good WordPress CSS editor plugin could come in handy.
Otherwise you will be scratching your head while editing a specific segment of theme that could not be edited with theme option panel or page builder.
Usually people use browser inbuilt option “inspect element” code to find out CSS selectors for specific element.
But think how nice it would be if you could edit CSS live on WordPress frontend and all changes would be saved in a secure table of database that could be exported anywhere else easily?
In fact it is now possible with WordPress css visual editor plugins.
Have you ever wished you could just click on any element of your WordPress theme and edit the CSS style of it? With the ability to see the changes you make immediately, all without having to write CSS code?
Or maybe you don’t actually mind a little coding, but you still wish you could see the changes you make without having to edit, save, refresh, see how it looks and repeat same steps all over again.
Two premium CSS editor plugins separate themselves from the rest. Those are CSS Hero and Microthemer.
Both of these CSS visual editor plugins are amazing, and both have basically the same great features.
PRICING: CSS Hero has several plans depending on how many WordPress sites do you intend to use it. Starter plan costs $29 per year for one site, Personal plan is for up to 5 sites and costs $59 per year and Pro plan for up to 999 sites for $199 per year.
Here is a 40% off coupon for CSS Hero: HEROKUBE
Yearly charges will be applicable if you need to get updates after one year of purchase.
All packages include: One year upgrades, one year support, CSS Hero’s easy export feature to export all your edits and use them without CSS Hero
NOTE: Compatible with selected themes and plugins only! It can work with other WordPress themes if they follow WordPress coding standards.
Check CSS Hero
If you’re one of the many beginners who want to customize your WordPress site design without touching CSS, then you’re in luck.
CSS Hero is great premium WordPress CSS editor plugin for live CSS editing.
Thanks to this plugin you can edit CSS of any element on site live and changes are done immediately on frontend.
When you activate CSS hero, it shows a pop-up window at right side of your website.
Pop up windows is draggable to anywhere on the page ( while logged in as admin).
If you clicked on a circle button, CSS hero is activated on the page and it detects page elements.
With mouse hover you can edit CSS properties of that element in CSS hero pop-up option panel.
You can edit CSS properties like padding, margin, font style, size and color, position, drop shadow, 3D shadow…
You can even mark provided CSS value as important to override any existing style for that element.
1. Main Editor Trigger – It edit’s any element on the page.
2. Device Mode – This mode is used to switch between desktop, tablet and mobile device preview mode to have a instant glance of how the work will display on handheld devices.
3. History – It enables to manage and browse the edits history for the current theme, a detailed list of date\time based history of edits will be stored here.
4. Presets – It is a set of options saved and stored. The user can store unlimited presets for each theme.
5. Tools – This icon helps the user to reset the settings to theme default, clear the history or show generated CSS.
6. Social Media Sharing – This icon is made for sharing CSS Hero plugin on social media.
7. Full Screen Mode – This feature takes you to full screen editing mode.
8. Shutdown Mode – Turn off the CSS Hero plugin and get back to the normal browsing.
CSS Hero is a premium css editor WordPress plugin that allows you to design your own WordPress theme without writing a single line of code. No HTML or CSS required.
Similar to a visual page builder, CSS Hero works by allowing you to select and change elements of your website via a visual live editor.
The editor is displayed on the front end of your website and customizing each element is as simple as pointing and clicking.
Customizations are applied separately to your original theme styles, by generating an extra css stylesheet.
The new code will simply replace the old, leaving them intact.
You have the ability to undo changes should you wish to revert to default at a later date.
All changes are saved as an additional stylesheet, which means you can upgrade your WordPress theme without worrying about losing the changes.
CSS Hero can save you a lot of time and frustration when it comes to making design customizations.
Key features include:
First you need to install and activate the CSS Hero plugin.
The goal of CSS Hero is to provide you a WYSIWG (what you see is what you get) interface for editing your theme.
After installing the CSS Hero WordPress Plugin, on each public page of your site you will see a blue Lightning Bolt icon on the top right corner.
This icon is shown only to site administrators and looks like this:
Clicking on the button will convert your site into the live preview. You will now be able to see the CSS Hero toolbar.
The first item on the tool bar is the selection tool. Simply click on it and then click on any element on your website.
CSS Hero will show you the CSS selectors used by your theme for that particular element.
After you choose a selector, you will be able to see all the things you can modify for that element. This includes text, margins, padding, background, etc.
When you click on a property, it will show you all the options that you can change.
As you edit the values, you will see your changes applied to your site in the live preview. Once you are satisfied with the changes you made, simply click on the Save button to store your changes.
Repeat the process to modify any element on any page of your site.
Try CSS Hero
You need to make sure that your website looks equally great on all devices and screen sizes. CSS Hero comes with a built-in preview tool to also check this aspect.
Simply click on the desktop icon in the CSS Hero toolbar and then click on a device type. You can choose from mobile, tablet, and desktop devices.
The Preview area will change into your selected device.
You can now edit your site while previewing it for mobile devices. This tool is particularly useful to tweak your theme for handheld devices.
Here comes Undo/Redo – History icon into play.
One of valuable features of CSS Hero is the ability to undo any changes you make at any time. CSS Hero keeps a history of all the changes you make to your theme.
Simply click on the history button in the CSS Hero toolbar to see the list of changes.
Click on the preview icon next to a date and time to see what your site looked at that point. If you want to revert back to that state, then you need to click on the Activate icon.
What if you only wanted to revert changes you made to a particular item?
In that case, you don’t need to use the history tool. Simply click on the element that you want to revert and then click on the reset button.
This will change the item back to the default settings defined by your WordPress theme.
The official CSS Hero website has list compatible themes. List is constantly updated with new themes compatible with CSS Hero Plugin.
This list includes many of the popular free WordPress themes. It also has the most popular premium themes from Elegant Themes, StudioPress, and WooThemes.
It is compatible with most popular WordPress theme frameworks like Genesis, Thematic, Pagelines, etc.
What about themes that are not on compatibility list?
CSS Hero comes with an experimental feature which is currently in beta. It is called Rocket Mode Auto-detection.
If you are using a theme not listed in theme compatibility list, then CSS Hero will recommend you to try the Rocket Mode.
Rocket Mode tries to guess the CSS selectors from your theme on its own. This works most of the time.
If your theme follows WordPress coding standards, then you would be able to edit almost everything.
You may also want to contact your theme developer and ask them to provide compatibility with CSS Hero.
CSS Hero is compatible with some of the most popular and commonly used WordPress plugins. The list includes Gravity Forms, Contact Form 7, DW Question Answers, WP Polls, etc.
If you are using a WordPress plugin which generates an output not editable by CSS Hero, then you can request plugin author to do that.
They really don’t need to do much to provide compatibility with CSS Hero.
CSS Hero plugin is very easy and simple to use. The main aim of this plugin is to provide theme customization support. It helps in the edit of any element or page and converts it in the color and shape of the choice.
CSS Hero Plugin works on responsive themes.
Any changes made to the CSS of the theme using CSS Hero can be exported for use on another site. This means you aren’t locked into this plugin if you want to transfer the custom designs to a client site or similar.
Plugin comes with extensive documentation and video tutorials in CSS Hero Academy section.
Works ok on css hero-ready themes, but pretty flaky on others. Rocket Mode (in beta) aims to solve this, but it’s still extremely buggy.
Hero-ready doesn’t mean 100% editable either. It all depends upon how much effort was put into creating the hero-ready file and how many elements were made “ready” for the particular theme.
CSS Hero is a WYSIWYG Theme editor for WordPress that will help you make visual changes to your website with a point and click interface.
CSS Hero will automatically generate the required CSS code, and deploy it to your website upon saving.
You can always undo or even reset single properties. Personalizations can be erased and the element will revert to the default Theme definition.
Each plan expires after one year from the purchase date. At the end of that period CSS Hero will continue working, but you will not be able to install CSS Hero on new sites.
At the end of your CSS Hero annual plan, your plan will not automatically renew.
There’s so much potential in this little plugin. For those with basic needs these features will provide everything you need to make the changes you want.
The documentation is easily accessible from the CSS Hero website and contains a wealth of tutorials for using each plugin’s settings.
Updates and support are only available for one year after purchase (if you don’t renew your license).
You can continue to use the plugin on sites where you’ve already installed and activated it, however you won’t get updates and the support.
Overall CSS Hero is light-weight, easy to use and takes the pain out of customizing your WordPress theme.
If you already have some skills in design, this plugin will make the process a lot quicker, while users with zero experience can finally customize their sites without paying a fortune in web design fees.
CSS Hero is the authoritative WordPress plugin to effortlessly customize each property of your theme with a simple and instinctive point and click interface.
Buy CSS Hero Plugin
PRICING: Microthemer is premium plugin and comes it two pricing plans. Standard plan costs $45 for up to 3 sites, while Developer plan costs $90.
With Developer pricing plan you can use Microthemer on unlimited number of sites.
Most importantly, unlike CSS Hero which is paid annually, once paid you don’t have to pay anymore. It is one time fee with lifetime updates and support.
NOTE: Themeover will honour free upgrades for life for all customers who purchase Microthemer. In the near future they may switch to an annual licensing model with paid upgrades each year.
Try Free Trial
Microthemer is a live WordPress CSS editor plugin that claims to be compatible with any theme or plugin.
This plugin generates its own CSS for any theme element and keeps it safe regardless theme updates.
Microthemer edits CSS visually on frontend and save changes wherever you want. Changes are visible immediately after save.
Microthemer creates CSS code automatically for selected CSS selector. You are provided with a CSS panel on which you can customize CSS properties of selected element.
It saves created CSS in its own custom folder located in wp-content directory. That makes your custom CSS saved even after plugin deactivation (you can copy and paste CSS styling to your theme style sheet if you wish not to use the plugin in future).
When you click on Microthemer button in backend, you will be redirected to site homepage surrounded by Microthemer interface.
You can navigate to anywhere in site from here and style any element. To target any element, you need to double-click on it.
Microthemer will then ask you to save your CSS style with a custom name and in a custom folder if you wish. Otherwise choose from an existing folder.
You are free to customize any CSS property such as margin, padding, position, background, font type, size, text, gradient etc.
As soon as you change any CSS property, Microthemer will save it and show the change immediately on the live page.
The Microthemer interface sits on top of your website so that you can see your style changes as they happen.
All tools and options are organised into 8 sections.
1. CSS styling groups
Microthemer groups over 80 CSS styling options into 11 categories: font, text, list, shadow, background, dimensions, margins & padding, behaviour, border, position, and gradient.
This section highlights the element (or multiple elements) that the current “selector” targets on your web page. You need to target a page element with a selector before you can restyle it.
3. Selector navigator section
Enables you to easily change between adjacent selectors. A main menu allows for more advanced navigation between selectors in different folders.
4. Code editor
Easily switch into custom CSS code editing using the ACE code editor with syntax highlighting.
5. Help section
Load online documentation from a pop-up window without having to leave the Microthemer interface.
6. General options
Unlock Microthemer, manage global preferences, set your own responsive media queries, define the preview screen width, restore your settings from a previous save point….
7. Responsive media query tabs
Define styles that will only take effect on specific screen widths (e.g. less than 480px, or more than 760px). The slider can be used to preview how your site will look like at different screen widths.
8. Style properties toolbar
Displays individual CSS style properties for each of the 11 styling groups (e.g. font-family, color, and font-size on the “font” option group). This way you can inspect and edit CSS styles in one place.
It means if you deactivate the plugin and copy and paste the created CSS to theme style sheet or any other style sheet that is linked to your website, Microthemer created styles will still work.
Microthemer comes with over 80 CSS styling options. Majority of properties, such as font-family and box-shadow are fairly intuitive to understand without prior CSS knowledge.
Others, like “display” or “float” can take a bit of getting used to.
Microthemer groups various styling options into 11 categories: font, text, list, shadow, background, dimensions, padding and margin, border, behaviour, position and gradient.
If you are not sure if this is right CSS editor plugin for your needs, you can always try free Microthemer trial.
The Microthemer Lite free trial gives you full editing features and customer support.
The only difference is that it limits you to editing/creating 9 ‘selectors’.
A selector targets an individual element on the page (e.g. a button) or a set of elements such as ‘all buttons on a website’. The free trial has no expiry date.
* Customize any theme or plugin (bold claim)
* View in different device modes (desktop, tablet phone)
* Cross-browser styling (even IE6) with the use of CSS3 Pie
* Browse Google fonts and add with a click, but Microthemer only downloads the ones you use
* Edit history
* You can deactivate or completely uninstall Microthemer and still use the styles you created by manually calling the microthemer stylesheet via your functions.php file
* Have to organize a little. Name each selector and put it into a folder of your choice
Your Microthemer styles are completely safe when you update your parent or child theme.
You can deactivate or completely uninstall Microthemer and still make use of the styles it creates by manually calling the active-styles.css stylesheet.
You simply need to add a small code to your theme’s function.php file.
Yes, you can export your work (folders, selectors, styles, hand-coded CSS) in Microthemer using the Export option.
No. Microthemer has been designed for people who don’t know HTML or CSS.
Yes. You can upgrade from the standard to the developer license any time and just pay the difference in cost.
If you are not willing to spend any money or just need some simple CSS editing tasks, you may be interested in free solutions for CSS editing of your WordPress theme.
In that case I have checked some available, free to use, worthy, relatively updated plugins from WordPress repository.
To my surprise there is no many recently updated free alternatives. All I managed to find is below three:
1. SiteOrigin CSS
SiteOrigin CSS is the simple, yet powerful CSS editor for WordPress. It gives you visual controls that let you edit the look and feel of your site in real-time.
Beginners will love the simple visual controls and real-time preview. Advanced users will love the code auto completion that makes writing CSS faster than ever.
2. Microthemer Lite
Microthemer Lite is a free trial that gives you full editing features and the same customer support paying customers receive. The only difference is that it limits you to editing/creating 9 ‘selectors’.
3. WP Live CSS Editor (not updated from 2013 year)
A CSS live Editor that allows you to preview realtime CSS changes and then save your changes. It saves dated backups of each save, so you can go back if it breaks, and you should erase backups once on a while.
If we take price into consideration, Microthemer is the best choice. No recurring charges (one time fee), lifetime support and updates and also they claim that Microthemer can work with every WordPress theme and plugin.
As far as live editing is concerned, CSS Hero may be a bit better. But I havent tested neither plugin extensively so I am probably not best person to say with is better in CSS editing.
From theme and plugin compatibility aspect, if we believe claim that Microthemer is compatible with any theme and plugin, then Microthemer would be the winner.
But that we have to take with a dose of doubt. I am sure both plugins have themes or plugins where they don’t perform well.
If WordPress theme you are using is in CSS Hero compatibility list then it would be smart decision to go with CSS Hero as in that case you can be sure you will be able to edit any aspect flawlessly.
However if you are using a theme or plugin that is not in their list, you may face problems using CSS Hero. In that case, I would recommend Microthemer.
You should probably do a bit of research and see what others are saying about compatibility with your theme for each WordPress CSS editor plugin (if any info at all).
Now over to you. Have you used CSS Hero or Microthemer? What are your thoughts? Let me know in comments below.
If you have used better CSS editor WordPress plugin be sure to post it in comments. If I made any mistake feel free to correct me.
Hello, my name is Matija but everybody calls me Kasa. I started this site to earn lots of money so that I never have to work again. Just lay down on a beach, drinking cocktails day after day while hot, beautiful chicks fight for my attention.Ok, now seriously. I love making websites, especially in WordPress. Hope reading content on this site you will find helpful tips, tutorials, comparisons, and product reviews for your business.
I do agree with the conclusion that Microthemer is the best CSS editor, I would only add – by far !!!
As a theme developer I have used microthemer for more than 2 years now, and it’s my goto tool for css editing. The Developer (Sebastian) is very helpful and very hands on. The really funny thing with this product is that i have not seen a dissatisfied customer yet.
One thing that the article forgot to mention is that you can see all the CSS code that is applied by microthemer (this could also be true with CSS hero), and that can also act as a teaching tool. To be honest, I really learned CSS, specially media queries by the produced css code. The media queries are extremely helpful.
One last thing. I probably have use Microthemer with over 200 themes, and I never encountered any compatibility issues yet. When/if that day comes, I would be really shocked.
With a one time fee of $90 for the dev version, this is a no brainer. In reality though I had a 50% discount code then, so it cost me only $45 – you can’t beat that.
BTW, Siteorigin also has a new CSS editing plugin, but if you are Microthemer user, you can see that this new tool is light years behind microthemer. Siteorigin is a great company though, so if they keep it up, I do predict to make themselves competitive in this area. And yes, their plugin is free, and it’s great if you never used a CSS editing tool before, but for Microthemer users, this is not the plugin to switch over… at least, not just yet.
Thanks for your insights and this extensive post. It is good to hear opinion from long time user.
I didnt know Siteorigin has CSS editing plugin. Dont know how I missed that. Thanks for heads up. I will update my post.
Great article. Afflink activated 🙂
Thanks for support.
Very interesting acrticle. Hard to choose between “Microthemer” and “CSS Hero”. I tried bot demos and for me personally, CSS Hero is easier to use. However, Microthemer offers lifetime updates and support which makes it hard to choose.
By the way, the discount codes dont work anymore. Is it possible to update them?
Thanks for letting me know about discount codes. I will update with new ones.
In the meantime you can find Microthemer Standard plan for only $17 at Mighty Deals.
Also CSS Hero is on 50% off for 2 more days as part of Independence sale.
Yellow Pencil Css Editor – Take a look, nice live Css editor, easy for even begineers
Thanks for letting me know Uma. Looks good.
Do you have a fresh coupon for MicroThemer? I decided on that one after reading your article.
I have contacted Themeover and will update with new coupon as soon as I receive it.
UPDATE: Existing coupon is extended so can be used for discount.
Current ye@r *
Leave this field empty
Add me to your weekly newsletter!
Send this to friend