Creating a custom HTML theme for Tumblr


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!


Introduction To Tumblr
Customize your Codes
To start, click the name of your blog at the top of the Dashboard, click the "Customize appearance" button on the right side of the page. Click the "Edit HTML" button under the theme thumbnail to access 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:

Example

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



Reactions: