There are some cases when we need 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 like Elementor, WPBakery, Beaver Builder or Divi.
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.
This really is possible and two plugins are excellent options for these cases – Microthemer and CSS Hero. But which one is better? To determine that I have compared Microthemer vs CSS Hero features so you can decide for yourself depending what you need from a WordPress CSS editor plugin.
Table of Contents
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.
Microthemer vs CSS Hero Comparison
When it comes to choosing Microthemer or CSS Hero, the best choice will depend on your specific needs and preferences. Both plugins offer a range of tools for customizing site styles, and both include a visual editor and a code editor for writing custom CSS.
If you’re looking for a simple and intuitive CSS editor with a range of pre-designed elements, CSS Hero is a great choice. If you’re looking for a more powerful CSS editor with a range of advanced features, Microthemer is a solid option.
- CSS Hero
- Compatible with selected themes and plugins only
- Pricing plans start at $29/year and there is one lifetime plan that costs $599.
- 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
- Visual Editor
- Code Editor
- Custom Selectors
- CSS Animations
- Custom Fonts
- Custom Color Palettes
- Export/Import Settings
- Global CSS Override
- Settings Remain Even After Plugin Deactivation
- Free Trial
- Claims to be compatible with all WordPress themes and plugins.
- Comes in annual and lifetime plans. Annual start from $49/yer and lifetime from $125.
NOTE: I have compared CSS Hero and Microthemer 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 Review
CSS Hero is a powerful WordPress plugin that provides users with an intuitive, visual interface for customizing their website’s styles. It allows users to easily modify the look and feel of their site without needing to write any CSS code.
With CSS Hero, users can change things like font styles, colors, background images, and more, all with just a few clicks. This makes it an excellent choice for website owners who want to make their site look unique and professional without having to learn CSS.
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. There is also lifetime plan for $599.
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.
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 packed with CSS editing features.
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:
- Main Editor Trigger – It edit’s any element on the page.
- 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.
- 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.
- Presets – It is a set of options saved and stored. The user can store unlimited presets for each theme.
- Tools – This icon helps the user to reset the settings to theme default, clear the history or show generated CSS.
- Social Media Sharing – This icon is made for sharing CSS Hero plugin on social media.
- Full Screen Mode – This feature takes you to full screen editing mode.
- Shutdown Mode – Turn off the CSS Hero plugin and get back to the normal browsing.
How CSS Hero Works?
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
How To Customize Site With CSS Hero?
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.
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.
Customizing Site For Mobile Devices
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.
How To Undo Changes?
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 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.
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 & 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 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 Verdict
CSS Hero is a powerful and user-friendly WordPress plugin that provides users with an intuitive, visual interface for customizing their website’s styles.
It is an excellent choice for website owners who want to make changes to their site’s styles without having to write any CSS code.
CSS Hero provides a live preview feature, making it easy to see the changes in real-time, and saves time compared to manually writing CSS code.
However, it also has some limitations, such as limited customization options, potential compatibility issues, and limited access to CSS code. In the end, whether or not CSS Hero is right for a you will depend on their specific needs and the type of customization you want to do on your site.
Microthemer is another popular WordPress plugin that provides users with an advanced CSS editor for customizing their website. Microthemer goes beyond just providing a visual interface and allows users to write their own CSS code.
It has a powerful CSS editor that includes features like code highlighting, autocompletion, and error checking, making it ideal for users who want more control over their website’s styles.
Microthemer also offers a wide range of pre-designed CSS themes, so users can quickly apply new styles to their site with just a few clicks.
This combination of visual interface and advanced code editor makes Microthemer a versatile and flexible tool for anyone looking to customize their WordPress site.
PRICING: Microthemer comes in free and paid version. Paid plans start from $49/year or $125 if you go with lifetime plan .
How Does Microthemer Work?
Microthemer works by providing you with a visual interface for customizing the styles of your WordPress website, while also allowing you to write CSS code if needed.
When you activate Microthemer, it automatically scans the site to create a list of selectors. The selectors are then used to target specific elements on the site, such as the body, headings, or links, and apply styles to those elements.
You can choose to make changes to site’s styles using either the visual interface or the CSS code editor.
The visual interface allows users to make changes by selecting elements and using sliders, color pickers, and other tools to adjust styles. Meanwhile, the CSS code editor provides you with a powerful tool for writing CSS code, with features like code highlighting, autocompletion, and error checking.
Once you have made the desired changes to site’s styles, save work, and the changes will be immediately applied to the live site.
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.
- 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.
- 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.
- Selector navigator sectionEnables you to quickly change between adjacent selectors. A main menu allows for more advanced navigation between selectors in different folders.
- Code editor – Easily switch into custom CSS code editing using the ACE code editor with syntax highlighting.
- Help section – Load online documentation from a pop-up window without having to leave the Microthemer interface.
- 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, etc.
- 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.
- 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.
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 Pros & Cons
Here are some advantages and disadvantages of using Microthemer:
- Customize any theme or plugin (bold claim)
- View in different device modes (desktop, tablet phone)
- Cross-browser styling
- 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
- Pricing plan with developer license and lifetime usage
- Live preview conflict with some themes or plugins
Here are some most frequently asked questions regarding Microthemer.
|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.
|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 Summary
If you are looking for a comprehensive CSS editor for your WordPress website, Microthemer is definitely worth considering. With its combination of visual interface and advanced CSS code editor, it provides you with a flexible and versatile tool for customizing your site’s styles.
Whether you prefer to make changes using the visual interface or writing CSS code, Microthemer has you covered.
However, it may not be suitable for users who are only looking for a simple visual interface for customizing styles and don’t need advanced CSS editing capabilities. 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.
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.
Ultimately, the choice of whether Microthemer is the right tool for you will depend on your specific needs and the level of customization you want to do on your site.
CSS Hero & Microthemer Alternatives
If CSS Hero and Microthemer are not what you are looking for, there are few paid and free alternatives that you could use.
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.
It is a visual CSS editor that provides users with an intuitive interface for customizing the styles of their WordPress site. Yellow Pencil offers a range of tools for designing and customizing site styles, including a visual editor, CSS code editor, and a library of pre-designed elements.
One of its key features is the ability to make real-time changes to the site and preview them instantly, making it a versatile and user-friendly tool for customizing site styles.
Overall, Yellow Pencil is a solid option for WordPress users looking for a visual CSS editor with a range of features and an intuitive interface.
Which CSS Plugin To Choose?
So which is better when comparing Microthemer vs CSS Hero?
If we take price into consideration, both plugins are almost the same when it comes to pricing plans. Microthemer might be little better as it provides more lifetime plans for users who wish to pay once and use forever.
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).
DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you. Read more about it here.