css posters and positions

[arrbee99 1560]

Would anyone know if its possible to remove the posters from Movies etc info page but keep them in the TV guide when you click on a TV program and get the popup with extra program info.

I use this -

/* Remove poster thumb */
div.detailImageContainer.detailImageContainer-main {display: none; }

and was hoping something like this might work, but surprisingly not -

div.detailImageContainer.detailImageContainer-main:not(div.itemView.view) {display: none; }

Same applies to moving stuff down in Movies etc info page and in Music when an album is selected and you have its info with the list of the albums songs underneath, but not moving things down in the TV guide popup.

Tried this but it affects everything

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

while this moves the Movie info down (good), doesn't move the info down in the TV guide popup (good), but doesn't move the album songs down (bad)

/* Move details down only not affecting music or TV program details */
div.flex-grow.topDetailsMain.flex.flex-direction-column.topDetailsMain-graphic {padding-top: 55em; }

Hope I've at least got the explanation right. Will add pictures if necessary...

[Happy2Play 8282]

22 minutes ago, arrbee99 said:

Would anyone know if its possible to remove the posters from Movies etc info page but keep them in the TV guide when you click on a TV program and get the popup with extra program info.

I use this -

/* Remove poster thumb */
div.detailImageContainer.detailImageContainer-main {display: none; }

and was hoping something like this might work, but surprisingly not -

div.detailImageContainer.detailImageContainer-main:not(div.itemView.view) {display: none; }

Not sure if I got this correct as I don't have guide info but clicked on a channel

div.detailImageContainer:not(.dialogContainer .detailImageContainer) {display: none; }

Images help me better.

Sort of guessed

div.view .topDetailsMain:not(div.view-livetv-livetv .topDetailsMain){padding-top: 55em; }

 

[arrbee99 1560]

Thank you.

If I (hopefully) apply your two lines (and only your two lines), I get no posters and everything moved down for movies (good) -

Everything moved down for music (good) -

Posters in the guide but everything moved down (half good) -

 

 

[Happy2Play 8282]

8 minutes ago, arrbee99 said:

Thank you.

If I (hopefully) apply your two lines (and only your two lines), I get no posters and everything moved down for movies (good) -

Everything moved down for music (good) -

Posters in the guide but everything moved down (half good) -

 

 

How about this as that pop-up is dialogcontainer not view-livetv-livetv.

div.view .topDetailsMain:not(div.dialogContainer .topDetailsMain){padding-top: 55em; }

 

[arrbee99 1560]

Yep. That works great thank you.

When you do a 'not' thing, does it always have to include similar stuff to the bit before the 'not' or can it be completely different ?

[Happy2Play 8282]

8 minutes ago, arrbee99 said:

Yep. That works great thank you.

When you do a 'not' thing, does it always have to include similar stuff to the bit before the 'not' or can it be completely different ?

Don't know all the rules but believe they need to be the same/similar as the targeted element.

I chose a higher level but almost any of these would have worked inline

class="itemView view flex flex-direction-column scrollFrameY flex-grow emby-scroller page focuscontainer-x focuscontainer-y view-item-item focuscontainer dialog dialog-animated dialog-fixedSize dialog-medium-tall dialog-fullscreen-lowres dialog-swipe-close dialog-scrollY scrollY overflowYScroll opened"

So probably this would have been better.

div.view .topDetailsMain:not(div.view-item-item .topDetailsMain){padding-top: 55em; }

 

[arrbee99 1560]

Apparently not. That

div.view .topDetailsMain:not(div.view-item-item .topDetailsMain){padding-top: 55em; }

moves everything back to the top for Movies, music etc

[Happy2Play 8282]

3 minutes ago, arrbee99 said:

Apparently not. That

div.view .topDetailsMain:not(div.view-item-item .topDetailsMain){padding-top: 55em; }

moves everything back to the top for Movies, music etc

Yep sorry didn't realize detail screen all changes to view-item-item.  So a higher level has to be targeted in this case dialogContainer for livetv.

 

