Jump to content

Is it possible to change the default poster display orientation with custom css?


Recommended Posts

PenkethBoy

i think it would be one size fits all

as css does not have a if then else type function

would be doable with mode to the js files - but then it needs to be reapplied on each server update - not a huge problem but can be a PIA if on beta server which usually (not currently) changes on a regular basis

  • Like 1
Link to post
Share on other sites
newtester

Thanks! I can settle for size fits all, but would like it to be all in landscape mode, is that possible with css mod? if so, can you show me the css code?

Edited by newtester
Link to post
Share on other sites
arrbee99

I can't resist saying, personally I think it looks much better to get rid of the poster entirely and brighten the backdrop so you can actually see it.

  • Like 1
Link to post
Share on other sites
Happy2Play

I guess something like this.

div.detailMainContainer .cardPadder-portrait {padding-bottom: 56.25%;}

 

Link to post
Share on other sites
newtester
13 minutes ago, Happy2Play said:

I guess something like this.


div.detailMainContainer .cardPadder-portrait {padding-bottom: 56.25%;}

 

Thanks! I tried your code but it didn't change the display.

Link to post
Share on other sites
newtester
15 minutes ago, arrbee99 said:

I can't resist saying, personally I think it looks much better to get rid of the poster entirely and brighten the backdrop so you can actually see it.

I really like that suggestion!  Can you post the code for making such change?  Thank you!

Link to post
Share on other sites
Happy2Play

What do you see?

Normal

normal.thumb.jpg.f64a2e836dab945614b0ecc915eb5691.jpg

Code above

enabled.thumb.jpg.afc6a6244edb5d9f1185a52c4694bee0.jpg

You know css only applies to web client LAN/WAN/DDNS server connection, not Connect or any other client/app.

Link to post
Share on other sites
newtester
7 minutes ago, Happy2Play said:

What do you see?

Normal

normal.thumb.jpg.f64a2e836dab945614b0ecc915eb5691.jpg

Code above

enabled.thumb.jpg.afc6a6244edb5d9f1185a52c4694bee0.jpg

You know css only applies to web client LAN/WAN/DDNS server connection, not Connect or any other client/app.

I am using web client (Chrome browser), it display the portrait mode like it was before:

 

SNAG-1-23-2021 74.jpg

SNAG-1-23-2021 76.jpg

Edited by newtester
Link to post
Share on other sites
Happy2Play

I am guessing that image is not a Primary image and is not .cardPadder-portrait.  You would need to right click and inspect the element to see.  My images above are from Chrome Version 87.0.4280.141

 

Link to post
Share on other sites
Happy2Play
24 minutes ago, newtester said:

I really like that suggestion!  Can you post the code for making such change?  Thank you!

Depends on if you want the container removed

div.detailImageContainer {display: none;}

or just image.

div.detailImageContainerCard {display: none;}

 

Link to post
Share on other sites
newtester

I have updated my reply to include the inspect screenshot, I used the latest Chrome in Windows 7 64X

Link to post
Share on other sites
arrbee99
25 minutes ago, newtester said:

I really like that suggestion!  Can you post the code for making such change?  Thank you!

If I've managed to find the right stuff, it should be -

/* Remove Poster Thumb */
div.detailImageContainer {display: none; }

/* Move Details Down */
div.topDetailsContainer.flex.flex-direction-row-reverse {padding-top: 53em; }

/* Make Backdrop Much Brighter */
div.backgroundContainer.withBackdrop {background: rgba(0,0,0,.10)!important;}

You'll probably have to adjust the padding-top setting. This is most likely provided by Happy2Play. If it doesn't work that probably because I can't even copy it properly...

Link to post
Share on other sites
Happy2Play
4 minutes ago, newtester said:

I have updated my reply to include the inspect screenshot, I used the latest Chrome in Windows 7 64X

And can you show what you see if you click on .cardScalable cardPadder-portrait.  

Edited by Happy2Play
Link to post
Share on other sites
newtester
4 minutes ago, Happy2Play said:

