Jump to content

Add grey background to Details page fom name downwards


arrbee99

Recommended Posts

arrbee99

As per the above, am wanting to have a bright backdrop (which I already have) with a somewhat opaque background from the name of the media downwards.

Have got this so far -

div.flex-grow.topDetailsMain.flex.flex-direction-column {background: rgba(0, 0, 0, 0.3);}

giving -

408263097_EmbymakeopaquefromNamedownwards.thumb.JPG.3e85560087b6af0a245eb8b37de691b6.JPG

but can't get it to work for everything lower down. Have played with -

div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {{background: rgba(0, 0, 0, 0.3);}

div.scrollSlider.flex-grow.padded-top-page.itemMainScrollSlider.scrollSliderY {background: rgba(0, 0, 0, 0.3);}

and I don't know what else, but...

Link to comment
Share on other sites

Happy2Play

Something like this but you will have to look at each sections margin-top, unless you like the stripes.

div.itemMainScrollSlider div.verticalSection {background: rgba(0, 0, 0, 0.3);}

 

  • Like 1
Link to comment
Share on other sites

Happy2Play
14 minutes ago, arrbee99 said:

Thanks very much. I shall try to find some margins...

Something like this

div.itemMainScrollSlider h2.sectionTitle {margin-top: 0;}
div.itemMainScrollSlider .sectionTitleContainer {margin: 0;}
div.itemMainScrollSlider .verticalSection-extrabottompadding {margin-bottom: 0;}

 

  • Like 1
Link to comment
Share on other sites

arrbee99

Thanks. I was trying this -

 div.itemMainScrollSlider div.verticalSection {
  margin-top: 12px;
  margin-bottom: -12px;
 }

which seems to leave a gap between the title  / info stuff and Next Up, then no gaps between Next Up and More Like This, and then a gap to Links

Will definitely have a play with the above though.

Link to comment
Share on other sites

Happy2Play

Maybe something like this if you need more spacing otherwise you would have to target specific sections.

div.itemMainScrollSlider .verticalSection:not(.detailMainContainer) {padding: 1em 0 0 0;}

 

Edited by Happy2Play
  • Like 2
Link to comment
Share on other sites

arrbee99

Unsurprisingly, I don't know what I want, but hopefully I'll know what I want when I see it 😀

Link to comment
Share on other sites

You lose the partial image "clues" that more exists below to scroll to.

It looks like your screen is just that. As if nothing exists further below. That is why those cut-off items appear because the design guidelines say to give users context clues. Without those context clues certain screens may fail certification on app stores. I am being serious. They will reject you and maybe not tell you why but expect you to know or go through the app and find anything not in the guidelines and fix it. So the reason you see this is the trend is moving this direction.

 

2 hours ago, arrbee99 said:

Quite promising I think...

1286491959_EmbymakeopaquefromNamedownwards1.thumb.JPG.34608873b2b184cbf3241680e786f58d.JPG

 

Edited by speechles
Link to comment
Share on other sites

arrbee99

Thats one of the reasons I like it, no tops of actors showing (and no poster of course).

As I'm sure you know, its css just for browsers only and personal use, so it can be changed without worrying about daft (IMHO) certification requirements (I still don't see why there can't be a down arrow instead).

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