Tuesday, 7 June 2011

some tags and css tou should know

Creating a custom HTML theme

Tumblr lets you fully customize the appearance of your blog by editing your theme's HTML code. This is only recommended for users comfortable hand-coding HTML. If you're not, there are hundreds of great themes to choose from in the Theme Garden!
Once you've created a theme you're proud of, submit it to the Theme Garden to share with everyone on Tumblr!

Introduction

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 blog'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}">
        {block:Description}
            <meta name="description" content="{MetaDescription}" />
        {/block:Description}
    </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-500}" alt="{PhotoAlt}"/>

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photo}
                
                {block:Photoset}
                    <li class="post photoset">
                        {Photoset-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Photoset}

                {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-500}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Video}

                {block:Audio}
                    <li class="post audio">
                        {AudioPlayerBlack}

                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </li>
                {/block:Audio}
            {/block:Posts}
        </ol>

        <p id="footer">
            {block:PreviousPage}
                <a href="{PreviousPage}">&#171; Previous</a>
            {/block:PreviousPage}

            {block:NextPage}
                <a href="{NextPage}">Next &#187;</a>
            {/block:NextPage}

            <a href="/archive">Archive</a>
        </p>
    </body>
</html>

Basic Variables

{Title} The HTML-safe title of your blog.
{Description} The description of your blog. (may include HTML)
{MetaDescription} The HTML-safe description of your blog. (use in META tag)
{RSS} RSS feed URL for your blog.
{Favicon} Favicon URL for your blog.
{CustomCSS} Any custom CSS code added on your "Customize Theme" screen.
{block:PermalinkPage} {/block:PermalinkPage} Rendered on post 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 blog. 16-pixels by 16-pixels.
{PortraitURL-24} Portrait photo URL for your blog. 24-pixels by 24-pixels.
{PortraitURL-30} Portrait photo URL for your blog. 30-pixels by 30-pixels.
{PortraitURL-40} Portrait photo URL for your blog. 40-pixels by 40-pixels.
{PortraitURL-48} Portrait photo URL for your blog. 48-pixels by 48-pixels.
{PortraitURL-64} Portrait photo URL for your blog. 64-pixels by 64-pixels.
{PortraitURL-96} Portrait photo URL for your blog. 96-pixels by 96-pixels.
{PortraitURL-128} Portrait photo URL for your blog. 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.
{block:SubmissionsEnabled} {/block:SubmissionsEnabled} Rendered if Submissions are enabled.
{SubmitLabel} The customizable label for the Submit link. (Example: "Submit")
{block:AskEnabled} {/block:AskEnabled} Rendered if asking questions is enabled.
{AskLabel} The customizable label for the Ask link. (Example: "Ask me anything")

Jump Pagination

{block:JumpPagination length="5"} {/block:JumpPagination} Rendered for each page greater than the current page minus one-half length up to current page plus one-half length.
{block:CurrentPage} {/block:CurrentPage} Rendered when jump page is the current page.
{block:JumpPage} {/block:JumpPage} Rendered when jump page is not the current page.
{PageNumber} Page number for jump page.
{URL} URL for jump page.
Example
<html>
    <body>
        ...
        
        {block:Pagination}
            {block:PreviousPage}
                <a href="{PreviousPage}">Previous</a>
            {/block:PreviousPage}

            {block:JumpPagination length="5"}
                {block:CurrentPage}
                    <span class="current_page">{PageNumber}</span>
                {/block:CurrentPage}

                {block:JumpPage}
                    <a class="jump_page" href="{URL}">{PageNumber}</a>
                {/block:JumpPage}
            {/block:JumpPagination}

            {block:NextPage}
                <a href="{NextPage}">Next</a>
            {/block:NextPage}
        {/block:Pagination}
    </body>
</html>

Pages

