HOME > Chowhound > Site Talk >

Discussion

Workarounds To Darken the White Background

Some people find the white backgrounds hard on the eye. Hopefully, the design guys will think of a way to ease that a bit. Meanwhile, I wanted to share some quick-and-dirty tricks for darkening bright web page backgrounds (useful not just here, but on any site with white background):

1. do a "select all" keystroke to highlight all the text on page. Whatever color your system uses to highlight text will now shade most of the white (on a mac, the highlighting color is user-configurable in preferences)

2. In safari, do a "command F" to bring up an (unobtrusive) find window. Run a quick find....and the page will remain subtly darkened. Subsequently, merely typing a command-g will re-darken other pages.

3. The best (and geekiest) alternative uses bookmarklet magic to turn white backgrounds tan. It may not work in your browser. Copy the script below and make it a bookmark (preferably right on your bookmarks bar for convenient clicking).
javascript:(function(){function%20getRGBColor(node,prop){var%20rgb=getComputedStyle(node,null).getPropertyValue(prop);var%20r,g,b;if(/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(rgb)){r=parseInt(RegExp.$1,10);g=parseInt(RegExp.$2,10);b=parseInt(RegExp.$3,10);return[r/255,g/255,b/255];}return%20rgb;}%20R(document.documentElement);%20function%20R(n){var%20i,x,color;if(n.nodeType==Node.ELEMENT_NODE%20&&%20n.tagName.toLowerCase()!=%22input%22%20&&%20n.tagName.toLowerCase()!=%22select%22%20&&%20n.tagName.toLowerCase!=%22textarea%22){for(i=0;x=n.childNodes[i];++i)R(x);%20color=getRGBColor(n,%22background-color%22);if(%20(typeof(color)!=%22string%22%20&&%20color[0]%20+%20color[1]%20+%20color[2]%20%3E=%202.8)%20||%20(n==document.documentElement%20&&%20color==%22transparent%22))%20{%20n.style.backgroundColor%20=%20%22tan%22;/*Moz%201.0*/%20n.style.setProperty(%22background-color%22,%20%22tan%22,%20%22important%22);/*Moz%201.4%20after%20zap%20colors*/%20}%20}}})()

TWO CLARIFICATIONS:
1. This is a WORKAROUND...something to bring some some relief until a better solution is found. Users helping users, not an official "solution".
2. Chuckles' stylesheet solution works a lot better than mine. I'm using it and loving it...and it doesn't affect other sites. See it below at
http://chowhound.chow.com/topics/5604...

  1. Click to Upload a photo (10 MB limit)
