Plugin Directory

Microthemer Lite – Visual Editor to Customize CSS

Microthemer Lite – Visual Editor to Customize CSS

Opis

A light-weight yet powerful visual editor to customize the CSS styling of any aspect of your site, from Google fonts to responsive layouts. Microthemer caters for both coders and non-coders, and plays really well with page builders like Elementor, Beaver Builder, and Oxygen.

Feature list

  1. Style anything
  2. Use with any theme or plugin
  3. Point & click visual styling
  4. Code editor (CSS, Sass, JS)
  5. Sync code editor with the UI
  6. Customisable breakpoints
  7. HTML and CSS inspection
  8. 150+ CSS properties
  9. Dark or light theme
  10. Custom toolbar layouts
  11. Work with any CSS unit
  12. Color picker with palettes
  13. Slider, mousewheel, keyboard adjustments
  14. In-program CSS reference
  15. History
  16. Draft mode
  17. Global or page-specific styling
  18. Import & export
  19. Light-weight
  20. Minify CSS code
  21. Keyboard shortcuts
  22. Deep integration with Elementor, Beaver Builder, Oxygen
  23. Multisite support
  24. Uninstall MT, but keep your edits
  25. [Pro] CSS grid (drag & drop)
  26. [Pro] Flexbox
  27. [Pro] Stock SVG mask images
  28. [Pro] Transform
  29. [Pro] Animation
  30. [Pro] Transition

Lite VS Pro

This lite version limits you styling 15 things, and doesn’t include the features marked [Pro] in the list above. To unlock the full program, you can purchase a license (monthly, annual, or lifetime).

Useful links

Author note

Hello everyone, my name is Sebastian. I’ve designed Microthemer for developers as well as beginners. My aim is to level up beginners by exposing the CSS code Microthemer generates when using the visual controls. This is of course helpful for developers who may wish to make manual edits. Some developers use Microthemer as an in-browser CSS or Sass editor, and just lean on the interface for element selection or more advanced properties like filters, grid, and animation.

I’ve been happily developing Microthemer and supporting users of varying technical experience in my forum for many years now. I’m always ready to answer questions about the software and help out with CSS hurdles. Please don’t hesitate to get in touch!

Instalacija

  1. Click the ‘Plugins’ menu option in WordPress.
  2. Search for ‘Microthemer’.
  3. Install and activate the plugin.
  4. Go to the ‘Microthemer’ menu option.
  5. Start customizing the appearance of your site.

Recenzije

06. ožujka 2024. 1 odgovor
One of the best CSS styling plugins to use in combination with page builders. There are often times functionalities that needs to be done outside of the builder, but integrated into the overall site as a short code, or custom code and this is where Microthemer really shines. It allows me to tweak and style those elements to match the overall style of the theme and is absolutely fantastic in styling different components that has been integrated/glued together, but still produce the same look & feel. Great developer, awesome community – 11 out of 10, would whole-heartedly recommend.

Wow

06. rujna 2022. 1 odgovor
This is one bad mamajama. It’s a custom CSS plugin on steroids.
06. prosinca 2021. 1 odgovor
Before I discovered Microthemer I used to write custom CSS code, which was okay, but it was very time-consuming to find the exact CSS classes to modify. With Microthemer (Targeting mode turned on) it is very easy to find and change the CSS I need, and I can make simple changes like color, border, position, spacing, sizes etc. and even more advanced stuff like animations within seconds. I needed to modify the standard WooCommerce checkout page and here Microthemer really shines, it took me no time to modify all the things I needed. Great user interface, a lot of features and superb performance. The best part, it is non-destructive because you can easily reset the changes you have made, and all the changes is saved in a separate stylesheet.
31. listopada 2020. 1 odgovor
I used to write custom CSS code in the theme customizer, which is OK for a few small changes, but not for serious CSS coding. MicroThemer is a huge improvement for developers, but it makes styling also easier for people who don’t know much about CSS. It offers a great user interface, a comprehensive feature set and a stunning performance. MicroThemer has become one of my most important tools for styling WordPress websites.
Pročitajte sve 42 recenzije

