How the Microthemer CSS Editor Plugin Could Change Your Development

It’s always fun to experiment with CSS and website design. But manually fidgeting with colors, buttons, and other thingamabobs can get very old very fast if you want to implement or test something quickly. And that’s why plugins like Microthemer exist.

Microthemer is a visual CSS editor plugin that allows you to see any changes you make to your website as you make them. Its intuitive interface brings the CSS code to the front-end, so all you have to do is literally move page elements around with your mouse.

Microthemer allows you to visualize any CSS changes and makes it easier for you to modify your website’s appearance at the click of a button. But as easy as it sounds, this plugin is not only for WordPress beginners or those suffering from code editing phobias. With features like custom design packs and integrated code editor, Microthemer makes life a lot easier for beginners and pros alike.

Changing Your Website or Plugin Themes with Design Packs

Microthemer allows you to transform your website’s style completely by using design packs.

Microthemer’s design packs contain folders, selectors, hand-coded CSS, and background images that other users have previously created using Microthemer. They’re separated into two types: skins and scaffolds.

Skins

Skins change the appearance of a theme or plugin. Microthemer provides both theme skins and plugin skins—the former changes the appearance of your website’s theme, while the latter allows you to modify your plugins. There are several skins available for popular plugins like Contact Form 7. Plus, Microthemer has a nifty tutorial on importing or exporting your own design pack in its support center.

Once you’ve downloaded a skin through a design pack, you can overwrite existing styles or merge the skin to your existing settings.

The Microthemer import design pack.

Merging is often preferable, because it’s less disruptive. Microthemer simply appends folders, selectors, and custom code in the design pack to your existing settings. Overwriting will replace all previously applied styles.

Scaffolds

Scaffolds don’t change the appearance of anything. According to the Microthemer knowledge base, a scaffold’s purpose is to “scaffold your own design process.”

Microthemer scaffolds contain numerous selectors that target the HTML elements of a specific theme or plugin, but they do not contain any new style rules. Which means that you can input your own styles. As with the skins, you can have theme scaffolds and plugin scaffolds.

You can export scaffolds into design packs the same way you can export skins. To export an existing design pack directly from Microthemer, all you have to do is select the Export option from the Packs menu—this will export any folders, selectors, or hand-coded CSS you want to export into a design pack scaffold.

Scaffolds help by simplifying the design process. Considering most Microthemer scaffolds are made by experienced CSS gurus, they’re a great way to simplify your design process.

Redesigning Buttons (or Anything Else!) with a Click

I have a bit of an obsession with well-designed buttons. I mean, what’s not to like? A nice, interactive button makes the user experience infinitely better. And you can certainly do that in Microthemer.

The way Microthemer works is by modifying CSS selectors. You can append labels to the selectors to make them easier to retrieve and customize.

So, if you want to modify a particular button on your page, you can do the following:

After downloading and activating the plugin, access the Microthemer workspace. Select the button you want to redesign by double-clicking the element or by clicking the Target icon. I’ve chosen to modify this CTA button on my website:

microthemer button

Before modifying anything, you’ll have to create your selecter. Enter your selector name, select the folder you want to create the selector in, as I did below, and click Create Selector.

Once your selector is created, you can change anything you like! For instance, you can change your button’s font:

Microthemer button font
Changing button font.

Or your button’s color:

Microthemer button color change
Changing button color.

Or the size!

Microthemer button width
Changing button size.

By targeting separate elements, you can quickly customize anything on your website without fiddling with individual pieces of code. So not only can you customize buttons, but you can change individual elements and pieces and transform them into whatever you want.

And that certainly makes life a lot easier.

Spicing Up Your Fonts

Okay, so spicy is not exactly how we’d categorize Google fonts—they’d probably fall under more of a practical category. However, a good font makes a big difference to any website. Before you delve into a website’s actual text, the font is what communicates with you first.

Microthemer allows you to easily add Google fonts to your website without any fuss. All you have to do is create a selector for the element you want to create and apply the Google font of your choice.

Once you’ve created your text selector (I called this one “Section Title test”), select the Google Font… option from the drop-down list. Then pick whichever Google font strikes your fancy, and presto!

Microthemer Google Font
Choosing a Google font.

A new Google font for your section title – in just a few clicks.

If you’re curious about the code Microthemer generates, you can access it through the View menu option under Generated CSS & JS. In this case, the font change appears right here:

Microthemer Generate CSS

You can also change the font manually through the Microthemer code editor, which is what we’ll cover next.

Adding Custom Code with the Integrated Code Editor

If you’re very particular about your code, don’t worry—Microthemer has your back.

You can toggle the code editor from the View menu option, which displays the code editor at the top.

So if I want to manually change the font for the same title section, like we did in the previous example, all you’d have to do is create a selector with that section target. Microthemer generates this code automatically when you click the Create Selector button:

Microthemer code editor
The Microthemer code editor.

And enter your custom font change manually.

