A few css bits mostly from other people

[Happy2Play 9780]

36 minutes ago, qwdqon said:

For some reason I'm not able to copy the CSS linked from the front page and just change myhighlight and my colour to non red type color tones. The navigation bar red doesn't go away. Does anyone know why? EDIT: TIL hue

Sorry can you elaborate on what code you are using.

[arrbee99 1815]

If you mean the playing progress bar on the home page and the details page and when something is actually playing, I think you need something like

add -

/* In progress playing */
div.emby-slider-background-lower {background-color: purple;}

/* In progress not playing */
div.itemProgressBarForeground {background: purple;}

and remove (if its in there somewhere) -

/* Set Now Playing and Continue Watching progress bars to separate colour if desired */
/*div.itemProgressBarForeground {background-color: #A30000;}*/

With your own colour of course. Am sure Happy2Play has a much more elegant / better suggestion.

[arrbee99 1815]

Think I'll add this stretchy thing to music -

 

 

[King Pin 34]

I'm pretty sure this is not possible but I'll ask any way.  

I'm changing all my posters to custom images.  

Right now you have to click through 3 or 4 menus to upload an image of a movie poster.  

Is there a way to decrease that or add an upload option to the 3 dots menu?  

[King Pin 34]

Is there a way to decrease the size of this whole area about 25%? 

[arrbee99 1815]

Trial and error (so might happen to work but in the wrong way). Maybe -

div.detailMainContainerParent {margin-left: -10.4%; scale:80%;}

makes just that bit smaller, doesn't seem to affect Cast etc below that.

But if you have any shading behind the info or stuff further down it messes that up and don't know how to fix that.

[King Pin 34]

On 9/10/2025 at 5:34 PM, arrbee99 said:

Trial and error (so might happen to work but in the wrong way). Maybe -

div.detailMainContainerParent {margin-left: -10.4%; scale:80%;}

makes just that bit smaller, doesn't seem to affect Cast etc below that.

But if you have any shading behind the info or stuff further down it messes that up and don't know how to fix that.

Thank you so much that worked perfectly! 

My apologies I forgot that I posted about this. 

 

One more if I may. For a long time now and I'm not sure what I did but my video info on the bottom looks like this. 

I've searched all through the CSS trying everything and comparing it to the original but I can't find what I changed for this to happen. 

I'm guessing I reduced the sizes of the boxes. and the info doesn't fit unless I zoom out to 67?

edit: Second pic is 100% zoom on screen and first pic is 67% zoom.  

Second pic shows how the info doesn't fit. 

 

Edited September 19, 2025 by King Pin

[arrbee99 1815]

