Default Skin Questions

[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]

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.