{"id":6208,"date":"2012-01-08T11:55:12","date_gmt":"2012-01-08T16:55:12","guid":{"rendered":"http:\/\/www.allyngibson.net\/?p=6208"},"modified":"2016-01-15T18:15:15","modified_gmt":"2016-01-15T23:15:15","slug":"on-making-trekbbs-readable","status":"publish","type":"post","link":"http:\/\/www.allyngibson.com\/?p=6208","title":{"rendered":"On Making TrekBBS Readable"},"content":{"rendered":"

TrekBBS<\/a> is a bulletin board where I’ve been wasting time<\/s> visiting regularly for over a decade now.<\/p>\n

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<\/b> 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<\/i>. The header, for instance, looks a bit like crap. But that doesn’t bother me muchly. \ud83d\ude42<\/p>\n

Now, I use Opera, so this is the CSS I whipped up and it works for Opera:<\/p>\n

@charset \"UTF-8\";
\n\/*
\nName: TrekBBS
\nVersion: 1.00
\nAuthor: Allyn Gibson
\nDescription: Black on Off-White layout for TrekBBS
\n*\/<\/p>\n

* {
\n  background: WhiteSmoke !important;
\n  color: Black !important; }<\/p>\n

button, input[type=\"file\"], input[type=\"submit\"], input[type=\"button\"],
\ninput[type=\"reset\"] {
\n  background: Silver !important;
\n  color: Black !important; }<\/p>\n

a[href] {
\n  color: DarkSlateBlue !important;
\n  text-decoration: underline !important;}<\/p>\n

a[href]:hover {
\n  background-color: DarkSlateBlue !important;
\n  color: GhostWhite !important; }<\/p>\n

a[href] img {
\n  border: thin solid Black !important;}<\/p>\n

table {
\n  border-collapse: collapse; !important;}<\/p>\n

.alt1, .alt1Active, .alt2 {
\n  border: 1px solid DarkSlateBlue !important; }<\/p>\n

.pagenav table .alt1, .pagenav table .alt1Active, .pagenav table .alt2 {
\n  border: none !important; }<\/p>\n

.pagenav td.alt2 {
\n  background-color: DarkSlateBlue !important; }<\/p>\n

.pagenav strong {
\n  background-color: DarkSlateBlue !important;
\n  color: GhostWhite !important; }<\/p>\n

@media screen, projection, handheld, tv {
\n  input, textarea, select {
\n    background: AliceBlue !important;
\n    color: Black !important; }
\n}<\/code><\/p>\n

If you’re using Opera, what you would do is this:<\/p>\n

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

    Firefox can also use custom CSS, but it’s a little more difficult to do.<\/p>\n

    The code you need is this:<\/p>\n

    @-moz-document domain(trekbbs.com) {
    \n  * {
    \n    background: WhiteSmoke !important;
    \n    color: Black !important; }<\/p>\n

      button, input[type=\"file\"], input[type=\"submit\"], input[type=\"button\"], input[type=\"reset\"] {
    \n    background: Silver !important;
    \n    color: Black !important; }<\/p>\n

      a[href] {
    \n    color: DarkSlateBlue !important;
    \n    text-decoration: underline !important;}<\/p>\n

      a[href]:hover {
    \n    background-color: DarkSlateBlue !important;
    \n    color: GhostWhite !important; }<\/p>\n

      a[href] img {
    \n    border: thin solid Black !important;}<\/p>\n

      table {
    \n    border-collapse: collapse; !important;}<\/p>\n

      .alt1, .alt1Active, .alt2 {
    \n    border: 1px solid DarkSlateBlue !important; }<\/p>\n

      .pagenav table .alt1, .pagenav table .alt1Active, .pagenav table .alt2 {
    \n    border: none !important; }<\/p>\n

      .pagenav td.alt2 {
    \n    background-color: DarkSlateBlue !important; }<\/p>\n

      .pagenav strong {
    \n    background-color: DarkSlateBlue !important;
    \n    color: GhostWhite !important; }<\/p>\n

      @media screen, projection, handheld, tv {
    \n    input, textarea, select {
    \n      background: AliceBlue !important;
    \n      color: Black !important; }
    \n  }
    \n}<\/code><\/p>\n

    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.<\/p>\n

      \n
    1. Do a search on your computer for the userContent-example.css file.<\/li>\n
    2. When you find that directory, copy userContent-example.css as userContent.css if you don’t have one.<\/li>\n
    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.<\/li>\n
    4. Save, close Firefox, reopen it.<\/li>\n
    5. Go visit TrekBBS. The colors should have flipped to something readable.<\/li>\n<\/ol>\n

      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. \ud83d\ude42<\/p>\n

      You may also want to see these instructions<\/a> 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. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

      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 localContinue reading “On Making TrekBBS Readable”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114],"tags":[57,115],"class_list":["post-6208","post","type-post","status-publish","format-standard","hentry","category-asides","tag-css","tag-trekbbs","entry"],"_links":{"self":[{"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=\/wp\/v2\/posts\/6208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6208"}],"version-history":[{"count":0,"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=\/wp\/v2\/posts\/6208\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6208"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.allyngibson.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}