What you ask is perfectly doable. The only reason I haven’t updated the Google fonts before is that I categorised it as a ‘style options improvement’. And when I set out a plan of tackling my super long ToDo list, I decided to do all of the targeting features first. Now my focus is on the style options. And The Google fonts feature is a high priority.
I already have a plan for redoing the Google fonts feature. And I like your idea about recommending certain fonts for certain purposes, so will try to incorporate that. With regards to adding fonts without having to find them alphabetically, I recognise that’s a big drawback. It will be sorted soon. And actually, I’ve already made a start behind the scenes. You know how the color picker remembers the last 12 colors used? That system will apply to all style options soon: fonts, padding, width, height etc. With recently applied style values being presented in a dropdown. Upon installing Microthemer, the initial values in the dropdown will be based on styles set by the theme/active plugins.
Thank you for the previous reply. I want to continue providing feedback and suggestions. As I’ve been using the plugin I have been making a wish list. I’m not sure if this is the best place or format to share this info but I thought posting it here could let others provide feedback on whether my ideas are worth considering.
Wish List:
Show the code output of a selector, either as a new view or as part of the Custom CSS view. If not code then a list of properties applied by that selector or something that allows me to see it in one place without having to switch through all the tabs with blue dots.
In relation to the item above, enable the ability to tweak the generated css in the available view.
Connect the generated code to the selector somehow. Perhaps if I am viewing the generated code provide a way to link to and launch the selector edit view.
Make the highlight option a toggle that remains on until I toggle it back off. As it is now it’s difficult to see all the affected selectors by holding down the keyboard shortcut or hovering over the selector in the list.
Integration with Beaver Themer – Provide a list of choices depending on the templates in place. As it stands now enabling Beaver Builder goes into page edit mode.
Better Google Font selection tool. A search option would be a good first step. The previous post touched on this so it looks like this is already in the works.
Option to expand/collapse all folders
Subfolders. Maybe overkill? Seems useful but could introduce unwanted weight and complexity. I would likely use it if it were available but it’s not a deal breaker by any stretch.
Move selector to folder button/option. This is coming from my issue with drag and drop listed below.
I probably wouldn’t consider this very useful if D&D was working well for me.
Search folders for selector. Useful if there is a large folder structure and something gets misplaced. Not sure if searching by selector name is particularly useful if you don’t know the name.
Bug:
Drag and drop moving of selectors between folders sometimes puts items in the wrong folder. I am unable to target a new folder and then drag a selector to it. The selector ends up in the last (bottom) folder. This seems to always happen when I first create a new folder but occurs at other times as well.
Questions:
Does the folder order make any difference in the order of the code generated?
Similar to the above, does the order of the selectors have any impact on the order they appear in the code? The reason I ask is that both of these could have implications on the cascade and overriding previous declarations.
Is !important enabled by default for any other reason than being more forgiving, easier, etc.? Is not using it and trying to be more explicit making it harder for myself in the long run? This might be more of a question of personal preference than proper coding…not sure.
What keyboard shortcuts are available?
Performance tips? Is GPU a factor?
How many revisions are stored? Is there a way to change this?
Eric, this is great stuff! And exactly where you should be sharing your ideas. You’ve hit on some important issues.
The selector dragging bug – I wasn’t aware of that. I’ll get it sorted today.
Your Wish List
My plan for this is to display the full generated CSS code and auto-scroll and highlight the code for the current selector. This is already what happens if you click the stylesheet link on the right side of the ‘Styles’ tab during inspection mode. In that case, a search box is also shown if MT finds one of many matching selectors in the stylesheet (exact line numbers can’t be accessed unfortunately). But when searching for MT generated CSS, the structured comments will make it possible to find the correct CSS code precisely.
Being able to edit the generated CSS code directly, so it updates in the GUI fields too would be nice. And I will add this functionality at some point. But it will follow a number of other priority features. Because it’s will be a big undertaking to ensure it works smoothly without glitches and bugs.
Could you elaborate further on your Beaver Themer idea?
Yes, Google fonts will be improved soon.
An option to expand/collapse all folders at once would be useful and simple to add. I’m happy to add that soon.
I’m holding off sub-folders for now. If a really good reason presents itself I’ll do it.
Search folders for selector – this would indeed be useful. I’ve been waiting for some behind the scenes changes to the way data is stored before doing this. But these changes have already started to happen, which brings the search box feature closer. The search box would accept full and partial selector names, selector code, aswell as CSS property names (returning results if a value is set) and CSS property values.
Answers to your questions
Does the folder/selector order make any difference in the order of the code generated?
Yes. The folder and selector order exactly determines the order of the CSS in the stylesheet. It’s one of the reasons order must be configurable.
Is !important enabled by default for any other reason than being more forgiving, easier, etc.?
The default setting of having !important on globally is just to soften the learning curb for non-coders. As a coder who understands CSS specificity and the cascade, I would recommend turning this preference off. You can manually set !important on a per-style basis by clicking the faint “i”s to the right of all input fields (which only appear when global !important is disabled).
What keyboard shortcuts are available?
Go to Help > ‘Getting started tips’ to see the latest list of Keyboard shortcuts. I will add more upon request. For instance, I was think of adding Ctrl+Alt+N for creating a new selector instead of clicking the ‘CREATE NEW SELECTOR’ button in targeting mode. This would be useful after customising the text of the default label.
Performance tips? Is GPU a factor?
Are you noticing any issues? Having the ‘Styles’ tab open rather than the ‘Computed’ tab during targeting mode can slow the browser if your site loads lots of CSS files. MT now warns about this if the Styles tab locks the browser for over a second. The solution is to only have the Styles tab active when you need it. Otherwise use the Computed tab.
How many revisions are stored? Is there a way to change this?
50 revisions are stored. There isn’t a way to change that. But I agree that there should be. I think this feature could be improved by ensuring a few revisions are maintained for e.g. past days, past week, etc rather than simply the last 50, which may only span a short time.
I hope my answers are helpful. You’ve been very perceptive in your analysis. Thanks for sharing your thoughts!
@Sebastian – Wanted to say thanks for continuing to improve MT. It has evolved over time and I am excited by the possibilities it offers to the visual designers and others.
I must confess, I have only attempted to use it once since I purchase a while back to support the development. I had to abandon it because it was a bit time-consuming at the time to learn all its inner workings. Seems a lot has improved and the learning curve is easier now.
Having said that, there are still a few things I think will make it to compete with it’s main competitor (hopefully you know which plugin I am referring to).
It will be nice it it integrate with royalty free photo sites such as Pexels and unsplash so that users can auto search and embed background images directly within the MT interface into their designs without having to first download and then upload those images from the sites.
Ability to save css as less variables and Mixins so that the same css can be called and reused anywhere on the site, without having to recreate/add new css for every element when the css code are the same.
A much improved UI and integration of search functionality for embedding google font with MT. Current interface is a bit clunky and overwhelming
Integration of Typekit to complement Google font
Tighter integration with Elementor page builder. In my opinion, this will be a major enhancement considering the huge following and momentum that Elementor has in the marketplace right now. You are missing an opportunity to appeal to and convert some of those users to MT users.
I am hoping these features are somewhere in your roadmap. I am planning to invest in the other competitor to see which of the two plugins offer the best user experience from a non-coder point of view.
Once again, well done and keep the flag flying.
Warmest regards.
Thanks so much for taking the time to leave such a thoughtful review of potential improvements.
I agree that integrating with an image library like Pexel would be a really useful feature. I’m going to add support for adding externally hosted images soon, where users can enter a custom URL. I will look into integrating with an image library at the same time.
Microthemer currently supports SCSS syntax in the custom code editors, and GUI input fields. SCSS support must be enabled via Preferences > CSS/SCSS. However, a GUI system for managing variables / mixins would be nice. Particularly for variables. I’m mulling over the optimal way to implement this, I haven’t had the Eureka moment yet 🙂
Yes, the current google fonts browser is a relic of version 2. But fortunately, the new UI will be ready by Monday next week. I’m just doing some final tests and tweaks. Please see the screenshot below for a preview.
Typekit – I don’t get asked about this very often. But when I send out the newsletter about the new Google fonts browser, I will include a poll to see how many users want Typekit support.
Improved Elementor support is something I get a lot of requests for. It’s coming up very soon on my immediate ToDo list, which you can see at the bottom of the animation news post: https://themeover.com/animation-properties-ready-try/
New Google fonts UI (out very soon)
Thanks again for your feedback. Have a great weekend!
IMO there’s one important thing missing and that is finding the already in Microthemer written css code to edit it is cumbersome. I often feel I’m losing valuable time just to hunt down and arrive in the right code spot to alter things.
Why not have all the css code searchable and then click on the right segment would take you there?
If I’m using those folders for organizing, it still is a lot of work. And often the by Microthemer targetted classes are not self explanatory. So you would need to give that selector a readable name. But the latter is just way to much work.
Let’s say I know the code is in the header folder. Yet all I see are maybe ten parts of code all with not really explanatory selector names. I end up opening them one by one, just to find the right spot. If you would have a search function there, one that would highlight the parts that contains the strings you searched for would be a lot better.
I agree that this feature is high priority. It’s actually already on the todo list. It was scheduled to come after the recent speed improvements because the new data structure will allow for instant search results (on key up).
Right now, I’m working on syncing custom code CSS with the GUI fields. Unfortunately this feature won’t be so relevant to you, because you work with SASS enabled. The feature won’t be enabled if SASS is enabled for technical reasons (it’s not possible to two-way map GUI fields to a custom arrangement of SASS variables, mixins, and nesting etc). But once I’ve finished the syncing feature I would be happy to add the search feature, as it won’t take too long to implement and will be very useful.
No problem Sebastian. Just wanted to point this out. Awesome that it is already in the works.
I’ve settled on another workflow for now.
Started a few custom selectors and write all scss in there. Just the way I was working local. So the selector ‘body’ is for general css (sitewide), selector ‘body .home’ is for css targetted at the homepage and so on. Now I’m almost instantly in the right spot to edit the scss.
btw, indeed, syncing custom code with the GUI fields when using sass would be a bit difficult 🙂 I don’t need it for sure as I’m almost exclusive in the code editor.
Would be nice though if you could dock the code editor to the right or left, instead of only on top 🙂
Ah that’s great to hear that you found a temporary solutions that works for you. And dock-to-left option is also in the works you’ll be pleased to know 🙂
.
