Beautify Instiki (even more) with custom CSS

You probably already know about Instiki. It’s is a terrific, elegant, beautiful wiki that I personally use for half a dozen of my own projects. I’ll probably run a longer post on Instiki some time in the future, but I can especially recommend the OS X install for Mac users. If you have a server that can handle Ruby 1.8.1, I can equally recommend the regular Ruby install. The app is gorgeous and works swell either way.

One of my favorite things about Instiki is how attractive and simple it is to use (PHPWiki, you’ll always be my first love, but sometimes, you’re just too high-maintenance). Instiki even lets you apply your own custom style sheets without having to change any actual code (Dear Typepad: Please steal this idea. Love, Merlin.). Here’s a quick tip for adding your own styles to your Instiki wiki.

1. Download, install, and configure Instiki for your corner of the web

   • In practice, this is likely to take less than five minutes
   • Mac users only need to install Instiki.app, which brilliantly contains its own Ruby installation and WEBrick server (serves over port 2500 on the out-of-the-box install)

2. Pull up the home page of your wiki

3. Click the Edit Web link from the bottom of the home page

4. Under the Specialize section, click the See styles >> link.

   • This will reveal a textarea field

5. Type or paste in your CSS styles

   • Note that you can View Source on any Instiki page to see which HTML elements you can hook on to

6. When you’re finished adding styles, type in your system password and click Update Web

7. Behold your pretty new look.

Hint: Here, as in most cases, it’s really easier to just refer to an external style sheet, so you can make changes in a text editor (rather than having to diddle around in a textarea and repeatedly save changes). I welcome you to swipe my “hamburger helper” Instiki style sheet to get you started. You’re also welcome to just link to it as is (proviso: may go away some day without warning). To apply it to your wiki:

1. Follow steps 1-4 as above
2. Paste the following into your style textarea:

@import url("http://www.merlinmann.com/43f/instiki.css");

3. Save as in 6 above

Note: There are many many other swell wiki packages out there (I estimate that three new ones have been released since I started writing this). Mac users who want something even simpler should definitely look at VoodooPad, which brings a fairly robust, very intuitive wiki to a desktop Mac app. Fave feature? Export all your pages to your iPod. Neato!