MM5 skins
Moderators: jiri, drakinite, Addon Administrators
-
- Posts: 2
- Joined: Sun Aug 06, 2023 12:30 am
MM5 skins
Is it possible to use images in the skinning code to add backgrounds to elements such as the player or left panel?
Re: MM% skins
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 [data-control-class="MediaTree"] if you're specifically thinking about the media tree, whether it's on the left or somewhere else, or [data-dock-left] if you really mean the entire left panel, no matter what's in it. Then try [data-control-class="Player"] 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_ima ... ground.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.
Regarding background images: here's a page explaining how to use the CSS background-image property: https://www.w3schools.com/htmL/html_ima ... ground.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.
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Re: MM5 skins
"... to use the devtools element picker (top left corner) "...?
I'm just looking at jumping ship to MM5 and I'm at the beginning of investigating the possibility of creating a skin. An "element picker" would really help for CSS styling! How do I get my hands on that? (There doesn't appear to be anything in the "top left corner"). Is it "hidden" somewhere in MM5, or is a different build that I have to download?
I'm just looking at jumping ship to MM5 and I'm at the beginning of investigating the possibility of creating a skin. An "element picker" would really help for CSS styling! How do I get my hands on that? (There doesn't appear to be anything in the "top left corner"). Is it "hidden" somewhere in MM5, or is a different build that I have to download?
Pete, from Wellington, New Zealand.
Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)
**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less plugin development for MM5 -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)
**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less plugin development for MM5 -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
Re: MM5 skins
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? ) 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"... ...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... https://drive.google.com/file/d/1VMJX1e ... 3KVYki6I1S
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? ) 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"... ...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... https://drive.google.com/file/d/1VMJX1e ... 3KVYki6I1S
Pete, from Wellington, New Zealand.
Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)
**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less plugin development for MM5 -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)
**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less plugin development for MM5 -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
Re: MM5 skins
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.
Student electrical-computer engineer, web programmer, part-time MediaMonkey developer, full-time MediaMonkey enthusiast
I uploaded many addons to MM's addon page, but not all of those were created by me. "By drakinite, Submitted by drakinite" means I made it on my own time. "By Ventis Media, Inc., Submitted by drakinite" means it may have been made by me or another MediaMonkey developer, so instead of crediting/thanking me, please thank the team. You can still ask me for support on any of our addons.
Re: MM5 skins
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!)...
In the end, people create skins for fun -- so anything we could do to help that is a worthwhile cause, I believe... and offering critique but also being prepared to contribute to creating the solutions, eh?
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!)...
- 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 and 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.
In the end, people create skins for fun -- so anything we could do to help that is a worthwhile cause, I believe... and offering critique but also being prepared to contribute to creating the solutions, eh?
Pete, from Wellington, New Zealand.
Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)
**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less plugin development for MM5 -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.
Currently evaluating a migration from MM4 (4.1.31.1919 on Win7 SP1/16Gig RAM/intel) to MM2024 (latest Debug version on Win11 24H2/16GB RAM/intel)
**If you're wondering why I'm still on MM4: It still has more useful-to-me plugins; and I prefer the GUI's responsiveness, panes spreadable over multi-monitors flexibility, and predictability (all coz it's more Windows-native). I also hate "flat design" for its visual inefficiency. For me, MM4's benefits are still > MM5, and MM5's downsides < MM4. There still appears to be way less plugin development for MM5 -- even after all this time. MM5 docs for plugin developers seem very undeveloped to me -- which makes me uninclined to invest into learning how to improve MM5 for my own wants.