Jump to content

New theme - Plex inspired look


fillidill

Recommended Posts

Mr_Scumbag

I love the look of this. Is there any way to keep the nav drawer open while also displacing the page content (rather than hovering over it)?

  • Like 1
Link to comment
Share on other sites

BlackDub
On 5/26/2022 at 10:49 PM, Mr_Scumbag said:

I love the look of this. Is there any way to keep the nav drawer open while also displacing the page content (rather than hovering over it)?

Try my custom plex theme: 

**Do not post code like this**

Edited by Abobader
Removing long code
Link to comment
Share on other sites

fillidill
On 26/05/2022 at 21:49, Mr_Scumbag said:

I love the look of this. Is there any way to keep the nav drawer open while also displacing the page content (rather than hovering over it)?

If you add the following snippet to be bottom of the CSS code it should give you what you want :)

 

.mainDrawer.drawer-docked { width: 15em!important; }
@media (min-width: 80em){ .skinBody-withFullDrawer .withTabs.page, .skinBody-withFullDrawer .page { padding-left: 18rem!important; } }
@media (min-width: 50em){ .skinHeader-withfulldrawer { padding-left: 18em!important; } }

 

  • Thanks 1
Link to comment
Share on other sites

Locutus64

Looks like I'm the only one telling @BlackDub to fix their post. What happened to the forum staff cause at least one of you should of either fixed it for them or said something to them.

Link to comment
Share on other sites

BlackDub
7 hours ago, Locutus64 said:

Looks like I'm the only one telling @BlackDub to fix their post. What happened to the forum staff cause at least one of you should of either fixed it for them or said something to them.

Whats your problem ?

  • Haha 1
Link to comment
Share on other sites

Locutus64

I think you got your answer when a staff member removed your code. 

Edited by Locutus64
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...
fillidill

New version can be found in the main post compatible with the latest version of Emby Stable v.4.7.5.0 (and current beta). It fixes some small graphical elements that changed in the latest updates. It also makes the intro skip button only visible a couple of seconds and then disappears, until the mouse is moved.

  • Like 3
Link to comment
Share on other sites

Locutus64

New CSS seems to have bugs. I just got my 4.7.5.0 update and added your custom CSS to it and when I click a library I'm taken to it but I can't use the back arrow in Emby, and the home button either doesn't do anything or my my browser full screen. When I remove the CSS code everything in Emby goes back to working normally.

Emby-Stable-style-v2.3.txt

Edited by Locutus64
Link to comment
Share on other sites

fillidill
32 minutes ago, Locutus64 said:

New CSS seems to have bugs. I just got my 4.7.5.0 update and added your custom CSS to it and when I click a library I'm taken to it but I can't use the back arrow in Emby, and the home button either doesn't do anything or my my browser full screen. When I remove the CSS code everything in Emby goes back to working normally.

Emby-Stable-style-v2.3.txt 99.8 kB · 0 downloads

Ah sorry about that if that is the case. Unfortunately I am away on vacation two weeks so won't be able to take a look at it until then. Sorry for the inconvenience! 

  • Like 1
Link to comment
Share on other sites

Locutus64
39 minutes ago, fillidill said:

Ah sorry about that if that is the case. Unfortunately I am away on vacation two weeks so won't be able to take a look at it until then. Sorry for the inconvenience! 

No inconvenience at all. No hurry what so ever. Enjoy your vacation.

  • Like 1
Link to comment
Share on other sites

Locutus64

Yesterday I login in to my other XeroLinux and I don't have the issue in Emby there, So looks like it's something specific to Vivaldi in the one.

Link to comment
Share on other sites

Happy2Play
On 6/30/2022 at 4:07 AM, fillidill said:
On 6/30/2022 at 3:33 AM, Locutus64 said:

New CSS seems to have bugs. I just got my 4.7.5.0 update and added your custom CSS to it and when I click a library I'm taken to it but I can't use the back arrow in Emby, and the home button either doesn't do anything or my my browser full screen. When I remove the CSS code everything in Emby goes back to working normally.

Emby-Stable-style-v2.3.txt 99.8 kB · 0 downloads

Ah sorry about that if that is the case. Unfortunately I am away on vacation two weeks so won't be able to take a look at it until then. Sorry for the inconvenience! 

The issue is when you moved headermiddle up you did not adjust width to not cover headerleft buttons.

 

 

Link to comment
Share on other sites

Locutus64
1 hour ago, Happy2Play said:

The issue is when you moved headermiddle up you did not adjust width to not cover headerleft buttons.

 

 

The above should be the same as this, and this works without issue.

Per.sonal Emby Text.txt

Link to comment
Share on other sites

Happy2Play
2 minutes ago, Locutus64 said:

The above should be the same as this, and this works without issue.

Per.sonal Emby Text.txt 96.97 kB · 0 downloads

Both have the same issue, the headermiddle requires width as it covers headerleft buttons.

image.thumb.png.462da3382cd51dd5daf9c04e23594851.png

added width to existing code

@media (min-width: 80em) {
	.headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 60%;
	}
}

image.thumb.png.a9546245ff567d642e82874abff276ef.png

 

 

 

 

Link to comment
Share on other sites

Locutus64

There was no reason to remove my post since it was a fair question about if I was looking at the right part of the CSS code. That said after thinking about what you posted @Happy2Play the only thing I removed from the code since I first started using it was the blur from background images and added two pieces of CSS above that edited code, so I don't know why what I posted would have any other changes unless they were already in there when I downloaded it.

Edited by Locutus64
Link to comment
Share on other sites

fillidill
23 hours ago, chef said:

@fillidill man your css skills are exceptional.

Really good, pro stuff there. 

 

Thanks Chef. That means a lot coming from you! 

Link to comment
Share on other sites

Locutus64
On 7/2/2022 at 11:05 AM, Happy2Play said:

The issue is when you moved headermiddle up you did not adjust width to not cover headerleft buttons.

 

 

Looks like the issue is not something I did. I just tested the new CSS with only the background blur removed and nothing else added to it and the issue pops up. I then tested the new CSS without changing anything and the issue pops up. So the issue is in the CSS right out of the gate. Since it will make my browser (Vivaldi) go fullscreen if clicked right maybe something in the code and something in Vivaldi aren't playing nice.

Edited by Locutus64
Link to comment
Share on other sites

Locutus64
On 7/2/2022 at 1:08 PM, Happy2Play said:

Both have the same issue, the headermiddle requires width as it covers headerleft buttons.

image.thumb.png.462da3382cd51dd5daf9c04e23594851.png

added width to existing code

@media (min-width: 80em) {
	.headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  width: 60%;
	}
}

image.thumb.png.a9546245ff567d642e82874abff276ef.png

 

 

 

 

 

Finally realize you meant add that code. Seems to be good now. Thanks.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
Happy2Play
9 hours ago, Sknight117 said:

The link to the css no longer works :(

What link?

Link to comment
Share on other sites

fillidill

I have now updated the main post with a new version for the back button fix (thanks Happy2Play!).

 

23 hours ago, Sknight117 said:

The link to the css no longer works :(

Not sure what you mean. If you mean the CSS file you can find it at the bottom of the main post in this thread and it works for me. 

  • Like 2
Link to comment
Share on other sites

tomibi

Hi @fillidillin your latest css file you have local links in your file. These does not work for us.


.page[data-type="home"] .section4 .card:nth-of-type(10):before {
  background-image: url(http://192.168.1.4:8096/emby/Items/2348019/Images/Primary?maxHeight=220&quality=90);
}

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
×
×
  • Create New...