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


#1

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 :slight_smile:
  • 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


#2

That's pretty nice workaround :)


#3

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!


#4

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;}
}

#5

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 :-)


#6

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


#7

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


#8

Thanks Otto


#9

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.


#10

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 :slight_smile:

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

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


#11

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.


#12

@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


#13

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/


#14

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

What is this wayback machine thing ?


#15

This is WONDERFUL.

Thanx for the code @vanstinator


#16

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


#17

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.


#18

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


#19

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 :-)


#20

Wow, I hadn't thought about the Wayback Machine in years. Nice!