top viewport cut off; settings panel disappears on dock; reveal class on hover?

Tagged: , , ,

Author Posts

steveninety May 1, 2022 at 12:08 pm

Hi,

I’d like to say that I am extremely happy to have found this tool! I’ve recently been looking for a way to gain as much control over my HTML and CSS as possible, without sacrificing the pleasant visual workflow of a builder, and of course all the benefits of WordPress in general. In addition to Oxygen, Microthemer is the exact CSS/SASS solution I’ve been looking for! Especially with the future improvements to the folder / full code editor / conditions features – I really hope to see these soon!

I have a couple of minor issues I’ve run into that I’d like to solve:

1. In Microthemer, the top of the viewport is cut off slightly. This means I cannot hover the elements in my nav to gain access to the selectors. Specifically when loading Oxygen inside Microthemer, the part that is cut off is even larger: the entire nav bar.

2. When I dock the settings to the right, the whole panel disappears upon my next visit to Microthemer. I’ve identified it’s the z-index being set slightly too low.

3. I love the low/high specificity targeting option! 9/10 times select individual classes that I’ve added myself, so it’s great that those can be selected on first click by default. Since I never style id’s in Oxygen, I would love to be able to see the first class added to that element when hovering it, instead of the default id!

Thank you for any help provided!
– Steven

Sebastian May 2, 2022 at 7:33 am

Hey Steven,

I’m really glad you’re finding Microthemer useful and are looking forward to the updates. And sorry to hear about your issues:

1. Would you mind providing temporary access details for the site (or a clone / dummy site) so I can troubleshoot this for you? You can use this handy plugin to provide temporary access easily. It would be good to have a test case, as I didn’t see that with Oxygen on my testing server.

2. Again, I think I might need a test case for this. It may only happen with a certain combination of panel layout.

3. Ah, yes that should be possible – make the breadcrumbs and name adjust to your specificity toggle suggestion. I will add that to the ToDo list. Thanks!

Sebastian

steveninety May 3, 2022 at 9:18 am

I realized the top of the viewport being cut off could be related to oxy 4.0, which I was testing at the time, so I decided to try it with 3.9. I am no longer experiencing the issue, but the breadcrumb is still on top of the element that touches the top of the viewport (nav bar), so even though I can see the full nav bar, I cannot use the selector breadcrumb.

For a bit I didn’t see the catch-all template (nav bar) when loading Oxygen, but now the change seems to have processed and I can actually see the catch-all template.

BTW: thank you for adding my suggestion to the to-do! After some more testing I’d like to give two more suggestions:
1. I’d love to see the selector popup (when clicking “show targeting options” on an element’s breadcrumb) show inside the detached preview when that option is enabled. Now it pops up inside the Microthemer tab.
2. Something similar applies to the inspect tool. It remains in the Microthemer tab, but it would be more user-friendly if it appeared in the detached tab, so inside the builder.

Sorry for doing so many suggestions, but many thanks for considering them!!

Sebastian May 3, 2022 at 11:02 am

Thanks for providing access Steven.

In answer to your points:

Selector Breadcrumb
I see what you mean about the selector breadcrumb. Outside of Oxygen, the WP toolbar normally makes room for that. But I was planning to properly address this anyway (by displaying below the element when necessary), I will move this task up the priority list.

Selector popup in the detached window
Thanks for reporting this – you are right it should display on the detached window. The purpose of having it, alongside the Inspection pane, is to be close to where you click on screen to select elements. I will address this.

Inspection pane in the detached window
I can see why you might prefer this. It will be a bit trickier to set up that the popup, but I will scope it out.

Settings panel z-index issue
I didn’t see this issue when first loading MT, so maybe it was a transitory issue. I will play around with the different layout permutations with the detached view enabled to see if I can trigger it.

Cheers!
Sebastian

steveninety May 4, 2022 at 7:30 am

Settings panel z-index issue
I forgot to mention that I believe this was Oxygen 4.0 specific, because I haven’t had the issue in 3.9!

Catch-all template (nav bar) not loading
Revisiting my earlier mentioned issue about the nav bar not showing: the catch-all template does not seem to load when opening Oxygen pages, only when opening the actual template itself.

Oxygen breadcrumbs interfering with Microthemer breadcrumbs
This is an issue that seems to persist – but strangely only on Pages (homepage), not on the catch-all template. The oxygen breadcrumb has a higher z-index, making it unusable.

I will share the login link in the chat in case you no longer have it. Once again, thank you so much for actively replying and considering all the improvements I’ve suggested so far! I think many of them are low hanging fruit, but would make Microthemer even better than it already is! I honestly believe there are many people out there who are looking for exactly this tool, but just don’t know about its existence. Just like me until a few days ago. I will definitely recommend the tool and its active support!

Best wishes,
Steven

Sebastian May 6, 2022 at 3:24 pm

Hey Steven,

Catch-all template (nav bar) not loading
It’s been a while since I’ve worked with Oxygen templates, what exactly should be in view? I couldn’t see any difference when editing the cart page with O2 loaded inside Microthemer or just editing with O2 by itself.

Oxygen breadcrumbs interfering with Microthemer breadcrumbs
Your Oxygen interface looks a bit different to my 3.9. Are you using some kind of addon there? The selector breadcrumb issue happens because on your site Oxygen is not adding a class to the body element “oxygen-builder-body”. MT expects that class to exist so it can hide O2 elements when targeting with MT. The class does exist on my 3.9 and 4.0 test Oxygen installs.

I have however added a workaround for this in MT version 7.1.2.8 (yet to be released). It also fixes the selector popup in the detached window. And the cropping of MT’s suggestions toggle for elements at the top of the viewport. If you could try it out and let me know if you run into any issues that would be great!

And thanks so much for offering to recommend Microthemer. I really appreciate that. And all of your suggestions for improvement 🙂

Cheers,
Sebastian


steveninety May 9, 2022 at 9:56 am

To make sure no plugins were interfering, I tested MT on another clean WP install.

1. Catch-all template not visible when editing Oxygen pages
Oxygen’s catch-all template is mainly used for the header (nav bar) and footer, so it loads on every page, “around” the inner content from the particular page. The issue seemed gone on the fresh install, but re-appeared soon after…

Navigating to a page through the MT settings panel
It seems to load the “inner content” of the page, but not the catch-all template around it (header and footer).

Navigating to a page through the wp-admin inside the MT (detached) preview window
I found one workaround which is to simply browse the wp-admin “inside” the MT builder, then navigate to pages and edit a page with Oxygen. Then, the header and footer do actually show!

2. Breadcrumbs overlaying Oxygen’s breadcrumbs
The breadcrumb issue seems to be gone on a fresh install, so it must’ve been a plugin that deleted the class. Which is good to know :).

MT version 7.1.2.8
I have played around with this new version and it works great! Solves the breadcrumb top of viewport cutoff issue, as well as the Oxygen breadcrumb issue (even with additional plugins activated that must have interfered in the previous version).

Thank you so much for implementing the improvements already! I will share the login to the new install in case you’d like to take another look at the template issue I described.

You must login or register to reply to this topic.