Microthemer 5 Beta is tentatively ready for testing.

This topic has 49 replies, 10 voices, and was last updated 6 years, 11 months ago by pingram3541.

Author	Posts

Sebastian April 13, 2017 at 11:59 am	Download it now. We plan to release version 5 to the masses at the end of April. But for now, we’re sharing this pre-release with those of you that would like to feedback on the new features before they’re finalised. You can expect minor bugs, and not everything is totally polished, but it should give you a good taste of what’s to come. The main improvements all hinge around making it easier to target the element(s) you want. The selector wizard has had a big overhaul. You can read about the main features on the version 5 changelog. We don’t want to explain much more than that initially. Please have a play and see if things make intuitive sense. Please direct all comments and bug reports here for now. Thanks!
dmccan April 14, 2017 at 4:03 pm	Wow! It is much more intuitive, the selection process is tons better, having the action at the top instead of the side is much easier. I did not feel lost or frustrated. Kudos!
Sebastian April 14, 2017 at 4:18 pm	Awesome! I recall you asked for a way to update selectors via the selector wizard (ages ago). That will come in the final 5.0 release, even though it’s not part of the pre-release BTW 🙂 Thanks for taking the time to have a play and comment. Sebastian
bonest April 20, 2017 at 2:36 pm	Impressive work. It is much more intuitive and fast to use.
Sebastian April 20, 2017 at 4:11 pm	That’s great to hear bonest! I’m now working on some design improvements that didn’t make it into the original beta. And including a color palette for the color picker, which will initialise using theme colors and then auto-update with use. This was requested by another beta tester. Please let me know if you have any requests. Cheers, Sebastian
Abland April 20, 2017 at 5:54 pm	Well, Sebastian, we’ve just stepped into the next generation of Microthemer! 🙂 I’ve always been impressed with what you’ve done, but this beta is definitely head and shoulders above the current version. I see “intuitive” has already been used – twice – so I’ll venture out and say seamless. I have to admit I was confused a bit at first trying to work it out without reading any instruction 😀 but I was justified the moment the “CREATE NEW” menu dropped down from a selected element. The adjustments flowed from there. The editor response time seems to be quite improved, too. Importing the javascript libraries as needed is a very nice addition. Quite useful. I didn’t test any out – yet – but know of many experiences where this is handy. And importing the theme stylesheet or selected elements just worked 🙂 I highlighted an element and imported, and it created the selector for me and brought in all the contained style elements into the editor. When I changed anything it changed it in the active-styles.css too. Media queries window seems smoother, if that makes sense. The layout just seems more appealing. I’ll be playing with this more but first, congratulations! And thank you. This latest version is quite an achievement – again 🙂 There’s nothing I found that needed tweaked or adjusted. I’m looking forward to the full release. Well done!
Sebastian April 21, 2017 at 10:49 am	Ah Abland, you’re always so supportive. Thanks for your kind words and thorough review. It’s great to hear that you like the new changes. Version 5 is just part 1 of what’s to come. 5.x updates will all focus on improving the actual style options. I see that you discovered quite a few of the new features. Some were added with novices/workflow speed in mind, like targeting elements more visually. While other features were added with developers in mind. Like the JS library import feature you touched on. And the ability to pull CSS media queries, selectors, and styles from a stylesheet into Microthemer. Further to this, we added HTML and CSS browser inspection tools to the selector wizard (available via the ‘Advanced’ link). We hope this will be useful for more experienced users. Clicking on sections of HTML updates the list of CSS selector suggestions, as well as the actual CSS styles pane. Another dev feature you may not notice as first is the ability to use the selector wizard when in the full code editor view. In this view, Microthemer now adds a CSS selector to the editor in plain CSS code, rather than always adding it to the GUI view. So those that prefer to code in full can still benefit from the selector generation benefits Microthemer provides. You mention that you found it a little confusing at first without reading any instruction. The reason we sent the beta out without instructions is because many users will auto-update via WordPress, also in the absence of any instruction. Do you have any thoughts on how to make it easier for people to adjust? For instance, currently, double-click toggles the new hover inspect feature on/off. But we’re on the fence about whether this is a good idea or not. Thanks again for feeding back! Sebastian
Abland April 21, 2017 at 2:32 pm	Hi, Sebastian, I forgot to mention the pseudo classes that are available to apply. I must confess there were some I didn’t realize existed 🙂 In many regards, Microthemer isn’t just an editor – it’s a training tool as well. For getting started I just thought this morning – what about a startup splash screen with the option to “Do not show on startup”? The splash screen could contain brief bullet points to get rolling because once I got rolling it all just flowed – or an animated gif or short video in the splash screen to show how to get started. Going to try and find more “play time” later today 🙂
dmccan April 21, 2017 at 11:17 pm	Hi Sebastian, I had another go today with a thought to what suggestions I might make. Here are some things I came across, which might be real or just show that I didn’t understand 🙂 or reflect what might be confusing. * The color box for Font and Shadow is a bar, but the Background and Gradient it is a pie. * I guess saving happens automatically, but I was worried that my changes would be lost. Maybe some place show ‘current changes saved’ or something? Or, do changes only happen when you exit? * Once I started on a selector and made some changes I didn’t know how to “finish” or save. Or if I wanted to cancel how to get out of the mode I was in. I realize I can double click on another selector … but — oh, see next point. * It seems there are several “modes” and how to get into and out of them was not always obvious. A few times I got into a mode and was stumped how to cancel it. For example, initially there is an advanced view that I found that was pretty cool … but I went on and did some changes and I didn’t see how to get back to see that link again. Ah, I see now I click the target icon. Perhaps the mode switchers could be in one place or something? How many “modes” are there? * In addition to using a number input to change sizes, sliders are useful, especially if you don’t have much of a preview delay. * I like that you can see the Microthemer options from the front end. I’m not sure if that’s new or I just noticed it. * If I click the admin toolbar and go to the back end, the Microthemer bar stays active. If saving happens on exit then that might be a good time for a prompt to save. * I know there is some code you can paste in your functions.php to keep using the CSS Microthemer generated. For me it would be nice if I could just copy the CSS and put it in my child theme and disable Microthemer. Can you do that now with the CSS you see when you click the eye icon … is copying that CSS sufficient? Thanks!
dmccan April 22, 2017 at 8:04 pm	Another suggestion: In MS Word you have a format painter feature. Click on an element, click the format painter to copy the style, then click on another element to apply that style you just picked up.
Galen April 23, 2017 at 1:16 pm	It would be good if Microthemer could select the parent theme and plugin css for importation from the dropdown, but entering the path worked.
Galen April 23, 2017 at 2:28 pm	Not having much success dragging selectors from one folder to another on local host. It would be great if it were possible to choose a number of selectors from one folder and move them to another folder. For example – I imported a style sheet but then decided I’d like all the Button css in a button folder.
Galen April 23, 2017 at 2:32 pm	Wow! It imported @media settings as well.
Sebastian April 23, 2017 at 8:30 pm	@dmccan Thank you so much for providing such rich feedback. It’s really useful. I’ll address each point: Yes, the icon for different color properties isn’t as consistent as it could be. I see what you mean. I discuss this with Monika. Saving does happen automatically. There is a subtle notification at the top right during save, but it doesn’t say ‘Settings saved’ on completion. I previously considered this unnecessary, as it would happen very frequently. But given what you said, perhaps the reassurance factor makes it worthwhile. Users not knowing for sure if their settings have saved is a biggy. The ‘Settings saved’ notification could also have an icon that leads users to the MT history feature. Regarding the different modes, broadly speaking there is a targeting mode, and an editing mode. The targeting mode has a show advanced / hide advanced link to the right of the CREATE SELECTOR button. This reveals or hides the HTML/CSS inspector and alternative (editable) targeting suggestions. Double-click in this version does the same thing as clicking the target icon you found. It toggles the targeting/editing mode. We thought this would help existing users discover the new hover targeting. But haven’t yet decided if this was a good call. Yes, changing style values by dragging the mouse will be part of 5.x incremental updates, which will focus on many improvements to the style options. We added an MT shortcut to the WP admin toolbar a while ago. Again, saving is automatic. And I think MT should communicate this better. You can copy the CSS shown when you click the eye icon in the View menu. Just note that any Google fonts you include will also need to be en-queued manually. You can see the URL Microthemer generates in the HTML source code of the page. But now that I think about it, we could also add this information to the MT preferences ‘Inactive’ page. I’m curious, why do you prefer to copy any paste CSS rather than the PHP code? Regarding your MS format painter, are you thinking you would like a way to copy collections of CSS properties from one selector to another? Or have a library of CSS presets, which can be applied to selectors? A bit like mixins in SASS. Thanks again for your thoughtful comments! It’s really appreciated. Sebastian
Sebastian April 23, 2017 at 8:54 pm	@galen thanks for pitching in too. You make valid points. I’m happy to include URLs to plugin stylesheets and the parent theme in the new CSS importer. You need to open the folder you wish to drag a selector to before dragging it. I know it would be better if you didn’t have to do this. I must admit, I tried and failed to get the folder to auto-open on drag over when someone asked about this previously. I hit a wall with the jQuery UI sortable API that feature uses. But I’m happy to give it another go. Combining the drag reording system with multiple items will be a further challenge! Yes, the CSS importer can handle media queries and should also copy any images to your WP library and auto-update URL paths. Did you import a large CSS file? Has this noticeably slowed down how fast Microthemer saves settings? If so, 5.x speed optimisations will address that issue. Many thanks, Sebastian
dmccan April 24, 2017 at 12:49 am	Hi Sebastian, * When I double click on the site title I see next to the folder icon “General -> Main Title Link”, but the main title that I double clicked on is not selected or highlighted. It took a while for me to realize that my double click had worked. * I see the MT logo animation when I make a change. Thanks, I didn’t notice that before. * I was thinking of a way to copy collections of CSS properties from one selector to another. * I’m used to working with child themes that have a style.css, so it makes sense to use MT when creating the site, capture the CSS and paste it in.
pingram3541 April 24, 2017 at 5:45 pm	@Sebastian thank you for this: < fistpump > Another dev feature you may not notice as first is the ability to use the selector wizard when in the full code editor view. In this view, Microthemer now adds a CSS selector to the editor in plain CSS code, rather than always adding it to the GUI view. So those that prefer to code in full can still benefit from the selector generation benefits Microthemer provides. < /fistpump >
Sebastian April 25, 2017 at 9:39 am	@dmccan thanks for clarifying. Regarding double-click. The current behaviour of this in the beta is to trigger the targeting mode, but not actually select anything. So if you move your mouse, the highlighting moves with it until you single-click something. Do you think that double-click should trigger the selector wizard and select the double-clicked element, so the double-click functionality remains the same as before? And the target button toggles mouse-hover-targeting on/off? Alternatively, double-click could be retired. But that might be frustrating too. I’ve added your copy styles feature to the 5.x todo list. I know this would be useful for moving styles added to one media query over to another, which isn’t currently an easy task.
Sebastian April 25, 2017 at 9:54 am	@pingram3541 – I’m glad you’re interested in the code editor selector insert feature. There’s one aspect I’d love a second opinion on when you get a chance. Under most circumstances, Microthemer inserts the new selector, with curly braces, in a neat and valid way. So it doesn’t matter where your cursor is when you click the CREATE SELECTOR button. It will add the selector in a sensible place. But if you highlight some text with your mouse, e.g. ‘ul li‘ in ul li { color: red; }, Microthemer will do a straight replace of the highlighted text. No curly braces will be added. Currently, this will happen even if you were to highlight the ‘color’ property. I can introduce some CSS parsing and validation to limit the behaviour to just selector code before the curly braces. But before I over engineer this feature, I would like to know if people think this is genuinely useful for updating code editor selectors via the wizard? Thanks, Sebastian P.S. if you use the full code editor a lot, you may also like the new feature for making the editor height manually adjustable, rather than always auto-adjust up to a maximum of 12 (now 20) lines. Hover over the icon to the left of the editor for this option.
Galen April 25, 2017 at 10:22 am	I’ve just been trouble shooting one of my Ultimatum sites which would not display Max Mega Menu correctly. I was just seeing an unstyled list. After cloning it to a local host and de-activating then reactivating plugins it became obvious that Microthemer was the culprit. After uninstalling, reinstalling, deleting all Microthemer content from folders and the database I finally did what I should perhaps have done in the first instance – checked the Microthemer settings. All I had to do to fix the problem was set “Add “first” and “last” classes to menu items ” to No instead of Yes in Microthemer General Settings. I can’t remember if I’d originally set it to Yes or if that is the default. When I spoke to the Ultimatum theme people one of them said they’d looked at the Microthemer (Beta) code and Microthemer “..waits for WordPress to create the entire nav menu as a string, and then does a string replace on it.” They suggested using WordPress filters for the nav-menu to do that instead. No idea what that means but I thought it worth mentioning as you’re working on the Beta.
Sebastian April 25, 2017 at 12:04 pm	Thanks for sharing that Galen. “Add first and last classes” is a very old feature that’s not enabled by default. But we know it can cause problems for old installs of MT, and it’s already on the V5 todo list. And I know what they mean re using WordPress filters instead of string replace 🙂
dmccan April 26, 2017 at 12:32 am	Hi Sebastian, Regarding double-click, I think that selecting the element and showing the green plus sign (or number if you’ve already done some styling) seems good. Otherwise “just double click anywhere to enter the mode” doesn’t make as much sense to me.
Sebastian April 26, 2017 at 9:29 am	OK, let’s try that. At the end of this week, or early next week, I’ll release an updated Beta including many of your, and other people’s suggestions on this thread. Thanks again for contributing so much. Sebastian
mrover April 28, 2017 at 2:56 pm	I was checking out the restore feature and an edit I just made tells me it was made 60mins ago….and an edit I made 10mins ago says it was made 50mins ago. Looks great so far.
mrover April 28, 2017 at 3:02 pm	I use Instant WordPress for local and the beta throws this error when trying to activate it: Parse error: syntax error, unexpected ‘[‘ in D:\INSTANT-WORDPRESS\WP_4.7 BASE w MicrothemerBETA\iwpserver\htdocs\wordpress\wp-content\plugins\microthemer\tvr-microthemer.php on line 2821 Specs of the install: Apache 2.2.15 (Win32) PHP 5.3.2 MySQL 5.6.25