Posted By

67ideas on 05/22/10


Tagged

html scaffold tumblr


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

kantiano
jamwil
benackles
michellebracken


Tumblr Theme Scaffold


 / Published in: HTML
 

URL: http://67ideas.com

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.

  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>

Report this snippet  

You need to login to post a comment.