Microthemer 5 – Better Targeting

We’re delighted to announce the release of Microthemer 5. You can update via your WordPress dashboard now. This article details the improvements, and explains why there was a slowdown in development during 2016. The good news is, development is back in full swing. Version 5 has already proved popular with testers. And we have many more enhancements coming soon.

Watch the updated getting started video.

What’s new at a glance?

1. Settings save faster (especially noticeable on complex themes).
2. Hover targeting is the norm, as an alternative to double-click (still possible).
3. Selector wizard at the top instead of the right.
4. Automatic naming of selectors.
5. Quicker selector generation.
6. Updated selector suggestion algorithm. Single elements can always be targeted, and page builder elements (e.g. Beaver Builder) can be targeted more precisely.
7. Hover state and other pseudo selectors can be applied via the GUI.
8. Target only the current page.
9. Color picker has palettes for saving colors or sampling colors from the current page.
10. Selectors can be re-targeted via the wizard.
11. Presentational changes.

Features for coders and learners

1. Browser-like HTML and CSS inspector (selector wizard advanced options).
2. CSS can be imported into Microthemer’s GUI.
3. Code editor height can be manually drag resized.
4. Code view selectors are auto-generated when using the selector wizard in this view.
5. Code editors can be searched with Ctrl+F, including generated CSS/JS.
6. Validation of custom selectors with visual feedback as you type.
7. Code can be used for GUI selector labels.
8. Keyboard shortcuts for toggling targeting mode, full code view, and selector highlighting.
9. Enqueue JS libraries native to WordPress (e.g. jQuery UI, underscore, backbone) for rapid experimentation.

Hover targeting

1. The new Target button enables hover targeting. It’s often easier to target the correct element first time with hover targeting. Note, you can still double-click to target elements. This will instantly select the double-clicked element, as before.
2. Single-clicking an element in hover mode selects it. A subsequent click anywhere else on the page deselects it.
3. If you hover over the green plus (+) sign, Microthemer suggests options for targeting just the single element you clicked (always the first option). As well as options for targeting more elements. The number of elements a selector targets is shown to the right, under ‘N’. The blue highlighting will update when you hover over these options to show you exactly which elements will be targeted. Clicking one of the targeting options will instantly create a new selector. Thus rapidly speeding up the targeting process.
4. Microthemer automatically generates selectors labels. But you are still free to change the default label via the options in the top toolbar. Use the CREATE SELECTOR button to create a selector in this case.

Color palettes for sampling and saving colors

1. Microthemer continually updates a recently used colors palette. More palettes can be accessed via the 3 dots.
2. The site colors palette is an automatic sample of the most common colors affecting your site. This makes it easy to apply colors that match the current design. You can re-sample colors on a per-page basis using the refresh icon.
3. The saved colors palette is useful for saving a shortlist of colors for future use.

Pseudo selectors (e.g. :hover) and page-specific edits

1. The label-code sync option will be particularly popular with coders. If you enable this option, Microthemer will use the actual CSS code of the selector as the label, rather than auto-generating a human friendly label. We’ve enabled it in the above screenshot because it reveals what happens to the selector code when points 2-4 below are enabled. It’s not necessary to sync the label with the code for these options to work though. The CSS adjustments will happen behind the scenes if human labels are in place.
2. The settings icon to the right of the label-code sync icon provides a convenient way to apply pseudo classes, pseudo elements, and page-specific qualifiers. For instance, you can click the :hover pseudo selector to target elements in the hover state – when a user hovers their mouse over them. If you’re not sure what a pseudo selector does does, hover over it for an explanation.
3. To ensure that your selector affects the current page, and only the current page, you can enable the page-id or page-name options. These will prefix your selector with a unique page-id or page-slug class. Microthemer now adds these classes to the <body> tag of each page, assuming your theme supports the WordPress body_class filter.
4. Some pseudo classes allow you to input your own numbers or formulas to target a specific set of elements on the page. Pseudo classes that start with :nth allow you to target sibling elements (elements that have the same parent) based on the order they appear. Microthemer provides some suggestions in a dropdown menu to save you remembering these, and also show you what’s possible. Tip: hit the down arrow key on your keyboard to scroll through the :nth() suggestions. The highlighting will instantly update.

CSS Validation for custom coders

1. When label-code sync has been enabled, the top editing field allows you to customise the CSS selector. In the above screenshot, the 3rd list item has been manually added to the default selector for the ‘Ingredients’ sub-heading: , #content li:nth-child(3)
2. Microthemer instantly adjusts the visual highlighting as you type to show this.
3. And shows how many elements your selectors targets. In this case 2. It turns to an orange ‘0’ when a selector targets nothing.

Advanced HTML & CSS Inspector

