Jump to content

New theme - Plex inspired look


fillidill
 Share

Recommended Posts

I moved from Plex to Emby and even though I think Emby is superior in its flexibility there are some things I like better with Plex, especially in terms of its looks. This theme is trying to fix that by making it a bit more similar to Plex but with some, in my opinion, improvements. The CSS is attached to this post for anyone interested and below are some screens to show it off :)
 

Good to know

  • I only use Chrome so I can't guarantee this CSS works as expected in other browsers. 
  • If you want the sidebar menu to look like in the screens, make sure to pin the sidebar.
  • Watched badge/banderoll is inverted which means that the badge will not be shown if media have been watched, like in Plex.
  • For desired look, please use the "Dark" theme for both Theme & Settings theme in the display settings.

 

1.jpg

2a.jpg

2b.jpg

3.jpg

4.jpg

5.jpg

 

style-v2.txt

style-v2.1.css

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

1 hour ago, tomnjerry74 said:

Awesome job! It's obvious a lot of work went into this.

Thanks man! 😀

Link to comment
Share on other sites

1 hour ago, GrimReaper said:

Although not a fan of Team Orange, that seriously looks good. 

Well done. 

Thanks! If orange is not your thing you can easily change it by doing a search and replace for below to the color of your choice!

rgb(229, 160, 13)
e5a00d

 

10 minutes ago, chef said:

Wow! That's cool!

Is the navbar always closed or does it open on hover?

Thanks a lot :)
If you hover with the mouse cursor it will expand and get larger displaying the text and such.

 

 

menu.png

  • Like 1
Link to comment
Share on other sites

Happy2Play
24 minutes ago, chef said:

Is the navbar always closed or does it open on hover?

That is with the docked navdrawer on home.  The undocked navdrawer is the normal click to open.

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

Happy2Play

Only issue I see would be "skinHeader" being transparent in scrollable areas.

image.thumb.png.b40e38e07ab7997db4256db2dd762d2d.png

Link to comment
Share on other sites

Happy2Play
6 hours ago, fillidill said:

Thanks! If orange is not your thing you can easily change it by doing a search and replace for below to the color of your choice!

rgb(229, 160, 13)
e5a00d

Note you can just point to your existing code.  So changing html:root would change all targeted elements.

example

:root {
    --theme-primary-color: #0C57D6!important;
    --theme-accent-text-color: #0C57D6!important;
    --theme-primary-color-lightened: #0C57D6!important;
}

.upNextDialog-buttons .btnStartNow{
    background: var(--theme-primary-color);
}

Note :root code will change slightly in 4.7.

 

Link to comment
Share on other sites

I used only that part, applying some adjustments in dimensions and colors. Thanks.

next1.png

next2.png

Edited by CarlosLima
Link to comment
Share on other sites

Updated the style with some small fixes. The header should now not be transparent no matter if you are using docked or undocked sidebar.

  • Like 1
Link to comment
Share on other sites

1 hour ago, fillidill said:

Atualizado o estilo com algumas pequenas correções. O cabeçalho agora não deve ser transparente, não importa se você está usando a barra lateral encaixada ou desencaixada.

Is the attached file the updated one already? Can you send the updated one?

Link to comment
Share on other sites

Just now, hygorfragas said:

Is the attached file the updated one already? Can you send the updated one?

Yes the one in the main post is the updated one.

  • Like 1
Link to comment
Share on other sites

2 minutes ago, fillidill said:

Sim, o que está na postagem principal é o atualizadatualizad

Thanks bro, work bellicism

Edited by hygorfragas
  • Thanks 1
Link to comment
Share on other sites

Hi,
I was unable to enlarge the poster.
Thanks for this tip.
Thanks in advance.

download.png

Link to comment
Share on other sites

One thing I noticed is that the dashboard is hard to see

but the work is amazing

Edited by hygorfragas
  • Thanks 1
Link to comment
Share on other sites

Happy2Play
8 minutes ago, hygorfragas said:

One thing I noticed is that the dashboard is hard to see

but the work is amazing

What is hard to see?  Can you show a image, ensure to block private ip info.

image.thumb.png.f2d80cba78ffeed78ecfc2222f8fdfac.png

Link to comment
Share on other sites

3 minutes ago, Happy2Play said:

What is hard to see?  Can you show a image, ensure to block private ip info.

image.thumb.png.f2d80cba78ffeed78ecfc2222f8fdfac.png

 

 

Chrome Browser

830759043_Capturadetela2021-08-26210158.thumb.png.e25f18f0283245993edbd382e4ca94b4.png

Link to comment
Share on other sites

4 minutes ago, hygorfragas said:

 

 

Chrome Browser

830759043_Capturadetela2021-08-26210158.thumb.png.e25f18f0283245993edbd382e4ca94b4.png

just change the font color? but and the rest would not assume the color of the panel font?

Link to comment
Share on other sites

Happy2Play
4 minutes ago, hygorfragas said:

 

 

Chrome Browser

830759043_Capturadetela2021-08-26210158.thumb.png.e25f18f0283245993edbd382e4ca94b4.png

Okay yes my image was from Edge Version 92.0.902.84  but yes I see the same issue in Chrome Version 92.0.4515.159 in your image.

Link to comment
Share on other sites

Happy2Play

@hygorfragasit has nothing to do with browser.  It has to do with Dashboard being set to Light theme, it affects the custom theming as a lot of stuff get reversed. 

 

So this could be a issue for all non-premiere users as Emby defaults to Light theme.

image.png.0f2e74b0d8cd049a28176ddbc413900a.png

image.png.543d9aebe47ed5e4a39ae3f59d0125b5.png

Edited by Happy2Play
  • Thanks 2
Link to comment
Share on other sites

5 hours ago, Happy2Play said:

@hygorfragasit has nothing to do with browser.  It has to do with Dashboard being set to Light theme, it affects the custom theming as a lot of stuff get reversed. 

 

So this could be a issue for all non-premiere users as Emby defaults to Light theme.

image.png.0f2e74b0d8cd049a28176ddbc413900a.png

image.png.543d9aebe47ed5e4a39ae3f59d0125b5.png

Ah you are probably correct about that! I have it set to Dark in my settings. I guess it would be possible to manually force everything with CSS so it would be readable but not sure if that is something I want to do. 

Link to comment
Share on other sites

Happy2Play
13 minutes ago, GrimReaper said:

How does one go about reverting Cast images to standard square ones? 

Change or remove this.

div.peopleSection .cardPadder-portrait {
    border-radius: 100%;
    overflow: hidden;
    width: 150px;
    height: 150px;
    margin: 0 auto 5px;
    padding-bottom: 0px;
}

 

  • Thanks 1
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

×
×
  • Create New...