If you have not already, we suggest setting your Plex username to something else rather than email which is displayed on your posts in forum. You can change the username at https://app.plex.tv/desktop#!/account
Welcome to our forums! Please take a few moments to read through our Community Guidelines (also conveniently linked in the header at the top of each page). There, you'll find guidelines on conduct, tips on getting the help you may be searching for, and more!

[Forums] Don't like the color schema? Write your own!

OttoKernerOttoKerner Posts: 25,158Members, Plex Pass, Plex Ninja Plex Ninja
edited March 2016 in Tips, Tricks & How-Tos

Instead of waiting, I decided to help myself and do something about the glaring white background.

Here's how:
There is a browser extension named 'Stylish'. It is available for Chrome and Firefox AFAIK.
It can apply custom CSS to any website. It can either download prefabricated CSS from userstyles.org or you can write your own.

HowTo for Chrome:

  • install the Stylish extension for Chrome (available in the Chrome app store )
  • you get a new icon, click on it, a little menu opens
  • in the menu click on 'forum' (indicated red in screenshot)

  • an edit window opens

  • input a name for your style. I used 'paperwhite for plex forum', because that is what I first intended to do. It came out a bit different :-)
  • copy the following into the big editor window as a starting point for your own experiments
html, body, body.thumbnail {background-color: #e1e0cf;}
  ul.DataList li.Item {background-color: #f2f1e9;}
  div.Item-BodyWrap {background-color: #f2f1e9;}
  div.PageTitle h1 {color: #c18800;}
  div.Form-BodyWrap {background-color: #f2f1e9;}
  div.Message p, div.Message, .ipsBlockquote p, .Quote {color: #444;}
  .Discussions .Item .Title a {color: #555;}
  .Discussions .Unread .Title a, .Discussions .New .Title a {color: #000;}
  blockquote {border-left-color: #D5D5D5; margin-bottom: 6px; padding-bottom: 0px;}

  textarea.TextBox {background-color: #f5f5f5;}
  a {color: #c18800;}
  input[type=submit].Primary {background-color: #c18800;}

  /* Signature Block */
  div[class*="Signature"]{opacity: 0.7;}
  .Activity-Registration .ProfilePhoto, .Activity-WallPost .ProfilePhoto, .OnlineUserWrap .ProfilePhoto, .ItemDiscussion .ProfilePhoto, .Discussion .Author .ProfilePhoto, .Leaderboard .ProfilePhoto, .MeBox > .PhotoWrap > .ProfilePhoto, .Tile .ProfilePhoto { border-radius: 3px !important; }

  /* Text Online indicator - modified from Vastinator's & MovieFan's stylesheet */
  div.Item-Body.Media div.Summary {color: #777}
  div.Item-Body.Media div.Summary mark {color: #ccc; background: #777}
  div.Item-Body.Media span.CrumbLabel {background: #777; padding: 0px 30px 0px 10px}
  div.AuthorWrap a.PhotoWrap.Online:after {content: "Online"; text-align:center; font-weight: bold; font-size: 90%; color: #9abe5c; display: block; padding-top: 5px;}
  a.IndexPhoto.PhotoWrap.Online:after {content: "Online"; text-align:center; font-weight: bold; font-size: 75%; color: #9abe5c; display: block; padding-top: 5px;}
  .Section-Discussion .Role_PlexPass .MItem.RoleTitle {top: 68px;}

  • click Save, done
    the forum should then look like this:

for the Firefox extension it is almost the same

Disclaimer:
I suck at this. Really, I know I do.
The css instructions in the box above should get you started. They cover only the biggest elements. There are a lot of headings and text boxes and links and stuff left untouched.
But I am lazy and it already helps me, even in this rudimentary state.

Feel free to improve and extend.
If you come up with a color schema that is nice and complete, you can submit it to userstyles.org for instant use with the Stylish browser extension.

edit: thank you to @vastinator for figuring out the different styling of unread threads!
edit 2: included background color fix for the 'edit my thumbnail' page
edit 3: given up on the opacity for read threads since this messed with the moderation flyout menu
edit 4: changed avatars from circular to square
edit 5: slightly darkened text color in topic list
edit 6: borrowed MovieFan's 'online' indicator
edit 7: slightly darkened the actual message text
edit 8: update of plex style - avatars back to square
edit 9: update of plex style
edit10 once more update due to changed plex style - restore 'Online' indicator

Help others too - by reporting back with your results!
Have you checked the Documentation before posting a question in the forums?
Use the SEARCH function before starting a new thread!
No PMs unless requested, please! Do not use 'verbose' logging
«13456720

Comments

  • Bartlomiej BaraniecBartlomiej Baraniec Posts: 1,832Members, Plex Pass Plex Pass

    That's pretty nice workaround :)

  • Elijah_BaleyElijah_Baley Posts: 4,365Members, Plex Pass Plex Pass
    edited July 2015

    When I suggested using a browser extension or customizing settings to make the new forums more usable or at least more aesthetically pleasing I was told that the solution offered was unacceptable because the new forums should adapt themselves to the user. I read that as: "Make the forums the way they were or go away" or "I don't want to do any work to get the interface I want. Someone else should do the work for me"

    So I quit trying to help those that would not help themselves.

    This is better than what I was suggesting and so I expect that people may blast it as well. People would rather cry about perceived problems than take steps to eliminate them.

    I am going to give it a try. I use FireFox and I may report back if I have problems.

    EDIT: That was quick and easy. Combining the script gived with FireFox's built in magnification (I am using either 133% or 150%. I'm not sure which I like best.) and the aesthetics are quite nice.

    Thanks!

    Plex has lost me! I am moving all my local media consumption to Emby. There are things about Plex that are better than Emby but Plex has begun misleading their customers and even telling their users bald faced lies and that is unacceptable so I no longer use Plex for any media consumption.
    I will NOT be lied to by a company I have any choice about using.
    It has been a good ride but I now feel that I am the one being ridden.
    Emby is NOT better software but they are a better company at this point.

  • beckfieldbeckfield Posts: 3,914Members, Plex Pass Plex Pass
    edited July 2015

    Yep, worked for me too.

    Thanks, Otto!

    Edit: I created a blue Stylish theme:

    html, body {background-color: #92bdef;}
    ul.DataList li.Item {background-color: #ccddf2;}
    ul.TagCloud li {background-color: #ccddf2;}
    div.Item-BodyWrap {background-color: #ccddf2;}
    div.PageTitle h1 {color: #000;}
    h1.H.HomepageTitle {color: black;}
    div.Form-BodyWrap {background-color: #e2e1e9;}
    textarea.TextBox {background-color: #f5f5f5;}
    a {color: #c14400;}
    input[type=submit].Primary {background-color: #58A6F4;}
    span.MItem {color: green;}
    div.DiscussionHeader, div.Item-Header {background-color: #85b2ff !important;}
    }
    
  • treboR2RoberttreboR2Robert Posts: 252Members, Plex Pass Plex Pass

    OttoKerner you are a legend !!

    I'm on my phone atm but I will defiantly try this later.

    Your colour scheme looks excellent.

    Thanks for sharing it :-)

    treboR2Robert    AKA    Mr. Grumpy


    PMS ( FreeNAS 9.10.2-U5 ) ( manual jail )    Rasplex ( Raspberry Pi 3 model B ) ¦ ( Raspberry Pi 2 model B x2¦ ( Raspberry Pi model B x2 )     PS3 & PS4

  • sa2000sa2000 Posts: 28,851Members, Plex Pass, Plex Ninja, Plex Team Member Plex Team Member

    wow - thank you guys.

    lets have more and more styles ...... to choose from

    i am now on the blue from @beckfield

    Thanks @OttoKerner for tackling this. Much appreciated

    Help given free on forums.            Fee-Based Personal Support & Help.        

    _______________________________________________________________________________________

    Plex Support Information              Troubleshooting               FAQs

    Plex Media Server:   Reporting Issues        Plex Web App: Debug Log    Plex Apps: Support pages and Logs    Logs: All Logs

    For list of 3rd party programs and malware / adware crashing Plex Media Server and mswsock.dll on windows, see Repeated crashing of Plex Media Server on Windows
     
  • Bartlomiej BaraniecBartlomiej Baraniec Posts: 1,832Members, Plex Pass Plex Pass

    I'm using @OttoKerner style. So much better. Still waiting for official dark theme.

  • starbetrayerstarbetrayer Posts: 3,308Members, Plex Pass Plex Pass

    Thanks Otto

  • vanstinatorvanstinator Plex for Windows Posts: 657Members, Plex Employee, Plex Pass, Plex Ninja Plex Employee

    Lets get some user scripts going to rearrange/hide some page elements too. Let's bury this crappy UI and get something easier on the eyes. I'm working on a color theme that more closely matches the old Plex forums. After that I'm going to start hacking the UI itself.

    Projects I currently develop or maintain

    Classic Forum for Plex - A forum skin that aims to replicate the classic forum experience as best as possible without taking away some of the better things about the new forum.

    PlexWink - A Plex Channel that monitors Plex and controls your smart lights based on playback.

    UASViewer - A Plex Channel for the Unsupported App Store that lets you browse channels right from Plex.

  • treboR2RoberttreboR2Robert Posts: 252Members, Plex Pass Plex Pass
    edited July 2015

    Just tried this on Firefox and the process is a little different.

    It kept applying the skin to all websites not just the plex forum until I figured out where to put the code.

    Now it works SWEET and I am a very happy chappie :-)

    Follow these instructions for Firefox


    Step 1

    ------------------------------------------------------------------------------------------------------------------------

    Install the Stylish addon for Firefox.


    Step 2

    ------------------------------------------------------------------------------------------------------------------------

    Click the "stylish icon"
    Hover over "write new style"
    Click "For forums.plex.tv..."


    Step 3

    ------------------------------------------------------------------------------------------------------------------------

    You will now get a new window come up with an empty "Name" field and below that 5 lines of code.
    Enter a name for the skin
    Copy and paste OttoKerner's code to line 4 of the existing code

    html, body {background-color: #e1e0cf;}
    ul.DataList li.Item {background-color: #f2f1e9;}
    div.Item-BodyWrap {background-color: #f2f1e9;}
    div.PageTitle h1 {color: #c18800;}
    div.Form-BodyWrap {background-color: #f2f1e9;}
    textarea.TextBox {background-color: #f5f5f5;}
    a {color: #c18800;}
    input[type=submit].Primary {background-color: #c18800;}


    Step 4

    ------------------------------------------------------------------------------------------------------------------------

    Click save
    Now you should have this and everything should be working perfectly

    ------------------------------------------------------------------------------------------------------------------------

    treboR2Robert    AKA    Mr. Grumpy


    PMS ( FreeNAS 9.10.2-U5 ) ( manual jail )    Rasplex ( Raspberry Pi 3 model B ) ¦ ( Raspberry Pi 2 model B x2¦ ( Raspberry Pi model B x2 )     PS3 & PS4

  • vanstinatorvanstinator Plex for Windows Posts: 657Members, Plex Employee, Plex Pass, Plex Ninja Plex Employee
    edited July 2015

    The wayback machine for the most part contains excellent copies of the old forum. I'll be referencing that as I go. My current theme (I'm at work and hacking at this when nobody is looking) is this.

    OldPlex
    html, body {background-color: #323232;} ul.DataList li.Item {background-color: #f2f1e9;} div.Item-BodyWrap {background-color: #f2f1e9;} h1.H.HomepageTitle {color: #ffffff;} div.PageTitle h1 {color: #ffffff; font-size: 28px;} div.Form-BodyWrap {background-color: #f2f1e9;} textarea.TextBox {background-color: #f5f5f5;} a {color: #c18800;} input[type=submit].Primary {background-color: #c18800;}

    I'll be filling this out quite a bit more and I'll see what I can do about DOM manipulation too.

    If this takes off and we get some good styles we should ping @elan about getting a sub-forum for forum skins.

    Projects I currently develop or maintain

    Classic Forum for Plex - A forum skin that aims to replicate the classic forum experience as best as possible without taking away some of the better things about the new forum.

    PlexWink - A Plex Channel that monitors Plex and controls your smart lights based on playback.

    UASViewer - A Plex Channel for the Unsupported App Store that lets you browse channels right from Plex.

  • treboR2RoberttreboR2Robert Posts: 252Members, Plex Pass Plex Pass

    @vanstinator said:
    The wayback machine for the most part contains excellent copies of the old forum. I'll be referencing that as I go. My current theme (I'm at work and hacking at this when nobody is looking) is this.

    OldPlex
    html, body {background-color: #323232;} ul.DataList li.Item {background-color: #f2f1e9;} div.Item-BodyWrap {background-color: #f2f1e9;} h1.H.HomepageTitle {color: #ffffff;} div.PageTitle h1 {color: #ffffff; font-size: 28px;} div.Form-BodyWrap {background-color: #f2f1e9;} textarea.TextBox {background-color: #f5f5f5;} a {color: #c18800;} input[type=submit].Primary {background-color: #c18800;}

    I'll be filling this out quite a bit more and I'll see what I can do about DOM manipulation too.

    If this takes off and we get some good styles we should ping elan about getting a sub-forum for forum skins.

    What is the "wayback machine" ?

    I do like your skin with the darker background and how similar it looks to the old forums.

    I think those white bars don't look right though and I'm sure in the old forums the posts used to be a lot wider everything seems to narrow now. like so much of the page is wasted. (see pic below)

    Don't know if there's anything you can do about that ?

    Great work though dude

    treboR2Robert    AKA    Mr. Grumpy


    PMS ( FreeNAS 9.10.2-U5 ) ( manual jail )    Rasplex ( Raspberry Pi 3 model B ) ¦ ( Raspberry Pi 2 model B x2¦ ( Raspberry Pi model B x2 )     PS3 & PS4

  • vanstinatorvanstinator Plex for Windows Posts: 657Members, Plex Employee, Plex Pass, Plex Ninja Plex Employee
    edited July 2015

    I'm still working on it. I've got some free time tonight and tomorrow morning so I'll be fleshing this out a lot more. As for actual widths and placement of things, that's step 2.

    There are still fonts I need to recolor and font sizes I'd like to tweak. I'll then go through and update overall colors again and make sure nothing is jarring or hard on the eyes.

    The wayback machine is an internet archive, Plex forums can be found here

    https://web.archive.org/web/20150527031712/https://forums.plex.tv/

    Projects I currently develop or maintain

    Classic Forum for Plex - A forum skin that aims to replicate the classic forum experience as best as possible without taking away some of the better things about the new forum.

    PlexWink - A Plex Channel that monitors Plex and controls your smart lights based on playback.

    UASViewer - A Plex Channel for the Unsupported App Store that lets you browse channels right from Plex.

  • treboR2RoberttreboR2Robert Posts: 252Members, Plex Pass Plex Pass

    Cool I'm looking forward to seeing what you come up with.

    What is this wayback machine thing ?

    treboR2Robert    AKA    Mr. Grumpy


    PMS ( FreeNAS 9.10.2-U5 ) ( manual jail )    Rasplex ( Raspberry Pi 3 model B ) ¦ ( Raspberry Pi 2 model B x2¦ ( Raspberry Pi model B x2 )     PS3 & PS4

  • PlexhilaratedPlexhilarated Plexperimentalist Posts: 1,620Members, Plex Pass Plex Pass
    edited July 2015

    This is WONDERFUL.

    Thanx for the code @vanstinator

    My Current Plexistence:
    Server: Intel i5, 14x3TB Internal Drives, Win-10, running PMS, PlexPy, PlexWeb, PHT, PMP, Plex for Windows 
    27" Samsung Monitor and Vivitek HD/3D Projector, 10' Diagonal Fixed Screen
    Dell Laptop: Win-10, running PlexWeb, PHT, PMP, and Plex for Windows
    Samsung 55" LED TV: Samsung Plex App
    Vizio 50" UHD TV: Vizio Plex App
    Samsung 40" LED TV: Samsung Plex App
    Tablet PC: Windows 8.1 Mobile App
    Motorola Droid: Android App
  • vanstinatorvanstinator Plex for Windows Posts: 657Members, Plex Employee, Plex Pass, Plex Ninja Plex Employee

    Thanks! This just motivates me to polish it up more. Maybe I'll work on it more over my lunch break.

    Projects I currently develop or maintain

    Classic Forum for Plex - A forum skin that aims to replicate the classic forum experience as best as possible without taking away some of the better things about the new forum.

    PlexWink - A Plex Channel that monitors Plex and controls your smart lights based on playback.

    UASViewer - A Plex Channel for the Unsupported App Store that lets you browse channels right from Plex.

  • vanstinatorvanstinator Plex for Windows Posts: 657Members, Plex Employee, Plex Pass, Plex Ninja Plex Employee

    I've uploaded this to userstyles. Not sure if it will auto-update in stylish or not, still testing.

    https://userstyles.org/styles/117161/classic-forum-for-plex

    I'll be making a thread for this theme this evening.

    Projects I currently develop or maintain

    Classic Forum for Plex - A forum skin that aims to replicate the classic forum experience as best as possible without taking away some of the better things about the new forum.

    PlexWink - A Plex Channel that monitors Plex and controls your smart lights based on playback.

    UASViewer - A Plex Channel for the Unsupported App Store that lets you browse channels right from Plex.

  • War9512War9512 Posts: 45Members, Plex Pass Plex Pass
    edited July 2015

    @OttoKerner Thanks for coming up with this solution this makes it so much easier to read.

  • treboR2RoberttreboR2Robert Posts: 252Members, Plex Pass Plex Pass

    I will be sticking with the original skin that @OttoKerner did for now

    To me it just feels better.

    But I will defiantly keep an eye on the skin that @vanstinator is working on, it sounds like it has great potential.

    Thanks Guys :-)

    treboR2Robert    AKA    Mr. Grumpy


    PMS ( FreeNAS 9.10.2-U5 ) ( manual jail )    Rasplex ( Raspberry Pi 3 model B ) ¦ ( Raspberry Pi 2 model B x2¦ ( Raspberry Pi model B x2 )     PS3 & PS4

  • beckfieldbeckfield Posts: 3,914Members, Plex Pass Plex Pass
  • vanstinatorvanstinator Plex for Windows Posts: 657Members, Plex Employee, Plex Pass, Plex Ninja Plex Employee
    edited July 2015

    @treboR2Robert said:
    I will be sticking with the original skin that OttoKerner did for now

    To me it just feels better.

    But I will defiantly keep an eye on the skin that vanstinator is working on, it sounds like it has great potential.

    Thanks Guys :-)

    Yeah I've essentially just dumped in a dark background which broke a lot of text and other elements. I'm leaving it off right now too because I don't love it, it needs work. I'll recolor more stuff and see where it gets me.

    I've sent a message to @elan as well asking if we can get a forum skin section. If we attract some more talent we should be able to come up with some cool stuff. If anyone hacks at my theme feel free to share the changes. If they bring it closer to the Classic Plex forum feel I'll add them to the "official" style.

    Projects I currently develop or maintain

    Classic Forum for Plex - A forum skin that aims to replicate the classic forum experience as best as possible without taking away some of the better things about the new forum.

    PlexWink - A Plex Channel that monitors Plex and controls your smart lights based on playback.

    UASViewer - A Plex Channel for the Unsupported App Store that lets you browse channels right from Plex.

«13456720
Sign In or Register to comment.