New theme - Plex inspired look

[Happy2Play 9289]

Yes OSD backdrop issue is this

@media (min-width: 50em) {
  div.itemBackgroundContainer.withBackdrop, .backgroundContainer.withBackdrop {
    background: linear-gradient(77deg, rgb(75 75 75 / 81%) 0, rgb(0 0 0 / 55%) 50%, rgb(0 0 0 / 25%) 100%) !important;
  }
}

change to something like this.

@media (min-width: 50em) {
    div.itemBackgroundContainer.withBackdrop, .backgroundContainer.withBackdrop:not(.backgroundContainer-transparent) {
    background: linear-gradient(77deg, rgb(75 75 75 / 81%) 0, rgb(0 0 0 / 55%) 50%, rgb(0 0 0 / 25%) 100%) !important;
  }
}

I am not seeing a volume issue here.

Edited October 3, 2022 by Happy2Play

[fillidill 168]

Hi guys!
New update in the main post (Emby-Stable-style-v2.6). The last stable update was a big one so took me a while to finish in-between work, but everything should now hopefully work as expected and should support all 3 different navigation modes. The audio player has also gotten some updates. Let me know if something doesn't work or looks funky.

I haven't been able to reproduce the volume problem some people have experienced so not sure about that one however as it works without problem for me.

Hope you enjoy!

[Skyhigh69 7]

Great job, I appreciate that.

[Locutus64 124]

Is there a way to increase the size of the images for the libraries at the top without affecting the size of the images below the libraries? I think that the size of the images for the libraries looks off because of the size of the images for movies and TV series below the library images. What I'd like to do is have 5 across. Is this possible in the code? Thanks

 

[GrimReaper 3886]

2 minutes ago, Locutus64 said:

Is there a way to increase the size of the images for the libraries at the top without affecting the size of the images below the libraries? I think that the size of the images for the libraries looks off because of the size of the images for movies and TV series below the library images. What I'd like to do is have 5 across. Is this possible in the code? Thanks

 

Something like:

div.section0 .backdropCard {width: 14vw;}

Adjust vw value as desired. 

[Locutus64 124]

I need to add that or it's suppose to be in there? Thanks

[Happy2Play 9289]

17 minutes ago, Locutus64 said:

I need to add that or it's suppose to be in there? Thanks

You will add it as existing code is for all cards.  This code targets that section assuming it is first on Home Screeen.

[Locutus64 124]

Thanks guys worked perfectly at 18 vs 14. Thanks again

[visproduction 233]

I like adding this to hover for the library menu thumbnails.  Try it and see if you like it.
 

.verticalSection.section0.focusable.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX > div > div > div:hover, .verticalSection.section3.focusable.emby-scrollbuttons-scroller > div.padded-top-focusscale.padded-bottom-focusscale.padded-left.padded-right.emby-scroller.scrollX.hiddenScrollX.scrollFrameX > div > div > div:hover {
	transform: scale(1.06);
	margin-bottom: -3% !important;
	border: 1px solid #7372e9;
	box-shadow: 0 0 10px #719ece;
}

 

Edited December 1, 2022 by visproduction

[gtxr24 4]

Hi does anyone know how to change the shape "My Media" tiles located at the top of the homepage above continue watching, im looking to make them fully round circles and not just rounded corners, ive looked around the forum but everything ive tried has changed all of the tiles on the homepage as opposed to just the Media Library tiles.

Also if this isnt possible or messes the tiles up in someway, would anyone know the CSS to change the My Media Tiles to vertical tiles instead of horizontal. 

Thanks

[Damien_ 28]

On 8/25/2021 at 11:20 AM, fillidill said:

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 

I really like this, thank you for sharing. Totally agree, I'm a long time Plex and started using Emby a couple years ago. Emby is superior in all the important ways but I missed the Plex UI. This makes a ton of difference in closing that gap. Very appreciated.

[Luke 39306]

20 hours ago, meatball said:

I really like this, thank you for sharing. Totally agree, I'm a long time Plex and started using Emby a couple years ago. Emby is superior in all the important ways but I missed the Plex UI. This makes a ton of difference in closing that gap. Very appreciated.

What specifically did you miss?

[Damien_ 28]

7 hours ago, Luke said:

What specifically did you miss?

What I do I miss specifically about the Plex UI? Totally subjective of course but happy to give some examples (again this is just my opinion):

A few examples (using Better Call Saul):

• In the Home Screen the plex layout, on the Home Screen the media libraries are in a menu to the left of the screen with small icons, leaving a lot more real estate which I think leaves a nicer, less busy look.

 

• if you open a tv show, you'll see a nice background/fanart poster being used however it's only being used for the top right of the screen and it's faded so any text, show info, season and actor images all show well because it's not busy with fanart underlying the show info. 
• 

 