[arrbee99 1560]

In the third picture above (Two and a Half Men), would there be a way to make just that (huge) poster smaller please. I've tried and somehow made it smaller, but the text next to it didn't move over, so there was quite a big gap.

[Happy2Play 8282]

18 minutes ago, arrbee99 said:

In the third picture above (Two and a Half Men), would there be a way to make just that (huge) poster smaller please. I've tried and somehow made it smaller, but the text next to it didn't move over, so there was quite a big gap.

You need to move a level

Just edited existing code, original is 14vw

@media all and (orientation: landscape) {
    div.detailImageContainer-main.detailImageContainer-small {
        max-width: 10vw;
    }
}

But guessing as I don't have guide info so am setting off channel.

Edited March 10 by Happy2Play

[arrbee99 1560]

Doesn't seem to make any difference.

[Happy2Play 8282]

2 minutes ago, arrbee99 said:

Doesn't seem to make any difference.

I have no reference as I have no guide info so does Channel show/do the same per the guide?

Edited March 10 by Happy2Play

[arrbee99 1560]

Is it to do with Landscape ? Its actually a vertical poster.

[arrbee99 1560]

Not sure what you mean by Channel ?

[Happy2Play 8282]

14

10

But as mentioned all I can do is guess these card are the same as I have no guide info.

3 minutes ago, arrbee99 said:

Not sure what you mean by Channel ?

Click channel on left of guide.

Edited March 10 by Happy2Play

[arrbee99 1560]

Oh, that Channel.

Seems to be the same size before and after applying.

I guess where you put it in the css code doesn't matter ?

[Happy2Play 8282]

Only other thing since I don't have this info would you be you posting the selector info for that image or a screenshot of the dev console with the image element.

[arrbee99 1560]

Would that be these ?

For Channel -

For Program in Guide -

 

[Happy2Play 8282]

It is the exact same elements so did you apply the previous code?

But you can use this instead if you if you prefer.

div.detailImageContainer-main.detailImageContainer-small {max-width: 10vw;}

[arrbee99 1560]

I checked about 5 times, but far as I could tell it was applied but wasn't working. Then I tried your other suggestion and that works well for the channel (e.g. Duke in my case) but not for the poster in the guide. Then I tried just copying the whole of that .detailImageContainer line in the console thing but using 'vw' and that finally seems to make the poster in the guide smaller -

Not very elegant I guess ? -

div.detailImageContainer.detailImageContainer-main.flex.flex-direction-column.justify-content-center.itemsContainer.detailImageContainer-hidemobile.detailImageContainer-portrait.generalItemsContainer.vertical-wrap {max-width: 10vw;}

gives -

and

 

[Happy2Play 8282]

8 minutes ago, arrbee99 said:

I checked about 5 times, but far as I could tell it was applied but wasn't working. Then I tried your other suggestion and that works well for the channel (e.g. Duke in my case) but not for the poster in the guide. Then I tried just copying the whole of that .detailImageContainer line in the console thing but using 'vw' and that finally seems to make the poster in the guide smaller -

Not very elegant I guess ? -

div.detailImageContainer.detailImageContainer-main.flex.flex-direction-column.justify-content-center.itemsContainer.detailImageContainer-hidemobile.detailImageContainer-portrait.generalItemsContainer.vertical-wrap {max-width: 10vw;}

gives -

and

 

Per the dev console did you try the code below your custom css?  As it is specific to portrait.

Where channel is .detailImageContainer-small and Show is .detailImageContainer-portrait.  So specific elements will need to be applied.

[arrbee99 1560]

You won't be surprised to hear I'm not sure what you mean, except if it this (which also works) -

div.detailImageContainer-main.detailImageContainer-small {max-width: 10vw;}

div.detailImageContainer-main.detailImageContainer-portrait {max-width: 10vw;}

But the good news is I'll be trying to change the radius of the corners and add a border to that poster soon, so I hope you've got your Patience hat on...