{block:HasPages} {/block:HasPages} Rendered if you have defined any custom pages.
{block:Pages} {/block:Pages} Rendered for each custom page.
{URL} The URL for this page.
{Label} The label for this page.

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 the Customize area for the blog on the Advanced tab.
{block:Text} {/block:Text} Rendered for Text posts.
{block:Photo} {/block:Photo} Rendered for Photo posts.
{block:Photoset} {/block:Photoset} Rendered for Photoset 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.
{block:Answer} {/block:Answer} Rendered for Answer posts.
{PostType} The name of the current post type.
{Permalink} The permalink for a post. (Example: "http://sample.tumblr.com/post/123")
{ShortURL} A shorter URL that redirects to this post. (Example: "http://tumblr.com/xpv5qtavm")
{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.
{block:Odd} {/block:Odd} Rendered for every one of the current pages odd-numbered posts.
{block:Even} {/block:Even} Rendered for every one of the current pages even-numbered posts.
{block:More} {/block:More} Rendered on index pages for posts with Read More breaks.
{PostNotesURL} URL to an HTML partial of this post's Notes. Useful for loading Notes via AJAX.

Reblogs

{block:RebloggedFrom} {/block:RebloggedFrom} Rendered if a post was reblogged from another post.
{ReblogParentName} The username of the blog this post was reblogged from.
{ReblogParentTitle} The title of the blog this post was reblogged from.
{ReblogParentURL} The URL for the blog this post was reblogged from.
{ReblogParentPortraitURL-16} Portrait photo URL for the blog this post was reblogged from. 16-pixels by 16-pixels.
{ReblogParentPortraitURL-24} Portrait photo URL for the blog this post was reblogged from. 24-pixels by 24-pixels.
{ReblogParentPortraitURL-30} Portrait photo URL for the blog this post was reblogged from. 30-pixels by 30-pixels.
{ReblogParentPortraitURL-40} Portrait photo URL for the blog this post was reblogged from. 40-pixels by 40-pixels.
{ReblogParentPortraitURL-48} Portrait photo URL for the blog this post was reblogged from. 48-pixels by 48-pixels.
{ReblogParentPortraitURL-64} Portrait photo URL for the blog this post was reblogged from. 64-pixels by 64-pixels.
{ReblogParentPortraitURL-96} Portrait photo URL for the blog this post was reblogged from. 96-pixels by 96-pixels.
{ReblogParentPortraitURL-128} Portrait photo URL for the blog this post was reblogged from. 128-pixels by 128-pixels.
{ReblogRootName} The username of the blog this post was created by.
{ReblogRootTitle} The title of the blog this post was created by.
{ReblogRootURL} The URL for the blog this post was created by.
{ReblogRootPortraitURL-16} Portrait photo URL for the blog this post was created by. 16-pixels by 16-pixels.
{ReblogRootPortraitURL-24} Portrait photo URL for the blog this post was created by. 24-pixels by 24-pixels.
{ReblogRootPortraitURL-30} Portrait photo URL for the blog this post was created by. 30-pixels by 30-pixels.
{ReblogRootPortraitURL-40} Portrait photo URL for the blog this post was created by. 40-pixels by 40-pixels.
{ReblogRootPortraitURL-48} Portrait photo URL for the blog this post was created by. 48-pixels by 48-pixels.
{ReblogRootPortraitURL-64} Portrait photo URL for the blog this post was created by. 64-pixels by 64-pixels.
{ReblogRootPortraitURL-96} Portrait photo URL for the blog this post was created by. 96-pixels by 96-pixels.
{ReblogRootPortraitURL-128} Portrait photo URL for the blog this post was created by. 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.
{PhotoURL-HighRes} URL for the high-res photo of this post.
{block:HighRes} {/block:HighRes} Rendered if there is high-res photo for this post.

Photoset Posts

{block:Caption} {/block:Caption} Rendered if there is a caption for this post.
{Caption} The caption for this post.
{Photoset-500} Embed-code for the photoset. 500-pixels wide.
{Photoset-400} Embed-code for the photoset. 400-pixels wide.
{Photoset-250} Embed-code for the photoset. 250-pixels wide.

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.
{RawAudioURL} URL for this post's audio file. iPhone Themes only.
{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")
{PlayCountWithLabel} The number of times this post has been played, formatted with commas and pluralized label (e.g. "12,309 plays")
{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.
{block:AlbumArt}
{AlbumArtURL}
{/block:AlbumArt}		 Rendered if this audio file's ID3 info contains album art.
{block:Artist}
{Artist}
{/block:Artist}		 Rendered if this audio file's ID3 info contains the artist name.
{block:Album}
{Album}
{/block:Album}		 Rendered if this audio file's ID3 info contains the album title.
{block:TrackName}
{TrackName}
{/block:TrackName}		 Rendered if this audio file's ID3 info contains the track name.

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.
{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")
{PlayCountWithLabel} The number of times this post has been played, formatted with commas and pluralized label (e.g. "12,309 plays")

Answer Posts

{Question} The question for this post. (May contain heavily filtered HTML)
{Answer} The answer for this post. (May contain HTML)
{Asker} Simple HTML text link with the asker's username and URL, or the plain text string "Anonymous".
{AskerPortraitURL-16} Portrait photo URL for the asker. 16-pixels by 16-pixels.
{AskerPortraitURL-24} Portrait photo URL for the asker. 24-pixels by 24-pixels.
{AskerPortraitURL-30} Portrait photo URL for the asker. 30-pixels by 30-pixels.
{AskerPortraitURL-40} Portrait photo URL for the asker. 40-pixels by 40-pixels.
{AskerPortraitURL-48} Portrait photo URL for the asker. 48-pixels by 48-pixels.
{AskerPortraitURL-64} Portrait photo URL for the asker. 64-pixels by 64-pixels.
{AskerPortraitURL-96} Portrait photo URL for the asker. 96-pixels by 96-pixels.
{AskerPortraitURL-128} Portrait photo URL for the asker. 128-pixels by 128-pixels.

Dates

{block:Date} {/block:Date} Rendered for all posts.
Always wrap dates in this block so they will be properly hidden on non-post pages.
{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 minute ago", "2 hours ago", "3 weeks ago", etc.)

Notes

Notes include posts' reblogs, likes, and answers.
{block:PostNotes} {/block:PostNotes} Rendered on permalink pages this post has notes.
{PostNotes} Standard HTML output of this post's notes. Only rendered on permalink pages.
{block:NoteCount} {/block:NoteCount} Rendered if this post has notes.
Always wrap note counts in this block so they will be properly hidden on non-post pages.
{NoteCount} The number of this post's notes.
{NoteCountWithLabel} The number of this post's notes with pluralized label. (e.g. "24 notes")
Example
<html>
    <head>
        <style type="text/css">
            ol.notes {
                padding: 0px;
                margin: 25px 0px;
                list-style-type: none;
                border-bottom: solid 1px #ccc;
            }

            ol.notes li.note {
                border-top: solid 1px #ccc;
                padding: 10px;
            }

            ol.notes li.note img.avatar {
                vertical-align: -4px;
                margin-right: 10px;
                width: 16px;
                height: 16px;
            }

            ol.notes li.note span.action {
                font-weight: bold;
            }

            ol.notes li.note .answer_content {
                font-weight: normal;
            }

            ol.notes li.note blockquote {
                border-color: #eee;
                padding: 4px 10px;
                margin: 10px 0px 0px 25px;
            }

            ol.notes li.note blockquote a {
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        {block:Posts}
            ...
            
            {PostNotes}
        {/block:Posts}
    </body>
</html>
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:
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.

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.
Example
<html>
    <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>

Group Blogs

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

Group Blog Posts

{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 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
<html>
    <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}">&#171; Previous</a>
                {/block:PreviousPage}

                {block:NextPage}
                    <a href="{NextPage}">Next &#187;</a>
                {/block:NextPage}
            {/block:Pagination}

            {block:DayPagination}
                {block:PreviousDayPage}
                    <a href="{PreviousDayPage}">
                        &#171; {ShortMonth} {DayOfMonth}
                    </a>
                {/block:PreviousDayPage}

                {block:NextDayPage}
                    <a href="{NextDayPage}">
                        {ShortMonth} {DayOfMonth} &#187;
                    </a>
                {/block:NextDayPage}
            {/block:DayPagination}
        </div>
    </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.
Example
<html>
    <body>
        {block:TagPage}
            <h2>Posts tagged "{Tag}"</h2>
        {/block:TagPage}
    
        {block:Posts}
            ...
        {/block:Posts}
    </body>
</html>

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 →

Search

{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.
Example
<form action="/search" method="get">
    <input type="text" name="q" value="{SearchQuery}"/>
    <input type="submit" value="Search"/>
</form>

Following

{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:
    <ul>
        {block:Followed}
            <li>
                <img src="{FollowedPortraitURL-48}"/>
                <a href="{FollowedURL}">{FollowedName}</a>
            </li>
        {/block:Followed}
    </ul>
{/block:Following}

Likes

{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 summarize to 100-characters. Maximum: 250
Example
<html>
    <head>
        <style type="text/css">
            ul#likes {
             list-style-type: none;
             margin: 0 0 0 0;
             padding: 0 0 0 0;
            }

                li.like_post {
                    /* Should match the width specified in the Likes tag */
                    width: 150px;
                    padding: 0 40px 0 0;
                    float: left;
                }

                  li.like_post img {
                      max-width: 100%;
                  }

                  li.like_post blockquote {
                      margin: 0;
                      padding: 0 0 0 10px;
                      border-left: 1px solid #eee;
                  }

                  li.like_post ol,
                  li.like_post ul {
                      margin: 0 0 0 15px;
                      padding: 0;
                  }

                  li.like_post .like_link a {
                      font-weight: bold;
                  }

                  li.like_post .like_title {
                      font-weight: bold;
                  }

                  li.like_post .post_info_bottom {
                      margin: 10px 0 0 0;
                      display: block !important;
                  }
        </style>
    </head>
    <body>
        ...
    
        {block:Likes}
            <div id="likes_container">
                <h2>Stuff I like</h2>
                
                {Likes limit="5" summarize="100" width="150"}
                
                <a href="http://www.tumblr.com/liked/by/{Name}">
                    See more stuff I like
                </a>
            </div>
        {/block:Likes}
    </body>
</html>

Enabling Custom Colors

By including the special meta-color tags in your theme, users can easily tweak those colors using the "Customize" screen.
Example
<html>
    <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 Fonts

By including the special meta-font tags in your theme, users can easily change those fonts using the "Customize" screen.
Example
<html>
    <head>
        <!-- DEFAULT FONTS -->
        <meta name="font:Title" content="Helvetica Neue"/>
        <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>

        <style type="text/css">
            h1 {
                font: 30px {font:Title};
            }
        
            #content {
                font: 12px {font:Body};
            }
        </style>
    </head>
    ...
</html>

Enabling Booleans

By including the 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
<html>
    <head>
        <!-- DEFAULTS -->
        <meta name="if:Show people I follow" content="1"/>
        <meta name="if:Reverse pagination" content="0"/>
    </head>
    <body>
        {block:IfNotReversePagination}
            <a href="...">Previous</a> <a href="...">Next</a>
        {/block:IfNotReversePagination}
        
        {block:IfReversePagination}
            <a href="...">Next</a> <a href="...">Previous</a>
        {/block:IfReversePagination}
        
        {block:IfShowPeopleIFollow}
            <div id="following">...</div>
        {/block:IfShowPeopleIFollow}
    </body>
</html>

Enabling Custom Text

By including the 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
<html>
    <head>
        <!-- DEFAULT TEXT -->
        <meta name="text:Flickr Username" content=""/>
    </head>
    <body>
        {block:IfFlickrUsername}
            <div id="flickr_widget">
                <script type="text/javascript"
                src="http://flickr.com/widget?user={text:Flickr Username}">
                </script>
            </div>
        {/block:IfFlickrUsername}
    </body>
</html>

Enabling Custom Images

By including the special meta-image tags in your theme, users can easily use custom images without editing your theme. Image variables (eg. {image:Logo}) will return a 1-pixel transparent square if no image is set.
Example
<html>
    <head>
        <!-- DEFAULT IMAGE -->
        <meta name="image:Background" content="http://static.tumblr.com/..."/>
        <meta name="image:Header" content=""/>
        
        <style type="text/css">
            body {
                background: #2D567C url('{image:Background}');
            }
        </style>
    </head>
    <body>
        {block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}
    </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.
Example
<html>
    <head>        
        <style type="text/css">
            #content {
                background-color: #fff;
                color: #000;
            }

            {CustomCSS}
        </style>
    </head>
    <body>
        <div id="content">
            ...
        </div>
    </body>
</html>

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.
{block:Twitter} {/block:Twitter} Rendered if you have Twitter integration enabled.
{TwitterUsername} Your Twitter username.
Example
{block:Twitter}
    <div id="twitter" style="display:none;">
        <h3><a href="http://twitter.com/{TwitterUsername}">Latest Tweets</a></h3>
        
        <div id="tweets"></div>        
    </div>
    
    <script type="text/javascript">
        function recent_tweets(data) {
            for (i=0; i<data.length; i++) {
                document.getElementById("tweets").innerHTML = 
                    document.getElementById("tweets").innerHTML + 
                    '<a href="http://twitter.com/{TwitterUsername}/status/' + 
                    (data[i].id_str ? data[i].id_str : data[i].id) +
                    '"><div class="content">' + data[i].text + 
                    '</div></a>';
            }
            document.getElementById("twitter").style.display = 'block';
        }
    </script>
{/block:Twitter}
      
<!-- Put this at the bottom of the page -->
{block:Twitter}
    <script type="text/javascript" src="/tweets.js"></script>
{/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 four transformations:
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.
Example
<a href="{URL}" title="{PlaintextName}">{Name}</a>

<script type="text/javascript">
    var description      = {JSDescription};
    var description_text = {JSPlaintextDescription};
</script>

<a href="http://digg.com/submit?url={URLEncodedPermalink}">Digg this</a>
Posted by Knite Banks at 13:04

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)