swimmindustries asked:
Really like the new look. I am just starting to move my site to Tumblr and wondering how you handle theme building. It's such a pain. I've messed around with TumblrThemr, but that has its own set of issues. If you have a non SUPER PAINFUL way to customize I'd love to hear it.
I actually find the theming system at Tumblr to be pretty decent. There are quirks, but once you get used to them, it’s pretty easy to get into a good workflow for creating a new theme. I tend to work at this sort of backward. I design the theme and HTML with real test content and then replace that with template tags when I’m ready to go live. Here’s my general path:
- Back up current theme HTML, CSS, images, as well as run a full Tumblr Backup (obviously, if this is your first theme/blog, this isn’t as important)
- Visit your site and grab the existing, rendered HTML. You’ll use this both as a reference of how Tumblr renders theme tags, but also to pull test content into your developing theme.
- Start with your new template by creating a new HTML page locally, using the content from your current, working Tumblr theme. I use TextMate and CSSEdit for local theme development, since CSSEdit has a great preview mode that allows you to work on CSS live and see the changes immediately. By the time you’re done, you should have a working version of the theme (albeit only one page of it) with solid HTML and CSS using the test content.
- Now you want to port this over to an actual theme by replacing the test content with Tumblr tags. This sounds difficult but it’s actually the easiest part. Use the theme guide as a reference.
- Make it live. You’re bound to run into little CSS issues and template issues, so this part is a little frustrating. It would be awesome if Tumblr had a way to test themes non-publicly, but they currently don’t. So make your new theme live and then just fix issues as you see them. Little tip: Make your CSS filenames unique each time you update them so users don’t continue to use cached versions—I use datestamps for mine (example: styles_091611_01.css).
After doing it once or twice, you’ll get the hang of it. Good luck!