Depends on if you want the container removed


div.detailImageContainer {display: none;}

or just image.


div.detailImageContainerCard {display: none;}

 

I applied the 1st to removed container, thanks!

Link to post
Share on other sites
newtester
3 minutes ago, Happy2Play said:

And can you show what you see if you click on .cardScalable cardPadder-portrait.  

1263615822_SNAG-1-23-202177.thumb.jpg.dde604aa3b2b77f042f169aad16b5de8.jpg

Link to post
Share on other sites
newtester
7 minutes ago, arrbee99 said:

If I've managed to find the right stuff, it should be -

/* Remove Poster Thumb */
div.detailImageContainer {display: none; }

/* Move Details Down */
div.topDetailsContainer.flex.flex-direction-row-reverse {padding-top: 53em; }

/* Make Backdrop Much Brighter */
div.backgroundContainer.withBackdrop {background: rgba(0,0,0,.10)!important;}

You'll probably have to adjust the padding-top setting. This is most likely provided by Happy2Play. If it doesn't work that probably because I can't even copy it properly...

Thanks! that got rid of the poster and the background is brightened, it's a good solution for what I wanted to achieve. 

  • Like 1
Link to post
Share on other sites
Happy2Play

That clearly shows no css is being applied.  So that would suggest broken code in your css box.  But the easiest way to test would be only use the code I provided in the css box.  But sounds like you are going with the other solution.

Link to post
Share on other sites
newtester
7 minutes ago, Happy2Play said:

That clearly shows no css is being applied.  So that would suggest broken code in your css box.  But the easiest way to test would be only use the code I provided in the css box.  But sounds like you are going with the other solution.

I had copied and pasted the exact code from your post, it didn't work, then I double checked the code and found an extra white space, removed that and reapplied, still didn't work, here is what I have in Emby (directly copied and pasted here)

div.detailMainContainer.cardPadder-portrait {padding-bottom: 56.25%;}

 

I do want to compare both solutions, if I can get your code to work.

Edited by newtester
Link to post
Share on other sites
Happy2Play
7 minutes ago, newtester said:

div.detailMainContainer.cardPadder-portrait {padding-bottom: 56.25%;}

This will not work as that does not exist that is one element instead of a specifically targeted element, but breaking it down here is the full selector

body > div.mainAnimatedPages.skinBody > div.itemView.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll > div > div.topDetailsContainer.flex.flex-direction-row-reverse.topDetailsContainer-withbackdrop > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.detailImageContainer.detailImageContainer-main.flex.flex-direction-column.justify-content-center.itemsContainer > div > div > div.cardScalable.cardPadder-portrait

No idea why it is not working for you as it works in Chrome, Edge and FireFox for me.

Edited by Happy2Play
Link to post
Share on other sites
newtester
7 minutes ago, Happy2Play said:

This will not work as that does not exist that is one element instead of a specifically targeted element, but breaking it down here is the full selector


body > div.mainAnimatedPages.skinBody > div.itemView.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll > div > div.topDetailsContainer.flex.flex-direction-row-reverse.topDetailsContainer-withbackdrop > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.padded-bottom > div.detailImageContainer.detailImageContainer-main.flex.flex-direction-column.justify-content-center.itemsContainer > div > div > div.cardScalable.cardPadder-portrait

No idea why it is not working for you as it works in Chrome, Edge and FireFox for me.

I copied and pasted your new code, still didn't change the poster size, but something interesting happened: my Emby main page background now plays slide show of all my posters in my movie library, unexpected but kind of entertaining!

Link to post
Share on other sites
Happy2Play
4 minutes ago, newtester said:

I copied and pasted your new code, still didn't change the poster size, but something interesting happened: my Emby main page background now plays slide show of all my posters in my movie library, unexpected but kind of entertaining!

That is a user option on your User icon-Display "enable backdrops".  This allows backdrops to display within home screen and library navigation.

Link to post
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...