Monday, 19 February, 2018 UTC

Build a Simple Tumblr Theme with Bootstrap

Build a Simple Tumblr Theme with Bootstrap

Summary

If you’ve ever looked at all the wonderful Tumblr themes and wondered what it takes to build a Tumblr theme from scratch, then this tutorial is for you. In this post, I’m going to show you how to use Bootstrap and Tumblr’s special operators to create a theme you can use for your Tumblr blog.
Here’s what you need to get started:
  • a Tumblr account
  • a basic understanding of Bootstrap, the popular front-end framework.
Our Basic HTML and Bootstrap Resources
A Tumblr theme is just an HTML file that uses Tumblr’s special operators. We’ll start off by creating a new file using our favorite text editor and adding the following boilerplate HTML code to it:
[code language="html"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
[/code]
Next, we’ll add the necessary Bootstrap resources. Bootstrap CDN makes it easy to add the files to your Tumblr theme. Just put the following in your theme’s head:
[code language="html"]
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
[/code]
Also add the following before the closing body tag:
[code language="html"]
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
[/code]
Adding Custom Styles
This Tumblr theme is going to have a narrow layout that will be 550px wide. It’s also going to have a 50px-tall, fixed-position header. Add the following to the theme’s head to handle these requirements:
[code language="css"]
<style type="text/css">
body {
padding-top: 60px;
}
.container {
width: 550px;
}
</style>
[/code]
Creating the Tumblr Theme Header
We’ll use Bootstrap’s navbar to create a header for our Tumblr theme. This allows us to use our first Tumblr variable: {Title}. The {Title} variable refers to the title of the blog. The following code is added to the body of the theme:
[code language="html"]
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">{Title}</a>
</nav>
[/code]
It’s a good idea to use the {Title} variable in the HTML <title> tag as well:
[code language="html"]
<title>{Title}</title>
[/code]
If you were to apply the theme to your Tumblr blog now, it would look like this, with just white space below it:
Creating a Container to Hold Posts
Next we’ll add a div that we can use as a container for all Tumblr posts. Add the following code below the nav element:
[code language="html"]
<div class="container">
</div>
[/code]
As you might already know, Tumblr lets you add different types of posts to your blog. For the sake of simplicity, we’re going to handle the following post types:
  • text
  • photo
  • quote
{block:Posts} is a Tumblr block that gives us a list of all the posts available on a blog.
Add the following code inside the posts container:
[code language="html"]
{block:Posts}
{/block:Posts}
[/code]
Next, to determine the type of the current post, we’re going to use the following blocks:
  • {block:Text}
  • {block:Photo}
  • {block:Quote}
For any post, only one of these will be rendered.
Handling Text Posts
Text posts usually have a title and a body that can be accessed using the variables {Title} and {Body}, respectively. Add the following code inside the {block:Posts} tag.
[code language="html"]
{block:Text}
<h2>{Title}</h2>
<p>{Body}</p>
{/block:Text}
[/code]
Handling Photo Posts
Photo posts have a caption and a photo. The caption can be accessed using the {Caption} variable. Accessing the photo is a little more complicated. To make it easier for you to use consistent image sizes all over your blog, Tumblr provides you with scaled versions of photos.
For example, to make sure your photo isn’t wider than 500px, you could use the variable {PhotoURL-500}. Similarly, if you want to make sure the photo isn’t wider than 100px, you could use the variable {PhotoURL-100}.
For this Tumblr theme, I’m going to use {PhotoURL-500}.
We can use a Bootstrap card to show the photo and its caption.
The code to handle photo posts would then look like this:
[code language="html"]
{block:Photo}
<div class="card">
<img class="card-img-top" src="{PhotoURL-500}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{Caption}</h5>
</div>
</div>
{/block:Photo}
[/code]
Continue reading %Build a Simple Tumblr Theme with Bootstrap%

... more @ sitepoint.com

sitepoint.com