Remember The Milk Filofax pages


After experimenting with Remember The Milk a bit recently, I’ve set out on my annual quest to be a bit more organised with renewed optimism… and a little project to put off doing anything on the to-do list! I’m still not ready to go paperless, so I wanted a way to print out the Remember The Milk lists. To start with I had great intentions for not procrastinating, so attempted to just buy the Filofax Print to File software. I still think Filofax are insane charging for software that would encourage me to buy more of their computer paper: I’ve had an unopened pack for ages. Sadly the Filofax UK site is broken so I tried the US site instead, which is when I discovered just how insane they really are. To start with, you can’t use the same ID on both sites, and when I tried to register again they insisted on a US shipping address… erm… for a download?

Oh well, time for a quick and dirty, and free, alternative. Quite pleased that I’ve resisted investing more time in a ‘proper’ tool to print this kind of thing (I really like PocketMod but I just end up with more disorganised with bits of paper all over the place) – saving the Remember The Milk list and a bit of HTML to lay things out, and for some blank to-do pages, was good enough. I also rediscovered a handy hole punch for completely DIY Filofax pages:

I didn’t get the layout to work with a single page, so I just cheated and used a front page:

<html>
<head>
<title>Filofax Personal (front)</title>
<link rel="stylesheet" href="filofax.css">
</head>
<body>
<div class="print-page" id="front">
<div class="filofax-page">
<!-- Page 1 content -->
</div>
<div class="filofax-page">
<!-- Page 3 content -->
</div>
<div class="filofax-page">
<!-- Page 5 content -->
</div>
</div>
</body>
</html>

…and a back page instead:

<html>
<head>
<title>Filofax Personal (back)</title>
<link rel="stylesheet" href="filofax.css">
</head>
<body>
<div class="print-page" id="back">
<div class="filofax-page">
<!-- Page 6 content -->
</div>
<div class="filofax-page">
<!-- Page 4 content -->
</div>
<div class="filofax-page">
<!-- Page 2 content -->
</div>
</div>
</body>
</html>

With a short style sheet for both.

body, html {
border: 0mm;
margin: 0mm;
padding: 0mm;
}
.print-page {
width: 297mm;
height: 210mm;
padding-top: 39mm;
padding-bottom: 0mm;
margin: 0mm;
}
#front {
padding-left: 12mm;
padding-right: 0mm;
}
#back {
padding-left: 0mm;
padding-right: 12mm;
}
.filofax-page {
float: left;
height: 171mm;
width: 85mm;
margin: 0mm;
padding-top: 0mm;
padding-bottom: 0mm;
}
#front .filofax-page {
padding-left: 10mm;
padding-right: 0mm;
}
#back .filofax-page {
padding-left: 0mm;
padding-right: 10mm;
}
.content {
height: 171mm;
width: 85mm;
}

So much for not procrastinating; I think this blog post took me longer than the printing! (The HTML source kept getting mangled by WordPress, hence the place holder comments for missing object tags where the Filofax page content should go!) I’ll book that dentist appointment and get on with the rest of the to-do list tomorrow…

Advertisement