There are some cases when we need WordPress CSS editor plugin. For example, when we are using a WordPress 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 complicated. Especially for someone new to WordPress or someone who doesn’t know how to work with the code.
Another example is logo position and size. Many themes don’t offer custom logo position and resizing. This can be a big headache if you are not a pro in CSS and HTML.
This is where CSS customizer plugins step in and make possible to edit CSS live on WordPress frontend. These plugins keep changes saved in a database that doesn’t get erased with theme updates or even after removing WordPress CSS editor plugin.
If you are running WordPress website, and you are not a CSS expert, an excellent WordPress CSS plugin can come in handy. Usually, people use in-built browser option called “inspect element” to find out CSS selectors for a particular element or install page builder plugin.
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 the database that could be exported anywhere.
And this really is possible with below-mentioned plugins. CSS Hero and Microthemer. But which one is better? To determine that I have compared their features so you can decide for yourself depending what you need from a WordPress CSS editor plugin.
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? And not just that. But to also have the ability to see the changes you make immediately, all without not 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, a 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.
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.
CSS Hero Review
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 a 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 the frontend. When you activate CSS hero, it shows a pop-up window on the 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, etc.
You can even mark provided CSS value as important to override any existing style for that element.
Each button’s functionality:
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.
As already mentioned, 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 live visual 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 just 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 WYSIWYG (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.
2. Customizing Your Site for Mobile Devices with 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.
3. How to Undo Changes made in CSS Hero?
Here comes Undo/Redo – History icon into play. One of the 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 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. Just 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 a list of compatible themes. The list is continually 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 attempts 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 straightforward 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.
The plugin comes with extensive documentation and video tutorials in CSS Hero Academy section. CSS Hero 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.
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.
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.
PRICING: Microthemer is a 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 an unlimited number of sites.
Most importantly, unlike CSS Hero which is paid annually, once paid you don’t have to pay any more. It is a one-time fee with lifetime updates and support.
NOTE: Themeover will honor 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.
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 the frontend and saves 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 the backend, you will be redirected to site homepage surrounded by Microthemer interface. You can navigate to anywhere in the 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 organized into eight 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 quickly 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.
Microthemer doesn’t encrypt the CSS styling that it creates, and you are entirely 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. The majority of properties, such as font-family and box-shadow are relatively 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, behavior, position, and gradient.
Microthemer Highlights – Edit CSS Live on WordPress Frontend
Here are some important features in Microthemer:
- 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 site. 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.
- Rollback 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 anytime. 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 Plugin 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
- Pricing plan with developer license and lifetime usage
- Live preview conflict with some themes or plugins
Microthemer WordPress CSS Editor Plugin FAQ
Q: What happens to the styles added with Microthemer when I update my theme?
A: Your Microthemer styles are completely safe when you update your parent or child theme.
Q: If I disable or remove the Microthemer plugin after styling a site, will the added styles disappear?
A: 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.
Q: Can I export the stylesheet Microthemer generates and use them on another site?
A: Yes, you can export your work (folders, selectors, styles, hand-coded CSS) in Microthemer using the Export option.
Q: Do I need to know CSS and HTML to use Microthemer?
A: No. Microthemer has been designed for people who don’t know HTML or CSS.
Microthemer Review Final Words
MicroThemer is a powerful WordPress plugin from ThemeOver that lets you customize your themes visually. Described as a “WordPress theme options on steroids,” it’s a great plugin for those of you who aren’t comfortable modifying themes using CSS and HTML.
Microthemer recently got a massive update (May 2017) called Microthemer 5. It brings many new options and improves one already implemented. This CSS editor plugin is easy to use. You may need time to get used to it, but once you do, you can do wonders on your WordPress site.
Documentation is extensive, and there are many videos to help you. I highly recommend Microthemer for any CSS changes on the site.
PS: Microthemer is also compatible with popular page builder plugin, Beaver Builder.
Microthemer vs CSS Hero Comparison
I have compared Microthemer vs CSS Hero based on their core features. Each of these plugins has many more options available.
Be noted that some features may become removed or added so always check the official site for most accurate information.
- CSS Hero
- Compatible with selected themes and plugins only
- 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.
- 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
- 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:
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 like the code auto completion that makes writing CSS faster than ever.
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 the 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 haven’t tested either plugin extensively so I am probably not the 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 on 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.