Creating a custom HTML theme
Tumblr lets you fully customize the appearance of your tumblelog by editing your theme's HTML code. This is only recommended for users comfortable hand-coding HTML.
To start, click the "Customize" button on your Dashboard. Click the "Theme" tab, and click "Use custom HTML". This will bring up a text box with your current theme's HTML code.
Tumblr has two types of special operators used to render content in your HTML.
Variables are used to insert dynamic data like your tumblelog's title or description:
<html>
<head>
<title>{Title}</title>
</head>
<body>
...
</body>
</html>
Blocks are either used to render a block of HTML for a set of data (like your posts), or to conditionally render a block of HTML (like a "Previous Page" link):
<html>
<body>
<ol id="posts">
{block:Posts}
<li> ... </li>
{/block:Posts}
</ol>
</body>
</html>
Here's an example of the complete markup for a theme:
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="/rss">
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<ol id="posts">
{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class="post link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class="post chat">
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{/block:Posts}
</ol>
<p id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
<a href="/archive">Archive</a>
</p>
</body>
</html>
Theme Variables
| {Title} |
The HTML-safe title of your tumblelog. |
| {Description} |
The description of your tumblelog. (may include HTML) |
| {RSS} |
RSS feed URL for your tumblelog. |
| {Favicon} |
Favicon URL for your tumblelog. |
| {CustomCSS} |
Any custom CSS code added on your "Customize Theme" screen. |
| {block:PermalinkPage} {/block:PermalinkPage} |
Rendered on permalink pages. (Useful for embedding comment widgets) |
| {block:IndexPage}
{/block:IndexPage} |
Rendered on index (post) pages. |
{block:PostTitle}
{PostTitle}
{/block:PostTitle} |
Rendered on permalink pages. (Useful for displaying the current post's title in the page title)
Example: <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
|
{block:PostSummary}
{PostSummary}
{/block:PostSummary} |
Identical to {PostTitle}, but will automatically generate a summary if a title doesn't exist.
|
| {PortraitURL-16} |
Portrait photo URL for your tumblelog. 16-pixels by 16-pixels. |
| {PortraitURL-24} |
Portrait photo URL for your tumblelog. 24-pixels by 24-pixels. |
| {PortraitURL-30} |
Portrait photo URL for your tumblelog. 30-pixels by 30-pixels. |
| {PortraitURL-40} |
Portrait photo URL for your tumblelog. 40-pixels by 40-pixels. |
| {PortraitURL-48} |
Portrait photo URL for your tumblelog. 48-pixels by 48-pixels. |
| {PortraitURL-64} |
Portrait photo URL for your tumblelog. 64-pixels by 64-pixels. |
| {PortraitURL-96} |
Portrait photo URL for your tumblelog. 96-pixels by 96-pixels. |
| {PortraitURL-128} |
Portrait photo URL for your tumblelog. 128-pixels by 128-pixels. |
Navigation
| {block:Pagination} {/block:Pagination} |
Rendered if there is a "previous" or "next" page. |
| {block:PreviousPage} {/block:PreviousPage} |
Rendered if there is a "previous" page (newer posts) to navigate to. |
| {block:NextPage} {/block:NextPage} |
Rendered if there is a "next" page (older posts) to navigate to. |
| {PreviousPage} |
URL for the "previous" page (newer posts). |
| {NextPage} |
URL for the "next" page (older posts). |
| {CurrentPage} |
Current page number. |
| {TotalPages} |
Total page count. |
Permalink Navigation
| {block:PermalinkPagination} {/block:PermalinkPagination} |
Rendered if there is a "previous" or "next" post. |
| {block:PreviousPost} {/block:PreviousPost} |
Rendered if there is a "previous" post to navigate to. |
| {block:NextPost} {/block:NextPost} |
Rendered if there is a "next" post to navigate to. |
| {PreviousPost} |
URL for the "previous" (newer) post. |
| {NextPost} |
URL for the "next" (older) post. |
Posts
| {block:Posts} {/block:Posts} |
This block gets rendered for each post in reverse chronological
order. The number of posts that appear per-page can be
configured on your "Settings" page.
|
| {block:Text} {/block:Text} |
Rendered for Text posts. |
| {block:Photo} {/block:Photo} |
Rendered for Photo posts. |
| {block:Quote} {/block:Quote} |
Rendered for Quote posts. |
| {block:Link} {/block:Link} |
Rendered for Link posts. |
| {block:Chat} {/block:Chat} |
Rendered for Conversation posts. |
| {block:Audio} {/block:Audio} |
Rendered for Audio posts. |
| {block:Video} {/block:Video} |
Rendered for Video posts. |
| {Permalink} |
The permalink for a post. (Example: "http://sample.tumblr.com/post/123") |
| {PostID} |
The numeric ID for a post. (Example: 1234567) |
| {TagsAsClasses} |
An HTML class-attribute friendly list of the post's tags. (Example: "humor office new_york_city")
By default, an HTML friendly version of the source domain of imported posts will be included. (Example: "twitter_com", "digg_com", etc.) This may not behave as expected with feeds like Del.icio.us that send their content URLs as their permalinks.
The class-attribute "reblog" will be included automatically if the post was reblogged from another post.
|
| {block:Post[1-15]} {/block:Post[1-15]} |
Rendered for the post at the specified offset. This makes it possible to insert an advertisement or design element in the middle of your posts.
Example: {block:Post5}I'm the fifth post!{/block:Post5} will only be rendered on the fifth post being displayed.
|
ReBlogs
| {block:RebloggedFrom} {/block:RebloggedFrom} |
Rendered if a post was reblogged from another post. |
| {ReblogParentName} |
The username of the tumblelog this post was reblogged from. |
| {ReblogParentTitle} |
The title of the tumblelog this post was reblogged from. |
| {ReblogParentURL} |
The URL for the tumblelog this post was reblogged from. |
| {ReblogParentPortraitURL-16} |
Portrait photo URL for the tumblelog this post was reblogged from. 16-pixels by 16-pixels. |
| {ReblogParentPortraitURL-24} |
Portrait photo URL for the tumblelog this post was reblogged from. 24-pixels by 24-pixels. |
| {ReblogParentPortraitURL-30} |
Portrait photo URL for the tumblelog this post was reblogged from. 30-pixels by 30-pixels. |
| {ReblogParentPortraitURL-40} |
Portrait photo URL for the tumblelog this post was reblogged from. 40-pixels by 40-pixels. |
| {ReblogParentPortraitURL-48} |
Portrait photo URL for the tumblelog this post was reblogged from. 48-pixels by 48-pixels. |
| {ReblogParentPortraitURL-64} |
Portrait photo URL for the tumblelog this post was reblogged from. 64-pixels by 64-pixels. |
| {ReblogParentPortraitURL-96} |
Portrait photo URL for the tumblelog this post was reblogged from. 96-pixels by 96-pixels. |
| {ReblogParentPortraitURL-128} |
Portrait photo URL for the tumblelog this post was reblogged from. 128-pixels by 128-pixels. |
| {ReblogRootName} |
The username of the tumblelog this post was created by. |
| {ReblogRootTitle} |
The title of the tumblelog this post was created by. |
| {ReblogRootURL} |
The URL for the tumblelog this post was created by. |
| {ReblogRootPortraitURL-16} |
Portrait photo URL for the tumblelog this post was created by. 16-pixels by 16-pixels. |
| {ReblogRootPortraitURL-24} |
Portrait photo URL for the tumblelog this post was created by. 24-pixels by 24-pixels. |
| {ReblogRootPortraitURL-30} |
Portrait photo URL for the tumblelog this post was created by. 30-pixels by 30-pixels. |
| {ReblogRootPortraitURL-40} |
Portrait photo URL for the tumblelog this post was created by. 40-pixels by 40-pixels. |
| {ReblogRootPortraitURL-48} |
Portrait photo URL for the tumblelog this post was created by. 48-pixels by 48-pixels. |
| {ReblogRootPortraitURL-64} |
Portrait photo URL for the tumblelog this post was created by. 64-pixels by 64-pixels. |
| {ReblogRootPortraitURL-96} |
Portrait photo URL for the tumblelog this post was created by. 96-pixels by 96-pixels. |
| {ReblogRootPortraitURL-128} |
Portrait photo URL for the tumblelog this post was created by. 128-pixels by 128-pixels. |
Group Posts
| {PostAuthorName} |
The username of the author of a post to a Group tumblelog. |
| {PostAuthorTitle} |
The title of the author's tumblelog for a post to a Group tumblelog. |
| {PostAuthorURL} |
The tumblelog URL for the author of a post to a Group tumblelog. |
| {PostAuthorPortraitURL-16} |
The portrait photo URL for the author of a post to a Group tumblelog.
16-pixels by 16-pixels.
|
| {PostAuthorPortraitURL-24} |
The portrait photo URL for the author of a post to a Group tumblelog.
24-pixels by 24-pixels.
|
| {PostAuthorPortraitURL-30} |
The portrait photo URL for the author of a post to a Group tumblelog.
30-pixels by 30-pixels.
|
| {PostAuthorPortraitURL-40} |
The portrait photo URL for the author of a post to a Group tumblelog.
40-pixels by 40-pixels.
|
| {PostAuthorPortraitURL-48} |
The portrait photo URL for the author of a post to a Group tumblelog.
48-pixels by 48-pixels.
|
| {PostAuthorPortraitURL-64} |
The portrait photo URL for the author of a post to a Group tumblelog.
64-pixels by 64-pixels.
|
| {PostAuthorPortraitURL-96} |
The portrait photo URL for the author of a post to a Group tumblelog.
96-pixels by 96-pixels.
|
| {PostAuthorPortraitURL-128} |
The portrait photo URL for the author of a post to a Group tumblelog.
128-pixels by 128-pixels.
|
Group Members
| {block:GroupMembers} {/block:GroupMembers} |
Rendered on public groups. |
| {block:GroupMember} {/block:GroupMember} |
Rendered for each group member. |
| {GroupMemberName} |
The username of the member's tumblelog. |
| {GroupMemberTitle} |
The title of the member's tumblelog. |
| {GroupMemberURL} |
The URL for the member's tumblelog. |
| {GroupMemberPortraitURL-16} |
Portrait photo URL for the member. 16-pixels by 16-pixels. |
| {GroupMemberPortraitURL-24} |
Portrait photo URL for the member. 24-pixels by 24-pixels. |
| {GroupMemberPortraitURL-30} |
Portrait photo URL for the member. 30-pixels by 30-pixels. |
| {GroupMemberPortraitURL-40} |
Portrait photo URL for the member. 40-pixels by 40-pixels. |
| {GroupMemberPortraitURL-48} |
Portrait photo URL for the member. 48-pixels by 48-pixels. |
| {GroupMemberPortraitURL-64} |
Portrait photo URL for the member. 64-pixels by 64-pixels. |
| {GroupMemberPortraitURL-96} |
Portrait photo URL for the member. 96-pixels by 96-pixels. |
| {GroupMemberPortraitURL-128} |
Portrait photo URL for the member. 128-pixels by 128-pixels. |
Text Posts
| {block:Title} {/block:Title} |
Rendered if there is a title for this post. |
| {Title} |
The title of this post. |
| {Body} |
The content of this post. |
Photo Posts
| {PhotoAlt} |
The HTML-safe version of the caption (if one exists) of this post. |
| {block:Caption} {/block:Caption} |
Rendered if there is a caption for this post. |
| {Caption} |
The caption for this post. |
| {LinkURL} |
A click-through URL for this photo if set. |
| {LinkOpenTag} |
An HTML open anchor-tag including the click-through URL if set.
(Example: <a href="http://...">) |
| {LinkCloseTag} |
A closing anchor-tag output only if a click-through URL is set.
(Example: </a>) |
| {PhotoURL-500} |
URL for the photo of this post. No wider than 500-pixels. |
| {PhotoURL-400} |
URL for the photo of this post. No wider than 400-pixels. |
| {PhotoURL-250} |
URL for the photo of this post. No wider than 250-pixels. |
| {PhotoURL-100} |
URL for the photo of this post. No wider than 100-pixels. |
| {PhotoURL-75sq} |
URL for a square version the photo of this post. 75-pixels by 75-pixels. |
Quote Posts
| {Quote} |
The content of this post. |
| {block:Source} {/block:Source} |
Rendered if there is a source for this post. |
| {Source} |
The source for this post. (May contain HTML) |
| {Length} |
"short", "medium", or "long", depending on the length of the quote. |
Link Posts
| {URL} |
The URL of this post. |
| {Name} |
The name of this post. Defaults to the URL if no name is entered. |
| {Target} |
Should be included inside the A-tags of Link posts.
Output target="_blank" if you've enabled "Open links in new window". |
| {block:Description} {/block:Description} |
Rendered if there is a description for this post. |
| {Description} |
The description for this post. |
Chat Posts
| {block:Title} {/block:Title} |
Rendered if there is a title for this post. |
| {Title} |
The title of this post. |
| {block:Lines} {/block:Lines} |
Rendered for each line of this post. |
| {block:Label} {/block:Label} |
Rendered if a label was extracted for the current line of this post. |
| {Label} |
The label (if one was extracted) for the current line of this post. |
| {Name} |
The username (if one was extracted) for the current line of this post. |
| {Line} |
The current line of this post. |
| {UserNumber} |
A unique identifying integer representing the user of the
current line of this post. |
| {Alt} |
"odd" or "even" for each line of this post. |
Audio Posts
| {block:Caption} {/block:Caption} |
Rendered if there is a caption for this post. |
| {Caption} |
The caption for this post. |
| {AudioPlayer} |
Default audio player. |
| {AudioPlayerWhite} |
White audio player. |
| {AudioPlayerGrey} |
Grey audio player. |
| {AudioPlayerBlack} |
Black audio player. |
| {PlayCount} |
The number of times this post has been played. |
| {FormattedPlayCount} |
The number of times this post has been played, formatted with commas. (e.g. 12,309) |
| {block:ExternalAudio} {/block:ExternalAudio} |
Rendered if this post uses an externally hosted MP3. (Useful for adding a "Download" link) |
| {ExternalAudioURL} |
The external MP3 URL, if this post uses an externally hosted MP3.
|
Video Posts
| {block:Caption} {/block:Caption} |
Rendered if there is a caption for this post. |
| {Caption} |
The caption for this post. |
| {Video-500} |
Embed-code for the content of this post. 500-pixels wide. |
| {Video-400} |
Embed-code for the content of this post. 400-pixels wide. |
| {Video-250} |
Embed-code for the content of this post. 250-pixels wide. |
Dates
| {block:NewDayDate} {/block:NewDayDate} |
Rendered for posts that are the first to be listed for a given day. |
| {block:SameDayDate} {/block:SameDayDate} |
Rendered for subsequent posts listed for a given day. |
| {DayOfMonth} |
"1" to "31" |
| {DayOfMonthWithZero} |
"01" to "31" |
| {DayOfWeek} |
"Monday" through "Sunday" |
| {ShortDayOfWeek} |
"Mon" through "Sun" |
| {DayOfWeekNumber} |
"1" through "7" |
| {DayOfMonthSuffix} |
"st", "nd", "rd", "th" |
| {DayOfYear} |
"1" through "365" |
| {WeekOfYear} |
"1" through "52" |
| {Month} |
"January" through "December" |
| {ShortMonth} |
"Jan" through "Dec" |
| {MonthNumber} |
"1" through "12" |
| {MonthNumberWithZero} |
"01" through "12" |
| {Year} |
"2007" |
| {ShortYear} |
"07" |
| {AmPm} |
"am" or "pm" |
| {CapitalAmPm} |
"AM" or "PM" |
| {12Hour} |
"1" through "12" |
| {24Hour} |
"0" through "23" |
| {12HourWithZero} |
"01" through "12" |
| {24HourWithZero} |
"00" through "23" |
| {Minutes} |
"00" through "59" |
| {Seconds} |
"00" through "59" |
| {Beats} |
"000" through "999" |
| {Timestamp} |
"1172705619" |
| {TimeAgo} |
A contextual time. ("1 minutes ago", "2 hours ago", "3 weeks ago", etc.) |
Day Pages
Tumblr tumblelogs can display posts from a given day using a URL like
http://david.tumblr.com/day/2007/04/29/
By including the following markup, these pages can include pagination for
the previous and next days with posts.
| {block:DayPage} {/block:DayPage} |
Rendered on day pages. |
| {block:DayPagination} {/block:DayPagination} |
Rendered if there is a "previous" or "next" day page. |
| {block:PreviousDayPage} {/block:PreviousDayPage} |
Rendered if there is a "previous" day page to navigate to. |
| {block:NextDayPage} {/block:NextDayPage} |
Rendered if there is a "next" day page to navigate to.
|
| {PreviousDayPage} |
URL for the "previous" day page. |
| {NextDayPage} |
URL for the "next" day page. |
Example Day Page Navigation
<body>
<h1>{Title}</h1>
{block:DayPage}
<h2>{Month} {DayOfMonth}, {Year}</h2>
{/block:DayPage}
<ol id="posts">
{block:Posts}
...
{/block:Posts}
</ol>
<div id="footer">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
{/block:Pagination}
{block:DayPagination}
{block:PreviousDayPage}
<a href="{PreviousDayPage}">
« {ShortMonth} {DayOfMonth}
</a>
{/block:PreviousDayPage}
{block:NextDayPage}
<a href="{NextDayPage}">
{ShortMonth} {DayOfMonth} »
</a>
{/block:NextDayPage}
{/block:DayPagination}
</div>
</body>
</html>
Tags
| {block:HasTags} {/block:HasTags} |
Rendered inside {block:Posts} if post has tags. |
| {block:Tags} {/block:Tags} |
Rendered for each of a post's tags. |
| {Tag} |
The name of this tag. |
| {URLSafeTag} |
A URL safe version of this tag. |
| {TagURL} |
The tag page URL with other posts that share this tag. |
| {TagURLChrono} |
The tag page URL with other posts that share this tag in chronological order. |
Tags Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
{block:Posts}
<div class="post">
{block:Text}...{/block:Text}
{block:Photo}...{/block:Photo}
...
{block:HasTags}
<ul class="tags">
{block:Tags}
<li>
<a href="{TagURL}">{Tag}</a>
</li>
{/block:Tags}
</ul>
{/block:HasTags}
</div>
{/block:Posts}
</body>
</html>
Tag Pages
| {block:TagPage} {/block:TagPage} |
Rendered on tag pages. |
| {Tag} |
The name of this tag. |
| {URLSafeTag} |
A URL safe version of this tag. |
| {TagURL} |
The tag page URL with other posts that share this tag. |
| {TagURLChrono} |
The tag page URL with other posts that share this tag in chronological order. |
Tag Page Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
{block:TagPage}
<h2>Posts tagged "{Tag}"</h2>
{/block:TagPage}
{block:Posts}
...
{/block:Posts}
</body>
</html>
Following
| {block:Following} {/block:Following} |
Rendered if you're following other tumblelogs. |
| {block:Followed} {/block:Followed} |
Rendered for each tumblelog you're following. |
| {FollowedName} |
The username of the tumblelog you're following. |
| {FollowedTitle} |
The title of the tumblelog you're following. |
| {FollowedURL} |
The URL for the tumblelog you're following. |
| {FollowedPortraitURL-16} |
Portrait photo URL for the tumblelog you're following. 16-pixels by 16-pixels. |
| {FollowedPortraitURL-24} |
Portrait photo URL for the tumblelog you're following. 24-pixels by 24-pixels. |
| {FollowedPortraitURL-30} |
Portrait photo URL for the tumblelog you're following. 30-pixels by 30-pixels. |
| {FollowedPortraitURL-40} |
Portrait photo URL for the tumblelog you're following. 40-pixels by 40-pixels. |
| {FollowedPortraitURL-48} |
Portrait photo URL for the tumblelog you're following. 48-pixels by 48-pixels. |
| {FollowedPortraitURL-64} |
Portrait photo URL for the tumblelog you're following. 64-pixels by 64-pixels. |
| {FollowedPortraitURL-96} |
Portrait photo URL for the tumblelog you're following. 96-pixels by 96-pixels. |
| {FollowedPortraitURL-128} |
Portrait photo URL for the tumblelog you're following. 128-pixels by 128-pixels. |
Example Following Markup
{block:Following}
Tumblelogs I follow:
<ul>
{block:Followed}
<li>
<img src="{FollowedPortraitURL-48}"/>
<a href="{FollowedURL}">{FollowedName}</a>
</li>
{/block:Followed}
</ul>
{/block:Following}
Enabling Custom Colors
By including the special meta-color tags in your theme, users you share your theme with will be able to easily tweak those colors using their "Customize Theme" screen.
Custom Colors Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#eee"/>
<meta name="color:Content Background" content="#fff"/>
<meta name="color:Text" content="#000"/>
<style type="text/css">
#content {
background-color: {color:Content Background};
color: {color:Text};
}
</style>
</head>
<body bgcolor="{color:Background}">
<div id="content">
...
</div>
</body>
</html>
Enabling Custom CSS
By including the {CustomCSS} tag at the bottom of your theme's CSS style block, users you share your theme with will be able to tweak the appearance of your theme without editing its markup.
Custom CSS Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#content {
background-color: #fff;
color: #000;
}
{CustomCSS}
</style>
</head>
<body>
<div id="content">
...
</div>
</body>
</html>