• Using BCS in Emby as an example, the background image is pretty prominent across the main screen, and underneath the actor images are at least as large (and square)  as the season folders. Again a full screen background image is present underneath all of this so it makes it pretty busy and not as slick (IMO).

 

• 

Just a couple examples and again, very subjective topic. 

Again I think Emby is FAR superior to plex for the most important reasons you'd want a media server solution. Just in this one area of cosmetics, I think the Plex UI is a little slicker (IMO). The CSS @fillidill made a couple changes similar to what I mentioned and it looks great.

Edited December 26, 2022 by Damien_

[arrbee99 1681]

This is where we get to the people like different things thingy. I'm a big backdrops fan. Far as I'm concerned, everything else just gets in the way. so while these are from a browser, which I don't think your shots are from (?), I'd go for -

and -

 

 

[Locutus64 124]

12 hours ago, Luke said:

What specifically did you miss?

Feel like following up on the info you asked for here?

 

[Damien_ 28]

20 hours ago, arrbee99 said:

This is where we get to the people like different things thingy. I'm a big backdrops fan. Far as I'm concerned, everything else just gets in the way. so while these are from a browser, which I don't think your shots are from (?), I'd go for -

and -

 

 

I agree backdrops and fan art are hugely important. Luke asked what I missed in regard to the plex UI (per conversation with the OP) and I posted a couple examples/differences. But I’m with you, backdrops and fanart are the most important artwork on a media server. 

Edited December 27, 2022 by Damien_
Spelling

[LiaraAlis 15]

Hi together,

I'm using this css and I like it pretty much.

I updated to Emby 4.7.11 and I experienced that the CSS no has some problems in the settings menu. Text is black and not white as before. Is it needed to update the css? I also tried the newest version 2.6.

[Damien_ 28]

4 hours ago, LiaraAlis said:

Hi together,

I'm using this css and I like it pretty much.

I updated to Emby 4.7.11 and I experienced that the CSS no has some problems in the settings menu. Text is black and not white as before. Is it needed to update the css? I also tried the newest version 2.6.

You have to set the settings theme to dark then the text will be white

Edited December 27, 2022 by Damien_

[ryzen5000 12]

This css is really cool and snappy, its very fast when I flip through the menu. The only thing I would change is that because I have the theme movie package this CSS blurs out the backdrop videos on the movies and TV. Can you tell me how to change the CSS to display clear backdrops and play the theme videos clearly? Reason is because I spend dozens of hours a month adding new theme movies to the plugin and I want to enjoy them.

[arrbee99 1681]

I guess one way is just to search the css you have under settings for 'blur' and turn the command that contains it into a comment, save it, refresh it and see what the effect is.

And keep a copy of the original of course.

[Happy2Play 9289]

@ryzen5000 look at itemBackgroundContainer.

@media (min-width: 50em) {
 .itemBackgroundContainer.withBackdrop:not(.backgroundContainer-transparent), 
 .backgroundContainer.withBackdrop:not(.backgroundContainer-transparent)  {
    background: linear-gradient(77deg, rgb(75 75 75 / 81%) 0, rgb(0 0 0 / 55%) 50%, rgb(0 0 0 / 25%) 100%) !important;
  }
}

.backgroundContainer.itemBackgroundContainer.withBackdrop, .backgroundContainer.withBackdrop {
  -webkit-backdrop-filter: saturate(1.5) blur(0.5em);
  backdrop-filter: saturate(1.5) blur(0.5em);
}

[BlackDub 41]

On 12/25/2022 at 3:57 AM, Damien_ said:

I really like this, thank you for sharing. Totally agree, I'm a long time Plex and started using Emby a couple years ago. Emby is superior in all the important ways but I missed the Plex UI. This makes a ton of difference in closing that gap. Very appreciated.

I think the same, better options/server is emby but the UI should improve

[Multiverse 5]

Awesome theme, I love it!

But:

How can I change the color from the "Plex brown" to Emby's blue? It would be perfect if the accent color would be used.

How can I integrate the not-watched counter for series into the triangle on the right side?

How can I highlight the "missing" button for episodes? Perhaps a blood red color ...

Thanks a lot!

Edited January 7, 2023 by Multiverse

[Eigeplackter 79]

I just tested the code, looks really like PLEX.

Any way to fix the partial decapicitation of actors ?

Those with the blue line on top are custom images, but i.e. with Marisa Tomei ...

 

[Happy2Play 9289]

1 hour ago, Eigeplackter said:

Any way to fix the partial decapicitation of actors ?

That is why circle images will never fully work as there are zero standards for a person image to the face will never be exactly in the same place.  You may get lucky on character images but they truly on represent a specific character not the person overall.

So all you can do is change the person image or not round the images.