HOME > Chowhound > Site Talk >
Brewing beer, curing meat, or making cheese? Share your food adventure
TELL US

Workarounds To Darken the White Background

Jim Leff Sep 26, 2008 09:17 AM

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. Jim Leff Sep 26, 2008 09:41 AM

    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. meatme Sep 26, 2008 10:24 AM

      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
        Jim Leff Sep 26, 2008 10:33 AM

        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
          meatme Sep 26, 2008 10:57 AM

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

          1. re: Jim Leff
            Chuckles the Clone Sep 30, 2008 08:09 PM

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

        2. MplsM ary Sep 26, 2008 11:57 AM

          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
            DiveFan Sep 29, 2008 10:31 PM

            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
              DiveFan Oct 2, 2008 12:15 AM

              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
                hannaone Oct 2, 2008 03:02 AM

                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
                  hannaone Oct 2, 2008 09:47 AM

                  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
                    hannaone Oct 2, 2008 10:57 AM

                    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
                      DiveFan Oct 2, 2008 02:21 PM

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

                      1. re: DiveFan
                        hannaone Aug 13, 2010 10:27 PM

                        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
                          Jim Leff Aug 15, 2010 02:59 PM

                          Awesome work, hannaone! Thanks a million!

                    2. jfood Sep 26, 2008 12:20 PM

                      is bookmarks the "favorites" in IE?

                      8 Replies
                      1. re: jfood
                        Jim Leff Sep 26, 2008 12:45 PM

                        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
                          b
                          Bobfrmia Sep 26, 2008 10:21 PM

                          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
                            Jim Leff Sep 27, 2008 06:43 AM

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

                            1. re: Jim Leff
                              b
                              Bobfrmia Sep 27, 2008 08:58 AM

                              "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
                                Jim Leff Sep 27, 2008 11:01 AM

                                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
                                  Greg B Sep 28, 2008 05:51 PM

                                  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
                                    Jim Leff Sep 29, 2008 11:11 AM

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

                                    1. re: Jim Leff
                                      Greg B Sep 29, 2008 11:54 AM

                                      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. r
                        rcianci Sep 30, 2008 01:24 PM

                        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.

                        1. Chuckles the Clone Sep 30, 2008 08:27 PM

                          You can also use a custom stylesheet. If you're using safari (it's similar for firefox but I don't have it handy right now). Do the following:

                          1. Create a file somewhere on your computer which contains only the
                          following three lines. You should probably call it something like chow.css so you can find it again, but the name doesn't matter:

                          #custom-doc {background:#e9e2c4 !important;}
                          #bd {background-color:#e9e2c4 !important;}
                          #post-box-content {color:#fff !important;}

                          2. Using the safari preferences panel, open the "advanced" tab.
                          3. You'll see a little pulldown menu labeled "style sheet". Pull it down.
                          4. One of the options is "other", click on it and a finder navigation window will appear.
                          5. Find the file you just created containing the above three lines, click once to select it, then click the "choose" button.

                          You'll find yourself with nice black text and a pleasant light tan background.

                          7 Replies
                          1. re: Chuckles the Clone
                            Cpt Wafer Oct 1, 2008 09:43 PM

                            Works splendidly. Takes about 90 seconds to setup. Kudos, Chuckles!

                            1. re: Chuckles the Clone
                              DiveFan Oct 2, 2008 12:07 AM

                              HEY, give me a hint about FIREFOX stylesheets. I can't find a decent reference.

                              1. re: DiveFan
                                Chuckles the Clone Oct 2, 2008 10:20 AM

                                Gee, I *thought* I remembered doing this in firefox some time ago, but now when I go looking, I can't figure out how. It looks like the easiest way is to find the "stylish" extension mentioned above and then follow hannaone's instructions for pasting in those blocks of text.

                                In fact, the style info in his post above looks a lot more thorough than what I suggested. Anyone following my suggestion in safari should probably use the stylesheet content he included in one of those messages above.

                                The actual content of stylesheets is a web standard so the same stylesheet content should do the same thing on all browsers; nothing special about firefox, safari, etc.

                                1. re: Chuckles the Clone
                                  hannaone Oct 2, 2008 10:35 AM

                                  There is a way to use "userContent.css" in firefox, but it applies to all pages, and I can't find how to set it as a default in FF3.
                                  The stylish extension is much easier to work with.
                                  And I used what you posted for Safari to experiment with ;-)
                                  I also have the web developer extension which lets me play with the original CSS settings on a local level.

                                2. re: DiveFan
                                  DiveFan Oct 7, 2008 03:45 PM

                                  Thanks to all. I know that CSS is a standard, but the Stylish add-on is a pretty primitive way to learn about and build one at this point.
                                  BTW Chuckles, using your above hints in a Stylish stylesheet worked fine for me also. Firefox indeed may have some stylesheet manipulating capability but it is well hidden.

                                  I just discovered that Opera has some style management built in under 'View -> Style -> Manage Modes' but I haven't explored it yet.

                                  rworange, will you stay now?

                                3. re: Chuckles the Clone
                                  Anonimo Oct 7, 2008 11:14 AM

                                  Thanks, Chuckles; that was a brilliant solution. It's so much more soothing to the eyes.
                                  Surprisingly, it doesn't affect other websites. (So far.)

                                  EDIT: Darn! It didn't keep when the page changed.

                                  1. re: Anonimo
                                    Anonimo Oct 7, 2008 11:26 AM

                                    Ah! because I _moved_ the chow.css file!!

                                4. biscuit Oct 10, 2008 10:29 PM

                                  Asking users to use workarounds to consume a site is outlandish and insulting. Would a restaurant ask its patrons to help cook the meal? Unless it's Shabu Shabu (or likewise), I think not. You took away our options to customize the look and not offered any ability to increase the font size or otherwise adjust our preference. This design is a total and utter failure.

                                  7 Replies
                                  1. re: biscuit
                                    hannaone Oct 10, 2008 11:40 PM

                                    Actually the new design is working pretty well. The design team has made quite a few improvements from the comments/feedback received, and they are working on others.
                                    These workarounds were suggested by site users for those who want to use them, and not by chowhound staff.

                                    1. re: hannaone
                                      Greg B Oct 11, 2008 05:13 AM

                                      What improvements have been implemented? I see nothing different and it is still painful to view.

                                      1. re: Greg B
                                        hannaone Oct 11, 2008 06:55 AM

                                        Darkened text, darker gray background, link colors (some/not all yet) changed to blue, to name a few off the top of my head.
                                        Many of the alignment problems, linking problems etc.
                                        There is still work to be done for sure, but the team IS listening and working on things.

                                        1. re: hannaone
                                          Greg B Oct 11, 2008 03:19 PM

                                          I see neither darker text nor a darker background. Its still like looking at a fluorescent light fixture.

                                          1. re: Greg B
                                            Chris VR Oct 11, 2008 04:41 PM

                                            Since the site was rolled out, the text is darker than it was and they've added a gray bar on either side of the screen which reduces the glare.

                                      2. re: hannaone
                                        biscuit Oct 11, 2008 09:29 AM

                                        I stand by my comments. As a veteran web designer, this site is quite simply garish and unusable. It's a violation of good usability principles to make users use a "workaround" to improve their experience. Who are you kidding?

                                        1. re: biscuit
                                          hannaone Oct 12, 2008 06:37 AM

                                          These are simply suggestions by Users for Users who wish to utilize them.

                                    2. JoanN Oct 11, 2008 03:40 PM

                                      Okay, so we probably shouldn't *have* to. But in the meantime I've used Chuckles the Clone's workaround on both my Mac (Safari) and on my PC (Firefox)

                                      http://chowhound.chow.com/topics/5604...

                                      and it works brilliantly. You can set it up so it affects no other Web sites, you set it up once and it works from then on, and it gives you a soft, mustardy-yellow-beige background that's very easy on the eyes. For those of you still following along, I highly recommend it.

                                      Show Hidden Posts