New theme - Plex inspired look

[AlanPlay 0]

You can try to modify 4.7.0.1.5

[Jason'sEmby 29]

So I'm probably overlooking this, but how do I actually apply the skin? Thank you and great job by the way! 

[Happy2Play 9186]

11 minutes ago, Jason'sEmby said:

So I'm probably overlooking this, but how do I actually apply the skin? Thank you and great job by the way! 

All custom css is applied in custom css box Dashboard-Settings.

Not custom css only applies to web client not online client or any other client/app.

[Jason'sEmby 29]

12 minutes ago, Happy2Play said:

All custom css is applied in custom css box Dashboard-Settings.

Not custom css only applies to web client not online client or any other client/app.

Hi Thank you, like this?

[Happy2Play 9186]

6 minutes ago, Jason'sEmby said:

Hi Thank you, like this?

No you will put that actual content of that file in that box.

Looks like the code works in 4.6.4.0 but there are code change across every major release so what works today may not work completely in the next release as mentioned in a couple posts above.

[Jason'sEmby 29]

10 minutes ago, Happy2Play said:

No you will put that actual content of that file in that box.

Looks like the code works in 4.6.4.0 but there are code change across every major release so what works today may not work completely in the next release as mentioned in a couple posts above.

Awesome thank you so much!

[Jason'sEmby 29]

Is there a donation tab somewhere,  I would like to support this? Also this would be awesome on an android client skin, wish there was a way to put favorite live TV channels on home page like Plex but that's not possible probably  

[fillidill 167]

No donations needed, but thanks  

I agree that being able to customize and make changes to themes on other devices would be awesome. Just made a feature request for that in fact.

 

[Guest phoenixexcinere]

@fillidill

Hey man,

I downloaded your CSS and it`s greate. It works finde with Firefox and give the "old school" Emby Web Interface a fresh touch. I love it Thanks for this greate work,  I take off my virtual hat

[MSI2017 45]

Absolutely love the theme! But on my screen (macbook 2560x1600) the playback bar is huge. Anyway to size that down? I'd also like to move the back button back to the top left corner but I'm really not familiar with CSS.

 

It also seems that subtitles now have a bar instead of fully transparant background

 

 

 

Edited November 16, 2021 by MSI2017

[fillidill 167]

21 hours ago, MSI2017 said:

Absolutely love the theme! But on my screen (macbook 2560x1600) the playback bar is huge. Anyway to size that down? I'd also like to move the back button back to the top left corner but I'm really not familiar with CSS.
 

It also seems that subtitles now have a bar instead of fully transparant background

Funny you say that  I actually thought the same thing and made a personal change a while back that I didn't share, to make it much more minimalistic. I have uploaded a new version to the main post (v2.2) if you want to try it out. Here is a screen of it.

Regarding the weird background bug, maybe this change fixes that?

[adrianwi 251]

Love this!  I would be great if this could be applied on a user rather than system basis.

[fillidill 167]

7 minutes ago, adrianwi said:

Love this!  I would be great if this could be applied on a user rather than system basis.

I am sorry, but to my knowledge that is not possible without the devs making that functionality a reality 

[Happy2Play 9186]

4 hours ago, adrianwi said:

Love this!  I would be great if this could be applied on a user rather than system basis.

Yes apply custom Themes to your system to make them selectable  would be nice.

But a hack would be applying this code to one of the existing system themes.  Now the user can select that theme.

But would need to be applied with every update.

Edited November 18, 2021 by Happy2Play

[adrianwi 251]

Where would one look to hack an existing theme, and is it as simple as copying the new ccs code over the old one?

Thanks for the suggestion!

[Happy2Play 9186]

7 minutes ago, adrianwi said:

Where would one look to hack an existing theme, and is it as simple as copying the new ccs code over the old one?

Thanks for the suggestion!

Path will be platform prevalent, but the "Application path: " shown in your server log.

C:\Users\username\AppData\Roaming\Emby-Server\system\dashboard-ui\modules\themes and select a theme and edit the css file.

Yes it would be a copy and post over existing theme file content.

[MSI2017 45]

On 11/17/2021 at 9:33 PM, fillidill said:

Funny you say that  I actually thought the same thing and made a personal change a while back that I didn't share, to make it much more minimalistic. I have uploaded a new version to the main post (v2.2) if you want to try it out. Here is a screen of it.

Regarding the weird background bug, maybe this change fixes that?

Still rather huge for me, subtitle bar is also being weird. What do I need to change in the CSS to get the end time and episode name back btw?

[Guest phoenixexcinere]

Hey,

I would add a external Embylogo (from my google drive) on top of the menue bar. Is there a simple way to add an external URL in CSS?

 

Thanks in advance

 

[Happy2Play 9186]

2 hours ago, phoenixexcinere said:

Hey,

I would add a external Embylogo (from my google drive) on top of the menue bar. Is there a simple way to add an external URL in CSS?

 

Thanks in advance

 

You mean this?

 

[Guest phoenixexcinere]

Hey,

thx @Happy2Play for you quick help. I`m very grateful, but this puts the image on top of the navibar. What I mean is a logo on the the homescreen, on top of "start" "Favoriten" or direct right of them and in the movie section near or on top of "Filme, Empfehlungen, Trailer..." as you can see on my screenshots.

[Happy2Play 9186]

5 hours ago, phoenixexcinere said:

Hey,

thx @Happy2Play for you quick help. I`m very grateful, but this puts the image on top of the navibar. What I mean is a logo on the the homescreen, on top of "start" "Favoriten" or direct right of them and in the movie section near or on top of "Filme, Empfehlungen, Trailer..." as you can see on my screenshots.

Skin header is a tricky area as they are three sections independent of page.  

Maybe something like this but spacing will not match as every page will have a different pagetitle length adjusting headerleft.  And there is no way to target pages as there are no pageids, so any adjustment in SkinHeader could/would be seen everywhere.

h3.pageTitleWithDefaultLogo {visibility: hidden;}

div.headerRight.headerPartFixedWidth {background-image:url(https://www.dropbox.com/s/871caw9u4udnsko/logo.png?dl=1)!important; 
	width: 6em; 
	background-size: contain;
	background-repeat: no-repeat;
	width: 13.2em;
	height: 1.6em;
	margin-left: 15em;
}

div.navDrawerLogo.pageTitleWithDefaultLogo {background-image:url(https://www.dropbox.com/s/871caw9u4udnsko/logo.png?dl=1)!important;}

All you can do is play around to get something you like.

[fillidill 167]

I've updated the main post with a updated version for Emby Beta (v.4.7.0.20) if anyone is interested  It looks the same but with some small fixes here and there. 

[levander 96]

can the side menu be fixed ? (no auto hide)

[Tangsgod 22]

On 1/25/2022 at 1:11 PM, fillidill said:

I've updated the main post with a updated version for Emby Beta (v.4.7.0.20) if anyone is interested  It looks the same but with some small fixes here and there. 

It's really nice ! 

How would it be possible to apply this theme on the Android TV app ? 

[Happy2Play 9186]

15 hours ago, Tangsgod said:

It's really nice ! 

How would it be possible to apply this theme on the Android TV app ? 

There is currently no way to change any client beside the local web client.