My New Tumblr Theme

martinruiz:

If you’re reading this article on my blog, then you’re experiencing my new theme design.  The design was inspired and based on Alexander Kohlhofer’s Friendfeed Theme for Tumblr.  I’ve customized to for my needs and personal style.

I love the original theme for it’s minimalist yet functional style.  It makes excellent use of space and font size.  It integrates Disqus for comments and Friendfeed for all other social networking activity.

Some of the mods I’ve made include:

• All white header with custom name logo.
• More navigation links for access to flickr, twitter, linkedin and Facebook.
• Links to recent lengthier posts by using Delicious.
• Flickr badge for my pics.
• Narrowed my Friendfeed to only post from Twitter.

Download source here.

Here are some hacks I included in the theme code.

Delicious “Recent Posts” Hack
If you use Tumblr, you might already know that it does not provide a means for list of recent posts or tag clouds like blogs on wordpress, typepad etc.  With a little scripting and by leveraging Delicious, I’ve been able to do this.

1. First bookmark the posts you want to list using Delicious or some other bookmarking service and tag it with something unique.  I tag mine with “martinruiz”.

2. Add the following javascript and html wherever you want to post the list.  You can also add css formatting if you like.

<div class=”streamMeta” id=”recentposts”>

<h2 class=”streamTitle”>Recent Posts</h2>
<script type=”text/javascript”
src=”http://del.icio.us/feeds/json/RuizMartin/martinruiz?count=10“></script>

<script type=”text/javascript”>
var ul = document.createElement(‘ul’)
for (var i=0, post; post = Delicious.posts[i]; i++) {
var li = document.createElement(‘li’)
var a = document.createElement(‘a’)
a.setAttribute(‘href’, post.u)
a.appendChild(document.createTextNode(post.d))
li.appendChild(a)
ul.appendChild(li)
}
document.getElementById(‘recentposts’).appendChild(ul)
</script>

</div>

3. Grab the feed address for the tagged feed and insert in the code.  It will look something like “http://del.icio.us/feeds/json/userid/tagname?count=10”


Friendfeed for Twitter PM: Hack
In the theme code you’ll find that I’ve added “service=twitter” to the URI in

<script type=”text/javascript” src=”http://friendfeed.com/embed/widget/martinruiz?v=2&num=15&hide_subscribe=1&service=twitter”></script> 

How to create the Name Logo
Believe it or not, I created this with powerpoint then cropped and resized for 60px height. It’s important to crop first.  “martin” uses 66pt Century Gothic font and “RUIZ” uses 48pt Arial Black font.  All text is tightened to “very tight” so the letters are closer together.  Find the powerpoint file here.

Thanks to Alex and other Tumblr’s for their inspiration.

Todo: Add Tag Cloud

Todo: Create Crisper Logos --- can someone help?