pretendy

How I made my own* Tumblr theme

*kinda

When I was 15 I loved editing my MySpace page (RIP). I was never a pro at web design and so creating html and CSS from scratch was out of the question. Instead, I would find a pre-made layout and treating it like a kind of Rosetta Stone, I'd proceed to edit it as much as I could. Though at that time I could barely do anything beyond change a font colour and fix a background image, when I finally had my page as I wanted it I felt like I had hacked into the Pentagon.

I was sad when MySpace flopped (I remember getting Facebook for the first time and thinking "So where do I edit the html?") but when I found Tumblr I rediscovered my joy for making things look pretty on the internet.

Now that I feel much more confident with computer code, I took on the challenge of constructing a Tumblr theme from scratch - something which I've always wanted to do.

The first thing I did was consult the Tumblr docs tutorial. They give a very handy skeleton markup for how a html document of a theme should be structured. When you make a post, the information gets stored in a database and can be accessed by variables in the html. For instance, your description is pulled from the server and placed in a document using the variable <p>{Description}</p>. Other variables include things like {Title}, {Quote}, {NoteCountWithLabel} et.c.

My starting point was the skeleton markup which sets up the mechanics of a page - blog name, description and sequential list of recent posts. In case you think this is cheating, here is what my blog looked like at that point:

Not ideal.

My next move was to begin styling. I did this by utilising the beautiful Twitter Bootstrap, which is an extensive and powerful framework that seemed perfect for what I wanted to do. At its heart is a large CSS file that defines many classes such as navigation bars, drop down menus and buttons.

Instead of copying and pasting into my document the whole CSS file, I laid out all the <div> elements the way I wanted them, and whenever I included an element with a new class, I placed the CSS code for that class into the document.

Twitter Bootstrap uses a 12-column fluid grid system (widths of columns adjust to the width of the browser) and after playing around a little I decided to use a 9-3 split where 75% of the width is given to my posts and 25% to my sidebar.

One of the most distinctive elements in the Bootstrap is the so called '.hero-unit', a chunky banner that serves as an eye-catching welcome to a website:

Quite liking this, I decided to use an edited version for the banner at the top of my page. Keen followers might notice the image from a previous post of mine. It's a sketch I made in Processing. 

Having got the main layout of the page in place all I had to do was iron it out:

Finally, you may notice that if you're on one of the 'Home', 'About' or 'Message' tabs, that tab appears activated. This wasn't possible to do just through Bootstrap, which can only activate elements statically, that is, different html would be required on each page to activate that page's button. While on the Home page, the Home button's class attribute is "active" while the others are "":

To change the class attribute from "" to "active" dynamically when a page is accessed, I had to write a small bit JavaScript for a client to assess which page it's on and change the class attributes accordingly:

And with that, my blog was/is finally(ish) done. A couple things I might change/add are a search bar in the nav at the top, and pagination in the sidebar.

I'd also welcome any thoughts or suggestions!