Introducing LibaryThing Zen Garden!

Have you heard of CSS Zen Garden? It’s a legendary website (and popular book) devoted to showing the “power of CSS.” Every page, from the home page to the the military “Zen Army” to the charming old-fashioned movie theater stage set, has the same content, but has been “styled” differently with CSS. For many web developers, the first time they saw CSS Zen Garden was like an effective Zen koan—instant enlightment!

Best of all, most of the designs were submitted by regular web developers, not the site’s developers.

Well, why not let LibraryThing members change the site? Members have been agitating for a design redo for some time now. We’ve posted files for people to play with. Well, why not let them play with the site in real-time? We have been fooling with some designs too. Why not show them off?

Well, step on over to the LibraryThing Zen Garden. You can:

• Sample different styles.
• Set your preferred style and browse around the site with it.
• Create your own styles. Every design you make is available for others to look at.

As a demo, I set five styles under my name:

• timspalding-1. This is a design Abby, Sonya and I played with one afternoon. Set this to your style and browse around. The subnav on the profile page is different. You’ll also notice the tabs are slightly curved on some browsers.
• timspalding-2. LibraryThing member existanai sent a few dozen alternate logos. Here’s one. Note the CSS to hide the normal image and use a background image.
• timspalding-3. Another existanai logo.
• timspalding-4. Don’t like the logo—kill it!
• timspalding-5. Screwing things up is funny! But I’ve done it, so it’s not funny anymore. Bonus points for having a browser that displays the BLINK tag.*

Show us what you can do? We want comments on the designs we create, but we really want to see what members want. You don’t need to make a complete design. If you can change a few characters, you can show us a new background color.

I’ve decided not to award any prizes or hold any votes. Design is a very personal thing, and I don’t want anyone feeling left out. All ideas are good, even if they only demonstrate the terribleness of a particular style. Needless to say, if we end up using ideas from your design, we’ll shower you with praise and free memberships.

I’ve made a group for people to talk about designs, swap bits of CSS and so forth. It’s called Redesign LibraryThing.

Incidentally, has anyone ever heard of a site doing this?

Some weeds:

• I am not a CSS true believer. I use tables for positioning more than I ought. I use <b> when I should use <em>. I torture kittens for fun. Chris is better, but not without sin. This limits what you can do somewhat.
• Ones with changed logos will not work in IE6. This is about PNG24 transparency, if that means anything to you.
• The easiest way to work on a design is to modify one of ours. timspalding-1 has comments in it.
• The CSS you write is added onto our—very complex—CSS. (The main files are this and this, but we wish it were always so simple.) Something like Firebug will come in handy when editing
• Your default style will not carry throughout the site. Some pages, like catalog, require special tweaks. Other pages just don’t have the code that adds custom CSS.

---

*Update: Incidentally, I also anticipated that someone would replace the logo with that of a competitor. Ha ha. 🙂

Labels: new feature, new features, openness