About episode-only details page - ES 47100

[CarlosLima 148]

Hi,
Is it possible to use CSS/HTML code to change the marked position in A to the marked position in B?
I would like to move everything down so that the background image is more prominent.
I do not intend to affect other screens, only and exclusively the EPISODES details screen.
Thank you for that.

[CarlosLima 148]

The idea is to have an episode details screen look like this.

[Luke 37071]

If you just want to push content down, then yes that is possible by adding a margin-top somewhere.

[CarlosLima 148]

Thanks for answering.
Yep, that's exactly what I'm aiming for, "pushing down" on the episode details screen only.
Thank you for code that makes the magic happen.

[visproduction 123]

Carlos,

Some things to consider. 

1. The episode images are grabbed at low resolution and would not look good enlarged.  To fix this, either the .js code would need to be adjusted, which would probably fail and revert back with every update, or you would need to replace each episode image with a higher resolution, one at a time.
2. If you make the look like your image above, you will also need additional custom css code for tablet and other css styles for mobile.  Without the extra code, tablet and mobile will probably look broken.  You do this by adding @media css styles.  These are always very tricky and changes in episode area, also can affect other areas in TV media. 
3. Be aware that different episode aspect ratios thumbnails are adjusted with different styles.  Fixing the 16:9 episode thumbnails does not fix the 4:3 thumbnails for tablet and mobile.  You may not care about mobile, but over 50% of users browse with mobile now.  So, if you only do desktop css and don't do mobile, then perhaps more than 50% of your visitors will see broken pages.

I designed 3 css custom style changes for desktop, tablet and mobile for TV. These custom adjustments work for all TV media pages.  Tablet and Mobile look like your design. The smaller automatically created episode images looks fine on mobile portrait on the smaller screen. 

My desktop design is different.  I removed the dimming background masks. The user scroll down if they want to see the background.  The button highlight and the text background becomes solid when you hover.   I like it, but many people will probably find it too busy.

I can quote code how this works, but I am not sure you want it.  It's not the solution you asked for. Do you think you want to also adjust for tablet and mobile?  It's a lot more work.  Have a look now to see your styles perform in tablet and mobile.  Hopefully they will work.  You will see more of what I mean of how doing custom css styles to fix tablet and mobile is something to consider.

 

Edited May 1, 2023 by visproduction

[GrimReaper 3296]

@CarlosLimal'm a bit confused about your scope there, your first post shows Season view, your second post shows Series view yet your statement refers to Episode view:

3 hours ago, CarlosLima said:

I do not intend to affect other screens, only and exclusively the EPISODES details screen.

Just to clarify, which view you want changed? 

FYI I have similarly CSSed both my Series and Episode views (retained episode thumb):

 

[CarlosLima 148]

48 minutes ago, visproduction said:

Carlos,

Some things to consider. 

1. The episode images are grabbed at low resolution and would not look good enlarged.  To fix this, either the .js code would need to be adjusted, which would probably fail and revert back with every update, or you would need to replace each episode image with a higher resolution, one at a time.
2. If you make the look like your image above, you will also need additional custom css code for tablet and other css styles for mobile.  Without the extra code, tablet and mobile will probably look broken.  You do this by adding @media css styles.  These are always very tricky and changes in episode area, also can affect other areas in TV media. 
3. Be aware that different episode aspect ratios thumbnails are adjusted with different styles.  Fixing the 16:9 episode thumbnails does not fix the 4:3 thumbnails for tablet and mobile.  You may not care about mobile, but over 50% of users browse with mobile now.  So, if you only do desktop css and don't do mobile, then perhaps more than 50% of your visitors will see broken pages.

I designed 3 css custom style changes for desktop, tablet and mobile for TV. These custom adjustments work for all TV media pages.  Tablet and Mobile look like your design. The smaller automatically created episode images looks fine on mobile portrait on the smaller screen. 

My desktop design is different.  I removed the dimming background masks. The user scroll down if they want to see the background.  The button highlight and the text background becomes solid when you hover.   I like it, but many people will probably find it too busy.

I can quote code how this works, but I am not sure you want it.  It's not the solution you asked for. Do you think you want to also adjust for tablet and mobile?  It's a lot more work.  Have a look now to see your styles perform in tablet and mobile.  Hopefully they will work.  You will see more of what I mean of how doing custom css styles to fix tablet and mobile is something to consider.

 

Hi, in advance thank you so much for your time and effort to help. I would really like to just download everything in the interface only on a PC browser (without affecting things on a cell phone or tablet). I thought that, as Luke mentioned, just adding a margin for everything to go down would be enough. I don't have any problem with the need to re-edit HTML code every time the server is updated, as I've been doing this forever and it's fine for me because I have everything documented.
Thanks for your help.

[CarlosLima 148]

31 minutes ago, GrimReaper said:

@CarlosLimal'm a bit confused about your scope there, your first post shows Season view, your second post shows Series view yet your statement refers to Episode view:

Just to clarify, which view you want changed? 

FYI I have similarly CSSed both my Series and Episode views (retained episode thumb):

 

HI, @GrimReaper
Thank you so much too.
I really liked the two images you posted and I would love to be able to use your style, both in the episode and in the series as well.
Is it possible for you to share your code so that I have this same layout?
Very grateful for your interest in helping as well.

Edited May 1, 2023 by CarlosLima

[arrbee99 1560]

Maybe this -

/* Move details down */
div.flex-grow.topDetailsMain.flex.flex-direction-column  {padding-top: 15em; }

it might not be specific enough page-wise though, but worth a try.

[GrimReaper 3296]

19 minutes ago, CarlosLima said:

Is it possible for you to share your code so that I have this same layout?

Sure, here's a snippet to get you started, some height/width adjustment might be needed for your Display ratio. 

 

Carlos_CSS.txt

[CarlosLima 148]

37 minutes ago, GrimReaper said:

Sure, here's a snippet to get you started, some height/width adjustment might be needed for your Display ratio. 

 

Carlos_CSS.txt 895 B · 1 download

Amazing.
You captured exactly what was going through my mind.
No words to thank you for all your time.
Still, thank you very much for that.

[CarlosLima 148]

Then I realized that the code doesn't just download the series library (season and episode) but everything; movies, concerts, music too, but that created other ideas in my mind and I think I'll really use your style for all the emby screens.

[GrimReaper 3296]

11 minutes ago, CarlosLima said:

Amazing.
You captured exactly what was going through my mind.
No words to thank you for all your time.
Still, thank you very much for that.

No prob, glad we've got you squared out. 

7 minutes ago, CarlosLima said:

Then I realized that the code doesn't just download the series library (season and episode) but everything; movies, concerts, music too, but that created other ideas in my mind and I think I'll really use your style for all the emby screens.

Yeah, it applies to all detail screens, though I don't use music so have no idea how it affects that, for me it's movies only in addition, which was my scope, to have movie/series/episode views streamlined. 

Edit: Oh, and Collections also. 

Edited May 1, 2023 by GrimReaper
Append