For example, if I decide to change the font to Arial, I just pop the following code in the Microthemer editor:

And here we go:

Microthemer Code Editor
data-true

Turn Back Time

If you’re an experienced WordPress developer (or any type of developer, really), you know that backups are key. There is nothing worse than that sinking feeling you can’t revert to a previous revision after making a terrible mistake. Luckily, Microthemer is here to make it all better.

Microthemer allows you to quickly and painlessly revert any previous settings to the way they were. So you don’t have to go in and constantly fiddle with your code manually. There is no bigger time suck than fiddling with code.

Microthemer allows you to revert all changes or revert to previous revisions. To view your revision history, all you have to do is select the revision icon. You can view your revision history and revert to a particular point in time:

Microthemer backups
Microthemer backups.

… Or select another restore option, like Clear styles or Reset everything. Once you reset everything, all your settings will be restored to their original status.

Wrapping Up

Visual CSS editors like Microthemer are not a revolutionary concept. However, when done right, an efficient plugin like Microthemer can become an asset for any WordPress developer. Making changes at the click of a button is always an appealing concept if you’re constantly pressed for time.

Of course, you can always overhaul your entire website’s CSS yourself if you’ve got the skills. But isn’t it nice to know there are other options meant to make your life easier?

Ioana Dragnef
Have you ever used Microthemer or any other visual CSS editor? Do you have a go-to plugin that you use to edit your site’s CSS or do you prefer coding manually? Let us know in the comments below.