Suradnici i Programeri

“Microthemer Lite – Visual Editor to Customize CSS” je softver otvorenog koda. Sljedeće osobe su doprinijele ovom dodatku.

Suradnici

“Microthemer Lite – Visual Editor to Customize CSS” je prijeveden na 2 dijalekta. Zahvala prevodiocima za njihov doprinos.

Prevedite “Microthemer Lite – Visual Editor to Customize CSS” na svoj jezik.

Zainteresirani ste za razvoj?

Pregledajte kôd, pogledajte SVN spremišteili se pretplatite na dnevnik razvoja od RSS.

Dnevnik promjena

7.3.1.1 (June 18th, 2024)

Change

  • Global CSS does not load on block editor pages if the blocks are not embedded inside an iframe. Otherwise, the CSS can bleed into the top level WordPress toolbars and panels. Global CSS will still load in the Full Site Editor (FSE) however, which always uses an iframe.

Bugs fixed

  • Microthemer’s global stylesheet could render in the footer if a value for “Stylesheet loading order” was set in the Preferences.
  • Another issue “Stylesheet loading order” being set was that conditional folders always loaded when using the MT interface (when they should have been disabled on certain pages). This is because JavaScript variables were being set before the CSS asset loading had been determined.
  • Microthemer could generate invalid folder logic when styling certain pages inside the Full Site Editor. This resulted in the style appearing for a split second and then disappearing.

7.3.1.0 (June 17th, 2024)

Bugs fixed

  • Global CSS was loading on Edit Post / Page admin screens even if the “Support admin area style loading” preference was set to “No”.

7.3.0.9 (June 17th, 2024)

Bugs fixed

  • Possible PHP error: “mt_rand() expects parameter 2 to be integer, float given”.
  • In some places, the preferences text was too long to display neatly on laptop size screens.

Enhancement

  • Grid gaps are highlighted more explicitly, when CSS grid highlighting is enabled.

7.3.0.8 (June 11th, 2024)

Bugs fixed

  • Possible PHP notice: “Undefined” in Logic.php on line 366.

7.3.0.7 (June 9th, 2024)

Bugs fixed

  • On rare occasions, random data storage keys for responsive styles could be converted to “Infinity”, which made it impossible to add responsive styling.

7.3.0.6 (June 8th, 2024)

Bugs fixed

  • The subgrid setting for grid-template-columns/rows could be lost in the previous update.
  • Grid items were not properly constrained by ancestor grid tracks when using subgrid.
  • Switching selectors to one that has the single grid item view could display the wrong grid fields.
  • Providing row/column line names reduced the maximum number of tracks to less than 24 in the grid controls.
  • Padding was not properly adjusted for when highlighting grid items.

Enhancement

  • A purple dashed line shows implicit grid lines and “subgrid” (if relevant) in the grid control area.

7.3.0.5 beta (May 22nd, 2024)

Change

  • Gutenberg block editor classes are whitelisted now, rather than admin only classes being blacklisted. This should greatly reduce the chance of styling working in the editor but not on the frontend.

Enhancement

  • CSS grid subgrid property value added to grid-template-columns and grid-template-rows.
  • Gutenberg integration extended to KadenceBlocks.

Bugs Fixed

  • Miscellaneous issues with Gutenberg integration when the blocks were not loaded in an iframe.
  • Unique classes were not added to all Gutenberg blocks e.g. blockquotes.
  • Microthemer element overlay highlighting did not scroll with the page under certain circumstances.
  • Option to view the block editor outside of Microthemer added to Exit options.

7.3.0.4 beta (May 13th, 2024)

Enhancement

  • Microthemer’s responsive controls now sync with Generate Blocks’ responsive controls.

7.3.0.3 beta (May 8th, 2024)