1. The selector wizard now has some advanced inspection and targeting options. These will be particularly useful and familiar to coders that are accustomed to browser inspectors.
2. The HTML inspector reveals the underlying HTML code of the elements you target with Microthemer. The full HTML of the page is available, and the target element is highlighted in grey. Child elements are indented to the right. Parent elements are indented to the left.
3. Below the HTML inspector is a breadcrumb trail, showing all the parent elements of the current element. Click the option directly to the left of the currently highlighted item to move up to the direct parent element. Click the item to the right to move down to the direct child element.
4. The middle pane shows the actual CSS being applied to an element. This is useful to determine if selectors from elsewhere are overriding the edits you make in Microthemer. The Styles tab, show above, is new. The Computed tab, which shows the computed CSS properties of the selected element, is not new. The CSS property values on the Computed tab can differ from the Styles tab. For instance, if a width value of 50% is set in the stylesheet, this will compute to a specific pixel value e.g. 400px (because the parent container is 800px wide). But it’s sometimes useful to know that values have been set in percentages. If say, you wanted to add an element to the right or left, you could also give it a width value of 50% and know that it will always fill half the available space. No more, no less, Even at different screen sizes.
5. Microthemer’s targeting suggestions are shown in the right pane. The suggestions are the same as those in the green quick create menu. Except that the actual CSS code is shown, rather than labels. And this CSS code is editable. These suggestions were shown more prominently in the past, and were more numerous. Microthemer actually discovers even more possibilities now. But groups them in a more manageable way. Selectors that target the exact same elements on the page are accessible from a dropdown menu.

Change existing selector targeting via the selector wizard

1. The re-target selector icon will launch the selector wizard and allow you to update the existing selector, rather than create a new one. This is particularly useful if you’ve already applied styles to your selector and don’t want to create a new selector when you realise you’ve made a targeting mistake.
2. This new re-target icon, as well as some old ones like delete and clear, have been tucked away by default. The number of actions was getting a cluttered. But you can expand them using the more options icon. They will remain expanded for all folders and selectors, unless you click any less options icon, making bulk operations like deleting multiple selectors just as quick as before.

Import CSS from anywhere into Microthemer’s GUI

1. A new tab has been added to the Packs > Import dialog to import CSS into Microthemer.
2. Microthemer suggests some URLs to stylesheets you might like to import from. At the time of writing, it doesn’t suggest plugin stylesheets but that will change soon. In the meantime, you can manually enter the URL to any stylesheet. Then click the LOAD STYLESHEET button.
3. You don’t have to import a stylesheet you’ve loaded in it’s entirety. If you check the Only import selected text checkbox, Microthemer will only import CSS code you select with your mouse. Also, you don’t need to use the load stylesheet option at all. You can just paste arbitrary CSS code into the editor and then click IMPORT.
4. The import configuration options allow you to import: media queries only, empty selectors, or everything, including styles.

Resizable, searchable code editor

1. By default, Microthemer auto-resizes the height of code editors as you type, up to a maximum number of lines. This used to be 12. We’ve increased it to 20 as people communicated a preference for more height. And to give further flexibility, we’ve added a option to make code editors manually resizable. There is a minimum height of 12 lines in manual resize mode, because the resize CSS property imposes a minimum limit (in certain browsers). If it’s annoying, please let us know and we will try a different approach.
2. The editor can be drag resized using the handle at the bottom right.
3. The Ctrl+F keyboard shortcut now presents a search box for finding code. You can use this anywhere Microthemer displays HTML, CSS, SCSS or JavaScript code.
4. You can still make use of Microthemer’s targeting mode when working with the full code editor. Selector code will be added to the code editor after clicking the ‘Create selector’ button (if targeting mode is launched from the code view rather than the GUI view).

Keyboard Shortcuts

Microthemer uses the following keyboard shortcuts. Please let us know if you would like a shortcut for other actions.

Why did development pause?

The main reason development slowed to a crawl in 2016 was because Sebastian developed Grave’s disease. Which isn’t nearly as grave as it sounds. It’s a common auto-immune condition, and very treatable once diagnosed. But it’s easy to miss, and can significantly affect concentration. Sebastian gradually lost up to 90% of his productivity in the 9 months leading up to his marriage with Monika in September last year. Luckily, Sebastian’s condition got so bad it was diagnosed and effectively treated one week before the big day. Thank goodness! Suddenly it was possible to code again. Work swiftly began on version 5 – a big update addressing many of the enhancements you asked for.

What’s next?

We wanted to make a statement that Microthemer is back in the ring. We hope version 5 makes such a statement. But the best is yet to come. We’ve greatly improved the targeting features, one of the main areas of improvement you asked for. Now we’re focusing on increasing the scope and quality of the styling options – the other main area you wanted to see changes. In the coming months, we will release regular 5.x updates incorporating the following updates:

1. Refinement of the new targeting features based on any feedback you provide in the next week or two.
2. New CSS properties: e.g. flexbox, columns, transforms, transitions, animations.
3. Multiple CSS values for e.g. background (with flexible gradients), box-shadow, text-shadow.
4. Instant style preview, rather than waiting a second or two for settings to save and the external stylesheet to reload.
5. Slider functionality for numeric values (augmenting rather than replacing the current fields).
6. Detailed video tutorials covering more aspects of the program.

And The Marketplace?

We’re continuing to add features with the marketplace in mind, such as the ability to import selectors from a theme or plugin. But we’re still prioritising feature enhancements. Our rationale is that the better Microthemer is when we finally launch the marketplace, the better the marketplace will be.

Share the news

If you would like to support Microthemer, please tell your friends about it. And maybe consider leaving a review of Microthemer on wordpress.org. This small admin task helps us out enormously.

And don’t forget, we also have an active affiliate program.

We’re Listening

We’d like to say a huge thank you to those lovely souls who helped shape the final release of version 5: @dmccan @bonest, @Abland, @Galen, @pingram3541, @mrover, @olleka, @majamaki, and @Nelmedia.

‘Final’ is a strong word though. There is no cut-off point for further suggestions. We’re listening, and would love to hear your voices.