Jump to content

About the music player screen - EmbyServer 4.4.2.0


CarlosLima
Go to solution Solved by CarlosLima,

Recommended Posts

CarlosLima

5eb400e6ee234_Screenshot.png

 

Hi,

 

I would like to have a CSS / HTML that would show the artist's background image on the music player screen with much brighter, more visible, practically 100%, but so that the texts and icons on the image would be visible.

 

Thank you

Link to comment
Share on other sites

CarlosLima

Opps, I think I found the solution in another topic. I will explore other values to make icons and texts more readable, but that is exactly what I was looking for.

 

Master code @@Happy2Play

 

5eb406a750bf4_Screenshot.png

Edited by CarlosLima
Link to comment
Share on other sites

CarlosLima

5eb41a3059a13_Screenshot.png

 

Now, a stylish music player.

 

To be perfect, all you need is a code to remove the disc cover and nothing more.

 

Congratulations to the creator of the topic and to the master @ Happy2Play, who is helping everyone to have an Emby with our face.

 

Thank you

Edited by CarlosLima
Link to comment
Share on other sites

  • Solution
CarlosLima

5eb426fc5e4fb_Screenshot.png

 

Oops, I found this code from 10/17/2019 edited by the master @ Happy2Play and it worked perfect.
 

div.osdPoster-img {display: none;}
Edited by CarlosLima
Link to comment
Share on other sites

arrbee99

Looks great.

 

But it does help to have a darker background in general I think.

 

This might help to add a drop shadow to the list of songs to read a bit better. Hopefully. Unless Happ2play has other thoughts. He might have come up with it anyway, not really sure.

 

