About a year ago reconstructed my note-taking process on my MacBook Pro and iPhone. After listening to Merlin Mann talk about the original Notational Velocity on MacBreak Weekly episode 178. So I decided to give it a try.
At the time I used Evernote for my notes. The problem with Evernote was that if I wanted to edit a note on my iPhone, the iOS version just appended the file. I never liked that. It messed up my notes. The cool thing about Notational Velocity is that it’s all about .txt files. The power of simplicity!
Long story short, I downloaded the original Notational Velocity application on my Mac, created a folder in my dropbox and signed up for Simplenote.
Then came the big revolution with Notational Velocity with a Markdown hack.
My setup today.
I have disabled syncing with simple note. Now I only use Dropbox for syncing my devices. I have also moved from Notational Velocity with markdown to Notational Velocity Alt. The reason being the landscape layout and custom CSS support in NV Alt.
- Macbook Pro
- Notational Velocity Alt
- Custom CSS file
- Syncing through a folder in my Dropbox.
- iPhone
- iPad
My Custom CSS file for NV Alt
I thought that I would share my CSS file for NV Alt.
After the first time you run the Preview window, look in
~/Library/Application Support/Notational Velocityand you’ll find two files:template.htmlandcustom.css. If you’re handy with HTML and CSS, feel free to customize these in whatever way you like. You can add Javascript as well, but you’ll need to load external scripts from a url or using a full file:// path. If worst comes to worst, you can just delete or rename your customizations and the default files will be put back in place automatically.
body,p,td,div { font-family:Helvetica,Arial,sans-serif;line-height:1.4em;font-size:12px; }
p { margin:0 0 1.7em 0; }
a { color:rgb(13,110,161);text-decoration:none;-webkit-transition:color .2s ease-in-out; }
a:hover { color:#3593d9; }
h1.doctitle { background:#eee;font-size:14px;font-weight:bold;color:#333;line-height:25px;margin:0;padding:0 10px;border-bottom:solid 1px #aaa; }
h1 { font-size:24px;color:#000;margin:12px 0 15px 0; }
h2 { font-size:18px;width:auto;margin:15px 0 10px 2px; }
h2 em { line-height:1.6em;font-size:12px;color:#111;text-shadow:0 1px 0 #FFF;padding-left:10px; }
h3 { font-size:14px; }
h4 { font-size:12px;margin-bottom:1.3em; }
.footnote { font-size:.8em;vertical-align:super;color:rgb(13,110,161); }
#wrapper { background:#fff;position:fixed;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:inset 0px 0px 4px #8F8D87; }
#contentdiv { position:fixed;top:27px;left:5px;right:5px;bottom:5px;background:transparent;color:black;overflow:auto;text-indent:0px;padding:10px; }
#contentdiv::-webkit-scrollbar { width:6px; }
#contentdiv::-webkit-scrollbar:horizontal { height:6px;display:none; }
#contentdiv::-webkit-scrollbar-track { background:transparent;-webkit-border-radius:0;right:10px; }
#contentdiv::-webkit-scrollbar-track:disabled { display:none; }
#contentdiv::-webkit-scrollbar-thumb { border-width:0;min-height:20px;background:#777;opacity:0.4;-webkit-border-radius:5px; }
Boom!

I have been using Textexpander on my mac for over 2 years. Textexpander enables you to write custom snippets of text that gets inserted every time you type the abbreviation that’s linked to the snippet. Sounds complicated? It’s not..