3.9 Beta Discussion

This topic has 33 replies, 10 voices, and was last updated 8 years, 9 months ago by Sebastian.

Author	Posts

Sebastian June 26, 2015 at 12:30 pm	You can download the 3.9.2 beta version of the new interface here. A penny for your thoughts.
batsteek June 26, 2015 at 1:12 pm	I don’t have a lot of time for in-depth testing right now BUT what I see is awesome ! I’m sure media queries management will be FAR better with the interface changes. Congrats Sebastian for taking care of your users feedback 🙂 Cheers
mwdonnelly June 26, 2015 at 1:48 pm	I just installed it on a site I’m working on in localhost. Here are my first thoughts: I love the new ruler toggle. It helps me visualize changes to spacing/padding before I experiment. Nice! The “always on” media queries management is a ROCK STAR. I hated always having to open those up each time I went into edit mode. The new color picker, with transparency settings, is great. Love the convenience. The “clear all styles” button scares the heck out of me. Will I wipe out all my work? I don’t understand what the small dark icon next to the selector name when I’m in selector CSS view/edit mode does. What does the same icon on the tools in the toolbar mean? I would imagine that it means that the settings for that tool (e.g. Background) apply to All Devices, vs separate styling for different media. I still would like to see a “custom styles toggle” to view/not view the site with/without the specific changes I made using the selector that I’m editing/working on/viewing. Thanks!
cjseven June 26, 2015 at 2:54 pm	Great Great Great. Loving it so far. Media queries always there is very nice. And the hover effect on selectors that highlight what part is affected is what I like the most. After a few weeks or months is very useful because we don’t remember anymore what changes what and before we had to click, see, click, see, etc. The only thing I miss (or can’t find) is the clear / reset button for a specific style. I will play more in the following days and add my comments.
nomad411 June 26, 2015 at 3:01 pm	I cannot add anything more so far than what,s been said, except to repeat that THIS Rocks!!!!!!! Thank you so much, great work in re-organising this, it’s amazing!!
dmccan June 26, 2015 at 4:33 pm	Seems to work well. I like that the targeting / inspector area is always open.
mwdonnelly June 26, 2015 at 9:09 pm	ooh…I get the icons now. They show up when you have made changes to specific settings for that element (e.g. font, padding, etc.). Cool! I also do love the hover effect on the selectors; mousing over the selector and seeing exactly what a selector is modifying is way cool!
Abland June 26, 2015 at 10:09 pm	Very nice! You put the toolbars toggle on the Microthemer icon – that is a huge plus. The entire interface itself seems much less intimidating, too. That first glance by an end user can make or break what they do next and you have it much friendlier on that first glance. I like being able to slide the display width while editing a media query. Desktops-only has a min-width and no max so the interface applies the minimum – but I can drag full screen width while still applying rules to that specific media query. I applaud your attention to the details once again – I’m detail oriented and have been pleased to find as I investigate that you’ve already attended to the little things I’ve looked at so far. I know it’s hard to notice when something just works, but I’ve learned for example that tooltips can expand horizontal or vertical and I like how you’ve assigned how they’ll work so they do their jobs but don’t get in the way. Well done! I have no criticisms – everything I’ve looked at just works and works well.
Sebastian June 27, 2015 at 8:04 am	Hi guys, Thank you very much for sharing your feedback. It’s great to hear you’re liking the changes. In answer to a few of your questions: @mwdonnelly – the clear all styles option was in the last version too. It clears all styles you’ve applied to any selectors, but doesn’t delete any folders or selectors. It just leaves the empty shells. There is an ‘Are you sure’ prompt that protects against accidentally clicking the option so hopefully that makes it a bit less scary. The same goes for the reset option, which does wipe out everything leaving just the default folders that appear when you first install Microthemer. @mwdonnelly – the small dark icons are meant to be little feathers, and yes you got it right, they identify where you have applied styles at the selector, media query tab, and style group level. Hopefully that will make it easier to locate your previous edits. Do you think white version of the feathers on the property groups (e.g. padding) is OK or is it too subtle? @mwdonnelly – we definitely will add the toggle for temporarily disabling styles soon. Turning things on and off and then observing the effect is a fundamental debugging tactic. @cjseven – I had a feeling you would be straight on this Antonio! Yes the previous version had a clear icon for clearing all styles for a given media query tab. That was when we had the little media query tab manager menu. We weren’t sure where this functionality would go with the new design. Is it something you were commonly using? We will add a clear icon to the selector management icons soon which will clear all styles for the selector. Will that suffice? If not, I’m happy to take suggestions on where this option could live. @Abland – I’m glad you’re liking it. I recall that you requested an option for collapsing the interface without collapsing the left toolbar (now at the top right). This is trickier with the new design. But I was thinking it would be nice to assign keyboard shortcuts for the actions in the top toolabr. And I imagine this might mitigate the need to keep the toolbar visible. What was your reason for requesting this option? I was a bit worried that people might object to the layout changes because it’s always hassle adjusting to a new system. In the absence of any comment on this can I assume that the adjustment isn’t too much of a headache? The other main concern I had was that the new media query tab system would be hard to adjust to after acclimatising to the quirkiness of the old system, despite being an improvement. Thanks again for sharing your experience everyone. It helps a great deal. Sebastian ps there’s a option in the preferences now that you may have missed for setting default units for each property. This is useful if you generally design in ems/percentages and you want Microthemer to auto-apply units when you enter a number without any unit. The default behaviour of applying pixels behind the scenes when no unit is specified is still available. This is referred to as “px (implicit)”.
cjseven June 27, 2015 at 1:51 pm	ahahah Well, I use it pretty often as a fast way to reset and start over. I think including a clear icon to the selector management icons should be enough. Thanks
Bicarbona June 27, 2015 at 2:36 pm	I think it would be much better if the toolbar were on the right side http://www.uxbooth.com/articles/user-interface-design-getting-the-basics-right/ A good example is the UI/UX webflow.com Thank you Best Regards
Abland June 27, 2015 at 2:43 pm	Hi, Sebastian, My original request on toggling just the top toolbar was from custom buttons I had placed in the left toolbar. I would call Beaver Builder – my layout builder – within the Microthemer interface from a custom button in the left sidebar. Moving the top toolbar gave me more screen space for those edits, but kept the custom buttons available – I had a few other buttons I was playing with, too. The way you have it now I can still add my custom buttons in the top now, but toggling all toolbars makes better sense. It’s simpler and easily accessible so my previous purpose for toggling one without the other is addressed in a better fashion than I had originally considered. Oh, and I was very pleased to see rem in the css units and even more pleased to see vh and vw – the vertical height and width make for really nice responsive text blocks and headings in the media queries.
Norm6257 June 29, 2015 at 6:07 pm	Hi Sebastian… I installed the beta on a new site (did not previously have Microthemer installed on it). When I click on any of the unlock icons in the top bar so I can enter my email, I can’t get any action to happen… I don’t see anywhere to enter my license information and thus can’t get into Microthemer.
Norm6257 June 29, 2015 at 10:30 pm	I was able to get the license unlocked by first installing the production version, unlocking the license, then deleting the production version and installing the beta version. But when I try to run Microthemer I get a near blank page and am not able to do anything with it. How would you like to proceed to troubleshoot? -Norm
Sebastian June 30, 2015 at 12:06 pm	Hi Norm, Please could you send me login details for your site via this secure contact form so that I can inspect the interface? https://themeover.com/support/contact/ Cheers, Sebastian
Norm6257 June 30, 2015 at 4:18 pm	Hey Sebastian… I’ve given you access to the site and sent you login details via the support desk form. Let me know if you need anything else. -Norm
Sebastian July 1, 2015 at 12:18 pm	Thanks Norm. The problem was caused by the way Microthemer included dynamic JavaScript in the page. I’m not sure why this affected your site but not all sites. Either way, the fix was simple enough. I’ve installed the new 3.9.2 beta version on your site. Everyone else can download the latest version using the link at the top of this thread, which I’ve now updated. Please let me know if you come across other problems. Many thanks for trying the beta. Sebastian
Norm6257 July 1, 2015 at 12:39 pm	Thanks Sebastian… that seemed to work and I can now load the site in Microthemer.
cjseven July 6, 2015 at 3:51 am	Detail: When a selector targets more than one class or id, the hover only shows the 1st one.
Sebastian July 10, 2015 at 10:24 am	Thanks Antonio. I’ve just moved on to tackle this bug report but I’m not replicating it when I hover over the selector name in the top toolbar or main menu (to reveal temporary highlighting on the page). Have I misunderstood the issue? Thanks, Sebastian
cjseven July 10, 2015 at 10:42 am	Hi Sebastian, Please check the short video: http://screencast-o-matic.com/watch/coi66AfTxQ What I mean is that when you add two or more classes / ids / tag, hover only detects the first class / id / tag. This is a detail – not important – but sometimes it is useful to use same style for several tags / classes / ids like same color for h1, h2, h3. Do you get my point? Thanks, Antonio
shamrockoz July 10, 2015 at 3:38 pm	Sebastian, Nice changes … I have some feature requests – not sure if this is the forum for it. 1) Any chance, in inspector mode that this can be editable? It would be great to see that I have the right selector … selected … and this would be more plain to for me to see by editing values in the inspector and seeing the changes live. I don’t expect this to be saved (saveable … such a word?) – and this might inherently cause some confusion. Or – could this be saved? 2) Would it be possible to see / click the selectors via mouse movement? I know this might be a very different way of doing things – but might be more intuitive. Also have some tabs that might initiate actions such as the inspector and follow on from 1) 3) The idea of having to create a selector is also a step that might be re-evaluated. Would it not be easier for the selector to be automatically named as part of the process. You could keep the folder technique in place and thereby allowing us to rename if desired.
Sebastian July 11, 2015 at 11:03 am	@Antonio – yes I see what you mean now. That definitely needs to be fixed. I’ll try to sort that today. @shamrockoz – thanks for your thoughtful suggestions. They are all good. Here are my thoughts: This would be nice. It would be a major feature though. And I think it might come second to a number of other fundamental improvements. Your point number 2 being one of them. Am I right in thinking that you’re suggesting an alternative visual way to navigate to the existing selectors – other than just the main menu? If so, my current thinking on this is to combine that functionality with a ‘quick inspection’ mode. I will decide upon a keyboard shortcut, possibly the Alt key. When holding down the Alt key and hovering over elements on the page, Microthemer will highlight the HTML elements (a coloured border perhaps) and provide some essential meta info like dimensions, font, color etc (not everything). It will also provide an icon for editing the element using an existing selector, if one exists. Or an icon to create a new selector if an existing selector doesn’t already target the element. Yes. My thinking was that the selector wizard would auto-populate the selector name field based on the CSS selector code. So it would convert div#header div.menu a to ‘Header Menu Link’ using an algorithm I have in mind. I will make this option configurable via the preferences. And I will probably trial it in edge mode first before turning it on by default. Does that sound OK? Cheers, Sebastian
shamrockoz July 11, 2015 at 2:05 pm	Sebastian, Perfect … Let me explain some things here. I came across CSS-HERO which is a direct competitor to you. Never heard of them until I was looking @Divi support after there latest humungous update caused issued with a client’s landing page. Which, by the way, were easily solved by Microthemer (thank you Sir!). The point is – in one of the support tickets Css-Hero was mentioned. I went over there and saw what they had. I won’t bore you with the details (as I am sure you know most of them already) – but some of their techniques are interesting. If you want we can discuss offline what I found there … But your point of differentiation is certainly a price point. Yours is $99 unlimited forever – theirs is $199 / year … but there are coupons which bring down the price even more.
cjseven July 11, 2015 at 4:43 pm	Since @shamrockoz mentioned css-hero, I remembered to refer so-css from siteorigin. I didn’t try them but for what I see microthemer is beyond, especially with the recent beta. Visiting them I got a few useful ideas though: 🙂 – color picker from the webpage – function to save favorite colors somewhere – probably in the picker.