"Hacking" Basecamp: Useful markup tricks

Project badges, quicklinks and notes

The Overview section of a project is usually the first page you’d visit when visiting a project. Of all the uses for the “announcement” field a project manager can fill in the Project Settings page, I best like the status banner:

p{margin:-20px -28px 0pt -23px;padding:5px 10px;background:#FF8;color:black;}. *Project status:* Testing

Of course, other useful direct information could be served, like the link to the test server with test username and password.

To-Do links and labels

Ever wanted to paste a link into a To-Do item? Ever bloated your Basecamp layout by doing that? Well, unfortunatelly Basecamp doesn’t support textile with it’s To-Do lists… (It works almost everywhere else, though…) What does work, is vanilla HTML: just do <a href="#...">Short Link Label</a> and you’re good to go.

Except for just links I also like labels here and there, where appropriate. I use <span style="background:#069;color:white;padding:2px 3px;">Label</span>. Colors vary by label type. Sure, you need to write HTML and CSS, but whatever does the trick, right?

Writeboard sections

The common tricks I use with writeboards are the black heading separator:

h1{background-color:#000;color:#fff;margin:0 -62px 0 -20px;padding:.3em}. Phase 1

h2{background-color:#dadada;padding:.3em;margin:1em -62px 1em -20px;}. Overview

...and the section highlighter:

<div style="background:#FFFABC;padding:5px 62px 5px 20px;margin:0 -62px 0 -20px">
</div>

In writeboards I also usually like to remove margins from my h2s.

---

These are all cheap but sometimes useful tricks. In a next article about Basecamp Hacks I will show you how to print branded Writeboards.