API tools faq
paste
Panzer_Themes

Bubble Masonry Theme

Panzer_Themes
May 25th, 2012
568
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.35 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. ┏━━━┓╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋┏━━━━┳┓
  3. ┃┏━┓┃╋╋╋╋╋╋╋╋╋╋╋╋╋╋╋┃┏┓┏┓┃┃
  4. ┃┗━┛┣━━┳━┓┏━━━┳━━┳━┓┗┛┃┃┗┫┗━┳━━┳┓┏┳━━┳━━┓
  5. ┃┏━━┫┏┓┃┏┓╋━━┃┃┃━┫┏┛╋╋┃┃╋┃┏┓┃┃━┫┗┛┃┃━┫━━┫
  6. ┃┃╋╋┃┏┓┃┃┃┃┃━━┫┃━┫┃╋╋╋┃┃╋┃┃┃┃┃━┫┃┃┃┃━╋━━┃
  7. ┗┛╋╋┗┛┗┻┛┗┻━━━┻━━┻┛╋╋╋┗┛╋┗┛┗┻━━┻┻┻┻━━┻━━┛
  8. Theme Made and copyrighted By PanzerThemes.Tumblr.com.
  9.  
  10. All themes are free for personal use! Please respect the credit and keep it in tact. You may make changes to the theme; however, that doesn't mean you created it. If you do remove the credit please place it in your FAQ or somewhere where your followers can be informed of creator.
  11. You will be reported if you do not follow the simple rules of using my themes. -->
  12.  
  13. <html lang="en">
  14. <head>
  15.  
  16. <!-- DEFAULT VARIABLES -->
  17. <meta name="color:Background" content="#FFF"/>
  18. <meta name="color:Box" content="#FFF"/>
  19. <meta name="color:Title" content="#000"/>
  20. <meta name="color:Text" content="#000"/>
  21. <meta name="color:Link" content="#777"/>
  22. <meta name="color:Hover" content="#FFADF1"/>
  23. <meta name="color:Navigation" content="#FFADF1"/>
  24. <meta name="color:Navigation Hover" content="#000"/>
  25. <meta name="color:Ask Bubble" content="#DBDBDB"/>
  26. <meta name="color:Tiny Scrollbar" content="#fff"/>
  27. <meta name="image:Background" content="http://25.media.tumblr.com/tumblr_ls3fi35uFE1qlg5hko7_r2_250.jpg"/>
  28. <meta name="text:Title Font Size" content="25"/>
  29. <meta name="text:Link" content="/"/>
  30. <meta name="text:Link Title" content="link"/>
  31. <meta name="image:Sidebar" content=""/>
  32. <meta name="if:Show Photo" content="0"/>
  33. <meta name="if:Show Title" content="1"/>
  34. <meta name="if:Tiny Scrollbar" content="1"/>
  35. <meta name="if:Arrow Cursor" content="1"/>
  36. <meta name="if:Inverted Fade" content="0"/>
  37. <meta name="if:Faded Images" content="1"/>
  38. <meta name="if:Pixel Font" content="0"/>
  39.  
  40.  
  41. <title>{Title}</title>
  42.  
  43. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  44.  
  45. {block:indexpage}
  46. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  47.  
  48. <script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
  49.  
  50. <script src='http://static.tumblr.com/1s4z8hu/UTBlo4136/jquery.masonry.min.js' type='text/javascript'></script>
  51.  
  52. <script type="text/javascript" src="http://static.tumblr.com/jnmer2r/WKhljk73d/jquery.infinitescroll.min.js"></script>
  53.  
  54. <script>
  55. jQuery(window).load(function(){
  56. var $wall = $('#posts');
  57. $wall.imagesLoaded(function(){
  58. $wall.masonry({
  59. singleMode: true,
  60. columnWidth: 312,
  61. itemSelector: '#space'
  62. });
  63. });
  64. $wall.infinitescroll({
  65. navSelector : '#page-nav',
  66. nextSelector : '#page-nav a',
  67. itemSelector : '#space',
  68. },
  69.  
  70. function( newElements ){
  71. $(newElements).hide();
  72. setTimeout(function(){
  73. $wall.masonry({ appendedContent: $(newElements) });
  74. },2000);
  75. setTimeout(function(){
  76. $(newElements).fadeIn('slow');
  77. },2100);
  78. },1000);
  79. });
  80. </script>
  81.  
  82.  
  83. <script>
  84. $.fn.imagesLoaded = function(callback){
  85. var elems = this.find('img'),
  86. len = elems.length,
  87. _this = this;
  88. if ( !elems.length ) {
  89. callback.call( this );}
  90. elems.bind('load',function(){
  91. if (--len <= 0){
  92. callback.call( _this );}
  93. }).each(function(){
  94. // cached images don't fire load sometimes, so we reset src.
  95. if (this.complete || this.complete === undefined){
  96. var src = this.src;
  97. // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
  98. // data uri bypasses webkit log warning (thx doug jones)
  99. this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  100. this.src = src;}
  101. });
  102. return this;};
  103. </script>
  104. {/block:Indexpage}
  105. <style type="text/css">
  106.  
  107. iframe#tumblr_controls{position:fixed !important;}
  108.  
  109. @font-face {font-family: "little";src: url('http://static.tumblr.com/4yxykdm/NMJlre6xz/04b_03___1_.ttf');}
  110.  
  111. @font-face {font-family:thin; src: url(http://static.tumblr.com/l3rkvkd/HZsm3o22l/sverigescriptclean_demo.ttf) format("truetype"); }
  112.  
  113. {block:iftinyscrollbar}
  114. ::-webkit-scrollbar {width: 8px; height: 4px; background: #FFFFFF ; }
  115.  
  116. ::-webkit-scrollbar-thumb { background-color: {color:Tiny Scrollbar}; -webkit-border-radius: 1ex; border: 1px solid black;}
  117. {/block:iftinyscrollbar}
  118.  
  119. body{
  120.  
  121. {block:ifArrowCursor}cursor: url(http://static.tumblr.com/9ji9tiw/iLgl5njtq/cursor.gif), auto;
  122. {/block:ifArrowCursor}
  123.  
  124. margin:0px; background-color: {color:Background}; background-image:url({image:Background});
  125. background-attachment: fixed; background-repeat: repeat; {block:ifPixelFont}font-family: little; font-size: 8px;{/block:ifPixelFont}{block:ifnotPixelFont} font-family: arial; font-size: 10px;{/block:ifnotPixelFont} line-height:10px; color:{color:Text};}
  126.  
  127. a, a:link, a:active, a:visited{
  128.  
  129. color:{color:Link};
  130. text-decoration: none;
  131. webkit-transition: all 0.8s linear;
  132. -webkit-transition: all 0.8s linear;
  133. -moz-transition: all 0.8s linear;
  134. transition: all 0.8s linear;
  135.  
  136. }
  137. a:hover {
  138. color:{color:Hover};
  139. text-decoration: none;
  140. }
  141.  
  142. #center{position:relative; width:1000px; overflow:auto; overflow-y:hidden;}
  143.  
  144. #posts{{block:IndexPage}margin-left: 280px; margin-top:3px; width: 650px;{/block:IndexPage} {block:PermalinkPage}margin-left: 280px; margin-top: 30px; width: 500px;{/block:PermalinkPage}height: auto; margin-bottom: 20px;}
  145.  
  146. #bottom{position: fixed; margin: 8px; width: auto; bottom: 0px; right: 0px; background-color:#FFF; padding: 5px; color:#777; font-family: Arial; font-size: 10px; line-height: 10px; opacity: 0.8;}
  147. #bottom a{color:#555;}
  148.  
  149. #space{{block:IndexPage}float: left; width: 300px;{/block:IndexPage} {block:PermalinkPage}width: 500px;{/block:PermalinkPage} padding: 3px; margin: 3px; background-color: {color:box};}
  150.  
  151. #space img{{block:IndexPage}max-width:300px;{/block:IndexPage}}
  152.  
  153. #side{width:240px; position: fixed; height: auto; background-color:{color:box}; padding:10px; margin-top: 33px; margin-left: 15px;}
  154.  
  155. #mee{
  156. position:fixed !important;
  157. width:auto;
  158. height:auto;
  159. right:3px;
  160. top:26px;
  161. }
  162.  
  163. div.navigate a{
  164. background: {color:Navigation};
  165. color:{color:text};
  166. display:inline-block;
  167. padding:0px;
  168. width: 50px;
  169. height: 50px;
  170. padding-left:3px;
  171. font-family: little;
  172. text-transform:uppercase;
  173. font-size: 6pt;
  174. text-align: center;
  175. position: center ;
  176. -webkit-transition-duration: .4s;
  177. z-index:3;
  178. -moz-border-radius: 160px;-webkit-border-radius: 160px;
  179. }
  180.  
  181.  
  182. div.navigate a:hover{
  183. background:{color:Navigation Hover};
  184. color:#fff;
  185. display:inline-block;
  186. padding:1px;
  187. text-align: center;
  188. width: 50px;
  189. -moz-border-radius: 0px;-webkit-border-radius: 0px;
  190. padding-left: 3px;
  191. z-index:2;
  192. }
  193. #pages{font-family: Tahoma; font-size: 9px; line-height: 9px; margin-top: 15px;}
  194.  
  195. #permapage{font-family: Arial; font-size: 10px; margin-bottom: 20px;}
  196.  
  197. .permalink{display: block; font: normal 10px Helvetica, Arial, Sans Serif; text-align: right; text-transform: none; padding: 1px;}
  198.  
  199. .permalink a{color:#999;}
  200.  
  201. .title{font-family: arial; font-size: 11px; line-height: 12px; color: {color:Title}; font-weight: normal;}
  202.  
  203. .bubble {align:right;background: {color:Ask Bubble}; margin:7px 0px 5px 66px;padding:10px;position: relative;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
  204.  
  205. .bubble p {margin:1px 0px;}
  206.  
  207. .bubble span {display:block;position:absolute;width:1px;height:1px;font-size: 0;line-height: 1px;left:-10px;top:10px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid {color:Ask Bubble};}
  208.  
  209. .askborder {float: left;margin: 1px 4px 0 0;padding: 1px; background: #000}
  210.  
  211. .blogtitle{
  212. font-family: thin;
  213. font-weight: normal;
  214. font-size: {text:Title Font Size}px;
  215. line-height: 30px;
  216. text-transform:;
  217. margin-bottom: 3px;}
  218.  
  219. .blogtitle a{color: #555;}
  220.  
  221. .video embed, .post div.video object {width:300px !important; height:200 !important;}
  222.  
  223. blockquote{padding:0px 0px 2px 3px; margin:0px 0px 2px 1px; border-left: 1px solid {color:Text};}
  224.  
  225. {block:ifFadedImages}img{-webkit-transition: opacity 0.8s linear; opacity: 0.75;}img:hover{-webkit-transition: opacity 0.8s linear; opacity: 1;}
  226. {/block:ifFadedImages}
  227.  
  228. {block:ifInvertedFade}img{-webkit-transition: opacity 0.7s linear; opacity: 50;}img:hover{-webkit-transition: opacity 0.7s linear; opacity: .7;}
  229. {/block:ifInvertedFade}
  230.  
  231. </style>
  232.  
  233. <link rel="shortcut icon" href="{Favicon}">
  234. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  235. <meta name="viewport" content="width=820" />
  236. </head>
  237. <body>
  238.  
  239. <div id="mee">
  240. <a href="http://jagpanzer.tumblr.com/" target="_blank"><img src="http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png"></a>
  241. </div>
  242.  
  243. <div id="center">
  244.  
  245. <div id="side">
  246. {block:ifShowTitle}<center><div class="blogtitle"><a href="/">{Title}</a></div><br><br>{/block:ifShowTitle}{block:ifShowPhoto}<a title="" href="/"><img src="{image:sidebar}" width=240px></a>{/block:ifShowPhoto}</center>
  247. <center>
  248. {Description}
  249. <p>
  250. <p>
  251. <div class="navigate">
  252. <center>
  253. <a href="/"><BR><BR>home</a>
  254. <a href="/ask"><BR><BR>ask</a>
  255. <a href="{text:Link}"><BR><BR>{text:Link Title}</a>
  256. <a href="http://jagpanzer.tumblr.com"><BR><BR>credit</a>
  257. </div>
  258. </div>
  259.  
  260. </div>
  261.  
  262. <div id="posts">
  263. {block:Posts}
  264. <div id="space">
  265.  
  266. {block:Text}
  267. {block:Title}<span class="title">{Title}</span>{/block:Title}
  268. <span class="entrytext">{Body}</span>
  269. {block:IndexPage}<div style="float: right; width: auto; font-size: 10px; line-height: 10px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div>{/block:IndexPage}
  270. {/block:Text}
  271.  
  272. {block:Answer}
  273. <div style="background-color:; padding: 4px; {block:IndexPage}width: 292px;{/block:IndexPage}{block:PermalinkPage}width:492px;{/block:PermalinkPage}"><img src="{AskerPortraitURL-48}" align="left" class="askborder"><div class="bubble"><span></span>{Asker}: {Question}&nbsp;</div>{Answer}{block:IndexPage}<div style="float: right; width: auto; font-size: 10px; line-height: 10px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div></div>{/block:IndexPage}
  274. {/block:Answer}
  275.  
  276. {block:Link}
  277. <a href="{URL}" class="title">{Name}</a>
  278. {block:Description}{Description}{/block:Description}
  279. {block:IndexPage}<div style="float: right; width: auto; font-size: 10px; line-height: 10px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div>{/block:IndexPage}
  280. {block:Link}
  281.  
  282. {block:Photo}{block:IndexPage}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=300px/></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=500px/>{/block:PermalinkPage}{/block:Photo}
  283.  
  284. {block:Photoset}
  285. {block:IndexPage}<center><div style="padding-top: 10px; padding-bottom: 10px; background-color:#FFFFFF;">{Photoset-250}</div></center>{/block:IndexPage}
  286. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  287. {block:IndexPage}<div style="float: right; width: auto; font-size: 10px; line-height: 10px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div>{/block:IndexPage}
  288. {/block:Photoset}
  289.  
  290. {block:Quote}
  291. <div style="background-color:FFFFFF; padding: 4px;">{Quote}<div style="margin-left: 30px; font-style: italic;">{block:Source}- {Source}{/block:Source}</div></div>
  292. {block:IndexPage}<div style="float: right; width: auto; font-size: 10px; line-height: 10px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div>{/block:IndexPage}
  293. {/block:Quote}
  294.  
  295. {block:Chat}
  296. {block:Title}<span class="title">{Title}</span>{/block:Title}
  297. <ul class="chat">
  298. {block:Lines}
  299. <li class="user_{UserNumber}">
  300. {block:Label}
  301. <span class="label">{Label}</span>
  302. {/block:Label}
  303.  
  304. {Line}
  305. </li>
  306. {/block:Lines}
  307. </ul>
  308. {block:IndexPage}<div style="float: right; width: auto; font-size: 10px; line-height: 10px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div>{/block:IndexPage}
  309. {/block:Chat}
  310.  
  311. {block:Audio}
  312. {block:IndexPage}<div style="background-color:#000; width: 300px;"><div style="width:300px; height:27px;">{AudioPlayerBlack}</div></div>{/block:IndexPage}
  313. {block:PermalinkPage}<div style="background-color:#000; width: 500px;"><div style="width:500px; height:27px;">{AudioPlayerBlack}</div></div>{/block:PermalinkPage}
  314. {block:IndexPage}<div style="float: right; width: auto; font-size: 9px; line-height: 9px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div>{/block:IndexPage}
  315. {/block:Audio}
  316.  
  317. {block:Video}
  318. {block:IndexPage}<div class="video">{Video-400}</div>{/block:IndexPage}
  319. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  320. {block:IndexPage}<div style="float: right; width: auto; font-size: 9px; line-height: 9px; font-family: century gothic;"><a href="{Permalink}">Posted {TimeAgo}</a></div>{/block:IndexPage}
  321. {block:Video}
  322.  
  323. {block:PermalinkPage}
  324. <div id="permapage"><div style="float: left; width: auto; font-weight: bold;">{block:Date}Posted on {DayofMonth} {Month}{/block:Date}</div>
  325.  
  326. <div style="float: right; width: auto; font-weight: bold;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>
  327.  
  328. <BR>{Caption}</div>
  329. {/block:PermalinkPage}
  330.  
  331. {block:PostNotes}{PostNotes}
  332. {/block:PostNotes}</div>
  333. {/block:Posts}
  334.  
  335. </div>
  336. </div>
  337. </div>
  338. </center>
  339. </body>
  340. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!