Jump to content

Layout music now playing


KickVanelli

Recommended Posts

KickVanelli

Hi,

I would like a css change for the music now playing page (with backdrop).
Is it possible to remove the playlist information and the artist and album information ?
In that case only the album icon, the play controls and the backdrop would remain.
I'v been trying to figure it out but I can't find a solution.

Thank you

Link to comment
Share on other sites

Happy2Play

Like this

/*Remove Album-Artist title and Playlist section*/
#nowPlayingPage div.nowPlayingInfoControls h2, #nowPlayingPage div.playlistSection {display: none; }
Link to comment
Share on other sites

KickVanelli

Hi,

 

Maybe I ask too much but can anyone give me a hint how to move the play controls and the album card to the bottom of the screen ?

 

Thanks

Link to comment
Share on other sites

Happy2Play

Hi,

 

Maybe I ask too much but can anyone give me a hint how to move the play controls and the album card to the bottom of the screen ?

 

Thanks

 

Something like this

/*Move NowPlaying Album and controls to bottom*/
#nowPlayingPage div.nowPlayingInfoContainer {
    position: absolute;
    bottom: 0;
    width: 90%;
}


I you want controls at bottom also add this.

#nowPlayingPage div.nowPlayingInfoControls {padding-top: 10%;}
Link to comment
Share on other sites

KickVanelli

I'm not sure what you exactly mean Carlos, but I have loads of backdrops for collection albums like billboard and they look fantastic after the css edits.

Link to comment
Share on other sites

  • 1 month later...
KickVanelli

HI @@Happy2Play,

 

I like the playlist on the redesigned music OSD but i would like to remove it because I want the full backdrop on the screen.

Is that possible ?

It would be great if the playlist could be swiched on/off with an onscreen button.

Link to comment
Share on other sites

Happy2Play

HI @@Happy2Play,

 

I like the playlist on the redesigned music OSD but i would like to remove it because I want the full backdrop on the screen.

Is that possible ?

It would be great if the playlist could be swiched on/off with an onscreen button.

Yes a collapse/on-off option would be nice.

 

But some css like this.

/*Remove Now Playing Queue panel*/
div.osdPlayQueue {display: none;}
div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
div.videoOsdBottom-remotecontrol {right: 0%;}
div.videoOsdHeader-remotecontrol {right: 0%;}
Link to comment
Share on other sites

arrbee99

 

Yes a collapse/on-off option would be nice.

 

But some css like this.

/*Remove Now Playing Queue panel*/
div.osdPlayQueue {display: none;}
div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
div.videoOsdBottom-remotecontrol {right: 0%;}
div.videoOsdHeader-remotecontrol {right: 0%;}

 

Would anyone know please how to make the Playing Queue transparent ?

Link to comment
Share on other sites

Happy2Play

Would anyone know please how to make the Playing Queue transparent ?

There is no background behind it currently do to the shrink of background container.  Does this do what you want?

div.backdropContainer.backdropContainer-remotecontrol {right: 0%;}
Link to comment
Share on other sites

arrbee99

Was thinking that line 1 of your css kills the list and 2,3 and 4 move stuff back over to the right, so maybe if lines 2,3 and 4 were kept and line 1 modified somehow...

 

(that line you quoted, same as line 2 from post 10, does seem to work)

Link to comment
Share on other sites

Happy2Play

Was thinking that line 1 of your css kills the list and 2,3 and 4 move stuff back over to the right, so maybe if lines 2,3 and 4 were kept and line 1 modified somehow...

 

(that line you quoted, same as line 2 from post 10, does seem to work)

 

Don't quite understand what you want.  But this makes the backdrop cover the screen and makes the playlist panel transparent.

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;}
Link to comment
Share on other sites

arrbee99

Its like this now -

 

5dd4802aaf975_EmbyMusicPlaylisttranspare

 

so backdrop covers the screen, top right Play Queue is better, but the queue itself not so transparent

Link to comment
Share on other sites

Happy2Play

Its like this now -

 

5dd4802aaf975_EmbyMusicPlaylisttranspare

 

so backdrop covers the screen, top right Play Queue is better, but the queue itself not so transparent

 

Other css can/may be interfering, but with the code in post 14 I get this.  Only other tweaks are background opacity and removal of album image.

5dd4833414d72_image.jpg

Link to comment
Share on other sites

arrbee99

Also, this

 

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

 

or something similar you could no doubt improve on, seems to help with white text on a light background.

 

Edit - thought that colour might be red, #000000 is black.

Edited by arrbee99
Link to comment
Share on other sites

chacawaca

@@arrbee99 i have try a lot of setup and finished with same CSS as you for now playing.

 

but yes you need a text-shadow on text or you cant read it on a white background.

Link to comment
Share on other sites

arrbee99

@@arrbee99 i have try a lot of setup and finished with same CSS as you for now playing.

 

but yes you need a text-shadow on text or you cant read it on a white background.

 

Yep, think it looks pretty good with a dark background. Bit more iffy on a light one and maybe darker ones with band members lurking under the playlist.

Edited by arrbee99
Link to comment
Share on other sites

arrbee99

@@arrbee99 i have try a lot of setup and finished with same CSS as you for now playing.

 

but yes you need a text-shadow on text or you cant read it on a white background.

 

Might I suggest liking this  https://emby.media/community/index.php?/topic/79463-ability-to-collapse-playlist-on-music-osd/&do=findComment&comment=808744  (unless of course you don't like it  :) )

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...