Remember that using the style attribute will globally override any style set. It overrides any styles specified in the HTML

{block:Posts} ... {PostNotes}{/block:Posts}

Notes are paginated with AJAX. If your theme needs to manipulate the Notes markup or DOM nodes, you can add a Javascript callback that fires when a new page of Notes is loaded or inserted:

Variable Description tumblrNotesLoaded(notes_html) If this Javascript function is defined, it will be triggered when a new page of Notes is loaded and ready to be inserted. If this function returns false , it will block the Notes from being inserted. tumblrNotesInserted() If this Javascript function is defined, it will be triggered after a new page of Notes has been inserted into the DOM.

Variable Description {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.

example

{block:Posts}

{/block:Posts}

Content Sources

Variable Description {block:ContentSource} {/block:ContentSource} Rendered if a source is specified for a post's content. {SourceURL} URL of the attributed source. {block:SourceLogo} {/block:SourceLogo} Rendered if a logo exists for the content source. {BlackLogoURL} URL of the source's logo. {LogoWidth} Width of the source's logo. {LogoHeight} Height of the source's logo. {SourceTitle} Title of the content source. {block:NoSourceLogo} {/block:NoSourceLogo} Rendered if no source logo exists.

example

{block:ContentSource} {lang:Source}: {block:SourceLogo} {/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo} {/block:ContentSource}

Submissions

Variable Description {block:Submission} {/block:Submission} Rendered if a post is a submission. {Submitter} The name of the submitting blog. {SubmitterURL} URL to submitter's blog. {SubmitterPortraitURL-16} Portrait photo URL for the submitter. 16-pixels by 16-pixels. {SubmitterPortraitURL-24} Portrait photo URL for the submitter. 24-pixels by 24-pixels. {SubmitterPortraitURL-30} Portrait photo URL for the submitter. 30-pixels by 30-pixels. {SubmitterPortraitURL-40} Portrait photo URL for the submitter. 40-pixels by 40-pixels. {SubmitterPortraitURL-48} Portrait photo URL for the submitter. 48-pixels by 48-pixels. {SubmitterPortraitURL-64} Portrait photo URL for the submitter. 64-pixels by 64-pixels. {SubmitterPortraitURL-96} Portrait photo URL for the submitter. 96-pixels by 96-pixels. {SubmitterPortraitURL-128} Portrait photo URL for the submitter. 128-pixels by 128-pixels.

Group Blogs

Group Members

Variable Description {block:GroupMembers} {/block:GroupMembers} Rendered on additional public group blogs. {block:GroupMember} {/block:GroupMember} Rendered for each additional public group blog member. {GroupMemberName} The username of the member's blog. {GroupMemberTitle} The title of the member's blog. {GroupMemberURL} The URL for the member's blog. {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.

Post Authors

Variable Description {PostAuthorName} The username of the author of a post to an additional group blog. {PostAuthorTitle} The title of the author's blog for a post to an additional group blog. {PostAuthorURL} The blog URL for the author of a post to an additional group blog. {PostAuthorPortraitURL-16} The portrait photo URL for the author of a post to an additional group blog. 16-pixels by 16-pixels. {PostAuthorPortraitURL-24} The portrait photo URL for the author of a post to an additional group blog. 24-pixels by 24-pixels. {PostAuthorPortraitURL-30} The portrait photo URL for the author of a post to an additional group blog. 30-pixels by 30-pixels. {PostAuthorPortraitURL-40} The portrait photo URL for the author of a post to an additional group blog. 40-pixels by 40-pixels. {PostAuthorPortraitURL-48} The portrait photo URL for the author of a post to an additional group blog. 48-pixels by 48-pixels. {PostAuthorPortraitURL-64} The portrait photo URL for the author of a post to an additional group blog. 64-pixels by 64-pixels. {PostAuthorPortraitURL-96} The portrait photo URL for the author of a post to an additional group blog. 96-pixels by 96-pixels. {PostAuthorPortraitURL-128} The portrait photo URL for the author of a post to an additional group blog. 128-pixels by 128-pixels.

Day Pages

Tumblr blogs can display posts from a given day using a URL like https://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.

Variable Description {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

{Title}

{block:DayPage}

{Month} {DayOfMonth}, {Year}

{/block:DayPage}

{block:Posts} ... {/block:Posts}

Tag Pages

Variable Description {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.

example

{block:TagPage}

Posts tagged "{Tag}"

{/block:TagPage}{block:Posts} ... {/block:Posts}

Localization

Localized theme strings allow your theme to appear in every language Tumblr supports. Simply replace any words or phrases in your theme with the appropriate variables. The full text will be output in the language designated in the blog's settings. Check out the strings →

Seek

Variable Description {SearchQuery} The current search query. {URLSafeSearchQuery} A URL-safe version of the current search query for use in links and Javascript. {block:SearchPage} Rendered on search pages. {SearchResultCount} The number of results returned for the current search query. {block:NoSearchResults} Rendered if no search results were returned for the current search query. {block:HideFromSearchEnabled} {/block:HideFromSearchEnabled} Rendered if the blog has chosen not to be indexed by search.

example

Following

Variable Description {block:Following} {/block:Following} Rendered if you're following other blogs. {block:Followed} {/block:Followed} Rendered for each blog you're following. {FollowedName} The username of the blog you're following. {FollowedTitle} The title of the blog you're following. {FollowedURL} The URL for the blog you're following. {FollowedPortraitURL-16} Portrait photo URL for the blog you're following. 16-pixels by 16-pixels. {FollowedPortraitURL-24} Portrait photo URL for the blog you're following. 24-pixels by 24-pixels. {FollowedPortraitURL-30} Portrait photo URL for the blog you're following. 30-pixels by 30-pixels. {FollowedPortraitURL-40} Portrait photo URL for the blog you're following. 40-pixels by 40-pixels. {FollowedPortraitURL-48} Portrait photo URL for the blog you're following. 48-pixels by 48-pixels. {FollowedPortraitURL-64} Portrait photo URL for the blog you're following. 64-pixels by 64-pixels. {FollowedPortraitURL-96} Portrait photo URL for the blog you're following. 96-pixels by 96-pixels. {FollowedPortraitURL-128} Portrait photo URL for the blog you're following. 128-pixels by 128-pixels.

example

{block:Following} Blogs I follow:

{block:Followed}
• {FollowedName}

{/block:Followed}

{/block:Following}

likes

Variable Description {block:Likes} {/block:Likes} Rendered if you are sharing your likes. {Likes} Standard HTML output of your likes. {Likes limit="5"} Standard HTML output of your last 5 likes. Maximum: 10 {Likes width="200"} Standard HTML output of your likes with Audio and Video players scaled to 200-pixels wide. Scale images with CSS max-width or similar. {Likes summarize="100"} Standard HTML output of your likes with text summarized to 100-characters. Maximum: 250

example

... {block:Likes}

{/block:Likes}

Like and Reblog buttons

Like Button

Variable Description {LikeButton} Default Like button. {LikeButton color="grey"} Like button color. Grey, White, or Black. Like button will always be red if visitor has liked the post. {LikeButton size="20"} Like button size. Maximum: 100

Reblog Button

Variable Description {ReblogButton} Default Reblog button. {ReblogButton color="grey"} Reblog button color. Grey, White, or Black. {ReblogButton size="20"} Reblog button size. Maximum: 100

example

... {block:Posts} ...

• {ReblogButton}
• {LikeButton}

{/block:Posts} ...

If your theme uses infinite scrolling or some other form of AJAX pagination, you must request the like status of the new posts once the page is loaded or inserted:

Function Description Tumblr.LikeButton.get_status_by_page(n) Call this function after requesting a new page of Posts. Takes the page number that was just loaded as an integer. Tumblr.LikeButton.get_status_by_post_ids([n,n,n]) Request Like status for individual posts. Takes an array of post IDs.

Related Posts

Variable Description {block:RelatedPosts} {/block:RelatedPosts} Rendered on permalink pages. Shows related posts using post type, content, and tags as reference. Follows the same format as the Posts block.

example

{block:IfRelatedPosts}{block:RelatedPosts}

Related Posts

{block:Posts} ... {/block:Posts}{/block:RelatedPosts}{/block:IfRelatedPosts}

Theme Options

Enabling Custom Colors

By including special meta-color tags in your theme, users can easily tweak those colors using the Customize page.

You can also specify {BackgroundColor} , {TitleColor} , or {AccentColor} as defaults to inherit values from the global appearance parameters unless the user chooses another color manually.

example

Title

Enabling Custom Fonts

By including special meta-font tags in your theme, users can easily change those fonts using the Customize page.

You can also specify {TitleFont} as the default to inherit the value from the "Title font" global appearance parameter unless the user chooses a different font manually.

example

...

Enabling Booleans

By including special meta-if tags in your theme, users can easily toggle options you define. This is useful for showing or hiding different widgets or design elements.

example

{block:IfNotReversePagination} Previous Next {/block:IfNotReversePagination}{block:IfReversePagination} Next Previous {/block:IfReversePagination}{block:IfShowPeopleIFollow}

{/block:IfShowPeopleIFollow}

Enabling drop-down lists

By including special meta-select tags in your theme, you can give users several options for a particular design element.

example

Enabling Custom Text

By including special meta-text tags in your theme, users can easily configure text variables you define. This is useful for adjusting text or configuring widgets that require information from the user.

example

{block:IfFlickrUsername}

{/block:IfFlickrUsername}

Enabling Custom Images

By including special meta-image tags in your theme, users can easily use custom images without editing your theme. Image variables (e.g., {image:Logo} ) will return a 1-pixel transparent square if no image is set.

You can also specify {HeaderImage} as the default to inherit the value from the "Header image" global appearance parameter until the user uploads a different image.

example

{block:IfHeaderImage}{/block:IfHeaderImage} {block:IfNotHeaderImage}

{Title}

{/block:IfNotHeaderImage}

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.

example

Twitter

If you've enabled Twitter integration in your Tumblr preferences, you can include the /tweets.js Javascript file on your primary blog to display your recent tweets. This file runs the callback function recent_tweets() , sending the Twitter API JSON data as its only parameter.

Variable Description {block:Twitter} {/block:Twitter} Rendered if you have Twitter integration enabled. {TwitterUsername} Your Twitter username.

example

{block:Twitter}

{/block:Twitter} {block:Twitter} {/block:Twitter}

iPhone Themes

Tumblr blogs automatically use optimized layouts when browsing on mobile devices. The iPhone layout can be overridden by adding a Custom Layout Page (via Customize) to your blog with the URL /iphone-theme .

Variable Transformations

By prefixing variables with special transformation keywords, Tumblr will output variables in specialized formats — useful when passing data to Javascript, etc. Tumblr currently supports five transformations:

Variable Description Plaintext Prefix any theme variable with Plaintext to output the string with HTML-tags stripped and appropriate characters converted to HTML-entities so they’re safe to include in HTML attributes, etc. Javascript Prefix any theme variable with JS to output a Javascript string (wrapped in quotes). Javascript Plaintext Prefix any theme variable with JSPlaintext to output a Javascript string (wrapped in quotes) with HTML-tags stripped and appropriate characters converted to HTML-entities. URLEncoded Prefix any theme variable with URLEncoded to output a URL encoded string. RGB Prefix a color variable with RGB to convert the hex output to RGB.

example

{Name} Digg this