A few css bits mostly from other people

[arrbee99 1622]

Thought I'd stick my css up here. Mostly its actually from Happy2play, Penkethboy and others who OK, I admit, I can't remember.

Anyway, bear in mind, there's undoubtedly bits that have been done in a weird way (my stuff), bits that don't work any more (my stuff), bits that accidentally get applied twice (ditto), alternative ways to do the same thing, variations in general of similar things. And a few bits at the end not much good for anything, but I left them there anyway.

So its not in the same league as The Plex Inspired Look, and others...

But it might possibly count as a theme.

Hope I haven't posted this somewhere else already...

Don't say you weren't warned (full stop)

EDIT - mostly tested in Firefox, though hopefully OK for Chrome, and its only really set up for the Dark Theme for both Media and the Dashboard.

 

EDIT 27 Dec 21 - There's a slightly newer version a few posts further down...

 

EDIT 06 Jan 22 - Another (third) version added here (dated 06 Jan 22)...

 

EDIT 06 Jan 22 - fixed (I hope) bug in previous 06 Jan version, well the one I spotted anyway...

 

EDIT 15 Jan 22 - appears the blur effect I added no longer works (temporarily I hope) in Firefox. Chrome and Edge seem to be OK...

 

EDIT 23 Aug 22 - bit of an update, fixes a few bits, adds a few things, can't remember what, hopefully an improvement...

Emby css for posting 23 Aug 22.txt

 

Emby css for posting 06 Jan 22 mod.txt

 

Emby css for download.txt

Edited August 23, 2022 by arrbee99

[Marijuana 12]

Thank you for sharing your css   I will be keeping the jurassic park default hehe !

 

[arrbee99 1622]

I have, unsurprisingly, found a bit of a bug -

Near the end, where it has the comment '/*Make Music page background darker */', the command below that should be commented out, as its too general, it also makes movies and episodes detail page too dark for the background images.

Can't find a better alternative yet (if at all).

[arrbee99 1622]

Wasn't going to do screenshots, but got bored, so -

you obviously don't have to like them, and the TV guide at least needs a bit of work on grid lines, even for those who don't go urrrgh

Home page -

A collection -

A movie -

TV series -

Music -

TV Guide -

 

 

Edited November 25, 2021 by arrbee99

[Marijuana 12]

That looks so cool  the tv guide looks nice and sharky 

[arrbee99 1622]

A few changes and fixes -

The alphapicker in Music > Songs used to scroll up and down with the music. Now, hopefully, it doesn't.

Got rid of the borders on individual songs in Music > Songs

Made the selected item (sort of) transparent when selecting an item from the guide -

and a few other bits I can't remember.

See first post for caveats (and who wrote most of it...)

Emby css for posting 24 Dec 21.txt

[TiaanGR 2]

Hi there @arrbee99,

 

Stupid question were can I upload this file, into the emby directory on my server? Also do you by any chance know were I can change the below image on the server directly via the OS Files (Install files) I would really like to change the logo to a phoenix to match the Favicon and the server name. I managed to find a file with images in it so I changed it there but no luck on changing the updates on the interface it still appears on my PC and phone?

 

This is were I have been digging around the favicon I managed to find in the dashboard-ui directory, I updated the image with what I wanted and it worked.

Any Advice for a newby?

 

                    

 

[arrbee99 1622]

Hi,

You're asking where the above file goes ? You just download the file to anywhere and copy and paste its contents to your the Emby Dashboard, specifically Dashboard > Settings, scroll down a bit to the Custom CSS box and paste it there. And save it and refresh the screen / press F5.

 

[arrbee99 1622]

Don't think there's any way to change images on phones and apps, only in a browser.

The only way I've seen to change anything on the browser is to change the two images here (well for Windows anyway) -

C:\Users\YOURNAME\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes

i.e. replacing logodark and logowhite with your own.

That might not be what you're asking though...

 

[TiaanGR 2]

4 hours ago, arrbee99 said:

Don't think there's any way to change images on phones and apps, only in a browser.

The only way I've seen to change anything on the browser is to change the two images here (well for Windows anyway) -

C:\Users\YOURNAME\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes

i.e. replacing logodark and logowhite with your own.

That might not be what you're asking though...

 

Awesome thanks I'll have a look and see if it is this

[TiaanGR 2]

6 hours ago, arrbee99 said:

Hi,

You're asking where the above file goes ? You just download the file to anywhere and copy and paste its contents to your the Emby Dashboard, specifically Dashboard > Settings, scroll down a bit to the Custom CSS box and paste it there. And save it and refresh the screen / press F5.

 

Thanks I'll go try it out

[TiaanGR 2]

12 hours ago, arrbee99 said:

Don't think there's any way to change images on phones and apps, only in a browser.

