API tools faq
paste
colinfirth

n°22

colinfirth
Dec 8th, 2013
245
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <!--
  5. n°22 by colinfirth.tumblr.com
  6. PLEASE DO NOT REMOVE THE CREDIT OR REDISTRIBUTE
  7. -->
  8.  
  9. <html><head>
  10. <title>{title}</title>
  11. <base target="_self">
  12.  
  13. <link rel="shortcut icon" href="{favicon}">
  14. <meta name="image:header" content=""/>
  15. <meta name="image:audio bg" content="http://static.tumblr.com/1fe0fb2eb9179fdba195906aa5c7bc29/ygd3n2x/TPHmil7fo/tumblr_static_diagonal_striped_brick.png">
  16.  
  17. <meta name="color:background" content="#ffffff"/>
  18. <meta name="color:subbackground" content="#eeeeee"/>
  19. <meta name="color:topbar" content="#eeeeee"/>
  20. <meta name="color:postbackground" content="#ffffff"/>
  21. <meta name="color:text" content="#111111"/>
  22.  
  23. <meta name="color:link" content="#999999"/>
  24. <meta name="color:linkhover" content="#e8e8e8"/>
  25. <meta name="color:linkhighlight" content="#FFFF00"/>
  26. <meta name="color:linkhoverhighlight" content="#eeeeee"/>
  27.  
  28. <meta name="color:toplinkbackground" content="#ffffff"/>
  29. <meta name="color:toplink" content="#999999"/>
  30. <meta name="color:toplinkhover" content="#444444"/>
  31. <meta name="color:tophoverbackground" content="#e0e0e0"/>
  32.  
  33. <meta name="text:text font" content="helvetica"/>
  34. <meta name="text:link font" content="helvetica"/>
  35. <meta name="text:title font" content="bell mt"/>
  36. <meta name="text:top font" content="justus, georgia, arial, times"/>
  37.  
  38. <meta name="text:text size" content="9px"/>
  39. <meta name="text:title size" content="32px"/>
  40. <meta name="text:top size" content="32px"/>
  41. <meta name="text:link size" content="7px"/>
  42.  
  43.  
  44. <meta name="text:Link 1 title" content="" />
  45. <meta name="text:Link 1" content="" />
  46. <meta name="text:Link 2 title" content="" />
  47. <meta name="text:Link 2" content="" />
  48. <meta name="text:Link 3 title" content="" />
  49. <meta name="text:Link 3" content="" />
  50. <meta name="text:Link 4 title" content="" />
  51. <meta name="text:Link 4" content="" />
  52.  
  53.  
  54. <script type="text/javascript"
  55. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  56. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  57. <script>
  58. (function($){
  59. $(document).ready(function(){
  60. $("[title]").style_my_tooltips();
  61. });
  62. })(jQuery);
  63. </script>
  64.  
  65.  
  66. <style type="text/css">
  67.  
  68. #s-m-t-tooltip{
  69. letter-spacing: 1px;
  70. font-family: {text:link font};
  71. font-size: 6px {text:xlink size};
  72. font-style: ;
  73. text-transform: uppercase;
  74. position:absolute;
  75. margin-top: 10px;
  76. z-index:9999;
  77. background-color:white;
  78. color:#000000;
  79. padding:4px 5px 4px 6px;
  80. border:1px solid #eee;
  81. -webkit-transition:all 0.3s;
  82. -moz-transition:all 0.3s;
  83. -ms-transition:all 0.3s;
  84. -o-transition:all 0.3s;
  85. transition:all 0.3s;
  86. }
  87.  
  88. iframe#tumblr_controls {
  89. top:5px;
  90. right:10px!important;
  91. position:fixed !important;
  92. -webkit-filter: invert(1);
  93. opacity: .6;
  94. filter:alpha(opacity=60);
  95. -moz-opacity: .6;
  96. }
  97.  
  98.  
  99. ::selection {
  100. background-color:{color:back};
  101. color: {color:link};
  102. }
  103.  
  104. ::-moz-selection {
  105. background-color:{color:back};
  106. color: {color:link};
  107. }
  108. ::-webkit-selection {
  109. background-color:{color:back};
  110. color: {color:link};
  111. }
  112.  
  113.  
  114. img{
  115. max-width:100%;
  116. }
  117.  
  118.  
  119. .post {
  120. text-align: left;
  121. padding: 10px;
  122. margin-bottom: 30px;
  123. margin-top: 50px;
  124. background-color: {color:postbackground};
  125. }
  126.  
  127. #posts {
  128. bottom: 100px;
  129. top: 50px;
  130. width: 520px;
  131. height: auto;
  132. float: center;
  133. position: relative;
  134. }
  135.  
  136. body {
  137. line-height: 125%;
  138. background: none;
  139. font-family: {text:text font};
  140. font-size: {text:text size};
  141. color: {color:text};
  142. }
  143.  
  144.  
  145. a {
  146. cursor:none;
  147. -webkit-transition:all 0.3s;
  148. -moz-transition:all 0.3s;
  149. -ms-transition:all 0.3s;
  150. -o-transition:all 0.3s;
  151. transition:all 0.3s;
  152. text-decoration: none;
  153. color: {color:link};
  154. background-color: {color:};
  155. }
  156.  
  157.  
  158. a:hover {
  159. border-bottom: px dotted #444444;
  160. cursor:pointer;
  161. -webkit-transition:all 0.3s;
  162. -moz-transition:all 0.3s;
  163. -ms-transition:all 0.3s;
  164. -o-transition:all 0.3s;
  165. transition:all 0.3s;
  166. color: {color:linkhover};
  167. background-color: {color:};
  168. }
  169.  
  170.  
  171. a img {background-color: none !important;}
  172. img a:hover {background-color: transparent !important;}
  173.  
  174.  
  175. blockquote{
  176. margin-left: 10px;
  177. padding-left: 8px;
  178. border-left: 4px solid #ffffff;
  179. }
  180.  
  181. .small {
  182. font-size: {text:text size};
  183. }
  184.  
  185. small {
  186. font-size: {text:text size};
  187. }
  188.  
  189. #small {
  190. font-size: {text:text size};
  191. }
  192.  
  193.  
  194.  
  195. .tbar {
  196. padding-top: 50px;
  197. font: {text:link size} {text:body font};
  198. text-decoration: none;
  199. position: center;
  200. text-align: center;
  201. width: 400px;
  202. z-index: 1100;
  203. color: {color:back};
  204. background: {color:};
  205. }
  206.  
  207. .tbar a {
  208. border-bottom: px solid #ddd;
  209. margin-left: 5px;
  210. letter-spacing: 1px;
  211. padding: 4px 4px 4px 5px;
  212. font-family: {text:link font};
  213. line-height: 20px;
  214. font-size: {text:link size};
  215. text-shadow: #eee 0px 1px 1px;
  216. text-transform: uppercase;
  217. color: {color:text};
  218. background-color:{color:xsubbackground};
  219. font-weight: ;
  220. -webkit-transition: all 0.3s ease-in-out;
  221. -moz-transition: all 0.3s ease-in-out;
  222. -o-transition: all 0.3s ease-in-out;
  223. transition: all 0.3s ease-in-out;
  224. }
  225.  
  226. .tbar a:hover {
  227. -webkit-transition: all 0.3s ease-in-out;
  228. -moz-transition: all 0.3s ease-in-out;
  229. -o-transition: all 0.3s ease-in-out;
  230. transition: all 0.3s ease-in-out;
  231. color: {color:link};
  232. background-color: {color:background};
  233. border-bottom: 1px solid #ddd;
  234. }
  235.  
  236.  
  237. #navigation a.links:hover {color:#aaa;background:#fff;
  238. -webkit-transition: all 0.7s ease-in-out;
  239. -moz-transition: all 0.7s ease-in-out;
  240. -o-transition: all 0.7s ease-in-out;
  241. -ms-transition: all 0.7s ease-in-out;
  242. transition: all 0.7s ease-in-out;}
  243.  
  244. .descr {
  245. text-align: justify;
  246. letter-spacing: px;
  247. font-weight: ;
  248. font-style: ;
  249. text-transform: lowercase;
  250. margin-bottom: 0px;
  251. margin-top: -10px;
  252. padding: 25px 29px 25px 29px;
  253. background-color: #f2f2f2;
  254. color: {color:text};
  255. font-family: {text:body font};
  256. font-size: {text:body size};
  257. }
  258.  
  259. .descr a {
  260. -webkit-transition:all 0.3s;
  261. -moz-transition:all 0.3s;
  262. -ms-transition:all 0.3s;
  263. -o-transition:all 0.3s;
  264. transition:all 0.3s;
  265. line-height: 100%;
  266. border: 0px #fff;
  267. padding: 0px;
  268. font-family: {text:text font};
  269. font-size: {text:text size};
  270. font-style: ;
  271. color: {color:text};
  272. text-transform: uppercase;
  273. }
  274.  
  275. .descr a:hover {
  276. -webkit-transition:all 0.3s;
  277. -moz-transition:all 0.3s;
  278. -ms-transition:all 0.3s;
  279. -o-transition:all 0.3s;
  280. transition:all 0.3s;
  281. line-height: 100%;
  282. border: 0px #fff;
  283. padding: 0px;
  284. font-family: {text:text font};
  285. font-style: ;
  286. color: {color:linkhover};
  287. text-transform: uppercase;
  288. }
  289.  
  290.  
  291. #pagination {
  292. letter-spacing: px;
  293. text-align: justify;
  294. width: 100%;
  295. position: fixed;
  296. z-index: 1100;
  297. margin-bottom: 4px;
  298. margin-left: -4px;
  299. color: {color:background};
  300. bottom: 5px;
  301. opacity: 1;
  302. line-height: 100%;
  303. font-family: {text:link font};
  304. font-size: 9px;
  305. }
  306.  
  307. #pagination a {
  308. -webkit-transition:all 0.3s;
  309. -moz-transition:all 0.3s;
  310. -ms-transition:all 0.3s;
  311. -o-transition:all 0.3s;
  312. transition:all 0.3s;
  313. color: {color:text};
  314. }
  315.  
  316.  
  317. .links {
  318. line-height: 85%;
  319. -webkit-transition:all 0.3s;
  320. -moz-transition:all 0.3s;
  321. -ms-transition:all 0.3s;
  322. -o-transition:all 0.3s;
  323. transition:all 0.3s;
  324. margin-top: -10px;
  325. padding-bottom: 1px;
  326. border-bottom: px dotted {color:back};
  327. text-transform: lowercase;
  328. font-weight: bold;
  329. font-style: ;
  330. letter-spacing: px;
  331. text-shadow: #eee 0px 1px 1px;
  332. text-align: justify;
  333. font-family: {text:title font};
  334. font-size: {text:title size};
  335. color: {color:link};
  336. }
  337.  
  338. .links:hover {
  339. -webkit-transition:all 0.3s;
  340. -moz-transition:all 0.3s;
  341. -ms-transition:all 0.3s;
  342. -o-transition:all 0.3s;
  343. transition:all 0.3s;
  344. color: {color:linkhover};
  345. }
  346.  
  347. .title {
  348. margin-top: -5px;
  349. line-height: 85%;
  350. margin-bottom: 20px;
  351. margin-top: px;
  352. text-transform: lowercase;
  353. font-weight: bold;
  354. font-style: ;
  355. letter-spacing: px;
  356. text-shadow: #eee 0px 1px 1px;
  357. text-align: justify;
  358. font-family: {text:title font};
  359. font-size: {text:title size};
  360. }
  361.  
  362.  
  363.  
  364. h1 {
  365. margin-bottom: 21px;
  366. border-bottom: px solid #000;
  367. text-shadow: #eee 0px 1px 1px;
  368. line-height: 100%;
  369. text-transform: lowercase;
  370. font-weight: bold;
  371. font-style: ;
  372. letter-spacing: px;
  373. font-family: {text:title font};
  374. font-size: {text:title size};
  375. color: {color:text};
  376. }
  377.  
  378. h2 {
  379. text-align: justify;
  380. font-weight: lighter;
  381. font-style: ;
  382. letter-spacing: px;
  383. text-transform: ;
  384. padding-bottom: px;
  385. padding-left: 50px;
  386. padding-right: 50px;
  387. font-family: {text:text font};
  388. font-size: {text:text size};
  389. }
  390.  
  391. h3 {
  392. font-weight: lighter;
  393. text-transform: ;
  394. font-size: {text:text size};
  395. color: {color:text};
  396. font-family: {text:text font};
  397. }
  398.  
  399. h4 {
  400. line-height: 10%;
  401. text-transform: lowercase;
  402. font-style: ;
  403. font-weight: bold;
  404. letter-spacing: px;
  405. margin-top: -25px;
  406. padding-bottom: 0px;
  407. text-shadow: #eee 0px 1px 1px;
  408. font-family: {text:title font};
  409. font-size: {text:title size};
  410. color: {color:text};
  411. }
  412.  
  413. h6 {
  414. margin-top: 10px;
  415. margin-bottom: 10px;
  416. text-transform: ;
  417. text-align: justify;
  418. letter-spacing: px;
  419. padding-top: 10px;
  420. padding-bottom: 10px;
  421. padding-left: 30px;
  422. padding-right: 30px;
  423. font-weight: lighter;
  424. font-style: italic;
  425. font-size: {text:text size};
  426. font-family: {text:text font};
  427. background-color: {color:post};
  428. }
  429.  
  430.  
  431. h7 {
  432. text-align: justify;
  433. letter-spacing: px;
  434. font-weight: bold;
  435. font-style: ;
  436. color: {color:text};
  437. font-family: {text:top font};
  438. line-height: 22px;
  439. font-size: {text:top size};
  440. text-shadow: #eee 0px 1px 1px;
  441. text-transform: lowercase;
  442. }
  443.  
  444. h7 a {
  445. margin-left: -18px;
  446. text-align: justify;
  447. letter-spacing: px;
  448. font-weight: bold;
  449. font-style: ;
  450. color: {color:text};
  451. font-family: {text:top font};
  452. line-height: 22px;
  453. font-size: {text:top size};
  454. text-shadow: # 0px 0px 0px;
  455. text-transform: lowercase;
  456. }
  457.  
  458. ask {
  459. line-height: 50%;
  460. text-transform: lowercase;
  461. font-weight: bold;
  462. font-style: ;
  463. letter-spacing: px;
  464. font-family: {text:title font};
  465. font-size: {text:title size};
  466. text-shadow: #eee 0px 1px 1px;
  467. }
  468.  
  469. ask a {
  470. -webkit-transition:all 0.3s;
  471. -moz-transition:all 0.3s;
  472. -ms-transition:all 0.3s;
  473. -o-transition:all 0.3s;
  474. transition:all 0.3s;
  475. color: {color:link};
  476. }
  477.  
  478. ask a:hover {
  479. -webkit-transition:all 0.3s;
  480. -moz-transition:all 0.3s;
  481. -ms-transition:all 0.3s;
  482. -o-transition:all 0.3s;
  483. transition:all 0.3s;
  484. color: {color:linkhover};
  485. background-color: #ffffff;
  486. }
  487.  
  488.  
  489. ol.notes {
  490. text-align: justify;
  491. top: -150px;
  492. padding-left: 25px;
  493. padding-right: 25px;
  494. padding-bottom: 15px;
  495. margin: 0px 0px;
  496. list-style-type: lower-roman;
  497. line-height: 120%;
  498. font-size: {text:text size};
  499. }
  500.  
  501. ol.notes li.note {
  502. padding: 0px;
  503. font-size: {text:text size};
  504. }
  505.  
  506. ol.notes li.note img {
  507. padding: 0 px !important;
  508. }
  509.  
  510. ol.notes li.note img.avatar {
  511. vertical-align: -7px;
  512. margin-bottom: 5px;
  513. margin-top: 5px;
  514. width: 10px;
  515. height: 10px;
  516. -moz-border-radius: 10px;
  517. -webkit-border-radius: 10px;
  518. border-radius: 10px;
  519. }
  520.  
  521. ol.notes li.note a img.avatar {
  522. padding: 0px;
  523. border-width: 0px;
  524. border: none;
  525. }
  526.  
  527.  
  528. ol.notes li.note img {
  529. padding: 0px;
  530. border-width: 0px;
  531. border: none;
  532. }
  533.  
  534. ol.notes li.note span.action {
  535. font-weight: normal;
  536. }
  537.  
  538. ol.notes li.note.answer_content {
  539. font-weight: normal;
  540. }
  541.  
  542. ol.notes li.note.blockquote {
  543. padding: 1px 1px;
  544. margin: 1px 0px 0px 1px;
  545. }
  546.  
  547. ol.notes li.note.blockquote a {
  548. text-decoration: none;
  549. }
  550.  
  551.  
  552. .playbutton {
  553. width:20px;
  554. height:30px;
  555. overflow:hidden;
  556. position:relative;
  557. opacity:0.6;
  558. margin-top:27px;
  559. margin-left:10px;
  560. z-index:100;
  561. margin:9px 18px 7px 10px;
  562. transition-duration: 0.4s;
  563. -moz-transition-duration: 0.4s;
  564. -webkit-transition-duration: 0.4s;
  565. -o-transition-duration: 0.4s;
  566. }
  567.  
  568. .playbox {
  569. margin-top:15px;
  570. margin-left:13px;
  571. opacity:0.6;
  572. background-color:#fff;
  573. position:absolute;
  574. z-index:100;
  575. -webkit-border-radius: 25px;
  576. -moz-border-radius: 25px;
  577. border-radius: 25px;
  578. transition-duration: 0.4s;
  579. -moz-transition-duration: 0.4s;
  580. -webkit-transition-duration: 0.4s;
  581. -o-transition-duration: 0.4s;
  582. }
  583. .playbox:hover .playbutton {
  584. opacity:0.8;
  585. transition-duration: 0.4s;
  586. -moz-transition-duration: 0.4s;
  587. -webkit-transition-duration: 0.4s;
  588. -o-transition-duration: 0.4s;
  589. }
  590.  
  591. .audio{
  592. position:absolute;
  593. width:40px;
  594. height:40px;
  595. }
  596.  
  597. .audioimg{
  598. width:75px;
  599. height:75px;
  600. position:absolute;
  601. }
  602.  
  603. .audioimg img{
  604. margin-left:0px;
  605. float:left;
  606. opacity:1;
  607. width:75px;
  608. }
  609.  
  610. .audiodata {
  611. background-color:{color:border};
  612. font-size:7px;
  613. letter-spacing: 1px;
  614. font-family:helvetica;
  615. color:{color:text};
  616. padding:10px;
  617. text-transform:none;
  618. height:55px;
  619. margin-top:0px;
  620. margin-left:75px;
  621. text-align:center;
  622. width:405px;
  623. }
  624.  
  625. .caption {
  626. text-align:left;
  627. font-size:7px;
  628. letter-spacing: 1px;
  629. margin-top:5px;
  630. padding:10px 20px 10px 30px;
  631. font-family:helvetica;
  632. display:block;
  633. color:{color:text};
  634. }
  635. .caption img {
  636. max-width:460px;
  637. }
  638. .caption a {
  639. color:{color:text};
  640. border-bottom:1px solid #b8b8b8;
  641. }
  642.  
  643.  
  644. .date {
  645. line-height: 120%;
  646. text-transform: uppercase;
  647. font-style: ;
  648. padding-top: 10px;
  649. padding-bottom: px;
  650. font-weight: ;
  651. letter-spacing: 1px;
  652. text-align: justify;
  653. margin-top: px;
  654. font-size: {text:link size};
  655. font-family: {text:link font};
  656. color: {color:text};
  657. background:{color:border};
  658. }
  659.  
  660. .date a {
  661. -webkit-transition:all 0.3s;
  662. -moz-transition:all 0.3s;
  663. -ms-transition:all 0.3s;
  664. -o-transition:all 0.3s;
  665. transition:all 0.3s;
  666. color: {color:text};
  667. }
  668.  
  669. .date a:hover {
  670. -webkit-transition:all 0.3s;
  671. -moz-transition:all 0.3s;
  672. -ms-transition:all 0.3s;
  673. -o-transition:all 0.3s;
  674. transition:all 0.3s;
  675. color: {color:link};
  676. }
  677.  
  678. .tags {
  679. text-align: justify;
  680. margin-left: px;
  681. margin-top: 2px;
  682. font-size: {text:link size};
  683. font-family: {text:link font};
  684. text-transform: uppercase;
  685. letter-spacing: 1px;
  686. color: {color:text};
  687. line-height:285%;
  688. -webkit-transition: all 0.4s ease-in-out;
  689. -moz-transition: all 0.4s ease-in-out;
  690. -o-transition: all 0.4s ease-in-out;
  691. -ms-transition: all 0.4s ease-in-out;
  692. transition: all 0.4s ease-in-out;
  693. }
  694.  
  695. .tags a {
  696. line-height:285%;
  697. -webkit-transition:all 0.3s;
  698. -moz-transition:all 0.3s;
  699. -ms-transition:all 0.3s;
  700. -o-transition:all 0.3s;
  701. transition:all 0.3s;
  702. color: {color:text};
  703. padding:4px;
  704. border-bottom: px solid #aaa;
  705. background-color:{color:subbackground};
  706. }
  707.  
  708. .tags a:hover {
  709. line-height:285%;
  710. -webkit-transition:all 0.3s;
  711. -moz-transition:all 0.3s;
  712. -ms-transition:all 0.3s;
  713. -o-transition:all 0.3s;
  714. transition:all 0.3s;
  715. color: {color:text};
  716. border-bottom: px solid #ccc;
  717. background-color:#ddd;
  718. }
  719.  
  720.  
  721.  
  722. #pagi{ {block:pagination} padding-bottom: 30px; letter-spacing: px;font-family:helvetica;font-size: 9px;bottom: 30px;margin-top: 0px;margin-bottom: 40px; width:500px; text-transform: lowercase; text-align:center; background-color:white;z-index:1;opacity:1;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;-ms-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;{/block:pagination} }
  723.  
  724. #pagi a {{{block:Pagination} text-transform: uppercase; font-size: 6px; opacity:1;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;-ms-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;{/block:Pagination}}
  725.  
  726. #pagi hover{{block:Pagination} text-transform: uppercase; font-size: 6px; opacity:1;-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;-o-transition: all 0.7s ease-in-out;-ms-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;{/block:Pagination}}
  727.  
  728.  
  729. </style>
  730.  
  731. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  732. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  733. <script type="text/javascript" charset="utf-8">
  734. var $j = jQuery.noConflict();
  735. $j(function() {
  736. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  737. $j("img").lazyload({
  738. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  739. effect: "fadeIn",
  740. });
  741. });
  742. </script>
  743.  
  744. <script type="text/javascript"
  745. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  746.  
  747. <script type="text/javascript"
  748. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  749.  
  750. <script>
  751.  
  752.  
  753.  
  754. $(document).ready(function() {
  755.  
  756. //
  757.  
  758.  
  759.  
  760. //When you click on a link with class of poplight and the href starts with a #
  761.  
  762. $('a.poplight[href^=#]').click(function() {
  763.  
  764. var popID = $(this).attr('rel'); //Get Popup Name
  765.  
  766. var popURL = $(this).attr('href'); //Get Popup href to define size
  767.  
  768.  
  769.  
  770. //Pull Query & Variables from href URL
  771.  
  772. var query= popURL.split('?');
  773.  
  774. var dim= query[1].split('&');
  775.  
  776. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  777.  
  778.  
  779.  
  780. //Fade in the Popup and add close button
  781.  
  782. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');
  783.  
  784.  
  785. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  786.  
  787. var popMargTop = ($('#' + popID).height() + 80) / 2;
  788.  
  789. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  790.  
  791.  
  792.  
  793. //Apply Margin to Popup
  794.  
  795. $('#' + popID).css({
  796.  
  797. 'margin-top' : -popMargTop,
  798.  
  799. 'margin-left' : -popMargLeft
  800.  
  801. });
  802.  
  803.  
  804.  
  805. //Fade in Background
  806.  
  807. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  808.  
  809. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  810.  
  811.  
  812.  
  813. return false;
  814.  
  815. });
  816.  
  817.  
  818.  
  819. //Close Popups and Fade Layer
  820.  
  821. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  822.  
  823. $('#fade , .popup_block').fadeOut(function() {
  824.  
  825. $('#fade, a.close').remove(); //fade them both out
  826.  
  827. });
  828.  
  829. return false;
  830.  
  831. });
  832.  
  833.  
  834.  
  835.  
  836.  
  837. });
  838.  
  839. </script>
  840.  
  841. </head>
  842. <body>
  843. <center>
  844.  
  845. <p align="center"><div class="tbar"><div class="abc"><div style="text-align: right;"><h1>{Title}</h1><div class="descr">{Description}</div></div></div>
  846. <div style="margin-top: 10px; text-align: right;"><span style="color: #ddd;"><s>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</s></span> <a href="/" title="">i. home</a>
  847. <a href="/ask">ii. message</a>
  848. {block:ifLink1}<a href="{text:link 1}" target="_self" class="tip" title="{text:link title}">iii. {text:link 1 title}</a>{/block:ifLink1}
  849. {block:ifLink2}<a href="{text:link 2}" target="_self" class="tip" title="{text:link title}">iv. {text:link 2 title}</a>{/block:ifLink2}
  850. {block:ifLink3}<a href="{text:link 3}" target="_self" class="tip" title="{text:link title}">v. {text:link 3 title}</a>{/block:ifLink3}
  851. {block:ifLink4}<a href="{text:link 4}" target="_self" class="tip" title="{text:link title}">vi. {text:link 4 title}</a>{/block:ifLink4}</div>
  852. </div></div></div>
  853.  
  854.  
  855. <div id="posts">
  856. {block:Posts}
  857. <div class="post">
  858.  
  859. <div style="margin-bottom: -5px;">{block:Text}{block:Title}<div class="title">{Title}</div>{/block:Title}
  860. <div style="margin-top: -5px;">{Body}</div>{/block:Text}</div>
  861.  
  862.  
  863. <div style="margin-bottom: 10px;">{block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  864. {block:Caption}{Caption}{/block:Caption}{/block:Photo}</div>
  865.  
  866.  
  867. <div style="margin-bottom: -5px; margin-top: 10px;">{block:Photoset}{Photoset-500}<p>
  868. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}</div>
  869.  
  870.  
  871. <div style="margin-bottom: -5px;">{block:Quote}<h2>{Quote}</h2><p>
  872. {block:Source}<div style="text-align: right;"><h3>{Source}</h3></div>{/block:Source}{/block:Quote}</div>
  873.  
  874.  
  875. <div style="margin-bottom: -5px;">{block:Link}<a href="{URL}"><center><div class="links">{Name}</div></center></a>{block:Description}{Description}{/block:Description}{/block:Link}</div>
  876.  
  877.  
  878. <div style="margin-bottom: -5px;">{block:Chat}{block:Title}<center><div class="title">{Title}</div></center>{/block:Title}
  879. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label}&nbsp;{Line}<br>{/block:Lines}<br>{/block:Chat}</div>
  880.  
  881.  
  882. <div style="margin-bottom: -5px;">{block:Audio}
  883. <div class="audio">
  884. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  885. <div class="audioimg"><img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg"></div>{block:AlbumArt}<div class="audioimg"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}</div>
  886. <div class="audiodata"><br><font style="text-transform:uppercase; font-size:7px; letter-spacing:1px;">{block:TrackName}{TrackName} - {/block:TrackName}
  887. {block:Artist}{Artist}{/block:Artist}<br><br><small><small>{PlayCountWithLabel}</small></small></font></div><br>
  888. {/block:Audio}</div>
  889.  
  890.  
  891. <div style="margin-bottom: -5px;">{block:Video}
  892. {Video-500}<p>
  893. {block:Caption}{Caption}{/block:Caption}{/block:Video}</div>
  894.  
  895.  
  896. <div style="margin-bottom: -5px;">{block:Answer}<ask>{Asker}:</ask><br><h6>{Question}<br></h6><p>{Answer}{/block:Answer}</div>
  897.  
  898.  
  899. <div class="date">
  900. {block:Date}<span style="float:left;"><a href="{Permalink}" target="_blank" title="{24HourWithZero}:{Minutes}"><span style="color: #ddd;"><s>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</s></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{DayOfMonth}{DayOfMonthSuffix} of {Month}</a>{/block:Date}</span>
  901. {block:NoteCount}<span style="float:right;">&nbsp;<a href="{Permalink}">({NoteCount})</a>{/block:NoteCount}
  902. {block:RebloggedFrom}<a href="{ReblogParentURL}"></a>{block:ContentSource}<a href="{SourceURL}"></a>{/block:ContentSource}{/block:RebloggedFrom}</span></div><br>
  903. <div class="tags">{block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/block:Tags}{/block:HasTags}</span></div>
  904.  
  905. </div><br><br>{/block:Posts}
  906.  
  907. <div id="pagi"> {block:pagination}{block:PreviousPage} <a href="{PreviousPage}" style="font-size:9px;border-bottom:1px solid #eaeaea;">back</a></u>&nbsp; &nbsp; {/block:PreviousPage} {currentpage} of {totalpages} {block:NextPage} &nbsp; &nbsp; <a href="{NextPage}" style="font-size:9px;border-bottom:1px solid #eaeaea;">next</a></u>{/block:NextPage}{/block:Pagination} {/block:pagination}</div>
  908.  
  909. {block:PermalinkPage}{block:PostNotes}<div style="padding-top: 25px; padding-bottom: 25px; background: {color:postbackground};">{PostNotes}{/block:PostNotes}{/block:PermalinkPage}
  910.  
  911. </div></body></center>
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!