API tools faq
paste
Panzer_Themes

Masonry Pop-Out Theme

Panzer_Themes
Jun 12th, 2012
632
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.39 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. <head>
  13.  
  14. <script type="text/javascript"
  15. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  16. <script>
  17. $(document).ready(function() {
  18. //
  19. $('a.poplight[href^=#]').click(function() {
  20. var popID = $(this).attr('rel'); //Get Popup Name
  21. var popURL = $(this).attr('href'); //Get Popup href to define size
  22. var query= popURL.split('?');
  23. var dim= query[1].split('&');
  24. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  25. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://stephanielouie.comule.com/material/x2.gif" class="btn_close" title="Close it" alt="Close" /></a>');
  26. var popMargTop = ($('#' + popID).height() + 80) / 2;
  27. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  28. //Apply Margin to Popup
  29. $('#' + popID).css({
  30. 'margin-top' : -popMargTop,
  31. 'margin-left' : -popMargLeft
  32. });
  33. $('body').append('<div id="fade"></div>');
  34. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  35. return false;
  36. });
  37. $('a.close, #fade').live('click', function() {
  38. $('#fade , .popup_block').fadeOut(function() {
  39. $('#fade, a.close').remove(); //fade them both out
  40. });
  41. return false;
  42. });
  43. });
  44. </script>
  45.  
  46.  
  47. <link href='http://fonts.googleapis.com/css?family=Playball&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  48. <link href='http://fonts.googleapis.com/css?family=Zeyada&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  49.  
  50.  
  51. <title>{title}</title>
  52. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  53. <meta name="color:Background" content="#ffffff" />
  54. <meta name="color:Link" content="#000000" />
  55. <meta name="color:Hover" content="#d8d8d8" />
  56. <meta name="color:Blog Title" content="#d8d8d8" />
  57. <meta name="color:Pop Out Background" content="#fff"/>
  58. <meta name="color:Pop Out Links" content="#d8d8d8"/>
  59. <meta name="color:Link Border" content="#d8d8d8" />
  60. <meta name="color:Tiny Scrollbar Front" content="#d8d8d8" />
  61. <meta name="color:Tiny Scrollbar Back" content="#000" />
  62. <meta name="image:Sidebar" content=""/>
  63. <meta name="image:Background" content=""/>
  64. <meta name="if:Show Photo" content=""/>
  65. <meta name="if:Show Blog Title" content="1"/>
  66. <meta name="if:Title Shadow" content="1"/>
  67. <meta name="if:Rainbow Links" content=""/>
  68. <meta name="if:Captions On" content=""/>
  69. <meta name="if:Tiny Scrollbar" content="1"/>
  70. <meta name="if:Tiny Cursor" content="1"/>
  71. <meta name="if:Solid Link Border" content="0" />
  72. <meta name="text:Ask Title" content="ask" />
  73. <meta name="text:Above Ask Box" content="Message me!"/>
  74. <meta name="text:Title Size" content="30" />
  75. <meta name="text:Custom Link One" content="/" />
  76. <meta name="text:Custom Link One Title" content="link" />
  77. <meta name="text:Custom Link Two" content="/" />
  78. <meta name="text:Custom Link Two Title" content="link" />
  79. <meta name="text:Custom Link Three" content="/" />
  80. <meta name="text:Custom Link Three Title" content="link" />
  81.  
  82. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  83.  
  84. {block:indexpage}
  85. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  86.  
  87. <script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
  88.  
  89. <script src='http://static.tumblr.com/1s4z8hu/UTBlo4136/jquery.masonry.min.js' type='text/javascript'></script>
  90.  
  91. <script type="text/javascript" src="http://static.tumblr.com/jnmer2r/WKhljk73d/jquery.infinitescroll.min.js"></script>
  92.  
  93. {block:indexpage}
  94. <script>
  95. jQuery(window).load(function(){
  96. var $wall = $('#content');
  97. $wall.imagesLoaded(function(){
  98. $wall.masonry({
  99. singleMode: true,
  100. columnWidth: 260,
  101. itemSelector: '#entry'
  102. });
  103. });
  104. $wall.infinitescroll({
  105. navSelector : '#page-nav',
  106. nextSelector : '#page-nav a',
  107. itemSelector : '#entry',
  108. },
  109.  
  110. function( newElements ){
  111. $(newElements).hide();
  112. setTimeout(function(){
  113. $wall.masonry({ appendedContent: $(newElements) });
  114. },2000);
  115. setTimeout(function(){
  116. $(newElements).fadeIn('slow');
  117. },2100);
  118. },1000);
  119. });
  120. </script>
  121.  
  122.  
  123. <script>
  124. $.fn.imagesLoaded = function(callback){
  125. var elems = this.find('img'),
  126. len = elems.length,
  127. _this = this;
  128. if ( !elems.length ) {
  129. callback.call( this );}
  130. elems.bind('load',function(){
  131. if (--len <= 0){
  132. callback.call( _this );}
  133. }).each(function(){
  134. // cached images don't fire load sometimes, so we reset src.
  135. if (this.complete || this.complete === undefined){
  136. var src = this.src;
  137. // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
  138. // data uri bypasses webkit log warning (thx doug jones)
  139. this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  140. this.src = src;}
  141. });
  142. return this;};
  143. </script>
  144. {/block:indexpage}
  145.  
  146.  
  147. <style type="text/css">
  148. iframe#tumblr_controls{position:fixed !important;}
  149.  
  150. {block:iftinycursor}
  151. body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;}
  152. {/block:iftinycursor}
  153.  
  154. {block:iftinyscrollbar}
  155. ::-webkit-scrollbar {width: 5px; height: 4px; background: {color:Tiny Scrollbar Back}; }
  156.  
  157. ::-webkit-scrollbar-thumb { background-color: {color:Tiny Scrollbar Front}; -webkit-border-radius: 1ex}
  158. {/block:iftinyscrollbar}
  159.  
  160.  
  161. .popup_block{
  162. display: none;
  163. background: {color:pop out background};
  164. padding: 10px;
  165. font-family: cambria;
  166. float: left;
  167. font-size: 10px;
  168. position: fixed;
  169. top: 50%; left: 50%;
  170. z-index: 1;
  171. }
  172. img.btn_close {
  173. float: right;
  174. margin: -5px -5px 0 0;
  175. }
  176. *html .popup_block {
  177. position: absolute;
  178. -webkit-border-radius: 10px;
  179. -moz-border-radius: 10px;
  180. border-radius: 3px;
  181. }
  182.  
  183.  
  184. body{
  185. background-color: {color:Background};
  186. background-image:url({image:Background});
  187. background-attachment: fixed;
  188. background-repeat: repeat;
  189. background-attachment: fixed;
  190. font-family: cambria;
  191. font-size: 9px;
  192. margin: auto;
  193. padding: auto;
  194. }
  195.  
  196. a:link, a:active, a:visited{ color: {color:link}; text-decoration: none;}
  197. a:hover {color:{color:hover}; text-decoration: none;}
  198.  
  199.  
  200.  
  201. ul, ol, li{
  202. list-style:none;
  203. margin:0px;
  204. padding:0px;
  205. }
  206.  
  207. .notes img{
  208. width:9px;
  209. position:relative;
  210. top:3px;
  211. }
  212.  
  213. .permalink{
  214. display: block;
  215. font-size: 9px;
  216. text-align: right;
  217. }
  218.  
  219. #mee{
  220. position:fixed !important;
  221. width:auto;
  222. height:auto;
  223. right:3px;
  224. top:26px;
  225. }
  226.  
  227. div#center{
  228. position: relative;
  229. background-color:;
  230. width: 900px;
  231. padding: 0px 0px 0px 0px;
  232. margin: 0px 0px 0px 0px;
  233. }
  234.  
  235. div#links{
  236. margin: -100px 0px 0px 270px;
  237. float:left;
  238. font-family:cambria;
  239. font-size:8px;
  240. line-height:10px;
  241. }
  242.  
  243. .headerlinks {height:15px; width:250px; background-color:{color:Pop Out Links}; line-height:15px; margin-bottom:2px; text-align:center; float:center; -moz-border-radius:6px; border-radius:6px;}
  244. .headerlinks:hover {background-color: {color:Pop Out Background};}
  245.  
  246. div#content{
  247. {block:indexpage}
  248. width: 530px;
  249. {/block:indexpage}
  250. {block:permalinkpage}
  251. width: 365px;
  252. {/block:permalinkpage}
  253. margin: 0px 0px 0px 375px;
  254. padding: 0px 0px 0px 0px;
  255. background color:#ffffff;
  256. opacity: .8;
  257. }
  258.  
  259. #entry{
  260. {block:indexpage}
  261. width: 250px;
  262. height:auto;
  263. {/block:indexpage}
  264. {block:permalinkpage}
  265. width: 350px;
  266. height:auto;
  267. {/block:permalinkpage}
  268. background color:#ffffff;
  269. margin: 0px 0px 0px 0px;
  270. padding: 5px 0px 0px 5px;
  271. border: 0px solid #000000;
  272. float:left;
  273. overflow:hidden;
  274. overflow-y:hidden;
  275. }
  276.  
  277. #entry .perma{
  278. width: 250px;
  279. position: absolute;
  280. font-family: cambria;
  281. font-size: 9px;
  282. line-height: 15px;
  283. text-align: center;
  284. overflow:hidden;
  285. opacity: 0.0;
  286. background-color:#fcfcfc;
  287. }
  288.  
  289. #entry:hover .perma{
  290. overflow:visible;
  291. -webkit-transition: opacity 0.2s linear; opacity: 0.8;
  292. -webkit-transition: all 0.2s linear;
  293. -moz-transition: all 0.2s linear;
  294. transition: all 0.2s linear;
  295. }
  296.  
  297. #sidebar{
  298. width: 350px;
  299. height: auto;
  300. margin: 300px 0px 0px 1px;
  301. position: fixed !important;
  302. padding:5px;
  303. background-color:{color:background};
  304. font-family:cambria;
  305. font-size:10px;
  306. text-align: center;
  307. float: center;
  308. opacity:.8;
  309. }
  310.  
  311.  
  312. div#sidebar2{
  313. position:fixed !important;
  314. width: 100px;
  315. height:auto;
  316. margin: 290px 0px 0px 915px;
  317. padding:3px;
  318. text-align: center;
  319. font-family:'Zeyada', cursive;
  320. font-size:20px;
  321. background-color: {color:background};
  322. background-image:url({image:Background});
  323. {block:ifsolidlinkborder}
  324. border: 1px solid {color:Link Border};
  325. {/block:ifsolidlinkborder}
  326. border: 1px dashed {color:Link Border};
  327. }
  328.  
  329. .quote{
  330. font-size: {text:Title Size}px;
  331. font-family:'Zeyada', cursive;
  332. line-height:38px;
  333. color:{color:blogtitle};
  334. text-align:center;
  335. position: fixed !important;
  336. width:300px;
  337. height:auto;
  338. {block:iftitleshadow}
  339. text-shadow: 2px 2px 2px #888;
  340. {/block:iftitleshadow}
  341. background-color: transparent;
  342. padding: 2px;
  343. text-align:center;
  344. margin: 265px 0px 0px 10px;
  345. }
  346.  
  347. lions{
  348. font-family: cambria;
  349. color: {color:link};
  350. font-size: 8px;
  351. font-weight: normal;
  352. letter-spacing: 1px;
  353. text-transform: uppercase;
  354. }
  355.  
  356. </style>
  357. <link rel="shortcut icon" href="{Favicon}">
  358. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  359. <meta name="viewport" content="width=820" />
  360. </head>
  361. {block:ifrainbowlinks}<script type="text/javascript" src="http://static.tumblr.com/jn17x0j/2Zvltn7mc/rainbow_links.txt
  362. "></script>{/block:ifrainbowlinks}
  363. <body>
  364. <div id="mee">
  365. <a href="http://jagpanzer.tumblr.com/" target="_blank"><img src="http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png"></a>
  366. </div>
  367.  
  368. <div id="center">
  369.  
  370. <div id="sidebar"><div id="hide">
  371. {block:ifShowPhoto}<a href="/"><img src="{image:sidebar}" width="350px" ></a>{/block:ifShowPhoto}
  372. <br/>{description}<br>
  373. </div></div>
  374.  
  375. <div id="sidebar2"><a href="/">home</a> <br>
  376. <a href="#?w=500" rel="02" class="poplight">{text:Ask Title}</a><br>
  377. <a href="#?w=250" rel="links" class="poplight">links</a><br>
  378. <a href="http://jagpanzer.tumblr.com" target="blank">theme</a>
  379. </div>
  380.  
  381. {block:ifshowblogtitle}<div class="quote"><color="{color:blogtitle}"><a href="/">{Title}</a></font>
  382. </div>{/block:ifshowblogtitle}
  383.  
  384. <div id="content">
  385. {block:posts}
  386. <div id="entry">
  387.  
  388. {block:IndexPage}
  389. <div class="perma"><lions style=”font-size: 8pt; letter-spacing: 1px; ”>
  390. <a href="{permalink}">{NoteCount}</a> &middot; <a href="{ReblogURL}" target="_blank">REBLOG</a></style></span></div>
  391. {/block:IndexPage}
  392.  
  393. {block:text}
  394. {block:Title}<b>{Title}</b>{/block:Title}{Body}
  395. {/block:text}
  396.  
  397. {block:photo}
  398. {linkopentag}{block:indexpage}<a href="{Permalink}"><img src="{PhotoURL-400}" alt="{PhotoAlt}" width=250px>{/block:indexpage}{block:permalinkpage}<a href="{Permalink}"><img src="{PhotoURL-400}" alt="{PhotoAlt}" width=350px>{/block:permalinkpage}{linkclosetag}
  399. {block:ifCaptionsOn}{block:Caption}{Caption}{/block:Caption}{/block:ifCaptionsOn}
  400. {/block:photo}
  401.  
  402. {block:photoset}{photoset-250}{/block:photoset}
  403.  
  404. {block:Quote}
  405. "{Quote}"<br> - {block:source}{Source}{/block:source}
  406. {/block:Quote}
  407.  
  408. {block:Answer}
  409. {Asker} asked: {Question}<p>{Answer}
  410. {/block:Answer}
  411.  
  412. {block:Chat}
  413. {block:Title}<div class="title">{Title}</div>{/block:Title}
  414. <div class="chat">
  415. <div class="lines">
  416. {block:Lines}
  417. <div class="line {Alt}">{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</div>
  418. {/block:Lines}
  419. </div>
  420. </div>
  421. {/block:Chat}
  422.  
  423. {block:Link}
  424. <div class="link"><a href="{URL}" {Target}>{Name} &raquo;</a></div>
  425. {block:Description}<div class="copy">{Description}</div>{/block:Description}
  426. {/block:Link}
  427.  
  428. {block:Video}
  429. <div class="media">{Video-400}</div>
  430. {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
  431. {/block:Video}
  432.  
  433. {block:audio}
  434. <div class="audio">
  435. <div class="player">{AudioPlayerBlack}</div>
  436. <div class="meta">{PlayCountWithLabel}{block:ExternalAudio}<span class="download_external_audio"> &bull; <a href="{ExternalAudioURL}">{lang:Download}</a></span>{/block:ExternalAudio}</div></div>
  437. {block:Caption}<div class="copy">{Caption}</div>{/block:Caption}
  438. {/block:Audio}
  439.  
  440. {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption} {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} {block:HasTags}{block:Tags}#{Tag}{/block:Tags}{/block:hasTags}
  441.  
  442. {block:PostNotes}{PostNotes}
  443. {/block:PostNotes}
  444. {/block:PermalinkPage}
  445.  
  446. </div>
  447. {/block:posts}
  448. </div></div></div>
  449. <div id="links" class="popup_block">
  450. <br><br>
  451. <Center><span style="font-family:Zeyada;font-size:50px; line-height: 10px; text-shadow: 2px 2px 2px #888;">My Links</span>
  452. </span><br><br><br><br>
  453. <span style="font-family:cambria; font-size:10px;">
  454. <div class="headerlinks">{block:ifCustomLinkOneTitle}
  455. <a href="{text:Custom Link One}">{text:Custom Link One Title}</a>&nbsp;{/block:ifCustomLinkOneTitle}</div>
  456. <div class="headerlinks">{block:ifCustomLinkTwoTitle}
  457. <a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>&nbsp;{/block:ifCustomLinkTwoTitle}</div>
  458. <div class="headerlinks">{block:ifCustomLinkThreeTitle}
  459. <a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>&nbsp;{/block:ifCustomLinkThreeTitle}</div>
  460. {block:HasPages}{block:Pages}<div class="headerlinks"><a href="{URL}">{Label}</a></div>{/block:Pages}{/block:HasPages}</span>
  461. </div></div>
  462.  
  463.  
  464. <div id="02" class="popup_block">
  465.  
  466. <Center><span style="font-family:Zeyada;font-size:20px;">{text:Above Ask Box}</span>
  467. <br>
  468. <iframe frameborder="0" scrolling="no" width="100%" height="150" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  469.  
  470. </center></div>
  471. </div></div></div></div></div></div></div></div></div></div>
  472.  
  473. </body>
  474. </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!