Jump to content

A few css bits mostly from other people


arrbee99
Go to solution Solved by King Pin,

Recommended Posts

arrbee99

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 by arrbee99
  • Like 4
  • Thanks 2
Link to comment
Share on other sites

arrbee99

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

Link to comment
Share on other sites

arrbee99

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 -

1293002408_EmbyCSS25Nov211.thumb.jpg.f7db8b35e0d54ccba2b7a3f1ec4ef10b.jpg

A collection -

1700561177_EmbyCSS25Nov213.thumb.jpg.52bc0f040143ba9e4e94da8243bd55ac.jpg

A movie -

2001100369_EmbyCSS25Nov216.thumb.jpg.312e0d2cb55ddcd9e6f3889b05bfba2c.jpg

TV series -

630038035_EmbyCSS25Nov218.thumb.jpg.1e0c27a9b5c96ad010a52a9c7e99722f.jpg

Music -

1552366645_EmbyCSS25Nov219.thumb.jpg.8512b8ed7c8be1b3a24353b414b8ee08.jpg

412590429_EmbyCSS25Nov2110.thumb.jpg.0149d18b2c1a60706137feb7916b4f09.jpg

2124226767_EmbyCSS25Nov2111.thumb.jpg.62ab407a2ba2d5ca1b2093dbda7167ee.jpg

TV Guide -

697393838_EmbyCSS25Nov2112.thumb.jpg.e784c58dfcc7415ea4b8cff86b4dbce8.jpg

 

 

Edited by arrbee99
  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...
  • 3 weeks later...
arrbee99

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 -

1123573483_EmbyTVGuidetransparent.thumb.jpg.5e9ee9360873750fb54497e1d18e4061.jpg

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

Link to comment
Share on other sites

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?

 

image.png.2f10159d362da140aabb907049739c44.png                     image.thumb.png.778cbe32c0b6670a48d93ace1586073f.png

 

Link to comment
Share on other sites

arrbee99

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.

 

Link to comment
Share on other sites

arrbee99

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

arrbee99

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.

Link to comment
Share on other sites

kanipek

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 by kanipek
  • Thanks 1
Link to comment
Share on other sites

arrbee99

Do you mean the timeline in Now Playing ?

1714699445_Embycsstimelinebug.jpg.13c03585637edb102c1a19a3a0ce07cc.jpg

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 ?

Link to comment
Share on other sites

kanipek
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 by kanipek
Link to comment
Share on other sites

arrbee99

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 by arrbee99
Link to comment
Share on other sites

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

Link to comment
Share on other sites

arrbee99

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

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

From a Happy2play solution I found...

 

  • Thanks 1
Link to comment
Share on other sites

kanipek
1 hour ago, arrbee99 said:

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

Perfect. Thanks so much!

  • Like 1
Link to comment
Share on other sites

arrbee99

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

176225264_Embydashboardhighlightbefore.jpg.74ea4c1d8fbaa9c7c7ed67621684c159.jpg

to this

1365723720_Embydashboardhighlightafter.jpg.b9ad154c1f2fc78069920d4fa50951ee.jpg

 

  • Like 1
Link to comment
Share on other sites

kanipek

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.

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