/* Add Dropshadow To Music Playlist */
div.upNextBar.upNextBar-static.flex.align-items-center {text-shadow: 2px 2px #000000;}
div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {text-shadow: 2px 2px #000000;}

  • Like 1
Link to comment
Share on other sites

CarlosLima

Looks great.

 

But it does help to have a darker background in general I think.

 

This might help to add a drop shadow to the list of songs to read a bit better. Hopefully. Unless Happ2play has other thoughts. He might have come up with it anyway, not really sure.

 

/* Add Dropshadow To Music Playlist */

div.upNextBar.upNextBar-static.flex.align-items-center {text-shadow: 2px 2px #000000;}

div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {text-shadow: 2px 2px #000000;}

 

Thank you very much for that, it was excellent.

 

I really thought of posting here asking for something in that style, because in clear images the texts disappeared.

 

Could this effect also be applied to the song title?

 

Perhaps, also reduce the transparency of the playlist background a little.

 

Thank you

 

5eb502cb62635_Screenshot.png

Edited by CarlosLima
Link to comment
Share on other sites

arrbee99

The only thing I've managed is -

 

h2.videoOsdParentTitle {text-shadow: 2px 2px #000000;}

 

or

div.videoOsdText {text-shadow: 2px 2px #000000;}

 

They both seem to do the same thing (add drop shadow to the title) but they might affect stuff somewhere else. Also I don't have much idea what I'm doing (so be warned :)).

 

Was hoping to add drop shadow to the Artist and Album but don't know how. As you mentioned, need the great Happy2play for this kind of stuff.

Link to comment
Share on other sites

CarlosLima

Hi

 

Thank you very much for your time.

 

I tried both of your options and I believe the result is the same.

 

Your code number 1:

 

 

5eb55acdf14c2_music2.png

 

Your code number 2:

 

5eb55aec0c782_music1.png

 

The text below the album title, I believe, also needs the same effect.

 

All of this is so that it looks good also in clear images. In fact, even in the icons, which in fact disappear in very clear images, like the ones above.

 

In the dark images everything is perfect.

 

Thank you

Edited by CarlosLima
Link to comment
Share on other sites

PenkethBoy

try

h3.videoOsdTitle {text-shadow: 2px 2px #000000;}
  • Like 1
Link to comment
Share on other sites

CarlosLima

 

try

h3.videoOsdTitle {text-shadow: 2px 2px #000000;}

 

Hi,

I think something was wrong with the code, because it applied the effect only to the hyphen sign.

 

5eb56217d2f6c_Screenshot.png

Link to comment
Share on other sites

PenkethBoy

applied to all text for me - on that line

 

possibly you have other css conflicting

Link to comment
Share on other sites

CarlosLima

I thought the same about the conflict and you must be right.

 

I leave all my css code related to the music area.

 

I appreciate it if you can see if I have something wrong or duplicate that might conflict.

 

Thank you

/* #1 */
div.backgroundContainer.withBackdrop {
    opacity: 0;
}
div.backgroundContainer.itemBackgroundContainer.withBackdrop
, html.withSectionTabs div.backgroundContainer.withBackdrop {
    opacity: .88;
}


/* #2 */
div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
div.upNextBar.upNextBar-static.flex.align-items-center {background: transparent;}
div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {background: transparent;}
div.osdPoster-img {display: none;}


/* #3 */
div.upNextBar.upNextBar-static.flex.align-items-center {text-shadow: 2px 2px #000000;}
div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {text-shadow: 2px 2px #000000;}


/* #4 */

h2.videoOsdParentTitle {text-shadow: 3px 3px #000000;}
h3.videoOsdTitle {text-shadow: 2px 2px #000000;}
Link to comment
Share on other sites

CarlosLima

Oops,

 

I identified 2 duplicates and already removed both. Although still not resolved.

 

Code # 2:
line # 2 removed
line # 3 removed

Edited by CarlosLima
Link to comment
Share on other sites

PenkethBoy

actually its because they are links not actual "text"

 

so dont think drop shadow will work for links - actually it will but think its being overridden by emby theme values

 

you can change the colour but that will not work for all backgrounds

Edited by PenkethBoy
  • Like 1
Link to comment
Share on other sites

CarlosLima

It is true, now that I realized that they are links and not texts. I understood that for links it is not possible to apply the attribute.

 

Still, the 'now playing' screen was excellent in appearance.

 

Thank you very much.

Edited by CarlosLima
Link to comment
Share on other sites

PenkethBoy

to change the colour of the links

/* ---- Playing now Queue - second line of album and song name ---- */
h3.videoOsdTitle { color: #87CEFA !important;}
Link to comment
Share on other sites

CarlosLima

5eb56f332c24d_Screenshot.png

 

Excellent in everything. For me, 10/10.

Very grateful once again.

Link to comment
Share on other sites

CarlosLima

Hi,

Still about the music area, it doesn't have much to do with this topic, but avoiding creating a new topic, I would like to know if what I think to do is possible ...

 

I want to exclude everything in field 1.

 

I want to exclude everything in field 2.

 

I intend to exclude all artists in field 3, leaving only the first artist, so that I can add the image of it to be displayed in the background on the playback screen.

 

All of this only when it comes to records with various artists.

 

Thanks for any tips.

 

5eb591f793b7c_Screenshot.png

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play

Hi,

Still about the music area, it doesn't have much to do with this topic, but avoiding creating a new topic, I would like to know if what I think to do is possible ...

 

I want to exclude everything in field 1.

 

I want to exclude everything in field 2.

 

I intend to exclude all artists in field 3, leaving only the first artist, so that I can add the image of it to be displayed in the background on the playback screen.

 

All of this only when it comes to records with various artists.

 

Thanks for any tips.

 

5eb591f793b7c_Screenshot.png

 

You can not limit to just various artists, it is all or none.

 

2) that genre field applies to all media so it would remove from Series and Movies also

  • Like 1
Link to comment
Share on other sites

arrbee99

I guess you have this somewhere -

 

div.upNextBar.upNextBar-static.flex.align-items-center {background: rgba(0,0,0,.20)!important;}
div.osdPlaylist.flex.flex-grow.hide.osdPlaylist-hidden {background: rgba(0,0,0,.50)!important;}

 

The top is the 'play queue' bit, the bottom is the actual list.

 

You can fiddle with the .20 and or .50 to make the list more or less transparent (unless you've done that already of course).

Link to comment
Share on other sites

arrbee99

The only thing I've managed is -

 

h2.videoOsdParentTitle {text-shadow: 2px 2px #000000;}

 

or

div.videoOsdText {text-shadow: 2px 2px #000000;}

 

They both seem to do the same thing (add drop shadow to the title) but they might affect stuff somewhere else. Also I don't have much idea what I'm doing (so be warned :)).

 

Was hoping to add drop shadow to the Artist and Album but don't know how. As you mentioned, need the great Happy2play for this kind of stuff.

Didn't notice, but the h2 one is better as the div one adds that dropshadowed dash between the album and artist.

Link to comment
Share on other sites

CarlosLima

You can not limit to just various artists, it is all or none.

 

2) that genre field applies to all media so it would remove from Series and Movies also

 

Yes, I understood and forgot the idea of the three fields.

Thank you very much for the alert.

Link to comment
Share on other sites

CarlosLima

Didn't notice, but the h2 one is better as the div one adds that dropshadowed dash between the album and artist.

 

Ah understood. I am using the code started by h2.

 

Thank you

Link to comment
Share on other sites

CarlosLima

This is the final image of 'playing now', which is as I intended and therefore, closing the topic, not without first thanking the friends who collaborated creating the codes.

 

Thank you

Changes made in relation to the Emby standard:

- Full brightness in the artist image

- Removed the album cover over the artist's image
- Borders in the song title text
- Color in the links for the artist and the album
- Color in the playback progress bar
- Borders in playlist texts
- Transparency of the playlist background

 

 

5eb6a327a5a20_Screenshot77.png5eb6a37b74f3c_Screenshot.png

Edited by CarlosLima
  • Like 1
Link to comment
Share on other sites

arrbee99

Looks great. I see Penkethboy posted about changing the colour of the Artist / Album text. Am wondering if its easy to change the colour of the progress bar and the Emby logo, or in fact just replace green with blue everywhere ?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...