atonalsthemes

Tremble Theme

Nov 18th, 2012
498
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.37 KB | None | 0 0
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  2. <head>
  3. <!--
  4. Tremble Theme
  5. Creator: Kelsey @ http://www.atonals.tumblr.com
  6. This text should never be deleted, nor should the credit link placed in the theme code.
  7.  
  8. credits to:
  9. http://masonry.desandro.com/docs/methods.html
  10. -->
  11.  
  12. <title>{Title}</title>
  13.  
  14. <link rel="shortcut icon" href="{Favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19.  
  20. <meta name="color:text" content="#3c3c3c"/>
  21. <meta name="color:links" content="#000000"/>
  22. <meta name="color:link hover" content="#dddddd"/>
  23. <meta name="color:background" content="#ffffff"/>
  24. <meta name="if:small images" content="0"/>
  25. <meta name="if:endless scroll" content="0" />
  26. <meta name="if:photo information" content="0" />
  27. <meta name="if:show captions" content="0"/>
  28. <meta name="text:blogtitle size" content="25" />
  29. <meta name="text:text size" content="12" />
  30.  
  31. <meta name="font:body" content="baskerville" />
  32. <meta name="font:title" content="Baskerville" />
  33.  
  34. <script src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>
  35. <script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
  36. {block:ifendlessscroll}<script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js">
  37. </script>{/block:ifendlessscroll}
  38.  
  39.  
  40.  
  41. <style type="text/css">
  42.  
  43. iframe#tumblr_controls {
  44. top: 0% !important;
  45. right:0% !important;
  46. position: absolute !important;}
  47.  
  48. body {background: {color:background};font-family: {font:body};font-size: {text:text size}px;color: {color:Text};line-height:15px;text-align: justify;}
  49.  
  50. a:hover {color: {color:link hover};-webkit-transition-duration: .5s;}
  51. a {color: {color:Links};text-decoration: none;-webkit-transition-duration: .5s;}
  52.  
  53. .caption {margin-top:5px;margin-bottom:5px;text-align:left;}
  54. .title {font-size:{text:blogtitle size}px; text-transform:uppercase;}
  55. .content{width:500px;margin-top:20px;margin:auto;{block:ifsmallimages}width:400px;{/block:ifsmallimages}}
  56.  
  57.  
  58. .post{margin-bottom:30px;width:500px; font-size:{text:text size}px;position:absolute;{block:ifsmallimages}width:400px;{/block:ifsmallimages}{block:permalinkpage}width:500px;{/block:permalinkpage}}
  59. .post img{{block:ifsmallimages}width:400px;{block:ifsmallimages}{block:permalinkpage}width:500px;{/block:permalinkpage}}
  60. .audio {background-color:#000000;width:500px;{block:ifsmallimages}width:400px;{/block:ifsmallimages}}
  61.  
  62.  
  63. .post:hover .photoinfo{opacity:1;-webkit-transition-duration: .5s;}
  64. .photoinfo {-webkit-transition-duration: .5s;opacity:.5;font-style:italic;margin-left:510px;{block:ifsmallimages}margin-left:410px;{/block:ifsmallimages}position:absolute;width:50px;text-align:left;}
  65.  
  66.  
  67.  
  68.  
  69.  
  70. ::-webkit-scrollbar-thumb:vertical { background-color:{color:Text}; height:100px; }
  71. ::-webkit-scrollbar-thumb:horizontal { background-color:{color:background}; height:10px !important; }
  72. ::-webkit-scrollbar { height:10px; width:10px; background-color:{color:background}; }
  73.  
  74.  
  75. .permalink {text-align:right;opacity:1;}
  76. .notetitle {padding-left:14px;text-transform:none;padding-bottom:10px; text-align:left;}
  77. .notes {margin-top:-4px; margin-bottom:25px; text-align:left;margin-left:-10px;}
  78. ol.notes li.note {padding:5px;}
  79. ol.notes {max-height: 250px;width:480px; overflow: auto;}
  80. img.avatar {display: none;}
  81.  
  82.  
  83. .blogtitle {font-size:{text:blogtitle size}px; font-family:{font:title}; line-height:15px;text-align:left;width:500px;position:fixed;bottom:5px;z-index:5000;{block:ifsmallimages}width:400px;{/block:ifsmallimages}}
  84. .header {margin:auto;width:500px;{block:ifsmallimages}width:400px;{/block:ifsmallimages}background-color:{color:background};
  85. }
  86.  
  87. .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
  88. #infscr-loading {opacity:0;}
  89.  
  90. .navigation{{block:ifendlessscroll}display:none;{/block:ifendlessscroll}{block:ifnotendlessscroll}position:fixed;bottom:0px;margin-left:510px;{block:ifsmallimages}margin-left:410px;{block:ifsmallimages}font-style:italic;{/block:ifnotendlessscroll}}
  91. {CustomCSS}
  92. </style>
  93.  
  94. <script>
  95. $(function(){
  96. var $container = $('.content');
  97. $container.imagesLoaded(function(){
  98. $container.masonry({
  99. itemSelector: '.post'
  100. });
  101. });
  102. $container.infinitescroll({
  103. navSelector : '.navigation',
  104. nextSelector : '.navigation a#next',
  105. itemSelector : '.post',
  106. animate:false,
  107. donetext: "No more posts to load" ,},
  108. function( newElements ) {
  109. var $newElems = $( newElements ).css({ opacity: 0 });
  110. $newElems.imagesLoaded(function(){
  111. $newElems.animate({ opacity: 1 });
  112. $container.masonry( 'appended', $newElems );
  113. });
  114. });
  115. });
  116. </script>
  117. </head>
  118. <body>
  119. <div class="header">
  120. {block:description}{description}{/block:description}<div style="text-align:right;font-style:italic;"><a href="/ask">message</a>&nbsp;<a href="/archive">archive</a>&nbsp;{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>&nbsp;{/block:Pages}{/block:HasPages}<a href="http://atonals.tumblr.com">theme</a><p><p></div></div>
  121.  
  122. <div class="content">
  123. <div class="blogtitle"><a href="/">{Title}</a></div>
  124. <div class="navigation">{block:Pagination}{block:NextPage}<p id="page_nav"><a href="{NextPage}" id="next">older</a>{/block:NextPage}{block:PreviousPage}<a href="{PreviousPage}"> // newer</a></p>{/block:PreviousPage}{/block:Pagination}</div>
  125. {block:Posts}
  126.  
  127. {block:Text}
  128. <div class="post">
  129. {block:Title}<div class="title">{Title}</div>{/block:Title}
  130. {Body}
  131. {block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
  132. {/block:IndexPage}
  133.  
  134. {block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
  135. Posted {TimeAgo} with {NoteCount} Notes
  136. {block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  137.  
  138. <div class="notes">
  139. {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  140. {/block:PermalinkPage}
  141.  
  142. </div>
  143. {/block:Text}
  144.  
  145.  
  146. {block:Photo}
  147. <div class="post"align="center">
  148. {block:ifphotoinformation}
  149. <div class="photoinfo">{NoteCountWithLabel}<br>{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  150. {/block:ifphotoinformation}
  151.  
  152. {block:IndexPage}
  153. <a href="{Permalink}">
  154. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  155. {block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}{/block:IndexPage}</a>
  156.  
  157. {block:PermalinkPage}
  158. <img src="{PhotoURL-500}" alt="{PhotoAlt}" width="500"/><div class="notetitle">{block:caption}{Caption}{/block:caption}
  159. Posted {TimeAgo} with {NoteCount} Notes
  160. {block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  161.  
  162. <div class="notes">
  163. {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  164. {/block:PermalinkPage}
  165.  
  166.  
  167. </div>
  168. {/block:Photo}
  169.  
  170.  
  171. {block:Photoset}
  172. <div class="post">
  173. {block:ifnotsmallimages}{Photoset-500}{/block:ifnotsmallimages}{block:ifsmallimages}{photoset-400}{/block:ifsmallimages}
  174. {block:ifshowcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  175. {/block:IndexPage}
  176.  
  177. {block:IndexPage}<div class="permalink"><a href="{Permalink}"><br>{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>{/block:IndexPage}
  178.  
  179. {block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
  180. Posted {TimeAgo} with {NoteCount} Notes
  181. {block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  182.  
  183. <div class="notes">
  184. {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  185. {/block:PermalinkPage}
  186. </div>
  187.  
  188. {/block:Photoset}
  189.  
  190. {block:Quote}
  191. <div class="post">
  192. {Quote}{block:Source}<br>written by <i>{Source}</i>{/block:Source}
  193. {block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>{/block:IndexPage}
  194. {block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
  195. Posted {TimeAgo} with {NoteCount} Notes
  196. {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  197.  
  198. <div class="notes">
  199. {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  200. {/block:PermalinkPage}
  201. </div>
  202. {/block:Quote}
  203.  
  204. {block:Link}
  205. <div class="post">
  206. <div class="title"><a href="{URL}">{Name}</a></div>
  207. {block:Description}{Description}{/block:Description}
  208. {block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
  209. {/block:IndexPage}
  210. </div>
  211. {/block:Link}
  212.  
  213. {block:Chat}
  214. <div class="post">
  215. {block:Title}<b>{Title}</b>{/block:Title}
  216. {block:Lines}{block:Label}<b>{Label}</b> "{Line}"<br>{/block:Label}{/block:Lines}
  217. {block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a></div>
  218. {/block:IndexPage}
  219. {block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
  220. Posted {TimeAgo} with {NoteCount} Notes
  221. {block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  222.  
  223. <div class="notes">
  224. {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  225. {/block:PermalinkPage}
  226. </div>
  227. {/block:Chat}
  228.  
  229. {block:Video}
  230. <div class="post">
  231. {block:ifnotsmallimages}{video-500}{/block:ifnotsmallimages}{block:ifsmallimages}{video-400}{/block:ifsmallimages}
  232. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  233. </div>{/block:Video}
  234.  
  235. {block:Audio}
  236. <div class="post">
  237. <div class="audio">
  238. {AudioPlayerBlack}</div>
  239. {Caption}
  240. {block:IndexPage}<div class="permalink"><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}</a>
  241. </div>{/block:IndexPage}
  242. {block:permalinkpage}<div class="notetitle">{block:caption}{Caption}{/block:caption}
  243. Posted {TimeAgo} with {NoteCount} Notes
  244. {block:HasTags}{block:Tags}<br><a href="{TagURL}">#{Tag}&nbsp;</a>{/block:Tags}{/block:HasTags}</div>
  245.  
  246. <div class="notes">
  247. {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  248. {/block:PermalinkPage}
  249. </div>
  250. {/block:Audio}
  251.  
  252.  
  253.  
  254.  
  255. {/block:Posts}
  256.  
  257. </div>
  258. </body>
  259. </html>
Advertisement
Add Comment
Please, Sign In to add comment