New theme - Plex inspired look

[fillidill 167]

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

Emby-Stable-style-v2.4.txt

Emby-Stable-style-v2.5.txt

Emby-Stable-style-v2.6.txt

Emby-Stable-style-v2.7.txt

Edited January 3, 2023 by fillidill

[tomnjerry74 96]

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

[fillidill 167]

1 hour ago, tomnjerry74 said:

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

Thanks man! 

[Spaceboy 2561]

yep, great job

[GrimReaper 3800]

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

Well done. 

[chef 3799]

Wow! That's cool!

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

[fillidill 167]

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.

 

 

[Happy2Play 9157]

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 August 25, 2021 by Happy2Play

[Happy2Play 9157]

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

[Happy2Play 9157]

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.

 

[CarlosLima 150]

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

Edited August 26, 2021 by CarlosLima

[fillidill 167]

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

[hygorfragas 5]

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?

[fillidill 167]

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.

[hygorfragas 5]

2 minutes ago, fillidill said:

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

Thanks bro, work bellicism

Edited August 26, 2021 by hygorfragas

[CarlosLima 150]

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

[hygorfragas 5]

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

but the work is amazing

Edited August 26, 2021 by hygorfragas

[Happy2Play 9157]

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.

[hygorfragas 5]

3 minutes ago, Happy2Play said:

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

 

 

Chrome Browser

[hygorfragas 5]

4 minutes ago, hygorfragas said:

 

 

Chrome Browser

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

[Happy2Play 9157]

4 minutes ago, hygorfragas said:

 

 

Chrome Browser

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.

[Happy2Play 9157]

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

Edited August 27, 2021 by Happy2Play

[fillidill 167]

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.

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. 

[GrimReaper 3800]

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

[Happy2Play 9157]

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;
}