Hi Jiri,

I am continuing to have some issues. I am trying to improve my UI by switching from tables to grids. I've got significant time (and frustrations) invested in learning grid layout, but I am able to get to UI close to exactly what I want using just HTML, CSS and a few lines of js. It works in a browser (Chrome Version 138.0.7204.101), but when I take the code and put it into dlg and less files, and install it in MM as an addon, the UI layout doesn't look anything like what it does in chrome. Additionally, when I close the addon window it hoses up MM.

I have put 2 files on drop box and they can be accessed via the link below. The first, grid-test.zip contains grid.html, grid.css and main.js. Extracting these into a folder and opening grid.html will show what I'm trying to achieve. The other file is the mmip file for the addon.

I am using the debug version of MM, version 2024.2.0.3155, and submitted the latest crash details (A14A7908). My laptop is a Lenovo Slim 5i running Windows 11 version 10.0.26100 Build 26100.

Any insights you can provide on why the UI shows up differently in MM, and then hoses up MM upon closing the addon window, would be appreciated.

Bill Irwin

https://www.dropbox.com/scl/fo/uuzw0ldzbrd7njfja5msa/AIs-ubDLr6P4aC_wHP2Y2eU?rlkey=gkrtsgx6ejpsmp5xxmg6b8vwi&st=l8jvdhl6&dl=0

div.navigationBar div.toolbutton {}

.toolbutton {}

Good that you're making progress!

Note that it's quite easy to completely screw up the whole UI, as CSS offers some very powerful expressions. For this reason is better to start with very specific selectors, something like

[code]div.navigationBar div.toolbutton {}[/code]

instead of e.g. just

[code].toolbutton {}[/code]

Anyway, feel free to ask whenever you have problems!

Jiri

Hey guys. Sorry this took so long. Busy weekend.

So last night I started to prepare files to upload. I wanted to also upload screenshots to show what I was seeing. I recently started using the Frozen Dreams skin, and when I tried moving my css out of the html file and into skin_layout_add.less, the player at the bottom of the screen got messed up:

[url=https://ibb.co/JFyWff0s][img]https://i.ibb.co/JFyWff0s/dpw-3-pic1.png[/img][/url]

I thought that I also saw the same thing a few (several?) weeks back with the Material Design skin, but now I'm not certain. I initially started working on my addon updates using the production version of MM (sorry about that), then switched to the debug version, and have since installed an update to that. Last night when I switched back to to Material Design, there were no problems using the same styling that was causing issues in the Frozen Dreams skin. I did go back and took a more thorough look at my CSS and html. I found that some of my CSS references, in particular <table>, <tr> and <td>, were to the raw element and not a unique class or id. I went back and made changes, and now my addon also works with the Frozen Dreams skin. I will mention that after making the changes and trying to install the update, MM got totally hosed. I got an error message every time MM tried to load, and there was no option to restart in safe mode. A computer reboot did solve the problem. I will say that I'm so happy to now have all my CSS in a separate file.

One issue I did see in the Material Design skin was that my changes to the body background color weren't being displayed in my addon window. I was able to work around that by referencing a <div> inside the body instead.

I again thank you for your initial replies to my post. I love MM and have been a loyal user for many years, starting with version 3 back in 2010.

I do use the debug version of MM. I have used the Chromium Dev Tools feature for some basic trouble shooting, but I am far from knowledgeable or proficient.

FWIW, I did go back to the lesscss.org playground and pasted in the css from my html file (a little less than 400 lines), and there were no errors indicated. The only thing different between what I pasted and what they converted it to is all blank lines were removed.

I will create a zip file, per Ludek's suggestion, and put it out on one of the hosting services tomorrow. Maybe one of you can spot something I'm just overlooking.

Thanks to you both for the replies.

Bill

Not sure if you use it, but the Debug version of MM offers you Chromium DevTools, which helps a lot in debugging CSS problems.

Jiri

[quote=birwin2 post_id=527956 time=1750175467 user_id=77332]
What info do I need to share/post here that would be helpful in determining my problem?
[/quote]

You can upload a zipped file to a free file hosting service (DropBox, RapidShare, FileDropper, MediaFire, ...) and share just the link to the file here..

Back in 2021, after MM5 was released, I developed an addon that I use when I DJ at social ballroom events. I recently completely rewrote it because the code was very ugly and unorganized, and I wanted to add some new features. I now have a new version with much cleaner and more organized code, and the new features I want. The problem I'm running into is that in order to get the styling I want I have to include all the css between style tags in the html file. I have tried my best to move the styling into a .less file, but it's not working properly. All my classes and id's are uniquely named, but it appears in some of my tries that parts of MM or an addon are adversely affected, and my addon isn't getting the proper styling. I have looked at the MM Skinning Guide, and the lesscss.org site. I have looked at html and less files for some addons to no avail. I am not using any of the .less enhanced features, just plain css. Testing outside of MM where the styling is in a css file, everything works just fine.

What info do I need to share/post here that would be helpful in determining my problem?