On Making TrekBBS Readable

Posted byAllynPosted inAsidesTags:,

TrekBBS is a bulletin board where I’ve been wasting time visiting regularly for over a decade now.

This morning I logged in to find that the bulletin board had redesigned with a new white-text-on-black-background design. And because my eyes are not as young as they used to be, I decided to whip together a local stylesheet for my browser that would flip the colors and make it easier to read. And then I did some things like add lines to the thread list to make separations clearer and highlight the page that one’s odd in the thread list or post view pages. It doesn’t fix everything. The header, for instance, looks a bit like crap. But that doesn’t bother me muchly. 🙂

Now, I use Opera, so this is the CSS I whipped up and it works for Opera:

@charset "UTF-8";
/*
Name: TrekBBS
Version: 1.00
Author: Allyn Gibson
Description: Black on Off-White layout for TrekBBS
*/

* {
  background: WhiteSmoke !important;
  color: Black !important; }

button, input[type="file"], input[type="submit"], input[type="button"],
input[type="reset"] {
  background: Silver !important;
  color: Black !important; }

a[href] {
  color: DarkSlateBlue !important;
  text-decoration: underline !important;}

a[href]:hover {
  background-color: DarkSlateBlue !important;
  color: GhostWhite !important; }

a[href] img {
  border: thin solid Black !important;}

table {
  border-collapse: collapse; !important;}

.alt1, .alt1Active, .alt2 {
  border: 1px solid DarkSlateBlue !important; }

.pagenav table .alt1, .pagenav table .alt1Active, .pagenav table .alt2 {
  border: none !important; }

.pagenav td.alt2 {
  background-color: DarkSlateBlue !important; }

.pagenav strong {
  background-color: DarkSlateBlue !important;
  color: GhostWhite !important; }

@media screen, projection, handheld, tv {
  input, textarea, select {
    background: AliceBlue !important;
    color: Black !important; }
}

If you’re using Opera, what you would do is this:

  1. Copy that code into a new text file.
  2. Save that text file as trekbbs.css in your Program FilesOperaStylesUser directory
  3. Go to TrekBBS
  4. Right-click anywhere and scroll down to Edit Site Preferences
  5. On the display tab, use the “My Style Sheet” box to find your trekbbs.css file
  6. Hit “Ok” and refresh. You should now have lovely black text on an off-white background.

Firefox can also use custom CSS, but it’s a little more difficult to do.

The code you need is this:

@-moz-document domain(trekbbs.com) {
  * {
    background: WhiteSmoke !important;
    color: Black !important; }

  button, input[type="file"], input[type="submit"], input[type="button"], input[type="reset"] {
    background: Silver !important;
    color: Black !important; }

  a[href] {
    color: DarkSlateBlue !important;
    text-decoration: underline !important;}

  a[href]:hover {
    background-color: DarkSlateBlue !important;
    color: GhostWhite !important; }

  a[href] img {
    border: thin solid Black !important;}

  table {
    border-collapse: collapse; !important;}

  .alt1, .alt1Active, .alt2 {
    border: 1px solid DarkSlateBlue !important; }

  .pagenav table .alt1, .pagenav table .alt1Active, .pagenav table .alt2 {
    border: none !important; }

  .pagenav td.alt2 {
    background-color: DarkSlateBlue !important; }

  .pagenav strong {
    background-color: DarkSlateBlue !important;
    color: GhostWhite !important; }

  @media screen, projection, handheld, tv {
    input, textarea, select {
      background: AliceBlue !important;
      color: Black !important; }
  }
}

This code needs to go in the userContent.css file. If you’ve never used this file before, then you probably don’t have one.

  1. Do a search on your computer for the userContent-example.css file.
  2. When you find that directory, copy userContent-example.css as userContent.css if you don’t have one.
  3. Open userContent.css and add the Firefox code above. Or, if you downloaded and renamed the file above, just copy it into that directory.
  4. Save, close Firefox, reopen it.
  5. Go visit TrekBBS. The colors should have flipped to something readable.

Unfortunately, you will still have to slog through long, pedantic posts from people who will make you want to pound your head into a brick wall, but at least it won’t hurt your eyes to look at it. 🙂

You may also want to see these instructions for installing custom stylesheets in Opera and Firefox. It’s not the easiest thing in the world to do, but once it’s done you’ll never have to do it again. 🙂

Published by Allyn

