A few css bits mostly from other people

[King Pin 28]

Just cleared my cache and scrolling speed doesn't matter.

I even turned off adblockers.

[arrbee99 1560]

Don't know whats left really. Maybe other browser extensions ?

It'll probably be one of those things someone else mentions (if we're lucky) and we'll go, oh, of course...

Are you on the beta server (As I am) ?

[King Pin 28]

I'm on 4.7.2 I don't think it's BETA I usually stay away from BETA versions.  

 

[arrbee99 1560]

Probably doesn't matter anyway, just grasping at straws.

I just tried Firefox, Chrome and Edge btw, and I still only get that header appearing (or rather not disappearing) on Firefox when I scroll down slowly.

[King Pin 28]

Found out why my header wasn't scrolling.  

It was my browser DuckDuckGo Privacy extension. 

Once I gave the Emby app permission everything worked again. 

[King Pin 28]

Has anyone else lost the ability to use a custom bacground with the latest server update?

I loaded my saved script but I can't get my background back. 

[arrbee99 1560]

If you've got something like this css for the Home page, under the section "/* Moving My Media Down */" -

/* Add to blank home page online image Gollum - remember to untick Enable Backdrops in Display */
/*div.scrollFrameY.flex.flex-direction-column.flex-grow.focuscontainer-down.emby-scroller.scrollY.overflowYScroll {background-image: url("https://static0.srcdn.com/wordpress/wp-content/uploads/2019/03/Gollum.jpg");}*/
/*div.scrollFrameY.flex.flex-direction-column.flex-grow.focuscontainer-down.emby-scroller.scrollY.overflowYScroll {background-size: cover;}*/

you need to replace with something like this -

/* Add to blank home page online image Gollum - remember to untick Enable Backdrops in Display */
[data-type="home"] div.focuscontainer-down {background-image: url("https://static0.srcdn.com/wordpress/wp-content/uploads/2019/03/Gollum.jpg");}
[data-type="home"] div.focuscontainer-down {background-size: cover;}

Hopefully, as mentioned, thats for the Home page. If you have an image under the TV Guide, that still seems to work.

I need to put up a new version, it juse always seems to be a tomorrow, tomorrow, tomorrow thing...

EDIT - thanks to Happy2Play for the new css

Edited July 1, 2022 by arrbee99

[King Pin 28]

Sorry for the late reply.  Thank you @arrbee99 and @Happy2Play that worked perfectly! 

[arrbee99 1560]

Just added new version in first post. Bit of a tidy up / fix up and a few things added. Nothing major but not too bad.

Thanks to Happy2 Play etc etc for the non amateurish bits

[arrbee99 1560]

If any of you have that swimming dinosaur backdrop thing for your TV guide backdrop, not sure if its been removed from the interweb. Maybe temporary, maybe not. Just FYI.

[King Pin 28]

Anyone can tell me which part of the script to change so I can change the size of the tiles or slider sections on the homepage?

I want to reduce them roughly 25%.

 

[Happy2Play 8282]

@King Pin Everywhere

something like adjust to your needs

@media (min-width: 100em)
{.portraitCard, .overflowPortraitCard {
    width: 9vw;}
}

or limit to Home Screen

@media (min-width: 100em)
{[data-type="home"] .portraitCard, .overflowPortraitCard {
    width: 9vw;}
}

 

Edited October 19, 2022 by Happy2Play
fixed code as it was missing secondary brackets

[King Pin 28]

Thanks Happy.  

I've tried both changing the "em" & "vw"  but no changes at all.  

 

Does it matter where I paste that in the script? 

[Happy2Play 8282]

3 minutes ago, King Pin said:

Thanks Happy.  

I've tried both changing the "em" & "vw"  but no changes at all.  

 

Does it matter where I paste that in the script? 

No but could be a resolution thing, try removing "@media (min-width: 100em)" or lowering to say 80em.

Or a conflict with other code.

[King Pin 28]

Love ya Happy!  

Removing "@media (min-width: 100em)" worked.  

 

Thank you so much! 

[Happy2Play 8282]

@King Pin Sorry it should be a code error as I copied from console instead of code as it is missing brackets

