# Plex Polished - A Dark Plex Theme for Web **URL:** \ **Category:** General Discussions\ **Tags:** other-third-party\ **Created:** [March 20, 2017, 7:31pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441 "2017-03-20T19:31:39Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [March 20, 2017, 7:31pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/1 "2017-03-20T19:31:39Z")
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: > **[Plex Polished 4.0](https://userstyles.org/styles/140407/plex-polished)** > > Free website themes & skins created by the Stylish community on Userstyles.org New Old ---
**Author:** ![MediaHorder](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/mediahorder/32/160753_2.png) [@MediaHorder](https://forums.plex.tv/u/MediaHorder)\ **Post date:** [March 20, 2017, 8:36pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/2 "2017-03-20T20:36:08Z")
Legend. Thanks for this. More options the merrier. ---
**Author:** ![beckfield](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/beckfield/32/7227_2.png) [@beckfield](https://forums.plex.tv/u/beckfield)\ **Post date:** [March 20, 2017, 10:05pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/3 "2017-03-20T22:05:49Z")
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; } } ``` ---
**Author:** ![daeks](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/daeks/32/17467_2.png) [@daeks](https://forums.plex.tv/u/daeks)\ **Post date:** [March 20, 2017, 10:42pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/4 "2017-03-20T22:42:49Z")
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; }` ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [March 20, 2017, 10:55pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/5 "2017-03-20T22:55:29Z")
@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? ---
**Author:** ![daeks](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/daeks/32/17467_2.png) [@daeks](https://forums.plex.tv/u/daeks)\ **Post date:** [March 21, 2017, 6:06am UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/6 "2017-03-21T06:06:51Z")
> @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”. ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [March 21, 2017, 6:16am UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/7 "2017-03-21T06:16:07Z")
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. ---
**Author:** ![daeks](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/daeks/32/17467_2.png) [@daeks](https://forums.plex.tv/u/daeks)\ **Post date:** [March 21, 2017, 12:03pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/8 "2017-03-21T12:03:05Z")
extension to remove the hard limited 750px summary: `div[class^='PrePlaySummary-summary-'] { max-width: none !important; }` ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [March 21, 2017, 8:34pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/9 "2017-03-21T20:34:42Z")
**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](https://userstyles.org/styles/140407/plex-polished "https://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/](http://codepen.io/SitePoint/pen/uIemr/) ---
**Author:** ![chyron8472](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/chyron8472/32/82945_2.png) [@chyron8472](https://forums.plex.tv/u/chyron8472)\ **Post date:** [April 24, 2017, 7:57pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/10 "2017-04-24T19:57:28Z")
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. ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [April 25, 2017, 2:51am UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/11 "2017-04-25T02:51:25Z")
You might need to add that ip address to stylish? It should work on 127.0.0.1, https://\*:32400, and [app.plex.tv](http://app.plex.tv) ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [April 28, 2017, 2:57pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/12 "2017-04-28T14:57:18Z")
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? ---
**Author:** ![chyron8472](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/chyron8472/32/82945_2.png) [@chyron8472](https://forums.plex.tv/u/chyron8472)\ **Post date:** [April 28, 2017, 3:57pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/13 "2017-04-28T15:57:14Z")
> @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. :\ ---
**Author:** ![cayars](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/cayars/32/6296_2.png) [@cayars](https://forums.plex.tv/u/cayars)\ **Post date:** [May 9, 2017, 3:54pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/14 "2017-05-09T15:54:35Z")
Just wanted to comment that if you access Plex using [https://app.plex.tv](https://app.plex.tv) it didn’t work until I added that as URLs on the domain. Fantastic job! ---
**Author:** ![jkalland](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/jkalland/32/82955_2.png) [@jkalland](https://forums.plex.tv/u/jkalland)\ **Post date:** [May 10, 2017, 1:11pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/15 "2017-05-10T13:11:34Z")
![](https://sea1.discourse-cdn.com/plex/uploads/default/original/3X/4/2/422959b4892bdc9e8a7e69df0cfcd579f48dd01a.png) 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? ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [May 10, 2017, 3:28pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/16 "2017-05-10T15:28:47Z")
> @cayars said: > Just wanted to comment that if you access Plex using [https://app.plex.tv](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](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. ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [May 10, 2017, 3:30pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/17 "2017-05-10T15:30:36Z")
> @jkalland said: > > ![](https://sea1.discourse-cdn.com/plex/uploads/default/original/3X/4/2/422959b4892bdc9e8a7e69df0cfcd579f48dd01a.png) > 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://youtube.com/tv) [http://freestyler.ws/style/154204/plex-polished](http://freestyler.ws/style/154204/plex-polished) While im here, i missed what gave you the lolz? ---
**Author:** ![beckfield](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/beckfield/32/7227_2.png) [@beckfield](https://forums.plex.tv/u/beckfield)\ **Post date:** [May 10, 2017, 4:00pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/18 "2017-05-10T16:00:36Z")
> @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. 🙂 ---
**Author:** ![cayars](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/cayars/32/6296_2.png) [@cayars](https://forums.plex.tv/u/cayars)\ **Post date:** [May 10, 2017, 6:28pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/19 "2017-05-10T18:28:50Z")
> @wwwizzarrdry said: > > > @cayars said: > > Just wanted to comment that if you access Plex using [https://app.plex.tv](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](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. ---
**Author:** ![wwwizzarrdry](https://sea1.discourse-cdn.com/plex/user_avatar/forums.plex.tv/wwwizzarrdry/32/4602_2.png) [@wwwizzarrdry](https://forums.plex.tv/u/wwwizzarrdry)\ **Post date:** [August 1, 2017, 6:23pm UTC](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441/20 "2017-08-01T18:23:45Z")
Just updated the styles for version 3.0 > **[Plex Polished 3.0](https://userstyles.org/styles/140407/plex-polished-3-0)** > > Free website themes & skins created by the Stylish community on Userstyles.org [Next page](https://forums.plex.tv/t/plex-polished-a-dark-plex-theme-for-web/185441.md?page=2)