API tools faq
paste
Panzer_Themes

Pop-Out Theme

Panzer_Themes
May 25th, 2012
608
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.48 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. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  14. <html lang="en">
  15. <head>
  16. <script type="text/javascript"
  17. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  18. <script>
  19. $(document).ready(function() {
  20. //
  21. $('a.poplight[href^=#]').click(function() {
  22. var popID = $(this).attr('rel'); //Get Popup Name
  23. var popURL = $(this).attr('href'); //Get Popup href to define size
  24. var query= popURL.split('?');
  25. var dim= query[1].split('&');
  26. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  27. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i707.photobucket.com/albums/ww76/sheltsm/Simplicity%20graphics/pixels/x.gif" class="btn_close" title="Close it" alt="Close" /></a>');
  28. var popMargTop = ($('#' + popID).height() + 80) / 2;
  29. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  30. //Apply Margin to Popup
  31. $('#' + popID).css({
  32. 'margin-top' : -popMargTop,
  33. 'margin-left' : -popMargLeft
  34. });
  35. $('body').append('<div id="fade"></div>');
  36. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  37. return false;
  38. });
  39. $('a.close, #fade').live('click', function() {
  40. $('#fade , .popup_block').fadeOut(function() {
  41. $('#fade, a.close').remove(); //fade them both out
  42. });
  43. return false;
  44. });
  45. });
  46. </script>
  47.  
  48. <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
  49. <!-- DEFAULT VARIABLES -->
  50. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  51. <meta name="color:Background" content="#E2E1E1"/>
  52. <meta name="color:Sidebar" content="#fff"/>
  53. <meta name="color:Entry Background" content="#fff"/>
  54. <meta name="color:Pop Out Background" content="#fff"/>
  55. <meta name="color:text" content="#000"/>
  56. <meta name="color:Link" content="#000"/>
  57. <meta name="color:Hover" content="#fff"/>
  58. <meta name="image:Sidebar" content=""/>
  59. <meta name="if:Show sidebar Image" content="0"/>
  60. <meta name="image:Background" content=""/>
  61. <meta name="if:Blog Title" content="1"/>
  62. <meta name="if:Tiny Scrollbar" content="1"/>
  63. <meta name="if:Tiny Cursor" content="0"/>
  64. <meta name="text:Hover Title" content="Links"/>
  65. <meta name="text:Username" content=""/>
  66. <meta name="text:Above Ask Box" content="Message me!"/>
  67. <meta name="text:Link One" content="" />
  68. <meta name="text:Link One Title" content="link" />
  69. <meta name="text:Link Two" content="" />
  70. <meta name="text:Link Two Title" content="link" />
  71. <meta name="text:Link Three" content="" />
  72. <meta name="text:Link Three Title" content="link" />
  73. <meta name="text:Link Four" content="" />
  74. <meta name="text:Link Four Title" content="link" />
  75. <title>{Title}</title>
  76. <script type="text/javascript" src="http://static.tumblr.com/uiqhh9x/J4wm0fipy/jquery-1.7.1.min.js"></script>
  77. <link rel="shortcut icon" href="{Favicon}">
  78. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  79. {block:Description}
  80. <meta name="description" content="{MetaDescription}" />
  81. {/block:Description}
  82. <script type="text/javascript" src="http://static.tumblr.com/uiqhh9x/YGPlywnob/jquery.min.js"></script>
  83.  
  84.  
  85. <style type="text/css">
  86.  
  87. iframe#tumblr_controls{position:fixed !important;}
  88.  
  89. {block:iftinycursor}
  90. body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;}
  91. {/block:iftinycursor}
  92.  
  93. {block:iftinyscrollbar}
  94. ::-webkit-scrollbar {width: 8px; height: 4px; background: #FFFFFF; }
  95.  
  96. ::-webkit-scrollbar-thumb { background-color: #ffffff; -webkit-border-radius: 1ex; border: 1px solid black;}
  97. {/block:iftinyscrollbar}
  98.  
  99. a:hover{-webkit-transition-duration: 0.5s; outline: none; color:{color:text};; -moz-outline-style: none;}
  100.  
  101. </style>
  102.  
  103. <style type="text/css">
  104.  
  105. #hovr
  106.  
  107. #hov a {display:block}
  108.  
  109.  
  110. #hov .hovdes {margin-left:-40px;filter: alpha(opacity = 0);opacity:0;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  111.  
  112.  
  113. #hov:hover .hovdes {margin-left:17px; -webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out; filter: alpha(opacity = 100);filter: alpha(opacity = 100);opacity:100;}
  114.  
  115.  
  116. .popup_block{
  117. display: none;
  118. background: {color:pop out background};
  119. padding: 10px;
  120. font-family: cambria;
  121. float: left;
  122. font-size: 10px;
  123. position: fixed;
  124. top: 50%; left: 50%;
  125. z-index: 1;
  126. }
  127. img.btn_close {
  128. float: right;
  129. margin: -5px -5px 0 0;
  130. }
  131. *html .popup_block {
  132. position: absolute;
  133. -webkit-border-radius: 10px;
  134. -moz-border-radius: 10px;
  135. border-radius: 3px;
  136. }
  137.  
  138. body {
  139. margin:10px;
  140. background-color: {color:Background};
  141. background-image:url({image:Background});
  142. background-attachment: fixed;
  143. background-repeat: repeat;}
  144. body, div, p, textarea, submit, input{
  145. font-family: cambria;
  146. font-size: 10px;
  147. line-height:10px;
  148. letter-spacing:1px;
  149. color:{color:Text};
  150. }
  151.  
  152. a:link, a:active, a:visited{
  153. color: {color:Link};
  154. text-decoration: none;
  155. }
  156.  
  157. div#center{
  158. margin:auto;
  159. position:relative;
  160. width:840px;
  161. background-color: {color:Background};
  162. overflow:auto;
  163. overflow-y:hidden;
  164. }
  165.  
  166.  
  167. div#content{
  168. width:520px;
  169. padding:2px;
  170. padding-top: 1px;
  171. margin-left: 325px;
  172. }
  173. .permalink a{
  174. color: #000;}
  175.  
  176. #mee{
  177. position:fixed !important;
  178. width:auto;
  179. height:auto;
  180. right:3px;
  181. top:26px;
  182. }
  183.  
  184. .links2{
  185. font-size: 10px;
  186. font-family: cambria;
  187. text-align: center;
  188. margin-left: 0px;
  189. text-color:#000000;
  190. }
  191.  
  192. .links2 a {
  193. padding:0px;
  194. padding-top:0px;
  195. margin-top:0px;
  196. margin-left:0px;
  197. font-family: cambria;
  198. font-size:10px;
  199. }
  200.  
  201.  
  202. .links2:hover {
  203. -webkit-transform: rotate(360deg);
  204. }
  205.  
  206. div#sidephoto{
  207. position:fixed !important;
  208. width:250px;
  209. height:auto;
  210. margin: -116px 0px 0px -3px;
  211. padding-top:0px;
  212. padding-left:-2px;
  213. margin-bottom: 6px;
  214. background-color:white;
  215. border: 4px solid transparent;
  216. }
  217.  
  218. @font-face { font-family: "king"; src: url('http://themes.googleusercontent.com/static/fonts/sueellenfrancisco/v2/TwHX4vSxMUnJUdEz1JIgrrtXaZAN_aGv07JTA91X2HI.woff'); }
  219.  
  220. .navtitle{
  221. font-family: amatic;
  222. font-size:33px;
  223. line-height: 22px;
  224. letter-spacing: 1px;
  225. color: #777;
  226. -webkit-transition: color 0.5s ease-out;
  227. -moz-transition: color 0.5s ease-out;
  228. }
  229.  
  230. .links {
  231. display:inline-block;
  232. width: 50px;
  233. background-color: #fff;
  234. line-height: 10px;
  235. font-size: 8px;
  236. font-family: cambria;
  237. text-transform: normal;
  238. padding: 1px;
  239. text-align:center;
  240. -webkit-transition-duration: .3s;
  241. border: 1px dotted;
  242. }
  243.  
  244. .links:hover {
  245. background-color: #e1e1e1;
  246. -webkit-transition-duration: .5s;
  247. text-align: left;
  248. }
  249.  
  250. .nav a {
  251. padding:3px;
  252. padding-top:4px;
  253. margin-top:2px;
  254. margin-left:0px;
  255. display:block;
  256. font-family:cambria;
  257. font-size:10px;
  258. text-align: left;
  259. text-transform:normal;
  260. text-decoration:none;
  261. color:#000;
  262. background-color:#F7F7F7;
  263. -webkit-transition: all 0.5s ease-out;
  264. -moz-transition: all 0.5s ease-out;
  265. transition: all 0.5s ease-out;
  266.  
  267. }
  268.  
  269. .nav a:hover{
  270. color: #000;
  271. background-color: lightgrey;
  272. text-align: center;
  273. border-left:8px solid #eee;
  274. -webkit-transition: all 0.3s ease-out;
  275. -moz-transition: all 0.3s ease-out;
  276. transition: all 0.3s ease-out;
  277. font-style:none;
  278. text-decoration:none;
  279. -webkit-border-radius: 10px;
  280. -moz-border-radius: 10px;
  281. border-radius: 3px;
  282. }
  283.  
  284.  
  285. #sidebar{
  286. float: right;
  287. position:fixed;
  288. background: {color:Sidebar};
  289. padding: 10px;
  290. margin-left: 10px;
  291. width:200px;
  292. line-height: 10px;
  293. height: auto;
  294. text-align:center;
  295. height: auto;
  296. margin: 159px 8px 20px 0px;
  297. margin-top: 15%;
  298. }
  299. #sidebar a:hover {
  300. -webkit-transition: all 0.2s linear;
  301. -webkit-transition: all 0.2s linear;
  302. -moz-transition: all 0.2s linear;
  303. transition: all 0.2s linear;
  304. }
  305.  
  306.  
  307. @font-face {font-family: "littlefont";src: url('http://static.tumblr.com/4yxykdm/NMJlre6xz/04b_03___1_.ttf');}
  308.  
  309. #postnotes{
  310. text-align: auto;}
  311.  
  312. #postnotes blockquote{
  313. border: 4px;}
  314.  
  315. .title{
  316. font-family: cambria;
  317. font-size: 14px;
  318. line-height: 13px;
  319. color: {color:Title};
  320. letter-spacing: 1;
  321. font-weight: normal;
  322. padding:0px 0px 0px 0px;
  323. }
  324.  
  325. .title2{
  326. position:fixed !important;
  327. font-family: amatic sc;
  328. font-size: 30px;
  329. line-height: auto;
  330. margin-top: auto;
  331. color: black;
  332. letter-spacing: 4;
  333. font-weight: normal;
  334. padding:0px 0px 0px 0px;
  335. }
  336.  
  337. .entry {
  338. float: left;
  339. display: block;
  340. margin: 8px;
  341. {block:indexpage}
  342. width: 400px;
  343. {/block:indexpage}
  344. {block:permalinkpage}
  345. width: 500px;
  346. {/block:permalinkpage}
  347. overflow:hidden;
  348. -moz-box-shadow: 0 0 6px #555;
  349. -webkit-box-shadow: 0 0 6px#555;
  350. box-shadow: 0 0 6px #555;
  351. background: {color:entry background};
  352. {block:indexpage}
  353. opacity: .9;
  354. filter: alpha(opacity = 80);
  355. {/block:indexpage}
  356. }
  357. .entry:hover {
  358. -webkit-transition: opacity 0.4s linear;
  359. opacity: 1;
  360. -moz-transition: all 0.4s linear;
  361. transition: all 0.4s linear;
  362. filter: alpha(opacity = 100);
  363. }
  364. .entry img {
  365. display: block;
  366. }
  367. blockquote, q {
  368. quotes: "«" "»" "'" "'";
  369. padding-left: 5px;
  370. }
  371. a, a:link, a:active, a:visited{
  372.  
  373. color:{color:Link};
  374. text-decoration: none;
  375. webkit-transition: all 0.8s linear;
  376. -webkit-transition: all 0.8s linear;
  377. -moz-transition: all 0.8s linear;
  378. transition: all 0.8s linear;
  379.  
  380. }
  381. a:hover {
  382. color:{color:Hover};
  383. text-decoration: none;
  384. }
  385. }
  386. ol.notes img {
  387. width: 15px;
  388. position: relative;
  389. top: 3px;
  390. display: inline;
  391. }
  392. .photoset, .photoset_row, div.photoset_photo, .photoset img, .html_photoset {
  393.  
  394. margin: 0 auto;
  395. }
  396.  
  397. .text {
  398. padding: 8px;
  399. }
  400.  
  401. ol.notes {
  402. padding: 5 10px;
  403. }
  404.  
  405. #notes {
  406. letter-spacing: 1px;}
  407.  
  408.  
  409. .perma {
  410. opacity: 0.0;
  411. filter: alpha(opacity = 0);
  412. margin-top: -21px;
  413. width: px;
  414. height: 30px;
  415. line-height: 30px;
  416. font-size: 9px;
  417. position:absolute;
  418. text-align: center;
  419. z-index:9999991;
  420. color: #fff;
  421. } a.p {
  422.  
  423. color: #fff; }
  424. .entry:hover .perma {
  425.  
  426. -webkit-transition: opacity 0.4s linear;
  427. opacity: 1;
  428. -moz-transition: all 0.4s linear;
  429. transition: all 0.4s linear;
  430. filter: alpha(opacity = 100);
  431.  
  432. }
  433.  
  434. select {
  435. font-size: 9px;
  436. width: 100px;
  437. margin-left: 10px;
  438.  
  439. }
  440. option {
  441. font-size: 9px;
  442. width: 100px;
  443. text-align: left;
  444.  
  445. }
  446. input[type=button]
  447. {
  448. font-size: 9px;
  449. }
  450. .rep {
  451. width: 24px;
  452. height: 20px;
  453. overflow: hidden;
  454. position: relative;
  455. z-index: 9999999;
  456. position: absolute;
  457. margin-top: 5px;
  458. margin-left: 5px;
  459. }
  460. .rep img{
  461. width: 24px;
  462. height: 20px;
  463. line-height: 30px;
  464. display: inline;
  465. }
  466. .not { position: absolute;
  467. background: url("http://static.tumblr.com/uiqhh9x/X6Ym17xp2/middle.png");
  468. height: 20px;
  469. font-size: 11px;
  470. line-height: 20px;
  471. color: #fff;
  472. position: absolute;
  473. margin-top: 5px;
  474. margin-left: 32px;
  475. padding-left: 4px;
  476. padding-right: 4px;
  477. -moz-border-radius: 2px;
  478. border-radius: 2px;
  479. }
  480. .not a{
  481. color: #fff;
  482. }
  483. {CustomCSS}
  484. </style>
  485. </head>
  486. <meta name="viewport" content="width=820" />
  487. </head>
  488. <body>
  489.  
  490. <div id="mee">
  491. <a href="http://jagpanzer.tumblr.com/" target="_blank"><img src="http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png"></a>
  492. </div>
  493.  
  494. <div id="cage">
  495. <div id="contain">
  496. <div id="sidebar">
  497. {block:ifblogtitle}<a href="/"><span style="font-family:amatic sc;font-size:30px;">{Title}</span></a>{/block:ifblogtitle}
  498. <center>
  499. {block:ifshowsidebarimage}<a href="/"><img src="{image:sidebar}" width=200px;></a>{/block:ifshowsidebarimage}
  500. <br><br>{Description}
  501.  
  502. <div id="hov">
  503. <div class="title2"><br>{text:hover title}</a></div> <br>
  504.  
  505. <div class="hovdes"> <a href="#?w=500" rel="02" class="poplight">message</a> • <a href="#?w=250" rel="links" class="poplight">navigate</a>
  506.  
  507. <span class="links2">
  508. </div></div>
  509. </script>
  510. </span>
  511.  
  512. </center>
  513.  
  514. <div align="right">
  515. </div>
  516.  
  517. </div>
  518.  
  519.  
  520. <div id="content">
  521. {block:Posts}
  522. <div class="entry">
  523. {block:IndexPage}<div class="perma">
  524. <div class="likep"><a id="like{PostID}" href="javascript:likelink('{PostID}','{Permalink}','');">
  525. <img src="http://static.tumblr.com/lba83dv/OUUltd958/spacer.gif" width="21" height="20" alt="Like this post" id="likeimage{PostID}"/></a></div> <div class="rep"><a href="{reblogurl}" target="_blank"><img src="http://static.tumblr.com/uiqhh9x/OAClzwwao/reblog.png" width="30"/></a></div>
  526. <div class="not"><a href="{Permalink}">{NoteCount}</a></div>
  527.  
  528.  
  529. </div>
  530. {/block:IndexPage}
  531. {block:Text}
  532. <div class="text">
  533. {block:Title}
  534. <h3><a href="{Permalink}">{Title}</a></h3>
  535. {/block:Title}
  536. {Body}
  537. </div>
  538. {/block:Text}
  539.  
  540. {block:Photo}
  541. {block:IndexPage}
  542. {LinkOpenTag}<img src="{PhotoURL-400}" a href="{Permalink} alt="{PhotoAlt}"/>{LinkCloseTag}
  543. {/block:IndexPage}
  544. {block:permalinkpage}{LinkOpenTag}
  545. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
  546. {/block:permalinkpage}
  547.  
  548. {/block:Photo}
  549.  
  550. {block:Photoset}
  551. {block:IndexPage}
  552. {Photoset-400}
  553. {/block:IndexPage}
  554. {block:permalinkpage}
  555. {Photoset-500}
  556. {/block:permalinkpage}
  557. {/block:Photoset}
  558.  
  559. {block:Quote}
  560. <div class="text">
  561. "{Quote}"
  562. {block:Source}
  563. <div class="source">-{Source}</div>
  564. {/block:Source}
  565. </div>
  566. {/block:Quote}
  567.  
  568. {block:Link}
  569. <div class="text">
  570. <a href="{URL}" class="link" {Target}>{Name}</a>
  571. {block:Description}
  572. <div class="description">{Description}</div>
  573. {/block:Description}
  574. </div>
  575. {/block:Link}
  576.  
  577. {block:Chat}
  578. <div class="text">
  579. {block:Title}
  580. <h3><a href="{Permalink}">{Title}</a></h3>
  581. {/block:Title}
  582. <ul class="chat">
  583. {block:Lines}
  584. <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label}
  585.  
  586. {Line} </li>
  587. {/block:Lines}
  588. </ul>
  589. </div>
  590. {/block:Chat}
  591.  
  592. {block:Video}
  593.  
  594. {block:IndexPage}
  595. {Video-400}
  596. {/block:IndexPage}
  597. {block:permalinkpage}
  598. {Video-500}
  599. {/block:permalinkpage}
  600. {/block:Video}
  601.  
  602. {block:Audio}
  603. {AudioPlayerBlack}
  604. <div class="text">
  605. {block:Caption}
  606. {Caption}
  607. {/block:Caption}
  608. </div>
  609. {/block:Audio}
  610. {block:PermalinkPage}
  611. <center><div style="text-align: center; letter-spacing: 1px;">
  612. {block:Date}
  613. {Month} {DayOfMonth}, {Year}
  614. {/block:Date} / {NoteCountWithLabel}
  615. {block:RebloggedFrom}
  616. <br>Originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a><br>Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>
  617. {/block:RebloggedFrom}<br>
  618. {block:HasTags}
  619. {block:Tags}
  620. <a href="{TagURL}"># {Tag} </a>
  621. {/block:Tags}
  622. </div>
  623. {/block:HasTags}
  624. </center>
  625. <br>
  626. {block:PostNotes}
  627. <div id="notes">
  628. <br>
  629. {PostNotes}
  630. </div>
  631. {/block:PostNotes}
  632. </div>
  633. {/block:PermalinkPage}
  634. </div>
  635. {/block:Posts}
  636. </div>
  637. </div>
  638. </body>
  639. <div id="links" class="popup_block">
  640. <br><center><div class="navtitle"><center><span style="font-family:amatic sc;font-size:50px;">navigation:</span></center></div>
  641. <br>
  642. <div class="nav a"><div style="border-left:1px solid #fff;border-right:1px solid #fff;"><a href="{text:Link One}">{text:Link One Title}</a></div></div>
  643.  
  644. <div class="nav a"><div style="border-left:1px solid #fff;border-right:1px solid #fff;"><a href="{text:Link Two}"> {text:Link Two Title} </a></div></div>
  645.  
  646. <div class="nav a"><div style="border-left:1px solid #fff;border-right:1px solid #fff;"><a href="{text:Link Three}"> {text:Link Three Title} </a></div></div>
  647.  
  648. <div class="nav a"><div style="border-left:1px solid #fff;border-right:1px solid #fff;"><a href="{text:Link Four}"> {text:Link Four Title} </a></div></div>
  649.  
  650. <div class="nav a"><div style="border-left:1px solid #fff;border-right:1px solid #fff;"><a href="http://jagpanzer.tumblr.com"> Theme </a></div></div>
  651.  
  652. </div>
  653.  
  654. <div id="02" class="popup_block">
  655.  
  656. <Center><span style="font-family:amatic sc;font-size:30px;">{text:Above Ask Box}</span>
  657. <br>
  658. <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">
  659.  
  660. </center></div>
  661. </div></div></div></div></div></div></div></div></div></div>
  662. </html>
Advertisement
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!