@media (min-width: 100em)
{.portraitCard, .overflowPortraitCard {
    width: 9vw;}
}

or

div.portraitCard, div.overflowPortraitCard {
    width: 9vw;
}

 

[King Pin 28]

Happy I'm not sure if this is controllable but does this script also control the outter shadow on images from Cover Art? 

Below is a picture of my screen and I would love if that grey shadow could disappear to give the images a more finished look like they were floating. 

[Happy2Play 8282]

@King Pin

Something like this.

button.cardImageContainer {
    background-color: transparent;
}

 

[King Pin 28]

You are THE BEST!!!!

 

[Olywa123 46]

Hi @Happy2Play,

 Hoping you might help. I have used the below code for a few yrs to reduce the size of only the My Media buttons but with recent updates it's broken and my buttons are way too large (I have ~12 buttons so have to scroll them now whereas before I could fit them all on the page). 

I tried the code you provided above for KingPin but that impacts everything (incl. movies - which was intentional there I believe).

Any way to manipulate only the My Media buttons again ?

Code I was using until now:

/* My Media Buttons Image Size
(can be a percentage 'width: 8%' or pixel count 'width: 85 px' ) */
.smallBackdropCard {width: 85px !important;}

and

/* My Media Buttons Gap Size */
#homeTab div.section0 div.cardBox {margin: 0 .19em; }

 

My currently massive media buttons:

 

[Happy2Play 8282]

@Olywa123 they are no longer .smallBackdropCard they are .backdropCard and may have to target section if you only want that section affected.

As for Gap size the ids don't exist so #HomeTab will not work change to [data-type="home"] or div.homeSectionsContainer.

/* My Media Buttons Image Size
(can be a percentage 'width: 8%' or pixel count 'width: 85 px' ) */
[data-type="home"] div.section0 .backdropCard {width: 85px;}

and

/* My Media Buttons Gap Size */
[data-type="home"] div.section0 div.cardBox {margin: 0 .19em;}

Or have you tried the new card size option? User Icon-App Settings-Display, Image Size?  It is global though.

Edited November 6, 2022 by Happy2Play

[Olywa123 46]

@Happy2Play

How long have you been here performing your wizardry, it must be 10years!! I was 'Happy' to see you still around, I knew you'd have the answer  

I did actually try with landscapeCard, so I was close!  And I had tried the card size option but want only my media buttons smaller but media cards default size.

It worked perfectly. Thank you so much!!  

[Happy2Play 8282]

7 minutes ago, Olywa123 said:

@Happy2Play

How long have you been here performing your wizardry, it must be 10years!! I was 'Happy' to see you still around, I knew you'd have the answer  

I did actually try with landscapeCard, so I was close!  And I had tried the card size option but want only my media buttons smaller but media cards default size.

It worked perfectly. Thank you so much!!  

Not sure why you are getting scroll on My Media though unless it is resolution.  But you could remove it.

And it is all trial and error for me as I new nothing about css before playing around with it in Emby.

Edited November 6, 2022 by Happy2Play

[Olywa123 46]

Quote

Not sure why you are getting scroll on My Media though unless it is resolution.  But you could remove it.

Thanks again mate, the first option in your link didn't seem to work for me but the second one did the trick 

[arrbee99 1560]

Far as I can tell, the latest beta (.17 and / or .18) needs a few bits if anyone wants to adjust the css box -

change

/* Make CSS box bigger */
/*#txtCustomCss {height: 900px; width: 860px;}*/

to

/* Make CSS box bigger */
textarea.txtCustomCss {height: 900px; width: 860px;}

and adjusting the alphapicker -

change

/* Make alphapicker slightly bigger, lower and change colour */
/*div.alphaPickerRow-vertical button {color: var(--myhighlight);}
div.alphaPicker-vertical {font-size: 135% !important;}
div.alphaPicker-fixed {top: 12em;}*/

to

/* Make alphapicker slightly bigger, lower and change colour */
div.alphaPickerRow button {color: var(--myhighlight);}
div.alphaPickerRow {font-size: 135% !important;}
div.alphaPickerRow {top: 12em;}

@Happy2Play would there be any chance you might know a way to position the alphapicker if desired vertically please ? I left the above (last line) in but it doesn't actually do anything...