Microthemer, the WordPress plugin to change CSS on your website

Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training

Send up to 1,000,000 emails/year. Mautic Support in Spanish 24 hours, 365 days

This article is aimed mainly at those WordPress implementers (who make web pages for their clients based on WordPress) who are very good with the content manager but who are not super. programmers at the HTML level or CSS.

It is well known that the great thing about WordPress is that you can build really good and professional web pages without play one line of code.

This is achieved by using , or with content prefabricated.

The difficulty comes when you want make a very specific customization on an aesthetic level and you don’t know anything about CSS (what is used for to paint a website).

Meet Microthemer, the magical WordPress plugin that allows you to change CSS on your website.

But just as not everyone with a colored box and a blank piece of paper knows how to make great drawings and illustrations in full color, the same happens with WordPress, which, no matter how much it makes your life easier when creating a website, it takes lots of practice and knowledge of the tool in order to obtain a convincing result for your clients.

In this article you will learn about a tool that, with very little learning curve, will help you to give that extra customization on an aesthetic level that your web project may need, or that of other people.

No more headaches with mobiles and tablets

When a website is viewed from different devices, surely you already know what it has to be responsive and that it adapts well to all kinds of resolutions.

Is responsiveness It is achieved thanks to a thing called Media Querieswhich is nothing more than “telling” the web that when the resolution is less (or greater) than X (screen size) it applies the code that you write in that particular case (this is a very general definition).

Media Queries are useful, not only for making a website adaptable to mobile phones, but also for hiding or showing elements depending on the device from which the website is visited.

This is one of the moments that hurts my soul the most is when I spend several hours transforming a PhotoShop design to a WordPress version with my favorite page builder, and for whatever reason there are things that don’t end up being displayed correctly on lower resolution devices. .

Although very little happens, it is one of the key moments in which, for leave me out of trouble and review all the things I’ve done, I install the MicroThemer plugin and, selecting the element in question in a super easy way (we see it in the video).

I am able to give it the aesthetic appearance that I choose, depending on whether the user visits the website via mobile, tablet or computer.

This plugin is by far the best attendee of Media Queries I’ve seen since I’ve been using WordPress.

No more prefixes for different browsers

One of the most annoying things when writing CSS (for those who know how to do it, you don’t have to know :)) is to take into account the different prefixes depending on the internet browser that the user uses to, for example, make a transition and that a certain object appears on a website when scrolling down.

As you may have guessed… yes! are also covered animations in MicroThemer, and also very visually.

The plugin already takes care of “translating” everything so that it works in all possible browsers.

CSS of a lifetime

And maybe a few tears have already fallen on the keyboard as you read this, because you are a CSS and HTML professional and you realize that every time you do less missing knowing these languages… no! Not at all!.

Do not be tempted to think that in the future you will not need to know how to program…

In fact, it is as if you are a Formula 1 driver driving through any new city. You are more than used to what you do, and nothing is going to stop you when it comes to standing out from the rest.

I tell you all this because MicroThemer offers you a both CSS and Javascript consoleso that you work as you normally would when creating a website from scratch (a level higher than 90% of people in WordPress).

The plugin will never want to hide anything that you cannot recognize based on your experience, what’s more, it saves you time in many aspects, and best of all, it you can choose what the plugin helps you with (do I need to remind you about animations in different browsers? :)).

MicroThemer, the solution for your WordPress CSS

Without further delay, I present to you the innards of this plugin. I am going to start by talking about who has done it, because they have become my best friends since I bought the license (but they don’t know me at all, the fact that they are my best friends I mean this rhetorically).

Developers

This plugin is developed by a small company called themeoverbased in London (UK).

Its developers are doing quite well, since this plugin is relatively young (it’s from 2012, “only” 6 years old).

Their plugin has been very well accepted by the WordPress community, and they have a version free of the same in the .

plans

let’s go with the hurt of the premium version of the plugin. You already know that premium plugins drive me crazy, because they stand out in how well they are built and the good support they have (you pay for something).

Be careful, I am not saying that there are no free plugins or templates that are not good.

I just like that there are people motivated by annual economic income, in exchange for offering a good solution to WordPress implementers with several clients like me.