The only way I've seen to change anything on the browser is to change the two images here (well for Windows anyway) -

C:\Users\YOURNAME\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes

i.e. replacing logodark and logowhite with your own.

That might not be what you're asking though...

 

Hi there Arrbee99 after some tinkering I managed to come right and it is that exact 2 images I wanted to change!

Thanks for the help!

[arrbee99 1622]

Jolly good.

Just remember that unfortunately every time you get a new server version you have to re-do those two images as they get overwritten each time.

The css (if you use it) should be fine except sometimes bits get broken just as things get updated.

[TiaanGR 2]

Okay cool.

Thanks man I'll keep it in mind.

Merry Christmas and Happy New Year

Regards,

 

[arrbee99 1622]

Thanks. And too you and everyone in your life

[kanipek 227]

Having fun playing with this!

Question - I have made a few changes here and there. One was to border thickness from 4px to 2px. Works great but in/on dashboard it throws off the position of the progress indicator (so it's going through time indicator numbers) Any way to fix this?

Excellent Christmas present by the way!

Edit: Got it figured out

Edited December 27, 2021 by kanipek

[arrbee99 1622]

Do you mean the timeline in Now Playing ?

Is this the bit you changed -

/* Add shadow to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent):not(.cardImageContainer-sideFooter) {
    box-shadow: 0 0 0 2px white;
}

It doesn't change when I change to 2px in Firefox or Chrome. Does it happen when transcoding ?

Think that was a bit that got changed when I updated the css a bit. Maybe that had an effect - you using the old version or the newer version in the post about 5th from the top ?

[kanipek 227]

3 hours ago, arrbee99 said:

Is this the bit you changed -

That is the bit I changed. Along with a couple others. Had the issue - then I switched back to your code unmodified and it was correct. Started making my changes in smaller steps no issue so far. Type-o ? 

I could use some help getting the progress bars to be red - so it stands out to my poor eyes.

I have been using the Dark Blue CSS that I got from the forum. So I changed your code to have that blue. The progress bars are giving me trouble though - they are blue now but I would like them to be red. Have tried but It ends up changing all the checkboxes and unwatched indicators to red also. Is there a method for just progress bars? I am still search and testing. No luck yet.

I am using the newer version

Still a very cool Christmas present!

Edited December 28, 2021 by kanipek

[arrbee99 1622]

Probably a typo. Had those, ask Happy2play - a space in the wrong place, a comment that I didn't mark properly....

Anyway, the red bit -

in the css, the Dashboard section, there are two lines near the top that make the % progress number (eg '94.7%' ) on the Scheduled Tasks page red, and make the progress line in Scheduled tasks red respectively.

EDIT - though actually the very last line in the css Dashboard section also seems to change the first bit above (the '94.7%' bit). Hmmm.

Further down, almost at the bottom of the Scheduled css section, there's two more for the task bars on the main dashboard page to make them red for Chrome and Firefox.

When I change mycolour to blue, if I make the colour of those last two fixed, like -

/* Google Progress Bars */
progress::-webkit-progress-value {
  background: #A30000 !important; }

/* Firefox Progress Bars */
progress::-moz-progress-bar {
  background: #A30000 !important; }

That seems to keep just those red and the rest stays blue, including tickboxes etc, for me.

 

PS glad you like it, wish I could fix up a few unfortunate colour combos though...

Edited December 28, 2021 by arrbee99

[kanipek 227]

8 hours ago, arrbee99 said:

That seems to keep just those red and the rest stays blue

This was helpful. Thanks.

One last bit - Progress Indicator under "Now Playing" on the Dashboard and Under "Continue Watching" still remain blue.

I have changed back to your 24 Dec 21 base code as I am fiddling with this so I can be sure I haven't mucked up anything. 

[arrbee99 1622]

If this is the right bit, this seems to work -

div.itemProgressBarForeground {background-color: #A30000;}

From a Happy2play solution I found...

 

[kanipek 227]

1 hour ago, arrbee99 said:

If this is the right bit, this seems to work -

Perfect. Thanks so much!

[arrbee99 1622]

If anyone's interested, if you add this somewhere (preferably the Dashboard section) -

/* Change background of selected dashboard item to make it more readable */
/*div.navMenuOption-selected {background-color: #A30000 !important}*/
/* OR */
div.navMenuOption-selected {background-color: var(--mycolour) !important}

/* and make text white */
div.navMenuOption-selected {color: white}

that will improve this highlight (hopefully) -

from this

to this

 

[Lunze 1]

Perfect. Thanks so much! for the CSS

[kanipek 227]

Is it possible using CSS to add a "count" ? - For instance when entering a collection there would be displayed the number of items in that collection. If I remember correctly this is something that once was available to us but got removed for some reason. I found it quite useful and I have a number of collections with over 100 items.