Bugs Fixed

  • The Gutenberg integration did work if the block editor was embedded directly into the page, rather than as an iframe. Direct embedding is a legacy method that is implemented when blocks using the old API are present: https://make.wordpress.org/core/2023/07/18/miscellaneous-editor-changes-in-wordpress-6-3/.

7.3.0.2 beta (May 3rd, 2024)

Enhancement

  • The element breadcrumbs reflect the class or id used in the current selector.

Bugs Fixed

  • Possible internal server error when importing CSS from a stylesheet into Microthemer.

7.3.0.1 beta (April 23rd, 2024)

Bugs Fixed

  • Microthemer did not live update CSS style loading when the page template was changed in the editor.
  • When first clicking on the page content in the Site Editor, the body element was selected in the process.
  • Unique classes added to blocks unable to accept them.
  • Editor only classes could be suggested when selecting blocks.

7.3.0.0 beta (March 25th, 2024)

Change

  • Sync browser tabs is enabled by default on new Microthemer installations.
  • Admin asset loading is enabled by default on new Microthemer installations.
  • Global styles also load in the block editor (if admin asset loading is enabled).
  • When Microthemer creates new page specific folders, they also load in the block editor (if admin asset loading is enabled).

Enhancement

  • Deep integration with Gutenberg and the Full Site Editor (FSE). Add content with Gutenberg and style it with Microthemer at the same time, from a single browser tab.
  • Consistent styling between the block editor and the site frontend.
  • Apply responsive styling to Gutenberg blocks. Microthemer tabs sync with the mobile and tablet preview options in the block editor.
  • When selecting block editor elements with Microthemer, the custom class input field is automatically scrolled into view. This makes it easier to add custom or utility classes provided by frameworks like Tailwind, CoreFramework, or ACSS.
  • When loading the Gutenberg editor inside Microthemer, unique classes in the format “mctr-e5i34p” will be added to elements you select (and ancestor elements) to help target blocks precisely and in a way that is consistent between the frontend and block editor. To ensure the HTML markup stays clean, these classes are automatically removed if you do not target them with Microthemer. But if you do reference these classes, Microthemer will auto-save the Gutenberg content to ensure they don’t get lost if you forget to save manually.
  • There is a related option in MT’s preferences to add unique classes to ALL Gutenberg blocks – even when editing outside Microthemer. It’s disabled by default, but you may wish to enable this if you use Microthemer’s full code editor with targeting disabled. Or, you prefer styling rendered Gutenberg blocks on the frontend but want to take advantage of block-specific CSS classes (akin to what page builders output).
  • When styling block theme templates, template parts, patterns, or navigation using the Full Site Editor MT will generate folder logic to ensure that the styles display wherever the content displays. For example, to ensure that MT’s CSS styling for a reusable pricing table pattern is loaded whenever that block is added to a post or page, it will generate folder logic that looks something like this: \Microthemer\has_template(“wp_pattern”, 4654, “Pattern – Pricing”). This will even work if the pricing table is part of another pattern that is added to the page.
  • To ensure Microthemer can check for template/part/pattern/navigation usage reliably and quickly, it maintains a small cache file that can be efficiently checked on the frontend without having to parse blocks on the fly. This means Microthemer can keep CSS asset loading to an absolute minimum without incurring expensive overheads.
  • The “\Microthemer\user_has_role()” logic function for folder loading now accepts a user id as the first parameter, as an alternative to specifying a role name.

Bugs Fixed

  • “editor.session is not defined” JavaScript error that could sometimes display when first loading Microthemer.
  • CSS styling conflict with WP To Buffer Pro plugin where Microthemer select menus had a light background even if in dark theme mode.
  • CSS grid gap properties were not output using shorthand even if both row and column values were provided.

7.2.4.9 (November 22nd, 2023)

Enhancement

  • Browser tab syncing is supported for Gutenberg content changes. Go to Settings > Integrations > Sync browser tabs. This means Microthemer will automatically reload the site preview after making saving a draft or publishing Gutenberg changes. CSS syncing is not supported as yet.