I was lucky to catch the plugin in its early phases, where they offered a lifetime subscription for 149 euros in a single payment.

Sure, the developers have seen that the plugin works very well and more and more people download it, and of course, now they have changed the pricing. His current plans are:

Standard version (annual payment) for 3 sites, for 45 dollars.
Developer version (annual payment) for unlimited sites, for 90 euros.

Be careful, the annual renewals They are cheaper (27 and 54 euros respectively). And do not rule out the possibility that in periods such as “Black Friday” or “CyberMonday” they will make the lifetime offer available again on time.

you just have to be attentive on those dates.

Spanglish

Be careful here those who do not speak English. This plugin comes in Spanish, but many sections are in English (especially the ).

But there is no problem, unless you see their context, they are easy to understand (and very intuitive). I just wanted to comment that there is a mix of both languages when you have your WordPress installation in Spanish.

I take this opportunity to mention, as always, that I have not received any type of luxury car, nor millions of euros from the creators of the plugin.

My purpose is to show you in a progressive and updated way all the tools that I use for my day to day with WordPress, which will save you time, money, and various worries.

main features

And what can this plugin do for us, broadly speaking?

Helps you customize any template or plugin that is in WordPress.
It helps a lot with the adaptation of your website to different resolutions (responsiveness).
has more than 80 types of options to style each of the components you select on your website.
Have a “concealer” of CSS that takes care of always having a clean and well written code.
Is highly optimized so that it does not suppose an extra load of load in your web.
It is very well integrated with google fonts.
Any change that you make with the plugin, you will see it real timebefore publishing it.
You can export and import all your settings between different websites with the plugin installed.

The options of this plugin are divided into 10 sections. I see them a little more in detail in the video, but here I leave them mentioned:

License: where you enter the plugin unlock code.
general options as for the plugin, the CSS, the language and the way the styles are loaded.
options Media Queries (responsiveness).
options javascript.
Watch the code that the plugin generates (both CSS and JavaScript).
options record of changes (where you can restore the changes at any time you want).
Installation of packages design (pre-configured).
Option for to import a package or style sheet.
Option for export your own configuration (and use it on other websites).
Center aid (documentation in English).

In the plugin interface you will find a menu in the upper left, where there are shortcuts to some functions that They do not appear in the general options. Here I describe them, although we will also see them in the video. Are:

Mode draft (to be able to make changes and publish them, but under a “testing” environment, which will not be seen online yet).
Editor code (for the more advanced). Substitute the “little buttons” for those who do not understand code.
link to one preview of changes to the site, not yet published.
Screen complete (edit without interruptions).
Show hide Names of the icons.
show/hide rulers measurement.
Activate “Beaver Builder” mode, since it integrates very well with said page builder.
Shortcut to “highlight” the elements that we have been changing.
Clear styles or reset all changes (to leave it as before).

How the plugin works

And after so much theory, you may be wondering how the plugin works its magic. Before moving on to the video, I am simply going to describe the steps that are usually followed for any change in CSS using MicroThemer:

Hit “target” to select the element that we want to change.
Select what level that element will be affected (an individual, or all of the same class).
Create a “selector” and organize it by folders if we want.
apply the options to that selector (there are over 80 to choose from).
The configuration is auto-saving. here we can preview the changes, check the generated CSS code, or return to the public part of the web.

Explanatory video

By now you’ll be tearing your hair out and begging for me to show you the plugin in the next video, because you’re passionate about the idea of saving yourself a few hours of CSS to customize your website to your liking or that of your clients (or at less so I imagine you, let me be happy in my own way).

In the video I am going to review the plugin options (without much detail, mentioning them) and make a couple of examples of “changes” in the CSS, in a very simple and intuitive way, and another couple of changes with “pure code”, for the more advanced.

conclusions

And this has been all from my side, regarding the MicroThemer plugin.

I don’t know if you have noticed the passion with which I describe this tool, but it saves my life many times with clients who want to change very specific things on their websites.

It has even helped me to act as a “guardian angel” of the typical website that is in shambles because of a ThemeForest template, and to…