Build a custom tumblr theme

Let's Get Started

Set Up Your Tumblr Account
Go to the Tumblr website and sign up for an account (or create a new blog if you already have an account)
Search for Inspiration
Take a look at the Tumblr Theme Garden and find some themes or elements you like. Don't forget to check out the Premium Themes—sometimes they have amazing features/designs.
Document Your Inspiration
Browse the web—if you find things you like, take screenshots! Documenting where you got your ideas is an important part of the process and we'll use these later when we start creating our own layouts.

Start your project and upload your inspiration there!

Planning Your Theme

Post Type Sketches / Wireframes
1. Familiarlize yourself with the different Tumblr post types (note: you can't submit your theme to Tumblr without all the post type styles).
2. Decide if your theme will be heavy with certain post types (e.g. photos or text)
3. Sketch post layouts for each of the post types.
4. Sketch out different combinations of post types in order to get an idea of what you're theme will look like overall.
5. Share your progress in your project section to get feedback from other students
Post Type Sketches / Wireframes
* Text * Photo * Panorama * Photoset * Quote Posts * Link Posts * Chat Posts * Audio * Video * Answer Posts

Coding Your Theme: HTML

Write it out
Write it out

If your sketches and wireframes are in the right state, this should be pretty easy. We'll just use write out the basic HTML structure so we have a good base. I'd encourage you to write this on paper in a simple format so you can easily type it into the layout editor.

Writing out code is easy, use the format tag.class to write your structure in a simple format.

Here's an example of the theme I'm building:

header
h1.title
nav.main
ul>li>a [for all links]
section.main
article.post_type.tags
h2.title
{post content}
div.caption
div.date
div.tags
div.content_source
div.note_count
div.share
div.post_notes
footer
div.pagination
Structure: HTML
Structure

Once you've written out the structure, you can transfer it into the tumblr editor. With our base layout in place, you can add your structural code between the tags.

We'll add visual styles in the next Unit, so this will be the structure of our layout. It's not going to look pretty but it gives us a great foundation for moving into the visual layer of CSS.

When you're finished, take a screenshot of your theme's structure. It won't be pretty (yet) but it gives us a great foundation to build on.

See my theme code (so far) on Github.

Coding Your Theme: CSS

Layout Styles
Add CSS styles to make your theme's layout work. Don't worry about the post styles right now.

If your theme is one-column, code those styles, if you have a sidebar with more information, make sure the bulk of the layout works before we dive into the different post types.
Post Types: Shared Styles
Add in the post type's shared visual styles. These elements most likely include things like the title, date, link styles, quote elements, etc.

[Advanced] Coding Your Theme: Javascript

Add in our responsive web design plugins
We'll want to add our menu icon functionality as well as some responsive web design plugins. You can find those in the additional resources section.
Document Your Theme
Take a screenshot of your theme and add it into your project. Start sharing great content and you're on your way! Make sure you post a link to your project's live tumblr so we can play around with it, too.

Additional Resources

George Garrastegui Jr.

77