Old Tumblr Theme Template

Ah, the good ol’ days of Tumblr! Remember those custom themes that reflected each blogger’s unique style? Today, we’re taking a trip down memory lane and dissecting the code of a classic Tumblr theme, retrieved from a post dated March 22nd, 2016.

Decoding the Theme:

This theme utilizes HTML and CSS to structure the layout and style of the blog. Let’s break it down:

HTML Structure:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="color:Background1" content="#000" />
    <meta name="color:Background2" content="#3b627e" />
    <meta name="color:Text" content="#3b627e" />
    <meta name="color:Link" content="#3b627e" />
    <title>
      {Title}{block:SearchPage}, Search results for:
      {SearchQuery}{/block:SearchPage}
    </title>
    <link rel="shortcut icon" href="{Favicon}" />
    <link rel="alternate" type="application/rss+xml" href="{RSS}" />
    <style type="text/css">
      body {
        background-color: {
          color: Background1;
        }
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 62.5%;
        color: #0a385c;
      }
      a {
        text-decoration: none;
        color: {
          color: Link;
        }
      }
      a:hover {
        color: #ff0000;
      }
      #rzSearch {
        position: fixed;
        top: 0;
        background-color: #83acc9;
        width: 100%;
        height: 3.5em;
        border-bottom: solid 0.3em #0a385c;
      }
      #wrapper {
        background-color: #fafdfc;
        margin: 0 auto;
        min-width: 50em;
        width: 70em;
      }
    </style>
  </head>
  <body>
    <div id="rzSearch">
      <div id="TitleTop">{Title}</div>
      <div id="search">
        <form action="/search" method="get">
          <input type="hidden" name="scope" value="all_of_tumblr" />
          <input type="text" name="q" class="query" value="{SearchQuery}" />
          <input type="submit" value="Go" />
        </form>
      </div>
    </div>
    <div id="wrapper">
      <div id="title">
        <a href="/">{Title}</a>
      </div>
      <div id="content">{block:Posts}...{/block:Posts}</div>
    </div>
  </body>
</html>

- The `
<body>
  ` element holds the entire content of the page. - The `
  <div>
    ` elements act as containers for different sections like the header, content
    area, sidebar, and navigation. - Specific classes are assigned to these divs
    for targeted styling with CSS.
  </div>
</body>

CSS Styling:
- The <style> tag houses the CSS code that defines the visual appearance of the blog.
- It includes properties like background colors, font sizes, margins, and paddings.
- You’ll see selectors targeting elements by their IDs (e.g., #rzSearch) and classes (e.g., .post).

Key Features:

Search Bar: A prominent search bar sits at the top, allowing visitors to find specific content.
Customizable Header: The header displays the blog title and optionally, a header image.
About Section: A dedicated section showcases the blogger’s description and profile picture.
Post Display: Each post is wrapped in a <div> with styling for different post types (photos, videos, etc.).
Sidebar: The sidebar can include elements like recent tweets from a connected Twitter account or avatars of followed blogs.
Navigation: The bottom navigation bar provides links to essential pages like Home, Archive, RSS Feed, and Random.