Tumblr Theme Scaffold


/ Published in: HTML
Save to your folder(s)

This is a bare-bones, centered Tumblr layout with no styling, and a right-aligned sidebar. It has blocks for every content type, so completing this with your custom styling should be quick and easy.


Copy this code and paste it in your HTML
  1. <head>
  2. <meta name="color:Background" content="#3b627e">
  3. <title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}
  7. <meta name="description" content="{MetaDescription}" />
  8. {/block:Description}
  9.  
  10. <style type="text/css">
  11. html { }
  12. body { width: 900px; margin: 0 auto; }
  13. #title { }
  14. #wrapper { }
  15. #posts { float: left; padding: 30px; width: 520px; }
  16. #side { float: left; width: 200px; }
  17. #footer { clear: both; }
  18. {CustomCSS}
  19. </style>
  20. </head>
  21.  
  22. <body>
  23. <h1 id="title">{Title}</h1>
  24.  
  25. <div id="wrapper">
  26. <ol id="posts">
  27. {block:Posts}
  28. {block:Text}
  29. <li class="post text">
  30. {block:Title}
  31. <h3><a href="{Permalink}">{Title}</a></h3>
  32. {/block:Title}
  33.  
  34. {Body}
  35. </li>
  36. {/block:Text}
  37.  
  38. {block:Photo}
  39. <li class="post photo">
  40. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  41.  
  42. {block:Caption}
  43. <div class="caption">{Caption}</div>
  44. {/block:Caption}
  45. </li>
  46. {/block:Photo}
  47.  
  48. {block:Photoset}
  49. <li class="post photoset">
  50. {Photoset-500}
  51.  
  52. {block:Caption}
  53. <div class="caption">{Caption}</div>
  54. {/block:Caption}
  55. </li>
  56. {/block:Photoset}
  57.  
  58. {block:Quote}
  59. <li class="post quote">
  60. "{Quote}"
  61.  
  62. {block:Source}
  63. <div class="source">{Source}</div>
  64. {/block:Source}
  65. </li>
  66. {/block:Quote}
  67.  
  68. {block:Link}
  69. <li class="post link">
  70. <a href="{URL}" class="link" {Target}>{Name}</a>
  71.  
  72. {block:Description}
  73. <div class="description">{Description}</div>
  74. {/block:Description}
  75. </li>
  76. {/block:Link}
  77.  
  78. {block:Chat}
  79. <li class="post chat">
  80. {block:Title}
  81. <h3><a href="{Permalink}">{Title}</a></h3>
  82. {/block:Title}
  83.  
  84. <ul class="chat">
  85. {block:Lines}
  86. <li class="{Alt} user_{UserNumber}">
  87. {block:Label}
  88. <span class="label">{Label}</span>
  89. {/block:Label}
  90.  
  91. {Line}
  92. </li>
  93. {/block:Lines}
  94. </ul>
  95. </li>
  96. {/block:Chat}
  97.  
  98. {block:Video}
  99. <li class="post video">
  100. {Video-500}
  101.  
  102. {block:Caption}
  103. <div class="caption">{Caption}</div>
  104. {/block:Caption}
  105. </li>
  106. {/block:Video}
  107.  
  108. {block:Audio}
  109. <li class="post audio">
  110. {AudioPlayerBlack}
  111.  
  112. {block:Caption}
  113. <div class="caption">{Caption}</div>
  114. {/block:Caption}
  115. </li>
  116. {/block:Audio}
  117.  
  118. {NoteCountWithLabel}
  119. {/block:Posts}
  120.  
  121. {block:SearchPage}
  122. {block:NoSearchResults}
  123. </ol>
  124.  
  125. <div id="side">
  126. {block:Description}
  127. <p id="description">{Description}</p>
  128. {/block:Description}
  129.  
  130. <img id="avatar" src="{PortraitURL-64}" alt="User Avatar" />
  131.  
  132. <form id="search" action="/search" method="get">
  133. <input type="text" name="q" value="{SearchQuery}"/>
  134. <input type="submit" value="Search"/>
  135. </form>
  136. </div>
  137.  
  138. <p id="footer">
  139. {block:PreviousPage}
  140. <a id="back_button" href="{PreviousPage}">&#171; Previous</a>
  141. {/block:PreviousPage}
  142.  
  143. {block:NextPage}
  144. <a href="{NextPage}">Next &#187;</a>
  145. {/block:NextPage}
  146.  
  147. <a href="/archive">Archive</a>
  148. </p>
  149. </div>
  150. </body>
  151. </html>

URL: http://67ideas.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.