Default Skin Questions

To discuss development of addons / skins / customization of MediaMonkey.

Moderators: jiri, drakinite, Addon Administrators

jbf
Posts: 1
Joined: Sat Apr 27, 2024 2:58 am

Default Skin Questions

Post by jbf »

Hi all,

I'm adjusting the god-awful eye killing default skin and got colors dialed into a very nice and pleasing dark skin.

One thing thats been bugging me is the amount of breathing room on the Home screen between the albums and artist.

1. What .less file (and property) adjusts the Home page's margins for the Grid style view (center of screenshot)? Specifically want to increase this so there is padding on left and right side of the Artists and Albums listings.

2. Same goes for the Playing list text (far right side of screen).

3. Same for the Albums and Album Artists grid views.

Screenshot of my interface
http://imgur.com/a/TqVh6RJ
drakinite
Posts: 971
Joined: Tue May 12, 2020 10:06 am
Contact:

Re: Default Skin Questions

Post by drakinite »

jbf wrote: Sat Apr 27, 2024 2:59 am Hi all,

I'm adjusting the god-awful eye killing default skin and got colors dialed into a very nice and pleasing dark skin.

One thing thats been bugging me is the amount of breathing room on the Home screen between the albums and artist.

1. What .less file (and property) adjusts the Home page's margins for the Grid style view (center of screenshot)? Specifically want to increase this so there is padding on left and right side of the Artists and Albums listings.

2. Same goes for the Playing list text (far right side of screen).

3. Same for the Albums and Album Artists grid views.

Screenshot of my interface
http://imgur.com/a/TqVh6RJ
Hi jbf,

Very sorry for the long delay.

1. The margin between albums and artist is actually handled by margin-related CSS classes in the HTML, rather than specific CSS rules. The artistView element has the marginBottomLarge class: https://i.imgur.com/wZX6W3p.png and the albums element has the marginTopLarge class: https://i.imgur.com/9onu4NP.png
Since editing HTML files inside a skin could potentially cause compatibility issues with later versions of MM, I'd recommend adding a CSS rule to the MusicCollectionView class. You could do either of these:

Code: Select all

[data-control-class=MusicCollectionView] {
    margin-left: @defaultMargin;
    margin-right: @defaultMargin;
}
[data-control-class=MusicCollectionView] {
    .marginsRow;
}
Both get compiled into the same CSS. The latter one just adds the rules from the marginsRow class, which is defined in skin_layout.less line 757.

2. This one was tricky. List view items are positioned "absolute", controlled in JS with specific height/width/position attributes. Try this: https://i.imgur.com/5HsKEuD.png

Code: Select all

[data-control-class=NowplayingListView] .lvItem>div:first-child {
    margin-left: @marginSmall;
    margin-right: @marginSmall;
}
This first selects for the now playing list view class, then finds the lvItem element beneath it, and then selects for the very first direct child element underneath that lvItem.


3. This one was surprisingly even more tricky. I finally found one that seems to work:

Code: Select all

.lvItem.griditem.imageItem {
    padding-left: @defaultMargin;
    padding-right: @defaultMargin;
    padding-top: @defaultMargin;
    & .gridItemInner {
        margin: @defaultMargin;
    }
}
Editing these values in the dev console caused issues, maybe because the expected size of each div is cached in JS somewhere, but if they're in the CSS when MM loads, it seems to be fine.
Image
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.
Post Reply