HOME > Chowhound > Site Talk >

Discussion

Workarounds To Darken the White Background

  • 41
  • Share

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
Posting Guidelines | FAQs | Feedback
Cancel
  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.

                        1. 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

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

                            1. re: Chuckles the Clone

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

                              1. re: DiveFan

                                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

                                  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

                                  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

                                  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

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

                                4. 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

                                    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

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

                                      1. re: Greg B

                                        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

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

                                          1. re: Greg B

                                            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

                                        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

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

                                    2. 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.