Jump to content

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


newtester

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 comment
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 comment
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 comment
Share on other sites

Happy2Play

I guess something like this.

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

 

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