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

[newtester 1]

Here is what I intend to achieve:

[PenkethBoy 2066]

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

[newtester 1]

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 January 23, 2021 by newtester

[arrbee99 1712]

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.

[Happy2Play 9441]

I guess something like this.

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

 

[newtester 1]

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.

[newtester 1]

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!

[Happy2Play 9441]

What do you see?

Normal

Code above

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

[newtester 1]

7 minutes ago, Happy2Play said:

What do you see?

Normal

Code above

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:

 

Edited January 23, 2021 by newtester

[Happy2Play 9441]

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

 

[Happy2Play 9441]

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;}

 

[newtester 1]

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

[arrbee99 1712]

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

[Happy2Play 9441]

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 January 23, 2021 by Happy2Play

[newtester 1]

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!

[newtester 1]

3 minutes ago, Happy2Play said:

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

[newtester 1]

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. 

[Happy2Play 9441]

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.

[newtester 1]

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 January 23, 2021 by newtester

[arrbee99 1712]

You can make things look quite good -

[Happy2Play 9441]

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 January 23, 2021 by Happy2Play

[newtester 1]

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!

[Happy2Play 9441]

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.