Help me use Firefox to make my favorite forums more readable!

December 11, 2010 6:44 PM

Help me use Firefox to make my favorite forums more readable!

I frequent a message board that uses IP.Board, and only offers one stylesheet. The stylesheet is stark white with black text, and it's very difficult to read after a few minutes. Using Firefox, how can I make the website more readable?

I'm aware of Greasemonkey and UserStyles, but there isn't a pre-made script/style for these forums and I haven't been able to figure out how to create one myself. Please try to be more specific than "that's what Greasemonkey is for".

posted by Sufi to Computers & Internet (9 answers total)

Without a specific link it's hard to give specific advice, but essentially you just need to install Stylish, right click on the icon, choose Write Style > For [example.com], and then figure out a CSS selector that applies to whatever element you want to change. For example with metafilter if I wanted to change the background color I'd use something like body { background-color: #446699 }. Maybe that will work for you, maybe not. It depends a great deal on how the page is designed.

If you install Firebug then you can make this process much easier because you can right click on something and choose Inspect Element and it will bring it up in Firebug where you can see all the cascade of CSS selectors that currently apply to that item, as well as seeing its position in the DOM tree so that you can see if it has an ID or class elements that you can use to key off of in your selector. For example if the element is in a div with ID="maincontent" then you would write #maincontent { /* rules here */ }.
posted by Rhomboid at 7:31 PM on December 11, 2010

Even better, if you're using Stylish, you can search the existing public styles for it. Like this one for IPboards. Also try searching the particular domain your boards are using.
posted by timepiece at 8:43 PM on December 11, 2010

Response by poster: If it's more helpful, this is the forum :)
posted by Sufi at 8:48 PM on December 11, 2010

Hmmm, looking at some threads on that forum the text is #222222 on #EEF2F7 (gray on light blue) for comments and #222222 on #DFE6EF (gray on slightly less light blue) for topic title listings. I'm not seeing any stark white/black anywhere except for the breadcrumbs line at the top. Is it different for logged on users or something?
posted by Rhomboid at 9:17 PM on December 11, 2010

Best answer: Not sure if this fits the bill, but Blank Your Monitor/Easy Reading is a nice addon I use for websites with terrible color schemes.
posted by Geppp at 9:30 PM on December 11, 2010

Response by poster: Rhomboid, on my monitor there is a blue/grey hue, but it's still very bright and hard on the eyes. I've tried changing the monitor settings, but that color combination just doesn't work for me.

I just don't get Stylish or Firebug. I can't figure the damn things out!

Geppp, I think BYM will work. I tried AskMe Green and so far it's easy enough on the eyes :)

Thanks guys!
posted by Sufi at 11:06 PM on December 11, 2010

Best answer: Okay, so you've got Stylish installed and you've restarted your browser? You should see a Stylish icon at the bottom edge of the browser; it's a little white page with a paint brush on top of it. Now visit the forum and right click on that icon. You should see a menu option that says 'Write Style', and in the flyout menu there should be 'For dancers.invisionzone.com'. Choose that, and a text editor should pop up. Give the style a descriptive name where it says Description, e.g. "darker colors for ballet talk". Then in the text box paste this:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("dancers.invisionzone.com") {
.post1, .post2 { background-color: #b7cbde !important }
table.ipbtable { color: #555555 !important }
.quotemain { background-color: #7fa6ce !important }
}

(Some of the above should already be filled in for you, so you can just paste the three middle lines; those are the actual meat of the style.) Click 'Save' and you should see the appearance of the page change. The three values (#b7cbde, #555555, #7fa6ce) are the colors of the post background, text foreground color, and quote background color, respectively. Those are just ones I picked to make the backgrounds darker and the foregrounds lighter. I don't know what they will look like on your screen, because it sounds like your gamma adjustment is way off -- you might want to look into calibrating your gamma. Anyway, you can tweak the colors to be whatever you want. To edit the style, right click on the Stylish icon then right click again on the name of the style (whatever you named it previously, e.g. "darker colors for ballet talk") and it will bring up the editor again and you can change the colors to suit. You can use the Preview button to check without dismissing the window.
posted by Rhomboid at 11:41 PM on December 11, 2010

And I forgot to mention that those styles will only affect the thread view mode. If you want to also change the background colors of the thread listing mode and the forum listing mode, then add a line like

.row1, .row2 { background-color: #b7cbde !important }

posted by Rhomboid at 11:46 PM on December 11, 2010

Response by poster: Rhomboid thank you! That code works perfectly, and that's exactly what I needed. Thank you so much or taking the time to work it out for me :)
posted by Sufi at 1:50 PM on December 12, 2010