Jump to content

New theme - Plex inspired look

fillidill

By fillidill
in Web App CSS

 Share

Recommended Posts

  • 2 weeks later...
Jason'sEmby

Jason'sEmby   29

Posted
Posted

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

Link to comment
Share on other sites
Happy2Play

Happy2Play   8294

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

  • Like 1
Link to comment
Share on other sites
Jason'sEmby

Jason'sEmby   29

Posted
Posted
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?

image.thumb.png.cf3e42ceb71350240a9aef6fac305ef9.png

Link to comment
Share on other sites
Happy2Play

Happy2Play   8294

Posted
Posted
6 minutes ago, Jason'sEmby said:

Hi Thank you, like this?

image.thumb.png.cf3e42ceb71350240a9aef6fac305ef9.png

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.

  • Like 1
Link to comment
Share on other sites
Jason'sEmby

Jason'sEmby   29

Posted
Posted
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!

Link to comment
Share on other sites
Jason'sEmby

Jason'sEmby   29

Posted
Posted

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 😉 

  • Agree 1
Link to comment
Share on other sites
fillidill

fillidill   153

Posted
  • Author
Posted

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.

 

  • Like 1
  • Agree 1
Link to comment
Share on other sites
Guest phoenixexcinere

Guest phoenixexcinere  

Posted
Posted

@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

Link to comment
Share on other sites
MSI2017

MSI2017   40

Posted
Posted (edited)

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.1023894221_Schermafbeelding2021-11-17om00_12_28.thumb.png.62f975cbc275b4302f1c0f152f53c3ec.png

 

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

 

1579670284_Schermafbeelding2021-11-17om00_15_15.thumb.png.e79d6b1a7a6a4c57db1c1e3894c25601.png

 

 

Edited by MSI2017
  • Like 1
Link to comment
Share on other sites
fillidill

fillidill   153

Posted
  • Author
Posted
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?

osd.png

  • Thanks 1
Link to comment
Share on other sites
fillidill

fillidill   153

Posted
  • Author
Posted
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 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8294

Posted
Posted (edited)
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 by Happy2Play
Link to comment
Share on other sites
adrianwi

adrianwi   238

Posted
Posted

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!

Link to comment
Share on other sites
Happy2Play

Happy2Play   8294

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

Link to comment
Share on other sites
MSI2017

MSI2017   40

Posted
Posted
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?

osd.png

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?

Link to comment
Share on other sites
Guest phoenixexcinere

Guest phoenixexcinere  

Posted
Posted

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?🙈

top1.thumb.JPG.d130f504fb7d19ad84f1ebf1b969836b.JPG

top2.thumb.JPG.b0856f46fb7d78374607633b34d98823.JPG

 

Thanks in advance :)

 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8294

Posted
Posted
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?🙈

top1.thumb.JPG.d130f504fb7d19ad84f1ebf1b969836b.JPG

top2.thumb.JPG.b0856f46fb7d78374607633b34d98823.JPG

 

Thanks in advance :)

 

You mean this?

 

Link to comment
Share on other sites
Guest phoenixexcinere

Guest phoenixexcinere  

Posted
Posted

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.

Link to comment
Share on other sites
Happy2Play

Happy2Play   8294

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

Link to comment
Share on other sites
  • 2 months later...
fillidill

fillidill   153

Posted
  • Author
Posted

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. 

  • Thanks 3
Link to comment
Share on other sites
  • 4 weeks later...
Tangsgod

Tangsgod   22

Posted
Posted
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 ? 

Link to comment
Share on other sites
Happy2Play

Happy2Play   8294

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

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
 Share
Go to topic listing
×
×
  • Create New...