Best WordPress CSS Editor Plugin? Microthemer vs CSS Hero Comparison

Best WordPress CSS Editor Plugin? Microthemer vs CSS Hero Comparison
25/10/2016

Last Updated

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.

 

Best WordPress CSS Editor Plugin?

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.

 

CSS Hero

best-plugin-for-CSS-customization

 

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.

 

Each button’s functionality:

css-hero-main-toolbar

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 Review – WordPress CSS Editor Plugin

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:

  • Customize your fonts with Google web fonts
  • Change the colors of almost anything
  • Use sliders to change margins, text heights and column widths
  • Select special effects such as gradients, transitions and shadows
  • CSS output is clean and minified
  • Contains a full history of changes should you wish to undo something
  • Responsive preview modes for a range of screen sizes

 

1. How to Use CSS Hero to Customize Your WordPress Theme

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:

best-plugin-for-CSS-customization

 

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  

 

2. Customizing Your Site for Mobile Devices in 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.

 

Customizing-Your-Site-for-Mobile-Devices-in-CSS-Hero

 

You can now edit your site while previewing it for mobile devices. This tool is particularly useful to tweak your theme for handheld devices.

YOU MIGHT LIKE  Stop Spam Registrations In WordPress By Changing Login Path

 

3. How to Undo Changes made in CSS Hero?

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.

 

How-to-Undo-Changes-made-in-CSS-Hero

 

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.

 

CSS Hero Theme Compatibility

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.

 

Plugins 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 Pros and Cons

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 WordPress CSS Editor Plugin FAQ

What can I do with CSS Hero?

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.

What if I made a mistake?

You can always undo or even reset single properties. Personalizations can be erased and the element will revert to the default Theme definition.

What if I dont renew license after a year?

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.

 

CSS Hero Review Final Words

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  

 

Microthemer

edit-CSS-live-on-WordPress-frontend

 

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 Review – WordPress CSS Visual Editor

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

 

Fully Frontend Real-Time CSS Plugin

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.

microthemer-toolbar-overview

 

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.

2. Highlighter

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….

YOU MIGHT LIKE  How To Roll Back WordPress Themes And Plugins To Previous Version with WP Rollback

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.

 

Microthemer doesn’t encrypt the CSS styling that it creates and you are fully free to copy and paste this style anywhere else in the website.

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.

 

 

Microthemer Highlights – Edit CSS Live on WordPress Frontend

  • No Coding Necessary
    No need to be scared of HTML or CSS anymore. In fact, no need to know a bit of code.
  • Customize The Appearance
    No matter what WordPress theme you’re using, Microthemer will be there for you. It lets you customize any WordPress theme or plugin.
  • Edit Directly On Your Website
    Editing options are loaded right on top of your actual website. Just point and click on your site and edit the template!
  • Many New Fonts
    With Microthemer, you can visually browse through fonts within the plugin itself.
  • Roolback History
    Includes revision history, so you can simply roll back to any of the previous 50 revisions if you make a mistake.
  • Responsive Designs for Multiple Devices
    Apply different styling to each specific device size.
  • 80+ CSS Properties
    Plugin comes built with a choice of more than 80 CSS properties to style every element in your theme.
  • Import Feature
    Archive your designs and then import any of them any time. Switching between different designs is very easy.

 

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.

 

microthemer-css-editor-wp-plugin-features microthemer-free-trial wordpress-plugin-css-editor

 

Microthemer Pros and Cons

* 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

 

Microthemer WordPress CSS Editor Plugin FAQ

What happens to the styles added with Microthemer when I update my theme?

Your Microthemer styles are completely safe when you update your parent or child theme.

If I disable or remove the Microthemer plugin after styling a site, will the added styles disappear?

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.

Can I export the stylesheet Microthemer generates and use them on another site?

Yes, you can export your work (folders, selectors, styles, hand-coded CSS) in Microthemer using the Export option.

Do I need to know CSS and HTML to use Microthemer?

No. Microthemer has been designed for people who don’t know HTML or CSS.

Can I upgrade my license?

Yes. You can upgrade from the standard to the developer license any time and just pay the difference in cost.

 

Microthemer vs CSS Hero Comparison

  • Name
  • Themes and Plugins Compatibility
  • Editing on Frontend
  • Ability to Undo Changes
  • Live Preview
  • Customize Site for Mobile Devices
  • Store Presets for Each Theme
  • Distraction Free Mode
  • Free Trial
  • Settings Remain Even After Plugin Deactivation
  • Price
  • CSS Hero
  • Compatible with selected themes and plugins only
    CSS Hero comes with an experimental feature which is currently in beta. It is called Rocket Mode Auto-detection. Rocket Mode tries to guess the CSS selectors from your theme on its own.
  • 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.
  • Microthemer
  • Claims to be compatible with all WordPress themes and plugins.
  • Standard plan costs $45 for up to 3 sites, while Developer plan costs $90. It is one time fee with lifetime updates and support.

 

Best Free WordPress CSS Editor Plugins Alternatives

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.

 

Best WordPress CSS Editor Plugin Final Words

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.

About Article Author

Kasa
Kasa

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.

write a comment

10 Comments

  1. Nick
    June 29, 13:27 #1 Nick

    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.

    Reply to this comment
    • Kasa
      June 29, 23:55 Kasa Author

      Hey Nick,

      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.

      Reply to this comment
  2. miltersen
    August 24, 10:41 #2 miltersen

    Great article. Afflink activated 🙂

    Reply to this comment
  3. Ugene1992
    July 13, 08:37 #3 Ugene1992

    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?

    Reply to this comment
  4. Uma R
    July 15, 12:50 #4 Uma R

    Yellow Pencil Css Editor – Take a look, nice live Css editor, easy for even begineers

    Reply to this comment
  5. Lyllo
    October 04, 12:06 #5 Lyllo

    Do you have a fresh coupon for MicroThemer? I decided on that one after reading your article.

    Reply to this comment
    • Kasa
      October 04, 22:57 Kasa Author

      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.

      Reply to this comment

Add a Comment

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.