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>