23 Responses

  • I have both Microthemer and CSS Hero. I like both. I’ve been using Beaver Builder lately and Microthemer has recently embraced Beaver Builder with special options.

    Microthemer provides some code you can add to your child theme Functions.php file which allows you to deactivate or delete the Microthemer plugin and still have the generated CSS work. You can also download the CSS.

    For me, the most frustrating part of CSS is identifying the target item to modify. And, not knowing if it will affect other pages. Both Microthemer & CSS Hero make it fairly easy to select the item to modify and drill down (or up) for precise selectors. Much faster than using Chrom Inspector.

    Microthemer makes it easy to modify elements on a page or site, then, if you want, you can add a little code to your function.php file and delete the plugin (may be good to do on client sites). Once you get used to targeting items, naming them, and understanding the icons and layout of Microthemer, using CSS to style your site is easy.

    I’ll have to go to Microthemer site to learn more about Scaffolds and Skins. I need visuals to help me understand. After reading the post, I was still a little confused.

    Thanks for this article!

    • Thanks for helping explain how to use Microthemer styles after deactivating/uninstalling it @BobfromCA.

      I’m glad you like the deep Beaver Builder integration that was recently added. The free skins for contact form 7 are tucked away under ‘My Account’ in lieu of a new marketplace for people to share and sell skins for popular themes and plugins. But I keep postponing it in favour of new Microthemer features, as that’s what customers call for the loudest. That’s probably why you haven’t heard much about them.

      Skins can be very useful for personal use however. Microthemer’s import and export features make it easy to build your own library of skins. Devs often do this to work more closely with designers. A dev creates selectors in Microthemer to target elements on the page. And then the designer makes style changes via Microthemer’s GUI options. Also, Microthemer’s ‘Draft mode’ makes it possible for the designer to experiment on live sites without affecting what site visitors see, until they’re ready to publish.

      I hope that clarifies things a bit. I will do a video guide of skins and scaffolds when we roll out the marketplace :)

    • Hi Bob,

      Thanks for reading! I wanted to keep it brief on scaffolds and skins, since they could probably warrant an entire topic on their own. Microthemer has a more in-depth topic about it, which you can read here.

      Basically, scaffolds contain various ready-made selectors that target specific HTML elements of a theme or plugin. So if you install a specific scaffold pack associated with a particular theme, you won’t have to create your own selectors. It just simplifies the process. Scaffolds can be theme or plugin-specific.

      Skins change whatever plugin or theme they’re associated with. So, if I download a skin pack associated with a particular theme (let’s say TwentySixteen), then maybe that skin was designed to turn all the theme’s button elements from black to blue. Or maybe all the TwentySixteen hyperlinks change colour once you hover over them after installing that skin.

      Hope that helps!

      Cheers,
      Ioana

  • Thank you Loana for this article.

    Although this is a very nice plugin, i would recommend and prefer “Yellow Pencil Visual Style Editor” from waspthemes in codecanyon. “Yellow Pencil” do all the stuff Microthemer do while keeping it rather clean, also like that i can move easily the elements on my website and it just seems perfect for me in every way. Is worth mentioning that Yellow Pencil is a premium plugin, while Microthemer would be a perfect solution for a free plugin, if you can spend some $20, get Yellow Pencil , you will not regret it.

    Also since i am more familiar with css coding i am begging to use “Simple Custom CSS and JS” is a nice way to add custom coding while keep it organized. Of course this last plugin beats the purpose of this article.

    Cheers!

  • Hey Tony,

    The Lite version doesn’t expire after a period of time like other free trials. It just limits the number of selectors you can create (to target things on the page) to 15. And doesn’t include GUI flexbox fields. So if money if is factor, you might find the Lite version useful for minor CSS tweaks.

    Some videos that show Microthemer in action:

    – Microthemer overview: http://themeover.com/videos/?name=gettingStarted
    – Microthemer & Beaver Builder: http://themeover.com/videos/?name=bbmt
    – Learn flexbox with Microthemer: http://themeover.com/videos/?name=flexbox

    Thanks!
    Sebastian

  • Thanks for this review. Modifying CSS is always such a pain. Please regard my questions here as a lack of deeper understanding of the topic, not negativity.

    By adding styling to the bottom of the style calculation, it seems like this plugin is designed to give us the final say on what’s in a theme style, versus modifying the styling of a theme CSS. I know this results in separate and portable CSS but it also results in more code = more for the browser to process. I know there is already a ton of CSS thrown out to the CSS and I wish there was a good way to minimize that (not the bytes but down to the final styling of each element). But it seems like this isn’t a way of changing the styling so much as just overloading whatever is there. I’m fine with whatever works, just trying to understand it.

    As to portability, there are standard classes for WP but since themes have their own class names then the reality of portability will likely become evident when loading a new theme where all of the names are different from the ported styles. That limits the value of anything ported to just the WP defaults. Am I just imagining a problem that doesn’t exist?

    Finally, does this tool or any others like it handle SASS or LESS? It’s nice to be able to style individual elements with a color or font, but much better if we could use a generic name to mean “make this whatever the standard value is for this type of element”. I’d guess this would be a v2 or Premium feature.

    • Hello Tony,

      I hope you are well today. Let me see if I can clarify a little bit here.

      But it seems like this isn’t a way of changing the styling so much as just overloading whatever is there. I’m fine with whatever works, just trying to understand it.

      Well, you’re not wrong here. However, please keep in mind that this is essentially how the Additional Styles feature in the native WordPress Customizer works. It loads its styles after all other styles have been parsed. Numerous other plugins and theme Custom CSS functions work the same. The difference here is the UI that is used to generate the CSS that overrides the native and default theme CSS. This UI is more intuitive and requires less knowledge of CSS to work, making it great for less experienced users.

      More experienced users/designers/developers would usually forego any such plugins/features and make our modifications to our custom child theme, thus reducing code load. But not everyone wants to get their hands dirty under the hood. This plugin saves them that dirty work. ;-)

      That limits the value of anything ported to just the WP defaults. Am I just imagining a problem that doesn’t exist?

      Yes and no. For instance… Say you have a libarary of plugins you use as a standard offering to the majority of your clients. Also consider that you’ve done some extensive branding to differentiate your WP installs from the run of the mill. In this scnerio, it’s easy to see where the portability of the code would be quite useful. If you use a specific set of themes (ex: Divi, GeneratePress, Genesis) for the majority of clients, you could load some preferred defaults (again to diferentiate your “default” offering) thus saving coding time.

      Finally, does this tool or any others like it handle SASS or LESS?

      From the developers site, as of July 2015 (version 4):

      An updated custom code editor with support for SASS, SCSS, Javascript, and jQuery code

      So, yes, yes it does. :-)

      I hope this clarifies a bit.

      Best regards,

      James Morris

  • James, thanks for your great response. I couldn’t have answered Tony’s questions better myself.

    Tony – just to add to what James said about SASS. Microthemer does support SASS code, but not out of the box. You need to enable support for SASS via the Preferences > CSS/SCSS options. Once you’ve done this, the code editor will recognise SCSS syntax, and Microthemer will compile any SASS code to regular CSS code.

    LESS isn’t currently supported.

    Thanks,
    Sebastian

  • @Julius, I haven’t tested Microthemer with Upfront yet as I don’t have a WPMU membership. I’ll see if I can sort something with WPMU.

    Many people do use Microthemer with other page builders however. Particularly Beaver Builder. Given the volume of mutual customers that were using the two plugins together of their own accord, I set about implementing a deeper integration between Microthemer and Beaver Builder. I explain the possibilities and workflow in the video tutorial on the following page: https://themeover.com/beaver-builder-and-microthemer-winning-combo/

    Microthemer specialises in GUI fields for CSS properties. So it goes beyond the default styling properties included in Beaver Builder. It also makes adding global site wide styles easier (as well as page-specific styles). And so it’s popular among page builder uses that want an in-browser CSS tool to complement their in-browser page builder.

    Following the deeper integration with Beaver Builder, users can add content with drag and drop and apply CSS via the SAME BROWSER WINDOW – by loading Beaver Builder inside Microthemer. I’m part way through implementing this same level of integration with Elementor. And would happily do this for Upfront, assuming Microthemer can fill some gaps in upfront’s CSS styling options.

    Thanks,
    Sebastian

Comments are closed.