Adding space to Detail View

[Smitty018210 143]

Forgive me if this has been asked here before.

I tried to search for bit, but I am not even sure what I am looking for honestly.

What I would like to do is add space to the top of detail view of TV shows and movies. So that I can see more of the background image.

I don't want this space everywhere just on the detail page for movies and TV Shows

Right now it looks like this:

 

Ideally I would like it to look something more like this:

 

 

Is this possible?

I know very little, next to nothing about coding.

Thanks!

 

Edited April 24, 2024 by Smitty018210

[Happy2Play 9780]

@Smitty018210Have you looked here?  But it is more of everywhere.

 

But will look for some specific code for you.

[Happy2Play 9780]

But it is difficult with every item page having more or less information on the same code.

 

div.view-item-item .padded-top-page {position: relative; top: 50%;}

But applies to all item views as there really isn't much difference for any item view.

[Smitty018210 143]

Happy that looks GREAT!

I think I can make that work.

Forgive me I truly have no idea what I am doing lol

I just had this code to the custom css section in the server settings?

 

[Happy2Play 9780]

2 minutes ago, Smitty018210 said:

I just had this code to the custom css section in the server settings?

Yes but remember it only applies to the local web client not online or any other client/app.

[Smitty018210 143]

1 minute ago, Happy2Play said:

Yes but remember it only applies to the local web client not online or any other client/app.

Well Crap! That wont work then. Dang it.

I am trying to make my web browser look like "tv mode" in desktop mode because of the issue with the clickable header not working in tv mode.

Thanks for the help anyway happy. Maybe this will help someone else down the road.

[Suliamu 36]

Is it possible to distinguish with css between the different "modes" one can set up in the webclient? 
It would be great if this fix here would only apply to Desktop and Tabletmode, but not in "TV Mode". 
In "TV Mode" this css actually breaks the experience. 
When you open the detail view of a movie for example the controls are out of the viewing area.
If you press down to actually see the controls, you land in the "cast"-section.
If you go up again, you again cannot see the "play", "resume", controls.

[Happy2Play 9780]

5 minutes ago, Suliamu said:

Is it possible to distinguish with css between the different "modes" one can set up in the webclient? 
It would be great if this fix here would only apply to Desktop and Tabletmode, but not in "TV Mode". 
In "TV Mode" this css actually breaks the experience. 
When you open the detail view of a movie for example the controls are out of the viewing area.
If you press down to actually see the controls, you land in the "cast"-section.
If you go up again, you again cannot see the "play", "resume", controls.

You just have to target elements differently or add :not element that pertain to that mode.

div.view-item-item .padded-top-page:not(.animatedView.darkContentContainer-tv .padded-top-page) {position: relative; top: 50%;}

 

[Suliamu 36]

1 minute ago, Happy2Play said:

You just have to target elements differently or add :not element that pertain to that mode.

div.view-item-item .padded-top-page:not(.animatedView.darkContentContainer-tv .padded-top-page) {position: relative; top: 50%;}

 

Wow this worked perfectly. 
Thank you very much for your help!  
In my humble opinion this actually should be the default look of the webapp. 
Because why having those nice backgrounds when they are obstructed so much. Especially when a movie has a lot of actors