Backpack Hacks

Posted on 09.27.05. Tagged with , , , All

Backpack LogoAh yes, 37signal's Backpack is an amazing, simple tool for even those who don't know html. I've compiled a list of tips and tricks to help you get more out of Backpack.

Example Uses

CSS Customization

I like to customize the appearance with the following (click edit body and paste on your backpack page:

table {border: 1px solid #aaa;}
#notes a {text-decoration:none;}
#notes a {padding: 2px;}
#notes a:hover {background:blue;color:#fff;}
#notes .date {display:none;}

This will make tables stand out better, hide link underlines (in notes), make link background change on hover (in notes), and hide the date notes are posted (because i dont ever use that).
Important: Don't include #notes .date {display:none;} if you don't title every note because then you can't edit/delete them.
See More: CSS Customization for Firefox
and Styling List Items.

Formatting, Symbols & Colors

The great thing about Backpack is that even my girlfriend can edit and make good looking pages. This is primarily due to the face that it uses Textile for formatting. See the Textile Reference for a complete listing.

A few most useful Textile references:

Create a link:
Use: "Taylor McKnight":
To get: Taylor McKnight

To change text color:
Use: %{color:blue}Pretty Blue Text%
To Get: Pretty Blue Text
Complete listing of possible color names

Use &rarr;
To get: →
(Which is good for setting apart important items. Also check out a listing of other HTML Entities that you can use.)

Tables: Easily create tables with nothing more than |'s check out the how-to.

Integrating Images

Adding images into your notes and lists is a great way to visually set apart things and find what you are looking for.

For Lists
You can use Item Label Images

For Notes
As seen on my Europe Travel Page, I used images to set apart whether it was a flight, hotel, or train.


To use these simply copy/paste the following as the first line of your note (feel free to hotlink):
<img src="" align="right" />
<img src="" align="right" />
<img src="" align="right" />


As seen on my Europe Travel Page I have the top Itinerary linked to specific sections down on the page.

The Link:
"Reference to a note":#myNoteId

The Link Destination (Put this in the title of a note):
<a id="myNoteId" />

(To link to other internal Backpack pages simply click the "Links" button on the top menu)

Going Mobile

You can hook Backpack into your daily life by teaming it with your cellphone. Even access your backpack page on your mobile just by adding /mob on the end of your url (i.e.

You can add content via email (like quick notes/links/reminders) and come back to them when you are at a computer. With the recently added Recurring Reminders you'll never forget to pick up Timmy from soccer practice again.

You can also set up Backpack (on the settings link on the top right of your page) to send you reminders. I suggest setting up a seperate page called "Clipboard" or "Mobile Notes" and only send content to that page so it's easy to filter through when you get home.

Alternate way to send reminders to your cell with Teleflip:

Other Tips 'n Tricks

Credit for hacks go to the Backpack Weblog, the brilliant folk in the Backpack Forums, and my own meandering experience.


Perhaps another backpack for search optimization is the need of the hour. With link popularity on the rise, the concepts of email advertising are on the decline. There are many elements checked besides the web design for ranking higher. Companies with wireless services as bluehost can do wonders. Get enrolled for the 640-863 test drive.


Order all of your school supplies for this year online. Save your self the hassle of lines and crowds when you order backpacks, clothes and books on the internet. You can even order school uniforms for children who attend private school.


01:42 PM on 09.27.05

I've never tried that backpack thing.. i'll have to check it out one of these days.

also, on a seperate note, i check your blog through RSS and your blog description hasn't changed.. it's still "The ongoing chronicle of a college student going through dorm life and dumb professors, looking to escape someday." Just thought you might want to update that :-)

05:03 PM on 09.28.05

As many of you know Backpack is a great productivity tool. What you might not know is that it can be hacked to do all sorts of neat things. My pal, and all around creative thinking dude, Taylor McKnight,... Read more in Hacking Backpack »

09:12 PM on 09.28.05

I just tried your CSS Customization (click edit body and paste the CSS you provided on my backpack page) and it totally erased everything I had on that page. Now I can't even "edit" the body field to remove your code. What now??

09:30 PM on 09.28.05
The Author

Wow. That last <style> should be </style>

It's been corrected above. Can you hit back a few times on your browser and try editing the body again?

Worse case scenario, your data is *not* gone. You can view source it will all be there. If you need help, you can view source, copy/paste it in a text document, and email it to me and i can clean it up for you (if you are not familiar with html). I apologize for the hassle and error.

09:34 PM on 09.28.05

Yeah, the back button doesn't work with AJAX ;) I can view source and get the list items, but all the Javascript and excess HTML makes for a job.

10:11 PM on 09.28.05

Oh, and I can't delete that page now. Ugh.

10:49 PM on 09.28.05
The Author

You can try appending /destroy or /transfer onto the url and it might take you to a delete page?

Phil Ulrich
10:06 AM on 09.29.05

This is fantastic. I've been using Backpack for a couple months now (ever since I got a job where I actually need to keep track of, well, anything, and my usage has sort of blossomed from there) and these tips and tricks are great!

Interestingly, I was *just* at your website about ten minutes prior to reading the article in the Backpack weblog that linked to here, getting buttons from the Steal These Buttons thingy. Cue "It's a Small Blogosphere, After All."

Brian P
05:00 PM on 09.29.05

Here's a way to get a calendar on Backpack:

05:43 PM on 09.29.05

Hi, these are some great tips. I especially liked the linking tips as I have been wishing backpack had such a feature for a while; using internal anchors is a great idea.

To improve on the idea, I'd like to suggest using only <a id="myNoteId"/> in front of your note's title is sufficient since backpack is a XHTML page. In addition, linking to that can be simplified by using the default backpack linking shortcut, so all you need to do to link is type "Reference to a note":#myNoteId

05:15 PM on 10.01.05
The Author

That's a great improvement Paul, I've changed the above to reflect that. Thanks

12:01 AM on 10.02.05

"Thanks George!"


12:39 PM on 10.04.05

CSS Customization is cool, but if you remove the time stamp from NOTES, then any note without a title can no longer be deleted or edited...


12:59 PM on 10.04.05
The Author

Hmm good point. I title all of my notes so I hadn't noticed... i'll add a note about the notes in my notes above.

09:07 PM on 10.04.05

Noted. does beg the observation: too bad we can have notes with no title bar (as you customized) and still be able to delete and edit. The widgets simply need be moved down to the level of the note body itself.

01:46 PM on 10.24.05

Nice nice. A lot of useful here. good work
Thanks for all.

11:10 AM on 04.29.06

Just a suggestion after reading these comments. It's very easy to stuff up the page by forgetting one simple character - maybe you could recommend people who are not 100% confident about trying these tips to have a "trial page" to play around with until they get it all right, might save some data loss. These tips are great though. I can't wait to try a few of them out!

04:56 PM on 12.09.06

Better late than never, nice article.

Thanks for signing in, . Now you can comment. (sign out)

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Remember me?

Your email address will not be made public. Be courteous and try not to hurt my feelings.