Delete
  1. super geeky supplement: create applescript (or some kind of windoze macro) that triggers via keyboard shortcut to launch the boomarklet, so you can change background color without needing to go to your mouse.

    Though if you simply tweak your system's highlighting color, the result of a "select all text" (trick #1 above) will be much the same and also triggerable by a quick keyboard shortcut (command-A). I'm sure there's a PC alternative, hopefully someone will post it (for newbies)

    1. Display CH in a non-maximized window about 800 pixels wide. You wont be distracted by non-CH content or ads, or by the white space alongside posts in long threads.

      3 Replies
      1. re: meatme

        But does CNET/CBS still get the ad impression? I don't block ads on sites I want to see survive.

        1. re: Jim Leff

          Dunno, but they certainly don't from people who avoid the site. This might help retain viewership.

          1. re: Jim Leff

            Yes, those ads are loaded. You can scroll sideways to see them.

        2. The bookmarklet is a great geeky idea. Another geeky alternative for Firefox users is the Stylish extension. I used Stylish to change the background color and to underline links inside posts.

          8 Replies
          1. re: MplsM ary

            Changing the 'style' is a great idea. Unfortunately, the Stylish addon or userstyles.org doesn't give any good help for find a style to suit your needs.

            Can you suggest a style that has a Darker text font?
            IMO probably that will be the Best fix for the all white background 'blues'.

            1. re: MplsM ary

              The userstyles.org site is dog slow.
              Is there a way to save a style from one web site and use it on another?
              The help for the Stylish addon is unhelpful. TIA!

              1. re: DiveFan

                Go to tools>Extension Options>Stylish
                Click Stylish and in the box that pops up click on "write"
                copy and paste the following into the large text area:

                table { border: 2px solid !important; border-color: black !important;}
                html>body {
                font-size: 80% !important;
                font-weight: bold !important;
                line-height: normal !important;

                }

                #custom-doc {background:#e9e2c4 !important; color: red !important;}
                #bd {background-color:#e9e2c4 !important;}
                #post-box-content {color:#fff !important;}
                a {color: blue !important; text-decoration: underline !important;}

                .topics_show .post,

                .topics_new .post,

                .topics_show #comments .post {

                border: 10px solid #9f9f9f !important;

                position: relative;

                padding:10px;

                }

                In the "description" area name it "chow" or "chowhound" or whatever you like.

                Click Preview and see if this works for you. If it does, click save.
                If it doesn't. you can play with the colors and font size until it does.

                1. re: DiveFan

                  Here is another one for you to plug in and try. Follow the same steps to open the stylish style editor, name it "chow2" (or whatever you like) and copy & paste the following:

                  table { border: 2px solid !important; border-color: black !important;}
                  html>body {
                  font-size: 78% !important;
                  font-weight: bold !important;
                  line-height: normal !important;

                  }

                  #custom-doc {background:#FffFcc !important; color: red !important;}
                  #bd {background-color:#FffFcc !important; border: 1px solid black !important}
                  #post-box-content {color:#f00 !important;}
                  a {color: blue !important; text-decoration: underline !important;}

                  1. re: DiveFan

                    To make the code specific to chowhound, instead of global, paste the following into the top of your style (I just got the extension yesterday, so I'm still playing with it):

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

                    @-moz-document domain("chowhound.chow.com") {

                    }

                    1. re: DiveFan

                      Bless you, hannaone! I'm liking the first one, time will tell.

                      1. re: DiveFan

                        Here is a new style for the new release:

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

                        @-moz-document domain("chowhound.chow.com") {}
                        body{background:#dfcfff;}
                        #custom-doc{background:#dfcfff}
                        #main_body{background: #bfddee;}
                        td h4 {background-color:#668888;}
                        .topics_show .post,
                        .topics_new .post,
                        .topics_show #comments .post {border: 1px solid #9f9f9f !important; position: relative; padding:4px;}
                        .post_body {background-color: #f1f1a9;}
                        #post {background-color: #c1f1a9;}
                        .topics_show .post{border:5px solid #d4d4d4;position:relative;background:#afbff1;padding:10px;}
                        .post_title {background-color: #d1eed3;}
                        td {background-color: #d1eed3;}
                        .module {background-color: #d1eed3;}
                        #gallery_module {background-color: #d1eed3;}
                        #most_popular_module {background-color: #d1eed3;}

                        (Note that This Entire Thread was posted for the last Big Design Change)

                        1. re: hannaone

                          Awesome work, hannaone! Thanks a million!

                    2. is bookmarks the "favorites" in IE?

                      8 Replies
                      1. re: jfood

                        yes

                        and, btw, anyone really miffed about the whole background color thing is probably miffed about a whole lot of web design issues in other sites they surf, and so Firefox is the browser for them. As [whatever]Mary noted, its extensions offer tons of tweakability.

                        1. re: Jim Leff

                          Wrong. I don't know why, but my eyes begin tearing after about 5 minutes. That really sucks, as I spend a lot of time just reading here.

                          1. re: Bobfrmia

                            Sorry....what exactly is "wrong"?

                            1. re: Jim Leff

                              "Anyone really miffed about the background color thing is probably miffed about a whole lot of web design issues in other sites they surf."
                              I have honestly never experienced this anywhere else. Normally black on white doesn't bother me in the least. I don't know what it is here. Maybe the combination of the font size/type, the grayness of the type, like I said, I don't know why.
                              I've been here for years. I rarely bitch about anything on the site. This, however, is quite annoying.

                              1. re: Bobfrmia

                                The difference here may be that you're not USED to it being all white. If NYTimes, Slate, et al started out with lots of beige and then went to white, lots of people might feel similarly harshed out there.

                                But in any case....this thread offers solutions for those who, for whatever reason, find that sort of thing harsh....here, there, or anywhere. That was my point. And I myself do find the white glaring. Hopefully some people are finding these suggestions useful.

                                1. re: Jim Leff

                                  Jim, with respect, you offered 3 "solutions". None of them are viable for me. The first is even worse than the new design: it gives a black box surrounded by glaring white and fills that box with white characters on lines separated by white lines. Unreadable. The second requires me to switch browsers whicvh I should nothave to do. The third, I can't even begin to understand what you're talking about with that. I'm not going there, that's for sure.

                                  This should not be that hard. It amazes me that supposedly professional web designers can't get basic stuff like this right.

                                  1. re: Greg B

                                    Greg, I didn't use the word "solution". I used the word "workaround".

                                    1. re: Jim Leff

                                      Jim, not to be anal or persnickety, but you used the word solutions in the post I was replying to:

                                      "But in any case....this thread offers solutions for those who, for whatever reason, find that sort of thing harsh..."

                                      Not that it matters much.

                      2. I just used zap colors Firefox Add-In to set the text colors to black and the links to blue. That made me realize the problem. It's not the white background but the gray text that is giving me eyestrain.