Bugs Fixed

  • When auto-reloading the site to pull in new content from a synced tab, Microthemer was not always resuming the previous browser scroll position.

7.2.4.8 (November 1st, 2023)

Bugs Fixed

  • CSS added to the full code editor also loaded on the admin area, when it should only load globally on the frontend.

7.2.4.7 (October 19th, 2023)

Bugs Fixed

  • Testing folder logic could fail if the theme output HTML content prior to starting the PHP output buffer.
  • Issue with local file system cache displaying outdated inline style tag content.

7.2.4.5 (October 9th, 2023)

Bugs Fixed

  • JS error – “TypeError: e.replace is not a function at Object.custom_to_non_escaped”.
  • JS error – “Uncaught TypeError: Cannot read properties of null (reading ’empty’)”.
  • JS error – “TypeError: Cannot read properties of undefined (reading ‘add’)”.
  • JS error – “Uncaught TypeError: Cannot read properties of undefined (reading ‘split’)”.
  • JS error – “TypeError: Cannot convert undefined or null to object”.
  • JS error – “TypeError: Cannot read properties of undefined (reading ‘interactions’)”.
  • JS error – “TypeError: Cannot read properties of undefined (reading ‘is’)”.

7.2.4.4 (September 6th, 2023)

Bugs Fixed

  • Z-index conflict with CartPops plugin meant Microthemer’s element selection overlays did not display above a shopping cart popup.

7.2.4.3 (September 5th, 2023)

Enhancement

  • New option added to the preferences: “Auto-focus the code editor cursor after selecting an element”. This saves time clicking on the code editor after selecting an element, but can also lead to accidental typing in the editor. Furthermore, there may be some bugs as a result of automatically shifting focus – please report any that you find.
  • Added a “Wireframe mode” option to the Settings > view menu. This gives all elements a semi-transparent gray background and a dashed border. This helps understand the underlying HTML structure of the page, and is useful for identifying elements that cause unwanted overflow on the page, possibly leading to scrollbars appearing in strange places. Microthemer also highlights ::before and ::after pseudo elements – a bit more faded out, so they’re distinguishable from regular elements.

7.2.4.2 (September 1st, 2023)

Bugs fixed

  • Error publishing settings on Cloudways hosting since a recent Cloudways server update. This happened if the “Minify CSS” option was enabled in preferences.

7.2.4.1 (August 3rd, 2023)

Change

  • Automatic error reports only send MT settings for specific errors, even if permission is enabled. I can fix most errors without this additional info, so have switched to a system of explicitly defining errors that should be accompanied by data.

Bugs fixed

  • CSS grid highlighting could linger on when switching between selectors in some cases.

7.2.4.0 (July 31st, 2023)

Bugs fixed

  • Possible error message could display on the frontend if an empty string was passed into a folder logic condition: Cannot parse $parameterString.
  • Microthemer was not targeting draft pages correctly if the Auto folder option was enabled (because the page slug was not yet set).

7.2.3.9 (July 26th, 2023)

Bugs fixed

  • Microthemer did not notify about user JS errors when working with the full code JS editor.

7.2.3.8 (July 25th, 2023)

Enhancement

  • Added a preview link to the error reporting options, so you can see exactly what data MT will send depending on which checkboxes are ticked.
  • Microthemer sends error reports for unique JavaScript errors it discovers on your site while using Microthemer (edge mode is no longer required).

7.2.3.7 (July 18th, 2023)

Change

  • Microthemer does not automatically set the order of selectors within folders when adjusting the selector code, only when selectors are first created (and the Auto folder option is enabled).

Bugs fixed

  • Deleting a design pack did not work if a design pack screenshot had been uploaded.
  • Syncing the editor and UI did not work on certain properties since the 7.2.3.5 update 6 days ago.

7.2.3.6 (July 14th, 2023)

Bugs fixed

  • Responsive tabs did not appear to have an effect in certain in browsers, particularly at odd number breakpoints (e.g. 411) or if the browser zoom was set. This is because of pixel rounding issues browsers can encounter. MT fixes this by settings the site preview width slightly above or below the min/max-width media query values.
  • When switching between styles docked top (with the options horizontally scrolled) and then docked left, the options could appear cropped.

