pp-First Tumblr Theme

A dear friend asked if I had made any Tumblr themes and I had no idea what that was. After a couple days of looking around the code I made my first theme. It’s nothing special but it is functional and meets all standards.

The highlight color, what you currently see as blue, is changeable.

Copy and paste the code below or preview and install directly from tumblr.

<!DOCTYPE html>
<html>
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="appdivcation/rss+xml" href="{RSS}">
    {block:Description}
    <meta name="description" content="{MetaDescription}" />
    <meta name="text:About Me" content=""/>
    <meta name="color:Highlight" content="#ff0099"/>
    {/block:Description}
<style type="text/css">
    {CustomCSS}
    @import url(http://fonts.googleapis.com/css?family=Oleo+Script);
    @import url(http://fonts.googleapis.com/css?family=Muli);
        body {
            margin:0px;
            padding:0px;
            background-color:#333333;
            font-family: 'Muli', sans-serif;
            font-size:14px;
        }
        a:link, a:active, a:visited {
            color:{color:Highlight};
            text-decoration:none;
        }
        a:hover {
            color:#aeaeae;
        }
        .clear {
            clear:both;
        }
        #container {
            width:860px;
            margin:0px auto;
            padding:0px;
        }
        #posts {
            width:520px;
            float:left;
        }
        .post, .footer {
            padding:10px;  
            background-color:#222;
            color:#fefefe;     
            margin-bottom:20px;
            position:relative;
        }
        .sidebar {
            float:left;
            width:320px;
            padding:10px;
            color:#fefefe;
            margin-top:140px;
        }
        .portrait {
            border:10px solid #1b1b1b;
            background-color:#222222;
            border:1px solid #222222;
            padding:10px;
            float:left;
            margin:0px 10px 10px 0px;
        }
        .maintitle{
            text-align:center;
            display:block;
            font-family: 'Oleo Script', cursive;
            font-size:60px;
            margin:0px;
            color:#fefefe;
            text-decoration:none;
        }
        #description {
            text-align:center;
            display:block;
            margin:-20px 0px 20px 0px;
            font-size:26px;
            color:#aeaeae;
            font-weight:bold;
            text-shadow: 0px -3px 5px #1b1b1b; filter: dropshadow(color=#1b1b1b, offx=0, offy=-3);
        }
        .header {
            margin:0px auto;
            text-align:center;
            height:150px;
        }
        .video {
            text-align:center;
        }
        .text {
            text-align:left;
        }
        .photo {
            text-align:center;
        }
        .credits {
            width:200px;
            float:right;
            text-align:right;
        }
        .footer {
            font-size:12px;
        }
        .nav a {
            padding:5px;
        }
        .date {
            background-color:#1b1b1b;
            text-align:left;
            padding:3px;
            font-size:10px;
            margin-top:5px;
        }
        ul#likes {
            list-style-type: none;
            margin: 0 0 0 0;
            padding: 0 0 0 0;
        }
        li.like_post {
            width: 300px;
            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;
        }
        .tags {
            width:400px;
            float:right;
            text-align:right;
        }
        .tags a:link, .tags a:active, .tags a:visited {
            background-color:{color:Highlight};
            padding:2px 3px;
            margin:0px 0px 0px 2px;
            text-decoration:none;
            color:#1b1b1b;
			text-transform:uppercase;
            font-size:10px;
            font-weight:bold;
        }
        .tags a:hover {
            background-color:#fefefe;
            color:#1b1b1b;
        }
        .odd {
            color:#ffffff;
        }
        .even {
            color:#aeaeae;
        }
        .title {
            font-size:20px;
        }
        .title a {
            color:#fefefe;
        }
        .twitter {
            margin-top:20px;
        }

