newtester 1 Posted January 23, 2021 Share Posted January 23, 2021 Here is what I intend to achieve: Link to comment Share on other sites More sharing options...
PenkethBoy 2063 Posted January 23, 2021 Share Posted January 23, 2021 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 1 Link to comment Share on other sites More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted January 23, 2021 Share Posted January 23, 2021 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. 1 Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 I guess something like this. div.detailMainContainer .cardPadder-portrait {padding-bottom: 56.25%;} Link to comment Share on other sites More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 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 More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 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 More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 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. Link to comment Share on other sites More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 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 More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 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 More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 I have updated my reply to include the inspect screenshot, I used the latest Chrome in Windows 7 64X Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted January 23, 2021 Share Posted January 23, 2021 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 More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 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 More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 3 minutes ago, Happy2Play said: And can you show what you see if you click on .cardScalable cardPadder-portrait. Link to comment Share on other sites More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 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. 1 Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 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 More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted January 23, 2021 Share Posted January 23, 2021 You can make things look quite good - Link to comment Share on other sites More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
newtester 1 Posted January 23, 2021 Author Share Posted January 23, 2021 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 More sharing options...
Happy2Play 8242 Posted January 23, 2021 Share Posted January 23, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now