7.2.3.5 (July 12th, 2023)

Bugs fixed

  • When adding comma separated box-shadow values to the single selector code editor, MT tried to sync the values with the UI fields, which stripped away all values after the first comma.

7.2.3.4 (July 11th, 2023)

Bugs fixed

  • Microthemer page-specific folder logic did not work if the page slug had the word “and” / “or” in it.

7.2.3.3 (July 11th, 2023)

Bugs fixed

  • CSS added to the full code editor applied to the WordPress admin area, when viewed inside Microthemer.

7.2.3.2 (July 10th, 2023)

Enhancement

  • A setup screen displays when you first load Microthemer. This supports importing workspace preferences from another MT install, or setting some commonly changed preferences like global !important or Sass support. You can also set up automatic error reporting and watch the top 10 videos, with progress tracking.
  • A new condition function is supported e.g. \Microthemer\has_template(‘bricks’, 215, ‘Header template’). Use the conditions menu to generate this kind of logic. It checks if a page loads a particular template, so your custom Microthemer CSS can follow templates around wherever you place them. Right now, only Bricks templates are supported. Feel free to request more.

Bugs fixed

  • When exporting a design pack, after previously deleting one with the same name, MT presented an error “Create json error”.
  • If Auto folder was enabled, setting a custom folder name in the top toolbar during targeting did not work sometimes.
  • An issue with an exported design pack name being a bit different in the Export screen packs menu.

7.2.2.8 (June 20th, 2023)

Bugs fixed

  • Issue saving custom folder logic when using a custom port number on localhost e.g. localhost:9017. This may have caused other issues as well.

7.2.2.7 (June 19th, 2023)

Bugs fixed

  • Microthemer did not create valid conditional folders when targeting content on single post type pages.

7.2.2.6 (June 9th, 2023)

Change

  • Microthemer used to try to maintain the current folder if it loaded on the page, even if that was at odds with the Global vs Page switch in the footer. Now it honours the switch more strictly. This makes the feature more predictable and solves the issue of accidentally switching between global vs page styles when re-selecting elements that have an existing selector.

7.2.2.5 (June 9th, 2023)

Change

  • GZIP compression on the MT interface is enabled by default. This will make MT load faster, and should not occasionally result in a blank page now that the session issue has been addressed.

Bugs fixed

  • Possible PHP warning about $preferences being defined in Trait and Class.
  • Possible https warning in the console when saving preferences on the standalone page.
  • Compatibility issue with GZIP preference if a PHP session was active, a blank screen was displayed.

7.2.2.3 (June 2nd, 2023)

Bugs fixed

  • When viewing logic settings for a folder with no condition immediately after one that does have a condition, the condition continued to display in the textarea.

7.2.2.2 (June 1st, 2023)

Change

  • Microthemer used to highlight elements in grey if a selector would target the current element, but is in a conditional folder that doesn’t load on the page. This was useful for hinting if you might want to extend the targeting of an existing selector to other pages, but arguably distracting. As it was necessary to use the “Create an additional selector” option fairly frequently. So on balance, I think it’s better not to highlight such selectors in grey. Grey highlighting is now reserved for when you click a non-loading selector in the folders menu (rather than selecting elements on the page).

Bugs fixed

  • Microthemer falsely flagged comma separated :not/:is pseudo selectors as invalid e.g. not:(p, li). Also, MT formatted such comma separated selectors on new lines, which looked messy in the editor.
  • Possible PHP warning after an initial install when viewing site frontend: Warning: Undefined array key ‘initial_scale’.

7.2.2.1 (May 30th, 2023)

Bugs fixed

  • Display issue on the view code tabs if a folder name was fairly long.
  • Custom JavaScript added via the full code view was not loading on the page.

7.2.2.0 (May 25th, 2023)

Enhancement

  • Added links to help videos when displaying the “Folder not loading” warning.