Maybe just try this (not forgetting to keep a copy of what you're using at the moment of course) -

Emby css 19 Sep 25 text.txt

might help.

Its the whole thing and needs tidying up and I know there's things that don't work properly (especially the odd border).

Maybe you have a zoom or scale setting somewhere greater than 100% - just a thought.

Edited September 19, 2025 by arrbee99

[King Pin 34]

Just updated to the latest Emby version and now the top header border has increased down 2/3 the page. 

I've went through multiple options trying to fix it with no success. 

Any help is appreciated. 

[arrbee99 1815]

33 minutes ago, King Pin said:

Just updated to the latest Emby version and now the top header border has increased down 2/3 the page. 

I've went through multiple options trying to fix it with no success. 

Any help is appreciated. 

Is that happening with the version I posted on 19 September ?

[King Pin 34]

It doesn't look like it. 

This is your latest version on my screen at 100% like my image. 

[King Pin 34]

Maybe it's best for me to use your updated version and see if I can do some minor changes to get it similar to what I had?

Although that's going to open up a whole new bag of worms.  

[arrbee99 1815]

So using the latest version of this css and the latest Emby version it shows the alien image but My Media is still off the bottom of the screen ?

[King Pin 34]

Correct. 

[King Pin 34]

I found this and changed it to 16 instead of 56 and it moved things up. 

Not sure if it's the right way to go about it. 

*/
/* My Media */

/* Make My Media not wrap */
div.view-home-home .homeSectionsContainer .itemsContainer {
    flex-wrap: nowrap;
}

/* Move down to make space for backdrop and logo - Home only */
/*div.view-home-home .homeSectionsContainer .verticalSections {
    position: relative;
    top: 56em;
    background: rgba(0, 0, 0, 0.5);
}*/

/* Move down to make space for backdrop and logo - Home and Favourites */
div.view-home-home .verticalSections {
    position: relative;
    top: 16em;
    background: rgba(0, 0, 0, 0.5);
}

Edited October 7, 2025 by King Pin

[arrbee99 1815]

Don't know if I've found the right stuff (I'm playing around with the Home page anyway) but am hoping this will help things -

it should move stuff down to make space above My Media, add the backdrop and add a logo. It should do that either for the Home page, or the Home page and the Favorites page. -

Its all commented out as like I say, playing round a bit. Anyway, I hope it helps...

/* Add logo to match background image on home page - Home only */
/*div.view-home-home .homeSectionsContainer .verticalSections::before {
    content: '';
    display: block;
    background-image: url(https://image.tmdb.org/t/p/w1280/s4Bf2L7O5JQXbwUedjquAWYNDXg.png);
    width: 30%;
    margin: 1em auto 0 auto;
    height: 16em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;}*/

/* Remove for Spotlight implmentation */
/* Add logo to match background image on home page - Home and Favourites */
/*div.view-home-home .verticalSections::before {
    content: '';
    display: block;
    background-image: url(https://image.tmdb.org/t/p/w1280/s4Bf2L7O5JQXbwUedjquAWYNDXg.png);
    width: 30%;
    margin: 1em auto 0 auto;
    height: 16em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;}*/

 

/* Move down to make space for backdrop and logo - Home only */
/*div.view-home-home .homeSectionsContainer .verticalSections {
    position: relative;
    top: 56em;
    background: rgba(0, 0, 0, 0.5);
}*/

/* Remove for Spotlight implmentation */
/* Move down to make space for backdrop and logo - Home and Favourites */
/*div.view-home-home .verticalSections {
    position: relative;
    top: 56em;
    background: rgba(0, 0, 0, 0.5);
}*/

 

/* Add backdrop - Home only */
/*div.view-home-home .homeSectionsContainer {background-image: url("https://wallpapercave.com/wp/wp11259304.jpg");background-size: cover;}*/

/* Remove for Spotlight implmentation */
/* Add backdrop - Home and Favourites */
/*div.view-home-home {background-image: url("https://wallpapercave.com/wp/wp11259304.jpg");background-size: cover;}*/

[Happy2Play 9780]

20 minutes ago, arrbee99 said:

So using the latest version of this css and the latest Emby version it shows the alien image but My Media is still off the bottom of the screen ?

Was in my test.  But will guess screen size will vary as when I go full screen the banner/logo will appear at the bottom partially.

Edited October 7, 2025 by Happy2Play

[King Pin 34]

Do I just add the code above to the top line? 

[arrbee99 1815]

See you commented as I was typing.

Was thinking about the 56. I think I changed it as I got a second hand 4K screen.

[arrbee99 1815]

1 minute ago, King Pin said:

Do I just add the code above to the top line? 

Not sure what you mean by the 'top line' ?

[arrbee99 1815]

As you can tell, I rely a lot on Happ2Play, so I never know what to use with units - pixels, percentages, ems, whatever.

[King Pin 34]

8 minutes ago, arrbee99 said:

 

9 minutes ago, arrbee99 said:

See you commented as I was typing.

Was thinking about the 56. I think I changed it as I got a second hand 4K screen.

I think that's my issue with these things is that I am on a 4k screen. 

I may as well ask since you're here:

1- I want to get rid of the black tint that is over the home page. 

2 - I'd like to totally remove the grey border around all media. 

3 - Resize "My Media" images.  If you can tell me the line I can fiddle around to size it properly. edit: I already have it set to extra small in the options. 

4. The "alpha picker" I think it's called that goes vertically down the screen (#-Z) I need to resize that also. 

Edited October 7, 2025 by King Pin

[King Pin 34]

Is it me or in the new CSS is there a lot of redundancy happening? 

For instance if I search for "alphapicker" the exact same code is in 3 different places. 

[arrbee99 1815]

You are on 4K as well. OK. At the moment, if you look at the css I posted above, I just re-applied the css below where it said 'remove for spotlight implementation', so those three css items are now operating, and I got this for the home page -

and this for favorites -

So the measurements seem fine here. Yes I imagine you will need to adjust your measurements. I've also just checked and I have Windows scaled to 125% and Firefox zoomed to 110%. No idea how those interact.

[arrbee99 1815]

3 minutes ago, King Pin said:

Is it me or in the new CSS is there a lot of redundancy happening? 

For instance if I search for "alphapicker" the exact same code is in 3 different places. 

Nope, thats me demonstrating how disorganised I am.