Restore square artist posters, hide "Songs"

[beckfield 92]

Providing this for anyone who might like it.  I'm not a fan of the round artist posters, so I dug through the CSS to find how to change it.  Along the way I found a couple other things.

The first rule restores the square artist posters, with a very slight rounding of the corners.

/* RESTORE SQUARE ARTIST IMAGES */
.cardContent-round {
    border-radius: .3em;
}

This rule stops the posters from being distorted to fit a square (or round) aspect.

/* DON'T DISTORT ARTIST IMAGES */
.coveredImage {
    object-fit: cover !important;
}

I don't care to see the "Songs" section (above Albums) on an artist detail page.  This rule hides it.

/* HIDE ARTIST DETAIL "SONGS" SECTION */
.artistSongsSection {
    display: none;
}

This rule allows the artist name, album name, movie name, etc., below the tiles to wrap

/* ALLOW LONG TITLES TO WRAP IN GRID VIEW */
div.cardText {
    white-space: pre-wrap;
}

BEFORE:

AFTER:

[user24 85]

@beckfield Thanks very much for this. I just tried the CSS to remove the "Songs" section and (so far) it is working perfectly!

I would also like to remove the "More Like This" section, but don't know enough about CSS to easily figure out how to adapt your code accordingly.

I'm guessing it would be something very similar?

[beckfield 92]

You could duplicate the rule that hides the Songs section:

/* HIDE ARTIST DETAIL "MORE LIKE THIS" SECTION */
.similarSection {
    display: none;
}

or just add the '.similarSection' to the Songs rule:

/* HIDE ARTIST DETAIL "SONGS" AND "MORE LIKE THIS" SECTIONS */
.artistSongsSection,
.similarSection {
    display: none;
}

 

[user24 85]

Yes, adding either the individual rule or the combined rule works well. Thanks. I have now figured out how to inspect the other sections and the CSS to delete some of them as well, to create a minimalist Album Artist page view. E.g.:

/* HIDE ARTIST DETAIL "SONGS", "MORE LIKE THIS", "APPEARS ON" AND "INCLUDED IN" SECTIONS */
.artistSongsSection,
.similarSection,
.moreFromArtistSection,
.appearsOnListsSection {
    display: none;
}

This results in the "Tags" and "Links" sections being directly below the "Albums" section. E.g.:

I don't mind having the sections that were deleted, but found I am mostly scrolling past them to get to the sections below. Ideally, I would keep them all, but as a lower priority further down the page in a different order.

It would be great if a future version of Emby allowed users to add/delete/rearrange the sections to sult individual preferences.

Perhaps something that could be part of the future Smart Views I have been reading about...?!?!

[HeroHabit 4]

I'm pretty new to Emby (just moved over from the other guys) and this is the first CSS I've used for the server. So glad I found it! I started making custom artist images for my library and they look WAY better square. Thanks!

[them8os235 16]

I never really paid it much attention.  But I just realized the similarities between Emby and Roon: both default to circular artist thumbnails and both have that [annoying] songs list at the top, amongst others.

Very happy with the customizations in this post, that I don't believe has equivalents in Roon!  Little tweak to it is I chose to use a 30px radius on the artist icons; so that while not round, I had a rounded corners look with a little differentiation from Albums and Folders.

I do wish customizations like this are available to the mobile apps and theater.  But I get why they arent; i.e. they're self-contained installed processes.

Edited February 4 by them8os235