Posted By

apaunchev on 01/26/11


Tagged

theme Framework custom tumblr


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

karstenrowe
abbyabigale
raz
kantiano
thinkxl
lookingforsome
bgc


Tumblr Custom Theme Framework


 / Published in: HTML
 

Every time I start coding a new Tumblr theme I find myself writing the same Tumblr tags over and over again. That's why I decided to create a boilerplate, or a framework, that I can reuse for my next projects.

I tried to cover most of the features included in the documentation, yet provide just the bare essentials so you can build up from there.

Have fun!

(v 1.3)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5.  
  6. <title>{Title}{block:PostSummary} &mdash; {PostSummary}{/block:PostSummary}</title>
  7.  
  8. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  9.  
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="apple-touch-icon" href="{PortraitURL-128}">
  12.  
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14.  
  15. <!--[if lt IE 9]>
  16. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  17. <![endif]-->
  18.  
  19. {CustomCSS}
  20. </style>
  21. </head>
  22.  
  23. <body>
  24. <header>
  25. <h1><a href="/">{Title}</a></h1>
  26.  
  27. {block:Description}
  28. <p>{Description}</p>
  29. {/block:Description}
  30. </header>
  31.  
  32. <div class="content">
  33. <section class="posts">
  34. {block:NoSearchResults}
  35. <h4>Sorry, nothing found for &ldquo;{SearchQuery}&rdquo;.</h4>
  36. {/block:NoSearchResults}
  37.  
  38. {block:TagPage}
  39. <h4>Posts tagged &lsquo;{Tag}&rsquo;</h4>
  40. {/block:TagPage}
  41.  
  42. {block:Posts}
  43. <article class="post {PostType}">
  44. {block:Text}
  45. {block:Title}
  46. <h2>{Title}</h2>
  47. {/block:Title}
  48.  
  49. {Body}
  50. {/block:Text}
  51.  
  52. {block:Photo}
  53. {LinkOpenTag}
  54. <img src="{PhotoURL-500}" alt="{PhotoAlt}">
  55. {LinkCloseTag}
  56.  
  57. {block:HighRes}
  58. <a href="{PhotoURL-HighRes}">View in high-res</a>
  59. {/block:HighRes}
  60.  
  61. {block:Exif}
  62. <dl>
  63. {block:Camera}
  64. <dt>Camera:</dt>
  65. <dd>{Camera}</dd>
  66. {/block:Camera}
  67.  
  68. {block:Aperture}
  69. <dt>Aperture:</dt>
  70. <dd>{Aperture}</dd>
  71. {/block:Aperture}
  72.  
  73. {block:Exposure}
  74. <dt>Exposure:</dt>
  75. <dd>{Exposure}</dd>
  76. {/block:Exposure}
  77.  
  78. {block:FocalLength}
  79. <dt>Focal Length:</dt>
  80. <dd>{FocalLength}</dd>
  81. {/block:FocalLength}
  82. </dl>
  83. {/block:Exif}
  84.  
  85. {block:Caption}
  86. {Caption}
  87. {/block:Caption}
  88. {/block:Photo}
  89.  
  90. {block:Photoset}
  91. {Photoset-500}
  92.  
  93. {block:Caption}
  94. {Caption}
  95. {/block:Caption}
  96. {/block:Photoset}
  97.  
  98. {block:Quote}
  99. <p>{Quote}</p>
  100.  
  101. {block:Source}
  102. <b class="source">{Source}</b>
  103. {/block:Source}
  104. {/block:Quote}
  105.  
  106. {block:Link}
  107. <h2><a href="{URL}"{Target}>{Name}</a></h2>
  108.  
  109. {block:Description}
  110. {Description}
  111. {/block:Description}
  112. {/block:Link}
  113.  
  114. {block:Chat}
  115. {block:Title}
  116. <h2>{Title}</h2>
  117. {/block:Title}
  118.  
  119. <ul>
  120. {block:Lines}
  121. <li class="{Alt}">
  122. {block:Label}
  123. <b>{Label}</b>
  124. {/block:Label}
  125.  
  126. {Line}
  127. </li>
  128. {/block:Lines}
  129. </ul>
  130. {/block:Chat}
  131.  
  132. {block:Audio}
  133. {block:AudioEmbed}
  134. {AudioEmbed-500}
  135. {/block:AudioEmbed}
  136.  
  137. {block:AudioPlayer}
  138. {block:AlbumArt}
  139. <img src="{AlbumArtURL}" alt="Album Art">
  140. {/block:AlbumArt}
  141.  
  142. {AudioPlayerBlack}
  143.  
  144. {block:ExternalAudio}
  145. <a href="{ExternalAudioURL}">Download</a>
  146. {/block:ExternalAudio}
  147. {/block:AudioPlayer}
  148.  
  149. {block:Caption}
  150. {Caption}
  151. {/block:Caption}
  152. {/block:Audio}
  153.  
  154. {block:Video}
  155. {Video-500}
  156.  
  157. {block:Caption}
  158. {Caption}
  159. {/block:Caption}
  160. {/block:Video}
  161.  
  162. {block:Answer}
  163. <h2>{Asker} asked: <q>{Question}</q></h2>
  164.  
  165. {Answer}
  166. {/block:Answer}
  167.  
  168. {block:Date}
  169. <footer>
  170. <ul>
  171. <li><a href="{Permalink}" title="{DayOfWeek}, {DayOfMonth} {Month} {Year}, {24Hour}:{Minutes}:{Seconds}">{TimeAgo}</a></li>
  172. {block:NoteCount}<li><a href="{Permalink}">{NoteCountWithLabel}</a></li>{/block:NoteCount}
  173. {block:HasTags}
  174. <li>Tags:
  175. <ul>
  176. {block:Tags}
  177. <li>
  178. <a href="{TagURL}">{Tag}</a>
  179. </li>
  180. {/block:Tags}
  181. </ul>
  182. </li>
  183. {/block:HasTags}
  184. {block:RebloggedFrom}<li>Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a></li>{/block:RebloggedFrom}
  185. {block:ContentSource}
  186. <li>Source:
  187. <a href="{SourceURL}">
  188. {block:SourceLogo}
  189. <img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}">
  190. {/block:SourceLogo}
  191.  
  192. {block:NoSourceLogo}
  193. {SourceTitle}
  194. {/block:NoSourceLogo}
  195. </a>
  196. </li>
  197. {/block:ContentSource}
  198. </ul>
  199. </footer>
  200. {/block:Date}
  201. </article> <!-- /post -->
  202.  
  203. {block:PostNotes}
  204. {PostNotes}
  205. {/block:PostNotes}
  206. {/block:Posts}
  207.  
  208. {block:PermalinkPagination}
  209. <nav>
  210. {block:PreviousPost}
  211. <a href="{PreviousPost}">&larr; Previous Post</a>
  212. {/block:PreviousPost}
  213.  
  214. {block:NextPost}
  215. <a href="{NextPost}">Next post &rarr;</a>
  216. {/block:NextPost}
  217. </nav>
  218. {/block:PermalinkPagination}
  219.  
  220. {block:Pagination}
  221. <nav>
  222. {block:PreviousPage}
  223. <a href="{PreviousPage}">&larr; Previous</a>
  224. {/block:PreviousPage}
  225.  
  226. <span>{CurrentPage}/{TotalPages}</span>
  227.  
  228. {block:NextPage}
  229. <a href="{NextPage}">Next &rarr;</a>
  230. {/block:NextPage}
  231. </nav>
  232. {/block:Pagination}
  233. </section> <!-- /posts -->
  234. </div> <!-- /content -->
  235.  
  236. <footer>
  237. <ul>
  238. {block:HasPages}
  239. {block:Pages}
  240. <li><a href="{URL}">{Label}</a></li>
  241. {/block:Pages}
  242. {/block:HasPages}
  243. {block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
  244. {block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
  245. <li><a href="/archive">Archive</a></li>
  246. <li><a href="{RSS}">RSS feed</a></li>
  247. </ul>
  248.  
  249. <p>Powered by <a href="http://www.tumblr.com/">Tumblr</a>.</p>
  250. </footer>
  251. </body>
  252. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: eurotransient on May 13, 2012

Thank you for this! Just what I needed. One thing, though: there's a tiny error in there. Your closing article tag for the photoset block has a misspelling: "artlcle" instead of "article".

Posted By: apaunchev on August 8, 2012

eurotransient, sorry about that. I updated the code -- it's more compact now but I also added support for more Tumblr features. Let me know if you notice any other bugs!

You need to login to post a comment.