A writer, editor, journalist, sometimes coder, occasional historian, and all-around scholar, Allyn Gibson is the writer for Diamond Comic Distributors' monthly PREVIEWS catalog, used by comic book shops and throughout the comics industry, and the editor for its monthly order forms. In his over ten years in the industry, Allyn has interviewed comics creators and pop culture celebrities, covered conventions, analyzed industry revenue trends, and written copy for comics, toys, and other pop culture merchandise. Allyn is also known for his short fiction (including the Star Trek story "Make-Believe,"the Doctor Who short story "The Spindle of Necessity," and the ReDeus story "The Ginger Kid"). Allyn has been blogging regularly with WordPress since 2004.

5 thoughts on “On Making TrekBBS Readable”

  1. I’ve been experimenting with removing the sidebar. Because it’s defined as, I think 360 pixels wide, it doesn’t look good on a 1024px or smaller monitor as it makes the posts excessively narrow and creates a lot of blank space when you’ve scrolled beneath it.

    This is the additional CSS code you’d need to remove the sidebar if you have a 1024 (or smaller) monitor:

    body {
      min-width: 100% !important; }

    #maincolumn {
      margin-right:25px !important;}

    #sidecolumn {
      display: none !important;}

    Just add this at some point to the CSS code above and all is good. 🙂

    Reply

  2. If you have a smaller monitor, the footer blows out, too. So, this code is also necessary:

    #footerinner {
    width: 100% !important; }

    .footerlinks {
    width: 33% !important }

    This has some interesting results. This code, along with the code in the previous comment, could be used together to make the site fluid — and thus usable on mobile devices. 😉

    Reply

  3. This code’s a little more complicated, but I like the look and feel of the site better. Same basic idea — dark text on a light background — but it creates a nice background for contrast, removes the sidebar, and makes the pop-out menus stand out.

    @charset "UTF-8";
    /*
    Name: TrekBBS
    Version: 2.0
    Author: Allyn Gibson
    Description: Black on Off-White layout for TrekBBS
    */

    body {
      color: #ffffff !important;
      /* background:#3B9C9C !important; */
      background: #3EA99F !important;
      min-width:100% !important;
    }

    a:link, a:visited {
      text-decoration: none !important;  
    }

    a:link {
      color: #153E7E !important;
    }

    a:visited {
      color: #1569C7 !important;
    }

    a:hover {
      text-decoration: underline !important;
      color: #5E5A80 !important;
    }

    font {
      color: inherit !important;
    }

    #firstbar {
      background-color: #000000 !important;
    }

    #container {
      width:100% !important;
    }

    #sidecolumn {
      display: none! important;
    }

    #maincolumn {
      margin:0px 25px 0px 15px !important;
    }

    #maincolumn form td.panelsurround {
      background-color: #307D7E !important;
    }

    #maincolumn form td.panelsurround div.panel {
      background-color: #3B9C9C !important;
    }

    #maincolumn form td.panelsurround div.panel div.smallfont {
      color: #ffffff;
    }

    #maincolumn form td.panelsurround div.panel div.smallfont a:link {
      color: #CFECEC;
    }

    #maincolumn table.tborder .alt1,
    #maincolumn table.tborder .alt1Active,
    #maincolumn table.tborder .alt2,
    #maincolumn table.tborder .thead,
    #maincolumn table.tborder .tcat,
    #maincolumn table.tborder .tfoot,
    #maincolumn table.tborder .vbmenu_control,
    #maincolumn table.page .tfoot,
    #maincolumn div.tborder .vbmenu_control {
      font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif !important;
      background: WhiteSmoke !important;
      color: Black !important;
    }

    #maincolumn table.tborder .alt1 .smallfont,
    #maincolumn table.tborder .alt1Active .smallfont,
    #maincolumn table.tborder .alt2 .smallfont {
      color: #4C787E !important;
    }

    #maincolumn .time {
      color: #616D7E !important;
    }

    #footerinner {
      width: 90% !important; }

    .footerlinks {
      width:33% !important;
    }

    #copyright {
      color: #ffffff !important;
    }

    .vbmenu_control {
      background: WhiteSmoke !important;
    }

    .vbmenu_popup {
      background: #20B2AA !important;
    }

    .vbmenu_option {
      background: MintCream !important;
    }

    .vbmenu_hilite {
      background: #66CDAA !important;
    }

    Reply

  4. Just installed the Firefox version of your css and it works great. I had no idea you could do that. Thanks for the info. This does make reading TrekBBS a lot easier, well, except for the content.

    Reply

Leave a Reply to Allyn Cancel reply

Your email address will not be published. Required fields are marked *