Jump to content

Is there a way to css select the image on the Actor's page only?


visproduction

Recommended Posts

visproduction

Web Emby Custom css


Hi,  I am trying to adjust just the Actor image for mobile to look better. Adding style to this image also changes the backdrop image on the Media page.

Actor's image:

Quote

body > div:nth-child(10) > div > div.topDetailsContainer.flex.flex-direction-row > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.itemBackdropContainer > div

Media page backdrop image:

Quote

body > div.itemView.darkContentContainer-item.view.flex.flex-direction-column.scrollFrameY.flex-grow.emby-scroller.page.scrollY.overflowYScroll.focuscontainer-x.view-item-item.darkContentContainer-tv > div > div.topDetailsContainer.flex.flex-direction-row > div.flex-grow.topDetailsMain.flex.flex-direction-column.topDetailsMain-graphic > div.itemBackdropContainer > div

Any CSS style for the Actor's image also changes the backdrop on the media page, picking up '.itemBackdropContainer'

I even tried  @supports selector([some class]) Not ([some other class]) {
... and couldn't get that to work.

Is there something like a .view-list-actor to find only the Actor page?  I know there is .view-list-list.  That doesn't work either. 

The custom look for mobile is almost done, except for this.  Any ideas?

Thanks.

MobileCSSActorimagestyleconnectedtobackdropmediapage.jpg.7a5d28a495677f8c2b3133361eed74bd.jpg

Edited by visproduction
Link to comment
Share on other sites

visproduction

The actor's image should be css style resized and not update the media page backdrop image....

Wait, I just found two CSS class selections seems to target only the Actor's image. I 

/* M432 Actor image only */
	body > div:nth-child(11) > div > div.topDetailsContainer.flex.flex-direction-row > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.itemBackdropContainer > div, .itemBackdrop-contain {
        height: 200%;
        top: 42px !important;
        transform: scale(0.9);
	} 

This targets only the Actor's page / Actor's portrait. 
It's another problem to put the actor's name further down.  Every margin css push down, makes the previous media page have too much gap below the media.  
The way the classes are designed makes it nearly impossible to create a custom css style easily.  Even the full select address fails to only target one page template. There are many styles that need tweaking on one page type that leaks over onto other page types.  Media pages classes can affect TV episode page classes.   If I was site dev, I would perhaps make similar classes on different templates have different names... an extra -actor or -tvshow, -tvepisodes... etc. to fix this.


It would nice, if there were page template address like view-home-home gets only to the home page. 

view-actor
view-tvshow
view-tvepisodes
view-tvepisode-single

If these worked, for a page type, it would be eaiser... or don't name the classes the exact names on different page templates.  When I custom style Media page buttons, TV buttons move around... In this case finding style addresses that only change the Actor's image on the Actor's page is very tricky.  I have to target the div above the Actor's image div that happens to only be on the Actor's page.

Thanks for checking in.

Actor portrait adjust needs very tricky css selection - div above.jpg

Edited by visproduction
  • Like 1
Link to comment
Share on other sites

Happy2Play

@visproductionDid you look at the difference in the class for Actor vs Series/Season/Episode?

Didn't do too much looking but maybe 

div.itemBackdrop.itemBackdrop-contain {
    transform: scale(0.7);
}

But not sure what else uses "itemBackdrop-contain".  But saw that Actors did while Series/Season/Episode did not.

 Or depending on what you are doing use :not on that element so everything except

div.itemBackdrop:not(.itemBackdrop-contain)

 

Edited by Happy2Play
  • Thanks 1
Link to comment
Share on other sites

Happy2Play

You shouldn't need the entire selector as there is only one itemBackdropContainer, but I guess a copy and paste is the quickest.

div.itemBackdropContainer .itemBackdrop-contain

 

Link to comment
Share on other sites

visproduction

Happy,

Thanks... It's pretty messy.  Actor vs. media page.  There are a lot of classes the same.  I have the actor's image working correctly going in, but if you go to the actor's media collection and then back button out, the Actor's page breaks!  Even a page refresh fails to fix it.  Hmmmm... Ha ha... Then back to the media page and pick the same actor, and the actor's page is correct again.  Wow!  I can't even imagine what is going on.  Obviously the back button fails to see all the css styles.... maybe including the body > ... throws it off.  I can try to clean up... I need a break... Whew!

Another crazy related issue.  Apparently my older mobile Moto g6 play on Android 8.0 (1080 x 2160 pixels, 18:9 ratio (~424 ppi density)) pulls an alternate css code entirely and skips my custom css for desktop and looks good, just with base emby style.  My other 12 G with wider screen pulls the custom and will need extra help.  Hmmm, so somewhere emby detects the older phone, skips all custom css.  I am guessing it detects the Android 8.0.  So, trying to do a custom for mobile seems really tough, nearly impossible to get everything right.  I do have width checks for all mobile screen types, so when I update css for mobile, desktop does not change.  Anyway, is this why no one talks about custom css for mobile? Ha!

Edited by visproduction
Link to comment
Share on other sites

visproduction

Correction... I was using Android Emby which skips any custom css that happens with direct browser access.  Now that makes sense.  I did find a solution.  It may need some clean up.  Sometimes the full select route all the way from body > may help select only the Actor page template.  This works to select only the Actor's page backdrop image and adjust it separately from the Media page backdrop image on Mobile.  Very tricky...  I doubt anyone will ever use it...

 

/* Mobile < 320px width: Actor image only */
	body > div:nth-child(11) > div > div.topDetailsContainer.flex.flex-direction-row > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.itemBackdropContainer > div, .itemBackdrop-contain {
        height: 200%;
        top: 42px !important;
        transform: scale(0.9);
	} 
	/* M320 Actor's image forced contain for landscape wide images to get cropped to the left side only */
	.itemBackdrop-contain {
    background-size: contain !important;
	}
	/* M320 Actors div area below portrait image */
	body > div:nth-child(8) > div > div.topDetailsContainer.flex.flex-direction-row > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.padded-left.padded-left-page.padded-right.detailMainContainerParent > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.detailMainContainer-withbackdrop.detailMainContainer-withitembackdrop > div.flex-grow.detailTextContainer.verticalFieldItems.details-largefont > div.nameContainer.focuscontainer-x.verticalFieldItem.verticalFieldItems.focusable > div {
		top: 266px;
	}
	/* M320 Actors div area above the Actor's media collection posters */
	.topDetailsContainer.flex.flex-direction-row > div.flex-grow.topDetailsMain.flex.flex-direction-column > div.padded-left.padded-left-page.padded-right.detailMainContainerParent > div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.detailMainContainer-withbackdrop.detailMainContainer-withitembackdrop > div.flex-grow.detailTextContainer.verticalFieldItems.details-largefont > div.nameContainer.focuscontainer-x.verticalFieldItem.verticalFieldItems.focusable > div > h1 {
		margin-top: 242px !important;
	}

 

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...