</style>
</head>
<body>
<div id="container">

    <div id="posts">

    <div class="header">
        <span class="maintitle">{Title}</span>

        {block:Description}
            <p id="description">{Description}</p>
        {/block:Description}

        <div class="nav">
        <a href="{URL}/.">Home</a> 
        {block:HasPages}
        {block:Pages}
        <a href="{URL}">{Label}</a> 
        {/block:Pages}
        {/block:HasPages}
        {block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}
        </div>
    </div> 

        {block:Posts}
            {block:Text}
                <div class="post text">
                    {block:Title}
                        <span class="title"><a href="{Permalink}">{Title}</a>{block:PostTitle} - {PostTitle}{/block:PostTitle}</span>
                    {/block:Title}
					{Body}

                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>

                </div>
            {/block:Text}

            {block:Photo}
                <div class="post photo">
                    <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Photo}

            {block:Photoset}
                <div class="post photoset">
                    {Photoset-500}

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Photoset}

            {block:Quote}
                <div class="post quote">
                    "{Quote}"
                    {block:Source}
                        <div class="source">{Source}</div>
                    {/block:Source}
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Quote}

            {block:Link}
                <div class="post link">
                    <a href="{URL}" class="link" {Target}>{Name}</a>
                    {block:Description}
                        <div class="description">{Description}</div>
                    {/block:Description}
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Link}

            {block:Chat}
                <div class="post chat">
                    {block:Title}
                        <span class="title">
                        <a href="{Permalink}">{Title}</a></span>
                    {/block:Title}

                    <ul class="chat">
                        {block:Lines}
                            <div class="{Alt} user_{UserNumber}">
                                {block:Label}
                                    <span class="label">{Label}</span>
                                {/block:Label}

                                {line}
                            </div>
                        {/block:Lines}
                    </ul>
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Chat}

            {block:Video}
                <div class="post video">
                    {Video-500}

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Video}

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

                    {block:Caption}
                        <div class="caption">{Caption}</div>
                    {/block:Caption}
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Audio}

            {block:Answer}
                <div class="post answer">
                    <img src="{AskerPortraitURL-16}">{Asker}: {Question}
                    <br>
                    {Answer}
                    <div class="date"> 
                    {block:Date}                          
                    {ShortMonth} {DayOfMonth} {Year}
                    {/block:Date}

                    <div class="tags">
					{block:HasTags}
                    {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
                   	{/block:HasTags}
					</div>

                    {block:PostNotes}
                    {block:NoteCount}
                    {NoteCountWithLabel}
                    {/block:NoteCount}
                    {/block:PostNotes}
                    </div>
                </div>
            {/block:Answer}

            {/block:Posts}

    <div class="footer">
        {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}

        <a href="/archive">Archive</a>        
        <div class="credits">
        Designed by <a href="http://www.privatepyro.com">Private Pyro</a>
        </div>
    </div>
    </div>    

    <div class="sidebar">
    <img src="{PortraitURL-96}" class="portrait">
            {text:About Me}
        <div class="clear"></div>
        <div class="follow">
            {block:Following}
            <h2>Blogs I follow:</h2>
            {block:Followed}
            <a href="{FollowedURL}"><img src="{FollowedPortraitURL-30}" title="{FollowedName}"></a>
            {/block:Followed}
            {/block:Following}
        </div>

        <div class="custom">
        </div>

        <div class="likes">
            {block:Likes}
            <div id="likes_container">
                <h2>Stuff I like</h2>

                {Likes limit="3" summarize="100" width="300"}

                <a href="http://www.tumblr.com/liked/by/{Name}">
                    See more stuff I like
                </a>
            </div>
            {/block:Likes}
        </div>

        {block:Twitter}
        <div class="twitter">
        <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
        <script>
        new TWTR.Widget({
          version: 2,
          type: 'profile',
          rpp: 4,
          interval: 30000,
          width: 300,
          height: 300,
          theme: {
            shell: {
              background: '#222222',
              color: '#fefefe'
            },
            tweets: {
              background: '#1b1b1b',
              color: '#fefefe',
              links: '{color:Highlight}'
            }
          },
          features: {
            scrollbar: false,
            loop: false,
            live: false,
            behavior: 'all'
          }
        }).render().setUser('{TwitterUsername}').start();
        </script>
        </div>
        {/block:Twitter}

    </div><!-- end sidebar -->
</div>
</body>
</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*