Used stylish for a hybrid Plex Web look.
- Fullscreen background-image (w/ blur)
- YouTube Leanback Gradient
- Box-Shadow on CD and DVD cases
- Subtle scale on hover
Download Link:
New
Old
Legend. Thanks for this. More options the merrier.
Nice. Maybe we can use this as a sharing thread.
I’ve been asking for a way to turn backgrounds off altogether, so when someone posted some Stylish CSS to turn off the new blurry background, I jumped at it. I decided to play around with it, and settled on a subtle gradient background that looks like this:
I also figured out how to remove the blurred background the Plex shows behind my photos (last element in Stylish CSS below).
Coupled with @wwwizzarrdry 's box shadow element, I think it looks pretty nice, and a little more polished.
Stylish file:
@-moz-document domain("app.plex.tv")
{
/* Fix track list overzealous space-saving */
.media-list-item .media-heading {
text-overflow: initial !important;
max-width: 80% !important;
}
/* More reasonable gradient background for Plex Web */
#plex > div.background-container > div > div > div:nth-child(2){
background: rgba(41,41,41,1.0) !important;
}
#plex > div.background-container > div > div > div:nth-child(2)
.background-container > div > div > div {
background: #222 !important; /* For browsers that do not support gradients */
background: radial-gradient(#515151, black) !important; /* Must be last */
}
.sidebar-container {
background: #222 !important; /* For browsers that do not support gradients */
background: linear-gradient(90deg, #515151, black) !important; /* Must be last */
}
.PageHeader-pageHeader-3lHPG {
background: #333 !important; /* For browsers that do not support gradients */
background: linear-gradient(90deg, #515151, black) !important; /* Must be last */
}
.PageContent-pageContent-benw0 {
background: #222 !important; /* For browsers that do not support gradients */
background: radial-gradient(#515151, black) !important; /* Must be last */
}
/* Remove blurred background from photo slideshow */
.PhotoPlayer-lightbox-2u0B1 > div > div > div {
background-image: none !important;
}
/* Box shadow on CD and DVD posters */
div[class^='MetadataPosterCard-cardContainer-'] {
box-shadow: 0px 4px 15px -2px #000;
transition: transform .26s ease-out;
}
}
On my end, I had some scrolling issues, so I modified the code a bit:
div[class^='MetadataPosterCard-cardContainer-'] { box-shadow: 0px 4px 15px -2px #000; transition: transform 0.26s ease-out; } div[class^='PrePlayArtwork-imageContainer-'] + div { top: 180px !important; } div[class^='MetadataPosterCard-cardContainer-']:hover { transform: scale(1.05); } div[class^='PrePlayArtwork-imageContainer-'] { background-color: rgba(0, 0, 0, 0.0); z-index: -1 !important; height: 0px !important; } div[class^='PrePlayArtwork-imageContainer-'] > div { height: 100% !important; position: fixed !important; opacity: 0.3; filter: blur(3px); } div[class^='PageContent-innerPageContent-'] { background: rgba(0, 0, 0, 0.3) !important; }
@daeks
Nice. Good of you to let others know that removing the height of .PrePlayArtwork-imageContainer removes all the empty space above an artist (where you have the clear view of the background art).
I went back and forth a few times, ultimately deciding I prefer the initial background-focused view.
Can’t tell what moving it 175px from the top does for you? Need to force an overflow or something?
@wwwizzarrdry said:
Can’t tell what moving it 175px from the top does for you? Need to force an overflow or something?
Unfortunately the poster has to be moved up as well… It is surrounded with a div which has “position: fixed; top: xx px”.
Never realized how poorly that content section is designed until I started tweaking it. There’s no reason to layer the elements in such a way. It’s no wonder.der they can’t provide more user customization I. Regards to layout. They’ve basically hard coded their UI to o ly work one way… I already sketched out a modular layout that would achieve the same effect, but allow users to rearrange the majority of the elements. It’ll take so.e serious tampermonkey’ing to get it working though.
Basically have to map and detach all the elements and insert them again with an amended class structure.
extension to remove the hard limited 750px summary:
div[class^='PrePlaySummary-summary-'] { max-width: none !important; }
For posterity, here is the final cut
- Fixed small hover-scale issue
- Increased depth of shadow to match those of google cards.
- Removed background image margins on Pre-Play Screen
- Pulsing status glyph
- Added high contrast sepia filter on poster hover
Download Link:
userstyles.org/styles/140407/plex-polished
/* Posters */ div[class^='MetadataPosterCard-cardContainer-'] { margin-top: 5px; box-shadow: 0px 12px 20px -8px #000; transition: transform 0.26s ease-out; } div[class^='VirtualListScroller-scroller-'] div[class^='virtualized-cell-']:first-child:hover div[class^='MetadataPosterCard-cardContainer-'] { transform: scale(1.05) translateX(5px) translateY(-5px); } div[class^='MetadataPosterCard-cardContainer-']:hover { transform: scale(1.05) translateY(-5px); } div[class^='MetadataPosterCard-cardContainer-']:hover div[class^='PosterCardImg-imageContainer-'] { filter: grayscale(50%) brightness(105%) contrast(220%) } /* Poster Play Button */ div[class^='MetadataPosterCardOverlay-playCircle-'] { opacity: 0.0; filter: blur(10px); box-shadow: 0px 6px 10px -4px #000; transition: all 0.5s ease-out; } div[class^='MetadataPosterCard-cardContainer-']:hover div[class^='MetadataPosterCardOverlay-playCircle-'] { opacity: 1.0; filter: blur(0px); zoom: 1.5; } /* Pre-Play Screen (Details) */ div[class^='PrePlayArtwork-imageContainer-'] { background-color: rgba(0, 0, 0, 0.0); height: 0px !important; z-index: -1 !important; } div[class^='PrePlayArtwork-imageContainer-'] + div { top: 175px !important; } div[class^='PrePlayArtwork-imageContainer-'] > div { height: 100% !important; position: fixed !important; opacity: 0.35; filter: blur(3px); } div[class^='PageContent-innerPageContent-'] { background: rgba(0, 0, 0, 0.3) !important; } /* Pulsate Status */ .nav-bar li.active i { -webkit-animation: pulsate 5s ease-out; -webkit-animation-iteration-count: infinite; opacity: 0.1 } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1.7, 1); opacity: 1.0; } 50% { -webkit-transform: scale(0.85, 0.85); opacity: 0.3; } 100% { -webkit-transform: scale(1.7, 1); opacity: 1.0; } }
Might try to add a flyout menu like this in the next version. http://codepen.io/SitePoint/pen/uIemr/
I can’t get background images to appear when accessing my PMS remotely on Plex Web. It’s always just a gradient. I’ve tried Firefox and Chrome.
It works, but only when accessed locally.
You might need to add that ip address to stylish?
It should work on 127.0.0.1, https://*:32400, and app.plex.tv
Sorry @chyron8472 I still can’t reproduce the issue. Seems to work fine on FF and Chrome…
You’re sure you have the “show background image” box checked?
@wwwizzarrdry said:
You’re sure you have the “show background image” box checked?
Ah! …No, it wasn’t checked. Well, that makes me feel like a noob. :\
Just wanted to comment that if you access Plex using https://app.plex.tv it didn’t work until I added that as URLs on the domain.
Fantastic job!
This amused me tremendously.
That said, this is pretty slick. Maybe we could merge this and Beckfields together so that it toggles between the 2 when you turn on/off background images?
@cayars said:
Just wanted to comment that if you access Plex using https://app.plex.tv it didn’t work until I added that as URLs on the domain.Fantastic job!
If you have the latest version from http://freestyler.ws/style/154204/plex-polished its updated to apply to app.plex.tv, and *:32400
Its really easy to add other addresses inside your local copy of stylish as well.
@jkalland said:
This amused me tremendously.That said, this is pretty slick. Maybe we could merge this and Beckfields together so that it toggles between the 2 when you turn on/off background images?
Same with this. The latest version uses the dark background from YouTube TV
http://freestyler.ws/style/154204/plex-polished
While im here, i missed what gave you the lolz?
@wwwizzarrdry said:
While im here, i missed what gave you the lolz?
I blacked out my server name in the screenshot, and for a bit of fun I blacked out my eyes on my avatar. Wondered if anyone would notice. 
@wwwizzarrdry said:
@cayars said:
Just wanted to comment that if you access Plex using https://app.plex.tv it didn’t work until I added that as URLs on the domain.Fantastic job!
If you have the latest version from http://freestyler.ws/style/154204/plex-polished its updated to apply to app.plex.tv, and *:32400
Its really easy to add other addresses inside your local copy of stylish as well.
I just pulled it down yesterday and did see there was the regedit style as the last one but it didn’t work for me.
Just updated the styles for version 3.0
