Jump to content

Opacity backdrops (Now Playing only)


Recommended Posts

KickVanelli
Posted

Hi,

 

I have changed the opacity of the backdrops with:

/* ----- Change background Image Transparency ----*/
.backgroundContainer.withBackdrop { background: rgba(0, 0, 0, .1)!important;}

 

Is it possible to do this only for the music backdrops in the now playing screen ?
Thanks.
 

Happy2Play
Posted (edited)

Would appear so.  But I am not sure if any other area is affected, because I don't know if anything else uses layout-desktop.noScrollY.  
 
Mobile and desktop code

/* ----- Change background Image Transparency - Now Playing ----*/
html.layout-desktop.noScrollY div.backgroundContainer.withBackdrop, html.layout-mobile.noScrollY div.backgroundContainer.withBackdrop {
    background: rgba(0, 0, 0, .1);
}

Server v4.3+

Edited by Happy2Play
KickVanelli
Posted

Hi Happy2Play.

 

I'm afraid it does'nt work for me.

The opacity stays the same (the original) for all backdrop screens.

 

Thanks very much anayway.

Happy2Play
Posted

Hi Happy2Play.

 

I'm afraid it does'nt work for me.

The opacity stays the same (the original) for all backdrop screens.

 

Thanks very much anayway.

 

It only changes the Now playing screen all others are default opacity.  Is that not what you wanted?

 

Library backdrops normal opacity

 

5db018d84f780_normal.jpg

 

Now Playing backdrop .1 opacity

 

5db018e826ddb_now.jpg

Happy2Play
Posted

Also you did remove your previous code as the !important will override all additional code.

KickVanelli
Posted

Yes,I removed the previous code and my Now Playing is in the default opacity.

Strange !?

 

This is my css:

 

* ----- Change background Image Transparency - Now Playing ----*/
html.layout-desktop.noScrollY div.backgroundContainer.withBackdrop, html.layout-mobile.noScrollY div.backgroundContainer.withBackdrop {
    background: rgba(0, 0, 0, .1);
}

/* My Media Image Size */
.smallBackdropCard {width: 20.0% !important;}

/*Remove Playlist section*/
#nowPlayingPage div.playlistSection {display: none; }

/*Remove SecondaryButtons*/
#nowPlayingPage div.nowPlayingSecondaryButtons {display: none; }

/* Album cover smaller */
#nowPlayingPage div.nowPlayingPageImageContainer {width: 12%; }

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

 

Happy2Play
Posted

Sorry that code is for the redesign in 4.3.x.x.  I do not see a way to do this in 4.2.1.0.

KickVanelli
Posted

Ok Happy2Play. No problem.

I'll wait patiently for 4.3.x.x.

Thanks.

KickVanelli
Posted

Hi @@Happy2Play,

 

Is it possible to hide the backdrops on the home screen, the movies screen and the TV-series screen (for the tiome being) ?

Happy2Play
Posted

Hi @@Happy2Play,

 

Is it possible to hide the backdrops on the home screen, the movies screen and the TV-series screen (for the tiome being) ?

 

Sure just disable "enable backdrops" it is a per user setting.  This disables backdrop during normal navigation.  User icon (icon top right)-Display

KickVanelli
Posted

Stupid simple.

I thought it would remove also the music artist backdrops.

Thanks very much Happy2Play.

Posted

You could use mutationObserver have it look for the music album card to appear on screen and then set your back drop opacity accordingly.

KickVanelli
Posted

Thank you chef.

Too difficult for me.

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