Hi Drakinite! :)

Yes, I'd be happy to collaborate with you on improving the docs situation. I think I've got a good perspective to come at the problem -- I'm a rusty old front-end coder (not done anything professionally for at least 15 yrs) -- which means I've enough CSS/HTML/JS knowledge to be able get it, but naieve enough to need to have docs to help me along. And you're right -- if I'm starting a "from-the-beginning" journey on skinning MM5, every roadblock I encounter is useful information as to where there's missing information in the docs (And also where any existing info is irrelevant -- to make it simpler!)

I'm coming at it from a front-end /display/designer direction. That means that the first thing I need to know is not the file structure, or what the files do, but how the app is visually laid out and works graphically. And then, I want to find the files to modify those visual elements. I don't want to have to learn ALL the files (yet), just to work out how to modify the look of a toolbar, for instance. I think if we structure the approach into the info with that heirarchy, it will be more useful, efficient, and comfortable for skinners. My experience of the info I've managed to find so far, is that it's been from the bottom up, rather than a top-down introduction.

Off the top of my head...for the docs... I'd like to see, at least... (And help create, of course, if welcomed and needed!)...
[list]Some visual diagrams in the "Intro To Skinning MM5 : An Overview" section. Like some boxes representing the visual sections of the app, and then a sub-page on each panel/view, including their heirarchy, any naming conventions, and named references for each of the relevant containers/elements.
[*]How to get set up with the Debug build. How use "Inspect Element", and the most useful parts (for skinning) of the developer tools window.
[*]Best selectors to use (and some explanations as to why and when you use (or not) "data-id" vs "data-control.class" vs "data-uniqueid" vs etc.
[*]A section on each panel & view, with examples: "The MediaTree panel: How to change the background/padding/font/etc".
[*]Generally, a lot more diagrams and screenshots. Perhaps choose relevant portions of a skin to accompany our explanations?
[*]Perhaps some video follow-along tutorials might be useful [i][u]and[/u][/i] be easy & quicker to create?
[*]A table of contents always on the left, so you can work your way through a well-structured document. The wiki, generally, seems to be missing this really useful feature.

[/list]

I started looking at how to skin MM5 about a week ago now, and I think I can now perhaps understand why -- despite being out in the public for 9 years now -- MM5 still only has 10 skins to choose from (that all look very similar IMHO), and MM4 has nearly [i][b]70 (!)[/b][/i]skins in the repository -- and with much greater diversity. For me, getting into this has not been anywhere as easy, quick or enjoyable as it I feel it should be, and there's a number of reasons for that, I believe... which I can get into later, if you're interested? (DMs?) :)

In the end, people create skins for fun -- so anything we could do to help that is a worthwhile cause, I believe... [i]and[/i] offering critique but also being prepared to contribute to creating the solutions, eh? ;)

Hey, very sorry for the continued lack of documentation on how to skin MM. Addon/skinning documentation has been my responsibility, though it's been tough figuring out exactly how to teach how to skin, short of giving a CSS tutorial. If you do take notes on what you've been confused about and what you learn, that would definitely be very helpful for making a template of what documentation to write! I'll send you a DM to get in contact.

OK, figured it out.... but only by scaping through numerous forum posts on various subjects to find this treasure.

There's nothing about it in the initial sparse docs about developing skins for MM.
I'd add to the docs myself (save complaining about it and expecting someone else to do something about it, huh? :wink: ) but I'm not sure what the state of the docs are, ATM. Seems confusing... is the wiki still a thing, or is there some kind of transition to another system going on (e.g. API docs)?

I'm starting the journey on MM5 skinning and addons, and I've been struggling to work out what's what... with having to trial-n-error some stuff to learn how it works. It's taking way too long from me to get a basic understanding that way, and at the moment it's putting me off feeling the effort is worth it :-? Decent documentation (with images/diagrams!) would be significantly more encouraging for me.

If I do keep persuing this path, I'd be happy to document what I learn, for the benefit of others. I feel I have a good perspective to come at it from, as my knowledge is minimal to start with (Was a Director/Flash coder in the 90s for a decade, but haven't done anything much else since). What's the state of the "Developing documentation process? Is it anyone's baby ATM?

FYI, I've made a start on my preferred direction for a skin: a more skeuomorphic design to better distinguish content from the actual tool's interface, compared to "flat design"... :roll: ...which I have a personal disdain for. ;) I little closer to the "Glided2" skin of old that hasn't yet made it to MM5. Here's it's current state, after a few evenings of dicking around... [url]https://drive.google.com/file/d/1VMJX1eh5jvqeAlM2QNyUp23KVYki6I1S[/url]
:)

[b][i]"... to use the devtools element picker (top left corner) "...?[/i][/b]

I'm just looking at jumping ship to MM5 and I'm at the beginning of investigating the possibility of creating a skin. An "[b]element picker[/b]" would really help for CSS styling! How do I get my hands on that? (There doesn't appear to be anything in the "[i]top left corner[/i]"). Is it "hidden" somewhere in MM5, or is a different build that I have to download?

You sure can. Regarding selectors: we don't have documentation on what CSS selectors work on what element, because there are thousands of possible combinations that can be done to suit each skinner's need. Try [b][data-control-class="MediaTree"][/b] if you're specifically thinking about the media tree, whether it's on the left or somewhere else, or [b][data-dock-left][/b] if you really mean the entire left panel, no matter what's in it. Then try [b][data-control-class="Player"][/b] for the player.*
Regarding background images: here's a page explaining how to use the CSS background-image property: https://www.w3schools.com/htmL/html_images_background.asp - if your addon file tree is like this:
- info.json
- skin/
- skin_base_add.less
- images/
- image.png
then I think url('skin/images/image.png') should work, as an example.

*For people somewhat familiar with HTML, the trick (i should really write this down in the documentation) to finding the right selector is to use the devtools element picker (top left corner) to locate the element you're trying to make a selector for, and look at its attributes and classes to find something that seems to match. Often the [data-control-class="X"] is useful when you're trying to style a particular type of element.

Is it possible to use images in the skinning code to add backgrounds to elements such as the player or left panel?