Brian Bailey recently posted about how he adds some CSS to Backpack pages in order to customize them. "Simply add a small amount of CSS to the page in the form of a note and you can change the formatting to meet your needs," he writes. Details below.
If you use Backpack, the organizing web tool and intranet from 37signals, you may sometimes wish you could modify the text on a page to fit a little more information on it. I have a page where I collect code snippets and terminal commands and the default font seems a bit large with so much content. Turns out there's an easy solution to this: simply add a small amount of CSS to the page in the form of a note and you can change the formatting to meet your needs.
I've known this was possible for a long time, but finally took the time to figure it out the other day. After a few experiments, I came up with a solution that works great for me. Those of you with actual CSS skills may find much to laugh at with this example - feel free to post improvements. Plus, there is much more that can be done once someone with design skills starts playing with it.
To do this yourself, just create a new note on a page with what you see above (I like to put the note at the bottom). As soon as you save it, refresh the page to see the changes. Feel free to experiment with the font sizes (just change 14px and 12px) and the title colors (color:brown).
Here are two examples, with the standard version first. Check out these ideas if you'd like to explore further. Enjoy!
#1: Before.
#1: After.
#2: Before.
#2: After.
Do you have a neat trick re: a 37signals product? Let us know.