Bugs fixed

  • Two issues if “Stylesheet loading order” preference was set – MT could output the same CSS file again under some circumstances (after the body tag). And Microthemer folders did not always show as faded out in the main menu to indicate when they are not loading.
  • When Microthemer automatically created a folder for the current page, the folder name could be quite long. MT now caps the length at 35 characters, to the nearest whole word.

7.2.1.9 (May 22nd, 2023)

Enhancement

  • Two new conditional loading functions supported:
  • \Microthemer\is_active() – for checking the currently active theme or plugin.
  • \Microthemer\match_url_path() – for testing string or regex pattern match on thr current URL path.

Bugs fixed

  • Folder logic tests failed to run if the “Stylesheet loading order” was set in the preferences.
  • Issues customizing pages with Microthemer if the page didn’t run the wp_footer hook.

7.2.1.8 (May 15th, 2023)

Bugs fixed

  • The previous update caused issues if the ‘load stylesheet in footer’ preference was set.

7.2.1.7 (May 15th, 2023)

Bugs fixed

  • Compatibility issue with Divi theme, whereby Divi styles did not load properly.

7.2.1.6 (May 14th, 2023)

Bugs fixed

  • Use of a PHP $_SESSION in the 7.2.1.4 caused issues for some sites. Microthemer now uses $_COOKIE instead.

7.2.1.5 (May 13th, 2023)

Bugs fixed

  • Jumpy layout shift when MT loads for the very first time.

7.2.1.4 (May 12th, 2023)

Change

  • Asynchronous CSS loads by settings media=”print” initially, rather than rel=”preload”. Preload isn’t supported in IE11, and is slightly less performant than switching the media type.
  • Rolling back to high CSS specificity by default as that may be an adjustment for existing users.

Enhancement

  • New XL2 option added to layout presets. This sets up two columns in left hand sidebar, one for folders another for styles.

Bugs fixed

  • Draft folders (any folder with only one draft (unsaved) selector in it) were being created twice when navigating between site pages because they were mistakenly assessed as not loading on the new page.

7.2.1.3 (May 11th, 2023)

Bugs fixed

  • Microthemer popup screens did not display correctly in yesterday’s release.

7.2.1.2 (May 10th, 2023)

Change

  • Microthemer no longer creates an example selector to target the h1 on the home page.

Bugs fixed

  • The prev/next selector arrows did not update correctly when auto-positioning selectors within folders based on the order they appear on the page.
  • The page-id modifier did not work when set to mtp, on this beta version.
  • Possible issue loading MT.

7.2.1.0 (May 5th, 2023)

Change

  • Conditional folder icons just have an outline, global folders are solid.

Bugs fixed

  • When adding a condition to a folder, the and/or buttons could show instead of the “Add” button.
  • Alignment of Auto-folder context menu.
  • MT was not always highlighting the correct line when showing the source of a Sass compile error.

7.2.0.8 (May 4th, 2023)

Change

  • The “Auto Folder” setting is disabled for users upgrading from previous versions, so that switching to automatic page-specific folders that automatically organise selectors within folders is a deliberate decision.
  • Slight change to the behaviour when switching between global and page styles – the folder only changes if you select an initial folder, or you select the next element on the page. This preserves to opportunity to adjust the “Move current selector” checkbox.

Bugs fixed

  • JS error when using the “Detach preview” feature.
  • Layout shift when Microthemer was initially loading.

7.2.0.7 (May 1st, 2023)

Enhancement

  • If a folder has a condition that effectively makes it global on the frontend or admin area, it is displayed in the Global folders list in the footer.
  • Global and current page options added to the “Add condition” menu.

Bugs fixed

  • Automatic page-specific folders did not work correctly when added to the admin area.
  • Switching to a global folder on the admin side, could default to a frontend only global folder.

7.2.0.6 (April 27th, 2023)

