This article is aimed especially at those WordPress implementers (who make web pages for their clients based on WordPress) who handle the content manager very well but who are not super programmers at the HTML level or CSS.
It is well known that the good thing about WordPress is that you can build really good and professional web pages without touch one line of code.
This is achieved through the use of templates, page builders or plugins with content prefabricated.
Meet Microthemer, the magic WordPress plugin that allows you to change CSS on your website.
But just like not everyone with a color box and a blank paper knows how to make great drawings and illustrations in full color, the same goes for WordPress, which, as much as it makes your life easier when creating a website, need a lot of practice and knowledge of the tool in order to obtain a convincing result for your clients.
In this article you are going to know a tool that, with very little learning curve, will help you give that extra customization on an aesthetic level who may need your web project, or that of other people.
No more headaches with phones and tablets
When a website is viewed from different devices, surely you already know that it has to be responsive and that it adapts well to all kinds of resolutions.
This responsiveness is achieved thanks to a thing called Media Queries, which is nothing more than “telling” the web that when the resolution is less (or greater) than X (screen size) apply the code that you write in that particular case (this is a very general definition).
Media Queries are useful, not only for a website to be adapted to mobiles, but also to hide or show elements depending on which device the website is visited from.
This is one of the moments that hurts my soul the most is when I spend several hours transforming a design from PhotoShop to WordPress version with my favorite page builder, and for whatever reason there are things that do not finish seeing correctly in lower resolution devices .
Although very little happens, it is one of the key moments in which, for leave me in trouble and go over all the things that I have 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 aspect that I choose, depending on whether the user visits the web via mobile, tablet or computer.
No more prefixes for different browsers
One of the things that annoys the most 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 web when scrolling down.
As you may have guessed … yes! also cover animations in MicroThemer, and also very visually.
The plugin already takes care of “translating” all by itself so that it works in all possible browsers.
CSS of a lifetime
And maybe some tears have already fallen on the keyboard while reading this, because you are a professional of CSS and HTML 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 will stop you when it comes to standing out from the rest.
The plugin will not want at any time 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 is that you can choose how the plugin helps you (Do I have to remind you about the animations in different browsers? :)).
MicroThemer, the CSS solution for your WordPress
Without further ado, I present the insides of this plugin. I’m going to start by talking about who did it, because they have become my best friends since I bought the license (but they don’t know me at all, that they are my best friends I say it rhetorically).
This plugin is developed by a small company called Themeover, based in London (United Kingdom).
Its developers are assembling it quite well, since this plugin is relatively young (is from 2012, “only” 6 years).
Their plugin has been very well accepted by the WordPress community, and they have a version free of it in the official repository.
Let’s go with the hurt of the premium version of the plugin. You already know that I am crazy about premium plugins, because they stand out in how well they are built and the good support they have (for something you pay for it).
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 income, in exchange for offering a good solution to WordPress implementers with multiple clients like me.
I was lucky to catch the plugin in its early stages, where they offered a lifetime subscription for 149 euros in a single payment.
Of course, the developers have seen that the plugin works very well and more and more people are downloading it, and of course, now they have changed the pricing. His current plans are:
- Standard version (annual payment) for 3 sites, for $ 45.
- 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 offer available for life on time.
You just have to be attentive on those dates.
Be careful here those who do not speak English. This plugin comes in English, but quite a few sections are in English (especially the documentation).
But no problem, nothing you see the context of them, 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 English.
I take this opportunity to mention, as always, that I have not received any type of luxury car, or 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 concerns.
And what can this plugin do for us, broadly?
- Helps you customize any WordPress template or plugin.
- It helps a lot with the adaptation of your website to different resolutions (responsiveness).
- It has more than 80 kinds of options to stylize each of the components you select on your website.
- Have a “concealerCSS that always takes care of having a clean and well written code.
- This highly optimized so that it does not suppose an extra load load on your website.
- It is very well integrated with Google Fonts.
- Any changes you make with the plugin, you will see it at real time, before publishing it.
- You can export and import all your settings between different websites with the plugin installed.
Pop-up options menu
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).
- Watch the code that the plugin is generating (both CSS and JavasScript).
- 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 to export your own configuration (and use it on other websites).
- Center help (documentation in English).
Top options menu
In the plugin interface you will find a menu in the upper left, where there are shortcuts to some functions that do not appear in general options. Here I describe them to you, 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 most advanced). Substitute the “little buttons” for those not understood in code.
- Link to a preview of the changes on the site, without having been published yet.
- screen complete (edit without interruption).
- Show hide Names of the icons.
- Show / hide rules measurement.
- Activate “Beaver Builder” mode, since it integrates very well with said page builder.
- Direct access to “highlight”The elements that we have been changing.
- Clean styles or reset all changes (to leave it as at the beginning).
How the plugin works
And after so much theory, you may be wondering how the plugin does its magic. Before moving on to the video, I will simply describe the steps that are usually followed for any change in the CSS using MicroThemer:
- Give to “Target”To select the element that we want to change.
- Select which level that element will be affected (one individual, or all of the same class).
- Create a “selector”And organize it by folders if we want.
- Apply the options desired 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.
By now you will be pulling your hair out and screaming for the plugin to show you in the next video, because you are 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, 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 most advanced.
And this has been all for me, regarding the MicroThemer plugin.
I do not know if you have noticed the passion with which I describe this tool, but it is that 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 blown to pieces by a ThemeForest template, and for which they only want to change a certain section, without spending a fortune on remaking the website.
I hope this article has helped you a lot (even if it has been of little use to me too), and that you have discovered a new tool to use in the day to day of your website or those of your customers.
Do not hesitate to ask me what you need through my website or social networks, and I will be happy to help you with what I can.
A hug and see you next article!