NASA Picture of the Day CSS Design Challenge

A website I check on a regular basis is the NASA’s Astronomy Picture of the Day, a superb site if you’re interested in the Cosmos; it publishes a new picture each day with an explanation written by a professional astronomer. Amazing stuff… apart from the design is… just horrible! If you want an example of what the web looked like back in the mid nineties, then take a look.

Now I doubt restyling the website is high up on NASA’s priority list, but there’s no reason a user can’t do it for them (only on their own machine of-course). All you need is Firefox and a custom CSS file.

The CSS file you will need is called userContent.css, and it resides in your Firefox profile under the ‘chrome’ directory. To find your profile directory look under ‘Help’ > ‘Troubleshooting information…’, there you will see a button to open the profile directory (Note: I wouldn’t change much in here, it can break your profile!). If you still can’t find it you can always look here. You may not have a userContent.css by default, so feel free to create a blank one.

This is when the fun starts, first you want to add this code snippet:

1
2
3

@-moz-document domain(antwrp.gsfc.nasa.gov) {
    /* Page specific CSS here */
}

This is a Mozilla specific property that will allow you to include CSS for pages on a specific domain; note the ‘antwrp.gsfc.nasa.gov’. Feel free to add as little or as much CSS as you want until you are happy with the page layout. Here’s a sample from the userContent.css file I created:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@-moz-document domain(antwrp.gsfc.nasa.gov) {
    /* authors and editors */
    body > hr ~ center:nth-child(5) {font-size: 0.69em;}
    /* all b's */
    body > hr ~ center:nth-child(5) b {
        margin: 8px 0 0;
        font-size: 1em;
        line-height: 1.4;
        }
    /* first b */
    body > hr ~ center:nth-child(5) b:nth-child(1) {margin: 32px 0 0;}
    /* all a's */
    body > hr ~ center:nth-child(5) a {font-size: 1em;}
}

To make the page look in any way presentable I’ve had to rely heavily on the new CSS3 selectors available in most modern browsers; as the state of the mark-up on the pages is truly awful. I guess it all adds to the challenge though, it’s certainly a great way to learn CSS3.

Here are a couple of before and after images I created, nothing spectacular but hopefully it looks slightly better:

The ‘index’ page was a page to far for me, I have no idea what the developer was trying to do with the mark-up, it’s overuse of tables for layout really doesn’t help either. On the end I got bored but feel free to dive in and take a look.

It’s also worth mentioning that it is possible to customise the style of any website using a Firefox plug-in called Stylish, you can view many examples of it’s usage on userstyles.org.

NOTE: Download no longer available.