Change

  • The options for leaving Microthemer are only at the bottom right of the interface, they are not in the settings menu anymore.
  • Microthemer’s default selector labels do not include the parent context, to make them a bit shorter and more readable.
  • Microthemer only minifies PUBLISHED CSS and JS files, and those preferences are enabled by default. Draft CSS files are beautified.
  • Microthemer creates an example selector when you first install it – Heading 1.
  • Microthemer generates CSS selectors with low specificity by default. This seems like the best approach when used in combination with the “Auto folder” settings, which is enabled by default (see below).

Enhancement

  • Microthemer automatically organises your selectors into page-specific folders, with no configuration necessary.
  • Switch between global and page-specific styles with a single switch in the footer panel.
  • Or fully disable “Auto folder” by unchecking the checkbox in the footer panel.
  • With “Auto folder” enabled, Microthemer adds selectors to folders in an order that matches the HTML DOM order – the order elements display on the page.
  • With “Auto folder” enabled, Microthemer creates a “below fold” variation of any page-specific folder – if elements are positioned below a height threshold set in Preferences (the default is 1440px).
  • Added UI support for :is and :where pseudo classes.

Bugs fixed

  • The Microthemer shortcut did not display on the frontend.
  • Possible PHP Warning: Undefined array key “global_g_fonts”.
  • Adding a selector to a folder manually was not stored in the history table.
  • Possible file writing error on new installations.

7.2.0.4 (March 16th, 2023)

Enhancement

  • Added basic support for container queries. Add these manually or load a sample set via the media queries screen. Make an element a container using the new “container-type” property in the behavior group. Learn more about container queries here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

7.2.0.3 (March 10th, 2023)

Change

  • When clicking the folder in the top toolbar, the menu scrolls to the current selector in focus, rather than the top of the folder.

Enhancement

  • Microthemer warns you if your folder loading conditions generate a PHP error when testing your logic, and suppresses error reporting on the frontend.
  • Folder icons added to conditional stylesheets in the view generated code window.
  • Unpublished CSS is flagged clearly when viewing a CSS file that only exists as a draft.

Bugs fixed

  • When applying styles to a folder that is not loading due to conditional logic, the “Folder not loading” message could appear many times.
  • The styling of the folder in the top toolbar did not reflect the state of loading on the current page, or if it was conditional.
  • The ‘Folder not loading’ warning did not display when using the CSS grid drag and drop controls.
  • Microthemer uses absolute image paths for background images if the WordPress install directory structure means that the root relative paths it tried to generate are not valid.
  • Microthemer could output empty selectors in CSS it generates, particularly when using the responsive tabs.
  • On the standalone preferences page, the tabs did not work.

7.2.0.1 (March 3rd, 2023)

Bugs fixed

  • Clear logic button did not live update the styles.

7.2.0.0 (March 1st, 2023)

Enhancement

  • Support for conditionally loading CSS on specific pages only.
  • Load a folder’s CSS as an inline style tag or as an external stylesheet that can be loaded asynchronously.
  • Enter one or more PHP-like logical conditions to determine folder loading.
  • Alternatively, search for pages to include or exclude.
  • Optimisation to ensure that there is zero performance gain from deactivating Microthemer and using the code for simply loading frontend assets. The same standalone PHP class is now used for both scenarios.

Bugs fixed

  • Compatibility issue with PHP 8.
  • The viewport meta tag was not added when loading Microthemer assets manually, which could lead to inconsistent results.
  • Microthemer styles were not added to the WP login page when loading Microthemer assets manually.

7.1.6.9 (Jan 17th, 2023)

Bugs fixed

  • When typing “flex-flow: column wrap” (or wrap-reverse) in the single selector editor, Microthemer converted the CSS to “flex-flow: column nowrap”.

7.1.6.7 (Jan 10th, 2023)

Bugs fixed

  • Compatibility issue when loading Elementor 3.10 inside Microthemer – the site preview was tiny.

7.1.6.6 (Jan 10th, 2023)

Bugs fixed

  • Compatibility issue with the Cart Props plugin, the cart drawer elements could not be selected.

7.1.6.5 (Jan 3rd, 2023)

Bugs fixed

  • Compatibility issue with Beaver Builder, which could add dynamic ids starting with yui_3 that changed on each page load. MT was picking up on these ids when suggesting CSS selectors, which quickly became invalid.

7.1.6.4 (Dec 15th, 2022)

Bugs fixed

  • Styles did not display outside of MT for logged in administrators if the auto-publish feature was enabled.

7.1.6.2 (November 29th, 2022)

Enhancement

  • Added shallow integration with Breakdance and OptimizePress.
  • New keyboard shortcut added for beautifying CSS in the code editor: Crtl + Alt + O (the letter O).

7.1.6.1 (November 24th, 2022)

Enhancement

  • Microthemer supports “shallow” integration with five more page builders including Divi, Bricks, Brizy, Zion, and WP Page Builder. This means that Microthemer will auto-reload its CSS in other browser tabs, and reload the site preview if you publish or save draft changes in one of the aforementioned builders. To enable this feature, go to Settings > Integrations > Sync browser tabs.

7.1.6.0 (November 22nd, 2022)

Enhancement

  • Performance improvement when selecting elements. Selection was exceptionally slow when the Query Monitor Plugin was active, because it adds lots of HTML to the page, but the fix for QM should speed selection up in general, especially for page builders. Note, Query Monitor still slows MT even with this update, so try not to leave it active. It’s only meant for temporary performance debugging anyway.

Bugs fixed

  • Error when loading a builder. Uncaught TypeError: Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’.

7.1.5.9 (November 1st, 2022)

Enhancement

  • New preference added “Auto-scroll to the current element, if out of view”. Set this to “No” to disable MT’s default auto-scrolling behaviour.

Bugs fixed

  • The code editor falsely flagged certain :not() selectors as invalid.

7.1.5.8 (October 20th, 2022)

Enhancement

  • Add two more pseudo elements to the CSS modifiers menu.
    ::marker for styling list bullets, and
    ::placeholder for styling input field placeholder text.
  • Added an extra “BB large” media query to the “Beaver Builder MQs” media query set, to match the new breakpoint Beaver Builder added recently.

7.1.5.6 (August 8th, 2022)

Bugs fixed

  • The code editor CSS validation rules were falsely flagging square brackets in :not selectors as invalid e.g. img:not([src$=”.svg”]).

7.1.5.5 (August 2nd, 2022)

Bugs fixed

  • The folder search results area could extend too wide if the folders pane wasn’t docked left.
  • The page-id shortcut in the advanced options / context menu didn’t work.
  • When setting a color value, the history entry was zero (0).

7.1.5.4 (July 25th, 2022)

Bugs fixed

  • Possible JS error when loading Microthemer: Uncaught TypeError: p.getElIndex is not a function.

7.1.5.3 (July 13th, 2022)

Bugs fixed

  • Starter styles could be set to larger than 20px by 20px if the default unit was not pixels.

7.1.5.2 (July 13th, 2022)

Bugs fixed

  • Invalid selector created when selecting ::before or ::after pseudo elements not created using MT.

7.1.5.1 (July 12th, 2022)

Change

  • When editing a selector’s targeting, the CSS properties do not update until the “Update” button is clicked.

Enhancement

  • New starter styles switch added to the selector variation options for ::before and ::after. The starter styles make the element visible as a pink square so it’s easier to position and be confident it has been set properly.
  • Selector variation labels are adapted from the label used by any other variation, thus honouring any custom labels that have been set.

Bugs fixed

  • Selector modifiers like :hover and ::before were not applied to single class or id selectors.
  • Wish Sass enabled, retargeting a selector did not apply the CSS properties immediately (even after clicking the “Update” button).
  • Wish Sass enabled, the HTML pane did not immediately display the ::before or ::after line when creating a pseudo element variation.

7.1.5.0 (July 8th, 2022)

Change

  • MT does not open links in a new tab when holding Ctrl to follow a link during targeting mode, as it did for a brief period …