{"id":167084,"date":"2017-08-17T13:00:47","date_gmt":"2017-08-17T13:00:47","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=167084"},"modified":"2022-04-07T01:19:38","modified_gmt":"2022-04-07T01:19:38","slug":"microthemer-plugin","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/microthemer-plugin\/","title":{"rendered":"How the Microthemer CSS Editor Plugin Could Change Your Development"},"content":{"rendered":"<p>It\u2019s 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\u2019s why plugins like Microthemer exist.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/microthemer\/\" target=\"_blank\">Microthemer<\/a> 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.<\/p>\n<p>Microthemer allows you to visualize any CSS changes and makes it easier for you to modify your website\u2019s 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.<\/p>\n<p>Continue reading, or jump ahead using these links:<\/p>\n<ul>\n<li><a href=\"#design-packs\">Changing Your Website or Plugin Themes with Design Packs<\/a><\/li>\n<li><a href=\"#redesigning-elements\">Redesigning Buttons (or Anything Else!) with a Click<\/a><\/li>\n<li><a href=\"#spicing-up-your-fonts\">Spicing Up Your Fonts<\/a><\/li>\n<li><a href=\"#adding-custom-code\">Adding Custom Code with the Integrated Code Editor<\/a><\/li>\n<li><a href=\"#revert-changes\">Revert Changes<\/a><\/li>\n<\/ul>\n<h2 id=\"design-packs\">Changing Your Website or Plugin Themes with Design Packs<\/h2>\n<p>Microthemer allows you to transform your website\u2019s style completely by using design packs.<\/p>\n<p>Microthemer\u2019s design packs contain\u00a0folders, selectors, hand-coded CSS, and background images that other users have previously created using Microthemer. They\u2019re separated into two types: skins and scaffolds.<\/p>\n<h3>Skins<\/h3>\n<p>Skins change the appearance of a theme or plugin. Microthemer provides both theme skins and plugin skins\u2014the former changes the appearance of your website\u2019s 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 <a href=\"https:\/\/themeover.com\/installing-importing-design-packs\/\" target=\"_blank\">nifty tutorial<\/a> on importing or exporting your own design pack in its support center.<\/p>\n<p>Once you\u2019ve downloaded a skin through a design pack, you can overwrite existing styles or merge the skin to your existing settings.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-importdesignpack-1.png\" alt=\"Microthemer plugin\" width=\"600\" height=\"279\" \/><figcaption class=\"wp-caption-text\">The Microthemer import design pack.<\/figcaption><\/figure>\n<\/div>\n<p>Merging is often preferable because it\u2019s 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.<\/p>\n<h3>Scaffolds<\/h3>\n<p>Scaffolds don\u2019t change the appearance of anything. According to the Microthemer knowledge base, a scaffold\u2019s purpose is to \u201cscaffold your own design process.\u201d<\/p>\n<p>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. This means that you can input your own styles. As with the skins, you can have theme scaffolds and plugin scaffolds.<\/p>\n<p>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\u2014this will export any folders, selectors, or hand-coded CSS you want to export into a design pack scaffold.<\/p>\n<p>Scaffolds help by simplifying the design process. Considering most Microthemer scaffolds are made by experienced CSS gurus, they\u2019re a great way to simplify your design process.<\/p>\n<h2 id=\"redesigning-elements\">Redesigning Buttons (or Anything Else!) with a Click<\/h2>\n<p>I have a bit of an obsession with <a href=\"https:\/\/wpmudev.com\/blog\/microinteractions-wordpress-ux\/\" target=\"_blank\">well-designed buttons<\/a>. I mean, what\u2019s not to like? A nice, interactive button makes the user experience infinitely better. And you can certainly do that in Microthemer.<\/p>\n<p>The way Microthemer works is by modifying CSS selectors. You can append labels to the selectors to make them easier to retrieve and customize.<\/p>\n<p>So, if you want to modify a particular button on your page, you can do the following:<\/p>\n<p>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\u2019ve chosen to modify this CTA button on my website:<\/p>\n<div  class=\"wpdui-pic-small   \" ><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-ctabutton.png\" alt=\"microthemer button\" width=\"420\" height=\"210\" \/><\/div>\n<p>Before modifying anything, you\u2019ll 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.<\/p>\n<p>Once your selector is created, you can change anything you like! For instance, you can change your button\u2019s font:<\/p>\n<p style=\"text-align: center;\"><video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-buttonfont-sm.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-buttonfont-sm.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<p style=\"text-align: center;\"><small>Changing button font.<\/small><\/p>\n<p>Or your button\u2019s color:<\/p>\n<p style=\"text-align: center;\"><video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-buttoncolor-sm.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-buttoncolor-sm.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<p style=\"text-align: center;\"><small>Changing button color.<\/small><\/p>\n<p>Or the size!<\/p>\n<p style=\"text-align: center;\"><video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-buttonwidth-sm.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-buttonwidth-sm.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<p style=\"text-align: center;\"><small>Changing button size.<\/small><\/p>\n<p>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.<\/p>\n<p>And that certainly makes life a lot easier.<\/p>\n<h2 id=\"spicing-up-your-fonts\">Spicing Up Your Fonts<\/h2>\n<p>Okay, so spicy is not exactly how we\u2019d categorize Google fonts\u2014they\u2019d 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\u2019s actual text, the font is what communicates with you first.<\/p>\n<p>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.<\/p>\n<p>Once you\u2019ve created your text selector (I called this one &#8220;Section Title test&#8221;), select the <strong>Google Font\u2026<\/strong> option from the drop-down list. Then pick whichever Google font strikes your fancy, and presto!<\/p>\n<p style=\"text-align: center;\"><video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-googlefont-sm.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-googlefont-sm.mp4\" type=\"video\/mp4\"><\/video><\/p>\n<p style=\"text-align: center;\"><small>Choosing a Google font.<\/small><\/p>\n<p>A new Google font for your section title \u2013 in just a few clicks.<\/p>\n<p>If you\u2019re curious about the code Microthemer generates, you can access it through the <strong>View<\/strong> menu option under <strong>Generated CSS &amp; JS<\/strong>. In this case, the font change appears right here:<\/p>\n<div  class=\"wpdui-pic-small   \" ><img loading=\"lazy\" decoding=\"async\" class=\"attachment-420x420 size-420x420 aligncenter\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-generatecss.png\" alt=\"Microthemer Generate CSS\" width=\"420\" height=\"85\" \/><\/div>\n<p>You can also change the font manually through the Microthemer code editor, which is what we\u2019ll cover next.<\/p>\n<h2 id=\"adding-custom-code\">Adding Custom Code with the Integrated Code Editor<\/h2>\n<p>If you\u2019re very particular about your code, don\u2019t worry\u2014Microthemer has your back.<\/p>\n<p>You can toggle the code editor from the <strong>View<\/strong> menu option, which displays the code editor at the top.<\/p>\n<p>So if I want to manually change the font for the same title section, like we did in the previous example, all you\u2019d have to do is create a selector with that section target. Microthemer generates this code automatically when you click the Create Selector button:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-codeeditor-1.png\" alt=\"Microthemer code editor\" width=\"600\" height=\"165\" \/><figcaption class=\"wp-caption-text\">The Microthemer code editor.<\/figcaption><\/figure>\n<\/div>\n<p>And enter your custom font change manually.<\/p>\n<p>For example, if I decide to change the font to Arial, I just pop the following code in the Microthemer editor:<\/p>\n<p><span style=\"font-weight: 400;\"><div class=\"gist\" data-gist=\"564439ae4b85ea10bf46f303e27cc8bc\" data-gist-file=\"change font\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/564439ae4b85ea10bf46f303e27cc8bc.js?file=change+font\">Loading gist 564439ae4b85ea10bf46f303e27cc8bc<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div><\/span><\/p>\n<p>And here we go:<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050 size-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-newfontarial.gif\" alt=\"Microthemer Code Editor\" width=\"934\" height=\"338\" \/><figcaption class=\"wp-caption-text\">data-true<\/figcaption><\/figure>\n<\/div>\n<h2 id=\"revert-changes\">Revert Changes<\/h2>\n<p>If you\u2019re 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\u2019t revert to a previous revision after making a terrible mistake. Luckily, Microthemer is here to make it all better.<\/p>\n<p>Microthemer allows you to quickly and painlessly revert any previous settings to the way they were. So you don\u2019t have to go in and constantly fiddle with your code manually. There is no bigger time suck than fiddling with code.<\/p>\n<p>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:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/08\/microthemer-backups.png\" alt=\"Microthemer backups\" width=\"600\" height=\"420\" \/><figcaption class=\"wp-caption-text\">Microthemer backups.<\/figcaption><\/figure>\n<\/div>\n<p>&#8230; Or select another restore option, like <strong>Clear styles<\/strong> or <strong>Reset everything<\/strong>. Once you reset everything, all your settings will be restored to their original status.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>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\u2019re constantly pressed for time.<\/p>\n<p>Of course, you can always overhaul your entire website\u2019s CSS yourself if you\u2019ve got the skills. But isn\u2019t it nice to know there are other options meant to make your life easier?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s 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\u2019s why plugins like Microthemer exist. Microthemer is a visual CSS editor plugin that allows you to see any changes [&hellip;]<\/p>\n","protected":false},"author":571550,"featured_media":167104,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[],"class_list":["post-167084","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/167084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/571550"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=167084"}],"version-history":[{"count":11,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/167084\/revisions"}],"predecessor-version":[{"id":209991,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/167084\/revisions\/209991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/167104"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=167084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=167084"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=167084"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=167084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}