Tumblr is home to over 140 million blogs, making it one of the most successful blogging platforms around. Having recently been acquired by Yahoo! it's now firmly set to be one to watch in 2014, and that's great news for Tumblr theme developers!
In this screencast tutorial series we're going to walk through the complete process of developing a responsive Tumblr theme, called "Peter". We'll dive into the code structure, theming options and I'll throw in lots of tips I've gathered as a Tumblr theme developer along the way. Source files will be made available as they're needed, so, if you're ready, let's begin!
Useful Links
- Tumblr Base on GitHub
- Full theme "Peter" Source on GitHub
- Theme "Peter" Preview
Posts in this series
Tumblr Theming 101: Introduction
The Code Behind a Tumblr Theme
Tumblr Theme Operators and Variables
A First Look at Tumblr Theme Blocks
Creating a Tumblr Theme Base
Adding a Tumblr Theme Sidebar
Starting Our Tumblr Theme's Post Markup
Introducing Markup for Tumblr's Photo Post Type
Tumblr's Quote and Chat Post Types
Tumblr's Audio and Video Post Types
Tumblr Link Post Types and Pagination
Creating the Tumblr Post Footer and Notes
Styling Our Tumblr Theme
Quick Tip: How to Disable Tumblr's Default Mobile Theme
Continuing With Our Tumblr Theme's CSS
Completing the Tumblr Post Type CSS
Adding Localization to Tumblr Themes
Adding Media Queries to Our Tumblr Theme
Reviewing and Merging Our Tumblr Theme's HTML and CSS
Tumblr Theme Customization With Appearance Options
Tumblr Appearance Options: Color
Tumblr Appearance Options: Images
Tumblr Appearance Options: Boolean Options
Tumblr Appearance Options: Select Elements
Tumblr Appearance Options: Text
Understanding Tumblr Variable Transformations
Adding a Twitter Timeline to a Tumblr Theme
Improving Our Tumblr Theme Navigation and Post Notes
Introducing the Tumblr Static File Uploader and Theme Garden
Easier Tumblr Color Options With LESS