tharja

multicolumn base code

May 10th, 2014
2,550
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.41 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6. *.。.☆゜・*:.。.☆**☆.。.:*・゜☆.。.* *.。.☆゜・*:.。.☆**☆.。.:*・゜☆.。.*
  7.  
  8. multicolumn base by coroncina.tumblr.com
  9. credits aren't necessary if you want to use this as a base code
  10. but if you're just changing fonts/doing minor changes
  11. don't release this as your own original theme, ty
  12. anyway, do your best!
  13.  
  14. *.。.☆゜・*:.。.☆**☆.。.:*・゜☆.。.**.。.☆゜・*:.。.☆**☆.。.:*・゜☆.。.*
  15. -->
  16.  
  17. <meta name="color:background" content=""/>
  18. <meta name="color:text" content=""/>
  19. <meta name="color:link" content=""/>
  20. <meta name="color:post bg" content=""/>
  21. <meta name="color:border" content=""/>
  22.  
  23. <meta name="image:background" content=""/>
  24.  
  25. <meta name="if:infinite scroll" content="1"/>
  26.  
  27. <meta name="text:link 1" content=""/>
  28. <meta name="text:link 1 url" content=""/>
  29.  
  30. <link rel="shortcut icon" href="{Favicon}">
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  32. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  33.  
  34. <style type="text/css">
  35.  
  36. #content {
  37. margin-right:170px;
  38. margin-top:30px;
  39. width: 1000px; /*this makes the number of columns increase or decrease btw*/
  40. float: right;
  41. }
  42.  
  43. body {
  44. background-color: {color:background};
  45. background-image: url({image:background});
  46. background-attachment:fixed;background-repeat:repeat;
  47. background-position:center;
  48. font-family: arial;
  49. font-size: 11px;
  50. color: {color:text};
  51. }
  52.  
  53. a {
  54. color: {color:link};
  55. text-decoration:none;
  56. }
  57.  
  58. blockquote {
  59. padding-left:5px;
  60. border-left:2px solid;
  61. color: {color:text};
  62. margin-left:3px;
  63. margin-bottom:5px;
  64. }
  65.  
  66. iframe, img, embed, object, video {
  67. max-width: 100%;
  68. }
  69.  
  70. img {
  71. height: auto;
  72. width: auto;
  73. }
  74.  
  75. #sidebar {
  76. height:auto;
  77. width:100px;
  78. margin-top:210px;
  79. padding:2px;
  80. margin-left:156px;
  81. position:fixed;
  82. background: {color:post bg};
  83. color:{color:text};
  84. border: 1px solid {color:border};
  85. font-size: 10px;
  86. font-family:arial;
  87. text-align:center;
  88. }
  89.  
  90. article {
  91. background: {color:post bg};
  92. margin: 20px;
  93. margin-left:5px;
  94. margin-bottom:8px;
  95. padding: 5px;
  96. padding-bottom:9px;
  97. width: 400px;
  98. border: 1px solid {color:border};
  99. }
  100.  
  101. .chat span {
  102. float: left;
  103. margin-right: 10px;
  104. }
  105.  
  106. #perma {
  107. text-align: left;
  108. position: relative;
  109. margin-top:2px;
  110. padding-top: 4px;
  111. font-family: arial;
  112. padding:2px;
  113. font-size: 10px;
  114. padding-left:3px;
  115. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  116. }
  117.  
  118. .tumblr_audio_player {
  119. width: 400px;
  120. height: 100px;
  121. overflow: hidden;
  122. position: relative;
  123. z-index: 1000;
  124. }
  125.  
  126. {block:ifnotinfinitescroll}
  127. .pagi {
  128. font-size:15px;
  129. font: {select:font};
  130. color: {color:link};
  131. text-align:center;
  132. padding:2px;
  133. padding-top:5px;
  134. }
  135. {/block:ifnotinfinitescroll}
  136.  
  137. {block:ifinfinitescroll}
  138. .pagi {
  139. display:none;
  140. }
  141. {/block:ifinfinitescroll}
  142.  
  143. </style>
  144. </head>
  145. <body>
  146.  
  147. <title>{Title}</title>
  148. <div id="sidebar">{Description}
  149. <a href="{text:link 1 url}">{text:link 1}</a>
  150.  
  151. {block:Pagination}
  152. <div class="pagination">
  153. <div class="pagi">
  154. {block:PreviousPage}<a href="{PreviousPage}"><</a>{/block:PreviousPage}
  155. {block:NextPage}<a href="{NextPage}">></a>{/block:NextPage}
  156. </div></div>
  157. {/block:Pagination}
  158. </div>
  159. <nav>
  160. <ul>
  161. {block:HasPages}
  162. {block:Pages}
  163. <li> <a href="{URL}">{Label}</a></li>
  164. {/block:Pages}
  165. {/block:HasPages}
  166. </ul>
  167. </nav>
  168.  
  169. <div id="content">
  170. {block:Posts}
  171. <article>
  172. {block:Text}
  173. <div class="text">
  174. {block:Title}<h1 class="title">
  175. <a href="{Permalink}">{Title}</a>
  176. </h1>{/block:Title}
  177. {Body}
  178. {/block:Text}
  179.  
  180. {block:Photo}
  181. <div class="photo">
  182. {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}
  183. {block:Caption}{Caption}{/block:Caption}
  184. {/block:Photo}
  185.  
  186. {block:Photoset}
  187. <div class="photoset">
  188. {block:IndexPage}
  189. {Photoset-400}
  190. {/block:IndexPage}
  191. {block:PermalinkPage}
  192. {Photoset-400}
  193. {/block:PermalinkPage}
  194. {block:Caption}{Caption}{/block:Caption}
  195. {/block:Photoset}
  196.  
  197. {block:Quote}
  198. <div class="quote">
  199. {Quote}
  200. {block:Source}<cite>{Source}</cite>{/block:Source}
  201. {/block:Quote}
  202.  
  203. {block:Link}
  204. <div class="link">
  205. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  206. {block:Description}{Description}{/block:Description}
  207. {/block:Link}
  208.  
  209. {block:Chat}
  210. <div class="chat">
  211. <ul>
  212. {block:Lines}
  213. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  214. {/block:Lines}
  215. </ul>
  216. {/block:Chat}
  217.  
  218. {block:Audio}
  219. <div class="audio">
  220. {block:AlbumArt}
  221. <img src="{AlbumArtURL}" width="100px" height="100px"/>
  222. {/block:AlbumArt}
  223. {AudioPlayerWhite}
  224. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  225. {block:TrackName}<b>track:</b> {TrackName}{/block:TrackName}</span><br>
  226. {block:Artist}<b>artist:</b> {Artist}{/block:Artist}
  227. {block:Caption}{Caption}{/block:Caption}
  228. {/block:Audio}
  229.  
  230. {block:Video}
  231. <div class="video">
  232. <div class="video-player">{Video-400}</div>
  233. {block:Caption}{Caption}{/block:Caption}
  234. {/block:Video}
  235.  
  236. {block:Answer}
  237. <div class="answer">
  238. {Asker} asked: <b>{Question}</b>
  239. {Answer}
  240. {/block:Answer}
  241. </div>
  242.  
  243. <div id="perma">
  244. {TimeAgo} - <a href="{Permalink}">{NoteCountWithLabel}</a>
  245. {block:RebloggedFrom}<a href="{ReblogParentURL}">{ReblogParentName}</a> - <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  246. {block:HasTags}
  247. <div id="tags">
  248. {block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
  249. {/block:HasTags}
  250. </div>
  251. {block:PermalinkPage}
  252. {block:Date}{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}{/block:Date}
  253. {block:NoteCount} - {NoteCountWithLabel}{/block:NoteCount}
  254. {block:HasTags}</br>tagged as: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  255. {block:RebloggedFrom}</br>source: <a href="{ReblogRootURL}">{ReblogRootName}</a> - via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
  256. {block:PostNotes}{PostNotes}{/block:PostNotes}
  257. </div></div>
  258. {/block:PermalinkPage}
  259. </footer>
  260. </article>
  261. {/block:Posts}
  262. </div>
  263.  
  264. <!-- heres the stuff that will make your multicolumn theme look nice, so messing around with it shouldnt be necessary!-->
  265. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  266. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  267. {block:IfInfiniteScroll}
  268. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  269. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  270. {/block:IfInfiniteScroll}
  271.  
  272. <script>
  273. (function() {
  274. var $tumblelog = $('#content');
  275. {block:IfInfiniteScroll}
  276. $tumblelog.infinitescroll({
  277. navSelector : ".pagination",
  278. nextSelector : ".pagination a:first",
  279. itemSelector : "article",
  280. bufferPx : 50,
  281. done : "",
  282. loading: {
  283. img : "",
  284. msgText: ""
  285. },
  286. },
  287. function( newElements ) {
  288. var $newElems = $( newElements ).css({ opacity: 0 });
  289. $newElems.imagesLoaded(function(){
  290. $newElems.animate({ opacity: 1 });
  291. $tumblelog.masonry( 'appended', $newElems);
  292. });
  293. }
  294. );
  295. {/block:IfInfiniteScroll}
  296. $tumblelog.imagesLoaded( function(){
  297. $tumblelog.masonry({
  298. columnWidth: function( containerWidth ) {
  299. return containerWidth / 100;
  300. }
  301. });
  302. });
  303. })();
  304. </script>
  305. </body>
  306. </html>
Advertisement
Add Comment
Please, Sign In to add comment