Paul Mischler (misch) wrote,
Paul Mischler

Cooks Illustrated recently launched a new website.

Although it's true that they made the site a little bit more aesthetically pleasing, they made a number of changes to the site that didn't look so good.

Being the geek that I am, I looked into the code of the page and saw some ways that they could improve their page design.  I e-mailed them (well, at least I think I e-mailed them, I can't find the e-mail I sent) a few weeks ago with my suggestions for the page:

1. Set the "print" version of the page to have the recipe title in bold text.  The old site had bold text, and when you print something out and stick it in your binder, it's far easier to find it the next time.

2. Get rid of the ridiculous spacing between the letters in the title.  (Seriously, 1.85px of spacing?)

3. Bigger title font size. (15.5 px?)

4. (And this one is a technical flaw) the recipe instructions text is already numbered.  On the page, they've enclosed the list of instructions in an <ol> (ordered list) tag.  The text of the instructions already has the number present.  When printed out, the instructions look like this:
  1. 1. Do A
  2. 2. Do B
  3. 3. Do C
Of course, their normal CSS sets the ol to list-style-type: none;, which suppresses the numbering of the list.  The printing CSS doesn't have the restriction.

Not surprisingly (since it looks like I never sent the e-mail), my suggestions weren't incorporated.

What's a geek to do?!?!

With Firefox, the answer is simple: userContent.css.

Firefox allows you to specify custom CSS code and apply it to all sites, all sites across a domain, or web pages with a specific URL.

The userContent.css file is located in your Firefox profile's chrome directory.  In this text file, you can place direct snippets of CSS code.

Example: Disable all blink text

blink { text-decoration: none ! important; }

Change CSS for a particular domain:

@-moz-document domain( {
  font-size: 14px !important;

and for a particular page (or set of pages):
@-moz-document url-prefix( {
 h1 {
     font-weight: bold ! important;
     color: #000000 ! important;
     letter-spacing: normal ! important;
     font-size: 24px ! important;

 ol {
    list-style-type: none ! important;

  • Why I won't be buying Vizio ever again (Follow-up)

    So, you remember that Vizio Blu-Ray player I bought that I had so much trouble with, and the almost complete lack of information they gave me? The…

  • (no subject)

    via the EFF: I just emailed Congress to urge them to oppose the Internet Blacklist Legislation, known as the PROTECT-IP Act in the Senate S.968…

  • (no subject)

    Things that amuse me today: Marian Call has a new album coming out on 10/1 titled Something Fierce This Way Comes. Milwaukee Brewers mark the…

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded