API tools faq
paste
trenzalours

gasoline - theme 24

trenzalours
Mar 3rd, 2015
3,747
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.21 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <title>{Title}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8.  
  9.  
  10. <!--
  11.  
  12. theme - 25 - Ghost
  13. all theme rules apply
  14. don't steal its not cool
  15. be fucking original
  16.  
  17. -->
  18.  
  19.  
  20. <meta name="image:Background Image" content="http://static.tumblr.com/60b9f851c3763791b007732716f6e6c1/3dkvxpf/LGVnjb2ai/tumblr_static_7sdglguuieko0gsw8o844g4ok.jpg"/>
  21. <meta name="color:Background" content="#ffffff"/>
  22. <meta name="color:Title" content="#000000"/>
  23. <meta name="color:Text" content="#000000"/>
  24. <meta name="color:Link" content="#000000"/>
  25. <meta name="color:Hover" content="#ffffff"/>
  26. <meta name="color:Blog Title" content="#ffffff"/>
  27. <meta name="color:Nav Link" content="#ffffff"/>
  28. <meta name="color:Nav Link Hover" content="#666666"/>
  29. <meta name="color:Post Color" content="#000000"/>
  30. <meta name="color:Post Background" content="#ffffff"/>
  31. <meta name="color:Bottom Bar Color" content="#000000"/>
  32. <meta name="color:Scrollbar" content="#ffffff"/>
  33. <meta name="color:Gradient 1" content="#a77dc2"/>
  34. <meta name="color:Gradient 2" content="#fb4c16"/>
  35.  
  36.  
  37. <meta name="text:link 1" content="link 1">
  38. <meta name="text:link1 url" content="/">
  39. <meta name="text:link 2" content="link 2">
  40. <meta name="text:link2 url" content="/">
  41. <meta name="text:link 3" content="link 3">
  42. <meta name="text:link3 url" content="/">
  43. <meta name="text:link 4" content="link 4">
  44. <meta name="text:link4 url" content="/">
  45.  
  46. <meta name="if:Askbox" content="1">
  47. <meta name="if:Tags" content="1">
  48. <meta name="if:Grayscale" content="0">
  49. <meta name="if:Image Fade" content="1">
  50. <meta name="if:Color Changing BG" content="1">
  51.  
  52.  
  53. <meta name="select:Change Background" content="solid-color" title="None">
  54. <meta name="select:Change Background" content="fullscreen-images" title="Full screen">
  55. <meta name="select:Change Background" content="tile-background" title="Pattern">
  56. <meta name="select:Change Background" content="gradient-background" title="Gradient">
  57.  
  58.  
  59. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  60.  
  61. <link href='http://fonts.googleapis.com/css?family=Gurajada' rel='stylesheet' type='text/css'>
  62.  
  63. <script type="text/javascript">
  64. WebFontConfig = {
  65. google: { families: [ 'Gurajada::latin' ] }
  66. };
  67. (function() {
  68. var wf = document.createElement('script');
  69. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  70. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  71. wf.type = 'text/javascript';
  72. wf.async = 'true';
  73. var s = document.getElementsByTagName('script')[0];
  74. s.parentNode.insertBefore(wf, s);
  75. })(); </script>
  76.  
  77. <!-- jquery for tooltips-->
  78. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  79.  
  80. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  81. <script>
  82.  
  83. (function($){
  84.  
  85. $(document).ready(function(){
  86.  
  87. $("a[title]").style_my_tooltips({
  88.  
  89. tip_follows_cursor:true,
  90.  
  91. tip_delay_time:40,
  92.  
  93. tip_fade_speed:250,
  94.  
  95. attribute:"title"
  96.  
  97. });
  98.  
  99. });
  100.  
  101. })(jQuery);
  102.  
  103. </script>
  104.  
  105. <script src="http://static.tumblr.com/k3vjnuf/vJsnifvrp/jquery-1.11.2.min.js"></script>
  106. <script>
  107. $(document).scroll(function () {
  108. var x = $(this).scrollRight();
  109. if (x > 800) {
  110. $('.bottomMenu').fadeIn();
  111. } else {
  112. $('.bottomMenu').fadeOut();
  113. }
  114.  
  115. });
  116.  
  117. </script>
  118.  
  119. <style type="text/css">
  120.  
  121. iframe#tumblr_controls {margin-top:-2px; margin-left:-10px;opacity:0.04; white-space:nowrap;
  122. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  123. opacity:.2;transition: 1s ease-in-out; -webkit-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out; -moz-transform:scale(0.8);
  124. -webkit-transform:scale(0.8);
  125. transform:scale(0.8); }
  126. iframe#tumblr_controls:hover{opacity:1;}
  127.  
  128. #s-m-t-tooltip{
  129. width:90px;
  130. text-align:center;
  131. position:absolute;
  132. margin: 0px 25px;
  133. padding:6px 10px;
  134. z-index: 99999999999;
  135. background:{color:Post Background};
  136. color:{color:Text};
  137. font-family:helvectia, arial;
  138. font-size:7px;
  139. letter-spacing:1px;
  140. text-transform:uppercase;
  141. }
  142.  
  143.  
  144. /* styling, or CSS, goes here */
  145.  
  146. body::-webkit-scrollbar {{block:indexpage}width: auto; height: 31px; background: {color:Bottom Bar Color}; z-index:99999;{/block:indexpage}{block:PermalinkPage}width:10px; background:{color:background};{/block:Permalinkpage} }
  147.  
  148. body::-webkit-scrollbar-thumb {
  149. {block:indexpage}background-color:{color:scrollbar}; border-left:20px solid {color:Bottom Bar Color};border-right:7px solid {color:Bottom Bar Color};border-bottom:25px solid {color:Bottom Bar Color}; border-top:5px solid {color:bottom bar color};{/block:indexpage}
  150.  
  151. {block:PermalinkPage}background-color:{color:scrollbar}; background-color:{color:scrollbar}; border-top:10px solid {color:background}; border-left:4px solid {color:background};border-right:4px solid {color:background};{/block:Permalinkpage} }
  152.  
  153.  
  154. .photoset::-webkit-scrollbar {width:6px; background: {color:Background}; z-index:99999; }
  155.  
  156. .photoset::-webkit-scrollbar-thumb { background-color:{color:scrollbar}; border-top:10px solid {color:background}; border-left:4px solid {color:background};}
  157.  
  158. #ink::-webkit-scrollbar {width:6px; background: {color:Background}; z-index:99999; }
  159.  
  160. #ink::-webkit-scrollbar-thumb { background-color:{color:scrollbar}; border-top:10px solid {color:background}; border-left:4px solid {color:background};}
  161. ol.notes::-webkit-scrollbar {width:10px; background: {color:Background}; z-index:99999; }
  162.  
  163. ol.notes::-webkit-scrollbar-thumb { background-color:{color:scrollbar}; border-top:10px solid {color:background}; border-left:4px solid {color:background};border-right:4px solid {color:background};}
  164.  
  165. body {
  166. padding: 0px;
  167. height:470px;
  168. width:auto;
  169. color:{color:text};
  170. background-color: {color:background};
  171. font-family:open sans, helvetica, arial, sans-serif;
  172. font-size:8px;
  173. font-weight:normal;
  174. position:relative;
  175. text-align:left;
  176. margin:0;
  177. line-height:1.5em;
  178. {block:indexpage}
  179. overflow-y:hidden;
  180. {/block:indexpage}
  181. {block:permalinkpage}
  182. text-align:left;
  183. {/block:permalinkpage}
  184. }
  185.  
  186. a {text-decoration:none; color:{color:Link};}
  187.  
  188. a:hover {
  189. color:{color:hover};
  190. text-decoration:none;
  191. -webkit-transition: all 1s ease-out;
  192. -moz-transition: all 1s ease-out;
  193. -o-transition: all 1s ease-out;
  194. -ms-transition: all 1s ease-out;
  195. transition: all 1s ease-out;
  196. }
  197.  
  198. pre{
  199. background:{color:background};
  200. padding:10px;
  201. color:{color:text};
  202. font-family:helvectia, arial;
  203. text-transform:uppercase;
  204. font-size:8px;
  205. letter-spacing:1px;
  206. white-space: pre-wrap;
  207. white-space: -moz-pre-wrap;
  208. white-space: -pre-wrap;
  209. white-space: -o-pre-wrap;
  210. word-wrap: break-word;}
  211.  
  212.  
  213. blockquote {
  214. text-align:left;
  215. padding:5px 0 5px 5px;
  216. border-left:1px solid {color:gradient1};
  217. margin-left:30px;
  218. }
  219.  
  220. blockquote a{
  221. color:{color:link};
  222. }
  223.  
  224. b,strong{
  225. color:{color:text};
  226. font-weight:bold;
  227. }
  228. em,i{
  229. color:{color:text};
  230. font-style:italic;
  231. }
  232.  
  233.  
  234. strike{
  235. text-decoration: line-through;
  236. }
  237.  
  238. small {
  239. font-size:8px;}
  240.  
  241. big {
  242. font-size:12px;}
  243.  
  244. h1,h2,h3{
  245. text-transform:uppercase;
  246. font-family: 'Gurajada', serif;
  247. font-size:20px;
  248. color:{color:text};
  249. word-spacing:3px;
  250. letter-spacing:1px;
  251. border-bottom:1px solid {color:text};
  252. }
  253. li{
  254. text-align:left;
  255. }
  256.  
  257. #title{
  258. text-transform:uppercase;
  259. font-family: 'Gurajada', serif;
  260. font-size:20px;
  261. word-spacing:3px;
  262. letter-spacing:1px;
  263. }
  264.  
  265.  
  266. .solid-color {
  267. background:{color:background};}
  268.  
  269. .fullscreen-images {
  270.  
  271. background:url({image:Background Image})
  272. no-repeat center center fixed;
  273. {block:IfColorChangingBG}
  274. background-image: linear-gradient(to right,{color:Gradient 1}, {color:Gradient 2}), url({image:Background Image});
  275. background-blend-mode: overlay;
  276. {/block:IfColorChangingBG}
  277. -webkit-background-size: cover;
  278. -moz-background-size: cover;
  279. -o-background-size: cover;
  280. background-size: cover;}
  281.  
  282. .tile-background {
  283.  
  284. background: url({image:Background Image});
  285. background-repeat:repeat;
  286. background-attachment: fixed;
  287. {block:IfColorChangingBG}
  288. background-image: linear-gradient(to right,{color:Gradient 1}, {color:Gradient 2}), url({image:Background Image});
  289. background-blend-mode: overlay;{/block:IfColorChangingBG}
  290. }
  291.  
  292. .gradient-background {
  293. background: {color:Gradient 1}; /* Old browsers */
  294. background: -moz-linear-gradient(left, {color:Gradient 1} 0%, {color:Gradient 2} 100%); /* FF3.6+ */
  295. background: -webkit-gradient(linear, left, right, color-stop(0%,{color:Gradient 1}), color-stop(100%,{color:Gradient 2})); /* Chrome,Safari4+ */
  296. background: -webkit-linear-gradient(left, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* Chrome10+,Safari5.1+ */
  297. background: -o-linear-gradient(left, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* Opera 11.10+ */
  298. background: -ms-linear-gradient(left, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* IE10+ */
  299. background: linear-gradient(to right, {color:Gradient 1} 0%,{color:Gradient 2} 100%); /* W3C */
  300. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='{color:Gradient 1}', endColorstr='{color:Gradient 2}',GradientType=0 ); /* IE6-9 */
  301. background-attachment: fixed;
  302. }
  303.  
  304.  
  305.  
  306. /*Bottom Bar Stuff*/
  307.  
  308. .bottomMenu {
  309. position: fixed;
  310. bottom: 0;
  311. width: 100%;
  312. height: 50px;
  313. padding:5px;
  314. background:{color:Bottom Bar Color};
  315. z-index: 1;
  316. }
  317.  
  318. #bottomtitle {
  319. font-size:23px;
  320. text-transform:uppercase;
  321. Text-align:left;
  322. letter-spacing:3px;
  323. margin-top:20px;
  324. padding:9px 20px;
  325. font-family: 'Gurajada', serif;
  326. color:{color:Blog Title};
  327. width:auto;
  328. display:inline-block;
  329. }
  330.  
  331. #blinks {
  332. margin-top:0px;
  333. margin-bottom:0px;
  334. font-size:8px;
  335. font-weight:500;
  336. letter-spacing:1px;
  337. width:auto;
  338. margin-left:10px;
  339. text-align:left;
  340. color:{color:Nav Link};
  341. text-transform:uppercase;
  342. }
  343.  
  344. #blinks i{font-size:11px;vertical-align:center; color:{color:nav link};}
  345.  
  346. #blinks a{color:{color:Nav Link}; padding:0px 5px;}
  347. #blinks a:hover{color:{color:Hover};
  348. }
  349.  
  350. #blinks i{font-size:8px;padding-top:3px;}
  351.  
  352. /* posts */
  353.  
  354. #container
  355. {text-align:center;
  356. float:left;
  357. height:500px;
  358. max-height:500px;
  359. margin:150px 50px 0px auto;
  360. {block:indexpage}
  361. overflow-y:hidden;
  362. {/block:indexpage}
  363. {block:permalinkpage}
  364. text-align:left;
  365. {/block:permalinkpage}
  366.  
  367. }
  368.  
  369. div.center {
  370. {block:indexpage}
  371. text-align:center;
  372. width:4000px;
  373. float:left;
  374. height:550px;
  375. max-height:550px;
  376. overflow-y:hidden;
  377. {/block:indexpage}
  378. {block:permalinkpage}
  379. width:800px;
  380. float:left;
  381. margin-top:129px;
  382. margin-left:100px;
  383. {/block:permalinkpage}
  384.  
  385. }
  386.  
  387. .entry {
  388. display:inline-block;
  389. vertical-align:middle;
  390. width:250px;
  391. float:left;
  392. padding:5px;
  393. position:relative;
  394. background:{color:post background};
  395. color:{color:post color};
  396. padding:20px 21px;
  397. {block:indexpage}
  398. left:100px;
  399. margin-right:100px;
  400. margin-top:100px;
  401. max-height:400px!important;
  402. {/block:indexpage}
  403. {block:Permalinkpage}
  404. margin-bottom:200px;
  405. {/block:permalinkpage}
  406. }
  407.  
  408. .post {width:250px;margin-bottom:100px;}
  409.  
  410.  
  411. .photoset{
  412. width:250px!imporant;
  413. {block:Indexpage}
  414. height:250px!imporant;
  415. max-height:250px!important;
  416. overflow-x:hidden;
  417. overflow-y:scroll;
  418. {/block:indexpage}
  419. }
  420. .photoset img{
  421. width:250px!important;
  422. }
  423. #vids{
  424. width:250px;
  425. }
  426. .video-player iframe {
  427. max-width: 100%;
  428. height: auto;}
  429.  
  430.  
  431. .video-player iframe {
  432. width:250px;
  433. }
  434.  
  435.  
  436. {block:IfGrayscale}
  437. .entry img{
  438. -webkit-filter: grayscale(100%);
  439. -webkit-transition-duration: 1s;
  440. -moz-transition-duration: 1s;
  441. -o-transition-duration: 1s;
  442. -ms-transition-duration: 1s;
  443. }
  444.  
  445. .entry:hover img{
  446. -webkit-filter: grayscale(0%);
  447. -webkit-transition-duration: 1s;
  448. -moz-transition-duration: 1s;
  449. -o-transition-duration: 1s;
  450. -ms-transition-duration: 1s;
  451. z-index: 2px;
  452. }
  453.  
  454. .photoset {
  455. -webkit-filter: grayscale(100%);
  456. -webkit-transition-duration: 1s;
  457. -moz-transition-duration: 1s;
  458. -o-transition-duration: 1s;
  459. -ms-transition-duration: 1s;
  460. }
  461.  
  462. .entry:hover .photoset:hover{
  463. -webkit-filter: grayscale(0%);
  464. -webkit-transition-duration: 1s;
  465. -moz-transition-duration: 1s;
  466. -o-transition-duration: 1s;
  467. -ms-transition-duration: 1s;
  468. z-index: 2px;
  469. }
  470. {/block:IfGrayscale}
  471.  
  472. {block:ifImageFade}
  473.  
  474. .entry img{
  475. opacity:0.6;
  476. -webkit-transition-duration: 1s;
  477. -moz-transition-duration: 1s;
  478. -o-transition-duration: 1s;
  479. -ms-transition-duration: 1s;
  480. }
  481.  
  482. .entry:hover img{
  483. opacity:1;
  484. -webkit-transition-duration: 1s;
  485. -moz-transition-duration: 1s;
  486. -o-transition-duration: 1s;
  487. -ms-transition-duration: 1s;
  488. z-index: 2px;
  489. }
  490.  
  491. .html_photoset {
  492. opacity:0.6;
  493. -webkit-transition-duration: 1s;
  494. -moz-transition-duration: 1s;
  495. -o-transition-duration: 1s;
  496. -ms-transition-duration: 1s;
  497. }
  498.  
  499. .entry:hover .html_photoset:hover{
  500. opacity:1;
  501. -webkit-transition-duration: 1s;
  502. -moz-transition-duration: 1s;
  503. -o-transition-duration: 1s;
  504. -ms-transition-duration: 1s;
  505. z-index: 2px;
  506. }
  507. {/block:ifImageFade}
  508.  
  509.  
  510. /*Quote*/
  511.  
  512. #ink{
  513. text-transform:uppercase;
  514. font-family: 'Gurajada', serif;
  515. letter-spacing:1px;
  516. text-align:center;
  517. font-size:13px;
  518. line-height:1.4em;
  519. padding:10px;
  520. max-height:300px!important;
  521. overflow-y:scroll;
  522. margin-bottom:20px;
  523. }
  524.  
  525. #ink a{color:{color:title};}
  526. #ink-source a{color:{color:text};}
  527.  
  528. #ink-source {
  529. text-align:center;
  530. font-style:none;
  531. font-weight:bold;
  532. padding:3px;
  533. margin-top:10px;
  534. font-size:9px;
  535. font-family: 'helvectia, arial', sans-serif;;
  536. margin-bottom:20px;}
  537.  
  538. .player_art{
  539. width:40px;
  540. position:absolute;
  541. margin-top:15px;
  542. margin-left:5px;
  543. border-radius:3px;
  544. }
  545. .player_art img{
  546. width:40px;
  547. border-radius:3px;
  548. }
  549.  
  550. .player {
  551. text-align:left;
  552. width:75px;
  553. height:25px;
  554. display:block;
  555. overflow:hidden;}
  556.  
  557. .audio_contain {
  558. background:white;
  559. border:1px solid #eee;
  560. display:block;
  561. padding:3px;
  562. }
  563.  
  564. .audio_info {
  565. max-height:40px;
  566. height:45px;
  567. display:block;
  568. margin-top:16px;
  569. margin-left:55px;
  570. letter-spacing:0.09em;
  571. font-size:8px;
  572. color:{color:link};
  573. text-transform:uppercase;
  574. text-align:left;
  575. text-indent:5px;
  576. border-left:2px solid #eee;
  577. padding-left:3px;
  578. }
  579.  
  580. .audio_info span {display:block; padding:2px;}
  581.  
  582. /* Asks */
  583.  
  584. .ques::-webkit-scrollbar {width:3px; background: {color:background}; z-index:99999; }
  585.  
  586. .ques::-webkit-scrollbar-thumb { background-color:{color:scrollbar};}
  587.  
  588.  
  589. .ques {
  590. margin-bottom:10px;
  591. text-transform:uppercase;
  592. font-family: 'Gurajada', serif;
  593. letter-spacing:1px;
  594. color:{color:text};
  595. line-height:1.6em;
  596. {block:IndexPage}
  597. max-height:190px;
  598. overflow-y:scroll;
  599. overflow-x:hidden;
  600. {/block:IndexPage}
  601. }
  602.  
  603. .ques a{
  604. color:{color:link};
  605. }
  606.  
  607. .who {
  608. padding:10px;
  609. color:{color:text};
  610. text-align:center;
  611. border-bottom:1px solid #878;
  612. font-size:12px;
  613. }
  614.  
  615. .who a{
  616. color:{color:link};}
  617.  
  618. .answer {
  619. margin-top:10px;
  620. padding:10px;
  621. letter-spacing:1px;
  622. text-transform:lowercase;
  623. font-family:'helvectia, arial'sans-serif;
  624. text-align:justify;
  625. color:{color:text};
  626. letter-spacing:1px;}
  627.  
  628. .answer li{
  629. list-style:none;
  630. }
  631. .answer a{
  632. color:{color:link};
  633. font-style:italic;
  634. }
  635. .answer img{
  636. width:250px;
  637. }
  638.  
  639. /*Chat*/
  640.  
  641. .chat ol {
  642. padding:0;
  643. list-style:none;
  644. }
  645. .line {padding:5px 0;}
  646.  
  647.  
  648. /*Permalink and notes*/
  649.  
  650. .infos {
  651. width:276px;
  652. position:absolute;
  653. margin-top:-49px;
  654. margin-left:-21px;
  655. padding:10px 8px;
  656. font-size:7px;
  657. letter-spacing:1px;
  658. text-transform:uppercase;
  659. text-align:left;
  660. z-index:0;
  661. background:{color:Bottom Bar Color};
  662. border-bottom:1px solid rgba(255,255,255,0.6);
  663. color:{color:Nav Link};
  664. }
  665.  
  666. .infos a {margin:0 5px;text-decoration:none;color:{color:Nav Link};}
  667. .infos i {color:{color:Nav Link};}
  668. .infos a:hover {color:{color:hover};}
  669.  
  670. .info-right{
  671. float:right;
  672. padding-right:8px;
  673. }
  674.  
  675. /*Tags*/
  676.  
  677. .tags::-webkit-scrollbar {width:3px; background: {color:background}; z-index:99999; }
  678.  
  679. .tags::-webkit-scrollbar-thumb { background-color:{color:scrollbar};}
  680.  
  681. .tags {
  682. right:0;
  683. line-height:1.6em;
  684. width:276px;
  685. {block:IndexPage}
  686. position:absolute;
  687. margin-left:-2px;
  688. height:15px;
  689. max-height:15px!important;
  690. overflow-y:scroll;
  691. overflow-x:hidden;
  692. letter-spacing:1px;
  693. opacity:0;
  694. {/block:IndexPage}
  695. {block:PermalinkPage}
  696. position:absolute;
  697. margin-top:10px;
  698. {/block:PermalinkPage}
  699. text-align:right;
  700. font-size:8px;
  701. padding:5px 8px;
  702. color:{color:text};
  703. text-transform:uppercase;
  704. background:{color:background};
  705. white-space: pre-wrap;
  706. white-space: -moz-pre-wrap;
  707. white-space: -pre-wrap;
  708. white-space: -o-pre-wrap;
  709. word-wrap: break-word;
  710. z-index:9999999999999999999999999;
  711. -webkit-transition: all 0.8s ease;
  712. -moz-transition: all 0.8s ease;
  713. transition: all 0.8s ease;
  714. }
  715.  
  716. .tags a{
  717. text-decoration:none;
  718. color:{color:text};
  719. padding:5px;
  720. }
  721. {block:IndexPage}
  722. .entry:hover .tags{
  723. opacity:1;
  724. margin-top:10px;
  725. margin-bottom:50px;
  726. }
  727. {/block:IndexPage}
  728.  
  729.  
  730. /*Page Notes*/
  731. ol.notes {
  732. border-top:30px solid {color:bottom bar color};
  733. position:fixed;
  734. float:left;
  735. margin-left:50px;
  736. width:300px!important;
  737. height:250px;
  738. max-height:250px!important;
  739. margin-left:300px;
  740. overflow-y:scroll;
  741. overflow-x:hidden;
  742. margin-top:-29px;
  743. padding:20px;
  744. list-style-type: none;
  745. background:{color:background};
  746. }
  747. ol.notes li.note {
  748. padding:7px 6px;
  749. display:inline-block;
  750. margin-right:10px;
  751. margin-bottom:10px;
  752. }
  753. ol.notes li.more_notes_link_container {
  754. font-size:8px;
  755. padding:10px;
  756. letter-spacing:1px;
  757. text-transform:uppercase;
  758. background:{color:Bottom Bar Color};
  759. color:{color:Nav Link};
  760. width:absolute;
  761. width:270px;
  762. }
  763. ol.notes li.more_notes_link_container a{color:{color:Nav Link};}
  764. ol.notes li.note img.avatar {
  765. vertical-align: -2px;
  766. margin-left: 2px;
  767. width: 18px;
  768. height: 18px;
  769. border-radius:5%;
  770. border:8px solid rgba(255,255,255,0.2);
  771. -webkit-border-radius:5%;
  772. -moz-border-radius:5%; }
  773.  
  774. ol.notes li.note span.action {display: none;}
  775. ol.notes div.clear {display: none;}
  776. ol.notes li.note .answer_content {display:none;}
  777. ol.notes li.note blockquote {display:none;}
  778. ol.notes li.note blockquote a {text-decoration: none;}
  779.  
  780.  
  781. .ask-p{
  782. color:{color:text};
  783. padding:10px;
  784. font-family:'helvectia, arial' sans-serif;
  785. letter-spacing:1px;
  786. line-height:1.5em;
  787. font-size:8px;
  788. text-align:justify;
  789. }
  790. .ask-p a{
  791. color:{color:link};
  792. }
  793.  
  794. .thepopup{
  795. display: none;
  796. padding-bottom: 50px;
  797. padding-left: 40px;
  798. padding-right: 40px;
  799. float: left;
  800. position: fixed;
  801. top: 50%;
  802. left: 50%;
  803. color:{color:text};
  804. font-family:helvectia, arial;
  805. text-align:justify;
  806. font-size:8px;;
  807. line-height:112%;
  808. height:600px;
  809. z-index: 99999999999999999999999999999999999999999999;
  810. }
  811.  
  812. *html #fade {
  813. position: absolute;
  814. }
  815.  
  816. *html .thepopup {
  817. position: absolute;
  818. }
  819.  
  820. img.btn_close {
  821. width:35px;
  822. margin-top:30px;
  823. right:45%;
  824. padding:10px;
  825. position:absolute;
  826. z-index:999999999999!important;
  827. -webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); filter: invert(0%);
  828. -webkit-transition: all 0.7s ease;
  829. -moz-transition: all 0.7s ease;
  830. -o-transition: all 0.7s ease;
  831. -ms-transition: all 0.7s ease;
  832. transition: all 0.7s ease;
  833. }
  834. img.btn_close:hover{
  835. -webkit-filter: invert(0%); -moz-filter: invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); filter: invert(0%)
  836. -webkit-transition: all 0.7s ease-out;
  837. -moz-transition: all 0.7s ease-out;
  838. -o-transition: all 0.7s ease-out;
  839. -ms-transition: all 0.7s ease-out;
  840. transition: all 0.7s ease-out;
  841. }
  842.  
  843. #fade {
  844. display: none;
  845. position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  846. opacity:0.8;
  847. background:{color:background};
  848. z-index: 9999;
  849. }
  850.  
  851. #main-date{
  852. margin-left:-110px;
  853. width:900px;
  854. float:center;
  855. position:absolute;
  856. padding-top:52px;
  857. margin-bottom:50px;
  858. }
  859.  
  860. #main-update{
  861. margin-left:-110px;
  862. width:900px;
  863. float:center;
  864. position:absolute;
  865. padding-top:50px;
  866. margin-bottom:50px;
  867. }
  868.  
  869. .update-2::-webkit-scrollbar {width:3px; background: {color:bottom bar color}; z-index:99999; }
  870.  
  871. .update-2::-webkit-scrollbar-thumb { background-color:{color:scrollbar};}
  872.  
  873. .update-3::-webkit-scrollbar {width:5px; background: {color:background}; z-index:99999; }
  874.  
  875. .update-3::-webkit-scrollbar-thumb { background-color:{color:scrollbar};}
  876.  
  877. .update{
  878. background:{color:background};
  879. margin-top:120px;
  880. text-align:center;
  881. margin-right:20px;
  882. padding:20px;
  883. height:210px;
  884. width:190px;
  885. float:left;
  886.  
  887. }
  888.  
  889. .update a{
  890. color:{color:nav link};
  891. }
  892.  
  893. .update-2{
  894. background:{color:background};
  895. margin-top:36px;
  896. text-align:center;
  897. margin-right:20px;
  898. padding:20px;
  899. height:190px;
  900. width:190px;
  901. overflow-y:scroll;
  902. overflow-x:hidden;
  903. float:left;
  904. -webkit-transition: all .5s ease;
  905. -moz-transition: all .5s ease;
  906. -o-transition: all .5s ease;
  907. -ms-transition: all .5s ease;
  908. transition: all .5s ease;
  909. }
  910.  
  911. .update-2 a{
  912. color:{color:text};
  913. }
  914.  
  915. .update-info{
  916. color:{color:text};
  917. padding:10px;
  918. font-family: 'helvectia, arial', sans-serif;
  919. text-transform:lowercase;
  920. line-height:1.4em;
  921. font-size:8px;
  922. padding:5px;
  923. }
  924.  
  925. .update-info a{
  926. color:{color:Link};
  927. }
  928. .update-info i{
  929. font-size:8px;
  930. padding:1px;
  931. color:{color:link};
  932. }
  933.  
  934. .tag-info{
  935. padding:10px;
  936. font-family:helvectia, arial;
  937. text-transform:uppercase;
  938. line-height:2em;
  939. letter-spacing:1px;
  940. font-size:8px;
  941. display:inline-block;
  942. }
  943. .tag-info a{
  944. display:inline-block;
  945. padding:5px 10px;
  946. width:150px;
  947. color:{color:text};
  948. margin-bottom:10px;
  949. -webkit-transition: all 0.8s ease;
  950. -moz-transition: all 0.8s ease;
  951. transition: all 0.8s ease;
  952. }
  953.  
  954. .tag-info a:hover{
  955. background:{color:bottom bar color};
  956. color:{color:nav link};
  957. -webkit-transition: all 0.8s ease;
  958. -moz-transition: all 0.8s ease;
  959. transition: all 0.8s ease;
  960. }
  961.  
  962. .update-info a:hover{
  963. color:{color:Hover};
  964. }
  965. .update-info i{
  966. font-size:8px;
  967. padding:1px;
  968. color:{color:link};
  969. }
  970. .update-title{
  971. text-align:center;
  972. vertical-align:center;
  973. padding:10px 0;
  974. text-transform:uppercase;
  975. font-family: 'Gurajada', serif;
  976. font-size:13px;
  977. letter-spacing:2px;
  978. margin-bottom:20px;
  979. }
  980.  
  981. .tag-title span{
  982. text-align:center;
  983. vertical-align:center;
  984. padding:5px 50px;
  985. color:{color:title};
  986. text-transform:uppercase;
  987. font-family: 'Gurajada', serif;
  988. font-size:13px;
  989. letter-spacing:2px;
  990. margin-bottom:20px;
  991. }
  992.  
  993. #main-date-3{
  994. margin-left:-180px;
  995. width:900px;
  996. float:center;
  997. position:absolute;
  998. padding-top: 40px;
  999. margin-bottom:50px;
  1000. }
  1001.  
  1002. .update-3{
  1003. background:{color:background};
  1004. margin-top:80px;
  1005. text-align:center;
  1006. margin-right:10px;
  1007. margin-bottom:-32px;
  1008. overflow-y:scroll;
  1009. overflow-x:hidden;
  1010. padding:20px;
  1011. height:375px;
  1012. width:390px;
  1013. float:left;
  1014. }
  1015.  
  1016.  
  1017. .about-p{
  1018. text-align:justify;
  1019. line-height:1.4em;
  1020. font-size:11px;
  1021. padding:10px;
  1022. margin-top:15px;
  1023. color:white;
  1024. overflow:hidden;
  1025. }
  1026.  
  1027.  
  1028. </style>
  1029.  
  1030. </head>
  1031.  
  1032.  
  1033. <body class="{select:Change Background}">
  1034.  
  1035. <!-- all your HTML goes here! -->
  1036. <div class="bottomMenu">
  1037. <div id="blinks">
  1038. <div id="bottomtitle">{title}</div>
  1039. <a href="/">home</a>
  1040. {block:ifAskbox}
  1041. <a href="#?w=500" rel="03" class="poplight">ask</a>
  1042. {/block:ifAskbox}
  1043. {block:ifTags}
  1044. <a href="#?w=500" rel="01" class="poplight">tags</a>
  1045. {/block:ifTags}
  1046. {block:ifnotAskbox}
  1047. <a href="{text:link1 url}">{text:link 1}</a>
  1048. {/block:ifnotAskbox}
  1049. {block:ifnotTags}
  1050. <a href="{text:link2 url}">{text:link 2}</a>
  1051. {/block:ifnotTags}
  1052. <a href="{text:link3 url}">{text:link 3}</a>
  1053. <a href="{text:link4 url}">{text:link 4}</a>
  1054. <a href="http://960px.tumblr.com/" class="creds" title="960px">theme</a>
  1055.  
  1056.  
  1057. {block:pagination}
  1058. {block:PreviousPage}
  1059. <a href="{PreviousPage}" class="pagi" title="previous page"><i class="fa fa-chevron-left fa-1x"></i></a>
  1060. {/block:PreviousPage}
  1061.  
  1062. {block:NextPage}
  1063. <a href="{NextPage}" class="pagi" title="next page"><i class="fa fa-chevron-right fa-1x"></i></a>
  1064. {/block:NextPage}
  1065. {/block:pagination}
  1066. </div>
  1067. </div>
  1068. <center>
  1069. <div class="center">
  1070.  
  1071. {block:Posts}
  1072. <div class="entry">
  1073.  
  1074. {block:Quote}
  1075. {block:Date}
  1076. <div class="infos">
  1077. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1078. </div>
  1079. {/block:Date}
  1080. <div id="ink">{Quote}</div>
  1081. {block:Source}<div id="ink-source">{Source}</div>{/block:Source}
  1082.  
  1083. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1084. {/block:Quote}
  1085.  
  1086.  
  1087.  
  1088. {block:Text}
  1089. {block:Date}
  1090. <div class="infos">
  1091. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1092. </div>
  1093. {/block:Date}
  1094. {block:Title}
  1095. <div id="title">{Title}</div>{/block:Title}
  1096. {Body}
  1097.  
  1098. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1099. {/block:Text}
  1100.  
  1101. {block:Link}
  1102. {block:Date}
  1103. <div class="infos">
  1104. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1105. </div>
  1106. {/block:Date}
  1107. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  1108.  
  1109. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1110. {/block:Link}
  1111.  
  1112. {block:Chat}
  1113. {block:Date}
  1114. <div class="infos">
  1115. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1116. </div>
  1117. {/block:Date}
  1118. {block:Title}
  1119. <h1>{Title}</h1>
  1120. {/block:Title}
  1121. <div class="chat">
  1122. <ol>{block:Lines}
  1123. <li class="line {Alt}">
  1124. {block:Label}
  1125. <span class="label">
  1126. {Label}</span>
  1127. {/block:Label}{Line}</li>
  1128. {/block:Lines}
  1129. </ol></div>
  1130.  
  1131. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1132. {/block:Chat}
  1133.  
  1134. {block:Photo}
  1135. {block:Date}
  1136. <div class="infos">
  1137. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1138. </div>
  1139. {/block:Date}
  1140. {LinkOpenTag}
  1141. <img src="{PhotoURL-250}">
  1142. {LinkCloseTag}
  1143. {block:PermalinkPage}
  1144. {block:Caption}
  1145. <div class="caption">{Caption}</div>
  1146. {/block:Caption}
  1147. {/block:PermalinkPage}
  1148.  
  1149.  
  1150. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1151.  
  1152. {/block:Photo}
  1153.  
  1154. {block:Photoset}
  1155. {block:Date}
  1156. <div class="infos">
  1157. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1158. </div>
  1159. {/block:Date}
  1160. <div class="photo">
  1161. <div class="photoset">
  1162. {block:IndexPage}
  1163. {block:Photos}
  1164. <a href="{Permalink}">
  1165. <img src="{PhotoURL-HighRes}"></a>
  1166. {/block:Photos}
  1167. {/block:IndexPage}</div></div>
  1168. {block:PermalinkPage}
  1169. {Photoset-250}
  1170. {/block:PermalinkPage}
  1171.  
  1172. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1173. {/block:Photoset}
  1174.  
  1175. {block:Video}
  1176. {block:Date}
  1177. <div class="infos">
  1178. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1179.  
  1180. </div>
  1181. {/block:Date}
  1182. <div id="vids">
  1183. {Video-250}</div>
  1184. {block:PermalinkPage}
  1185. {block:Caption}
  1186. <div class="caption">{Caption}</div>
  1187. {/block:Caption}
  1188. {/block:PermalinkPage}
  1189.  
  1190. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1191. {/block:Video}
  1192.  
  1193. {block:Audio}
  1194. {block:Date}
  1195. <div class="infos">
  1196. <a href="{Permalink}">{Name}</a><i class="fa fa-retweet"></i>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1197.  
  1198. </div>
  1199. {/block:Date}
  1200. {block:AudioPlayer}
  1201. <div class="audio_contain">
  1202. <div class="player">
  1203. {AudioPlayerWhite}
  1204. </div>
  1205. </div>
  1206. {/block:AudioPlayer}
  1207. {block:AlbumArt}
  1208. <div class="player_art"><img src="{AlbumArtURL}"></div>
  1209. {/block:AlbumArt}
  1210. <div class="audio_info">
  1211. {block:TrackName}<span><b>Song:</b> {TrackName}</span>{/block:TrackName}
  1212. {block:Artist}<span><b>Artist:</b> {Artist}</span>{/block:Artist}
  1213. {block:PlayCount}<span><b>Plays:</b> {FormattedPlayCount}</span> {/block:PlayCount}
  1214. </div>
  1215.  
  1216. {block:PermalinkPage}
  1217. {block:Caption}
  1218. <div class="caption">{Caption}</div>
  1219. {/block:Caption}
  1220. {/block:PermalinkPage}
  1221.  
  1222. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1223. {/block:Audio}
  1224.  
  1225. {block:Answer}
  1226. {block:Date}
  1227. <div class="infos">
  1228. <a href="{Permalink}">{Name}</a><i class="fa fa-comments-o"></i> {Asker} <span class="info-right">{block:NoteCount}<a href="{Permalink}" title="{Timeago}">{NoteCountwithlabel}</a>{/block:NoteCount}
  1229. </div>
  1230. {/block:Date}
  1231. <div class="ques">
  1232. <div class="who">{Question}</div>
  1233. <div class="answer">{Answer}</div>
  1234. </div>
  1235.  
  1236. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1237. {/block:Answer}
  1238.  
  1239. </div>
  1240.  
  1241.  
  1242. {block:PostNotes}
  1243. <div class="pagenotes">
  1244. {PostNotes}
  1245. </div>
  1246. {/block:PostNotes}
  1247. {/block:Posts}
  1248.  
  1249. {block:ContentSource}
  1250. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1251. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1252. {/block:SourceLogo}
  1253. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  1254. {/block:ContentSource}
  1255.  
  1256. {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}
  1257.  
  1258. </div></div>
  1259.  
  1260.  
  1261. <div id="03" class="thepopup" class="{select:Change Background}">
  1262. <div id="main-date-3">
  1263. <div class="update-3">
  1264. <big class="update-title">FAQ TITLE</big><br>
  1265. <div class="about-p">
  1266. <p class="ask-p" style="padding:14px;">
  1267. Mauris pellentesque nibh izzle turpis. Gizzle izzle cool. That's the shizzle break yo neck, yall rhoncizzle fo shizzle. In hac habitasse i'm in the shizzle dictumst. Uhuh ... yih! dapibizzle. Mah nizzle go to hizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle, pretizzle ghetto, mattizzle yippiyo, uhuh ... yih! vitae, nunc. Sheezy suscipizzle. Integizzle semper own yo' pizzle shut the shizzle up
  1268. </p>
  1269.  
  1270.  
  1271.  
  1272. <p class="ask-p" style="padding:14px;">
  1273. Mauris pellentesque nibh izzle turpis. Gizzle izzle cool. That's the shizzle break yo neck, yall rhoncizzle fo shizzle. In hac habitasse i'm in the shizzle dictumst. Uhuh ... yih! dapibizzle. Mah nizzle go to hizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle, pretizzle ghetto, mattizzle yippiyo, uhuh ... yih! vitae, nunc. Sheezy suscipizzle. Integizzle semper own yo' pizzle shut the shizzle up
  1274. </p>
  1275.  
  1276. </div>
  1277. </div>
  1278.  
  1279. <div class="update-3">
  1280. <big class="update-title">ASKBOX</big><br>
  1281. <div class="about-p">
  1282. <iframe frameborder="0" height="200" id="ask_form" class="asks" scrolling="none" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"> </iframe>
  1283.  
  1284. </div>
  1285. </div>
  1286. </div>
  1287. </div>
  1288.  
  1289.  
  1290. <div id="01" class="thepopup" class="{select:Change Background}">
  1291. <div id="main-date">
  1292. <Center>
  1293. <div class="update-2"><!---Custom Tags Begin! --->
  1294.  
  1295. <big class="update-title">Tag Title</big><!---Title for the Tags --->
  1296. <p class="tag-info" style="text-align:left;">
  1297. <!---Just replac # with the name of the tag --->
  1298. <a href="/tagged/#"class="links">tag</a><br>
  1299. <a href="/tagged/#"class="links">tag</a><br>
  1300. <a href="/tagged/#"class="links">tag</a><br>
  1301. <a href="/tagged/#"class="links">tag</a><br>
  1302. <a href="/tagged/#"class="links">tag</a><br>
  1303. <a href="/tagged/#"class="links">tag</a><br>
  1304. <a href="/tagged/#"class="links">tag</a><br>
  1305. <a href="/tagged/#"class="links">tag</a><br>
  1306. <a href="/tagged/#"class="links">tag</a><br>
  1307. <a href="/tagged/#"class="links">tag</a><br>
  1308. </p>
  1309. </div>
  1310.  
  1311. <div class="update-2">
  1312. <big class="update-title">Tag Title</big>
  1313. <p class="tag-info" style="text-align:left;">
  1314. <a href="/tagged/#"class="links">tag</a><br>
  1315. <a href="/tagged/#"class="links">tag</a><br>
  1316. <a href="/tagged/#"class="links">tag</a><br>
  1317. <a href="/tagged/#"class="links">tag</a><br>
  1318. <a href="/tagged/#"class="links">tag</a><br>
  1319. <a href="/tagged/#"class="links">tag</a><br>
  1320. <a href="/tagged/#"class="links">tag</a><br>
  1321. <a href="/tagged/#"class="links">tag</a><br>
  1322. <a href="/tagged/#"class="links">tag</a><br>
  1323. <a href="/tagged/#"class="links">tag</a><br>
  1324. </p>
  1325. </div>
  1326.  
  1327. <div class="update-2">
  1328. <big class="update-title">Tag Title</big>
  1329. <p class="tag-info" style="text-align:left;">
  1330. <a href="/tagged/#"class="links">tag</a><br>
  1331. <a href="/tagged/#"class="links">tag</a><br>
  1332. <a href="/tagged/#"class="links">tag</a><br>
  1333. <a href="/tagged/#"class="links">tag</a><br>
  1334. <a href="/tagged/#"class="links">tag</a><br>
  1335. <a href="/tagged/#"class="links">tag</a><br>
  1336. <a href="/tagged/#"class="links">tag</a><br>
  1337. <a href="/tagged/#"class="links">tag</a><br>
  1338. <a href="/tagged/#"class="links">tag</a><br>
  1339. <a href="/tagged/#"class="links">tag</a><br>
  1340. </p>
  1341. </div>
  1342. <div class="update-2">
  1343. <big class="update-title">Tag Title</big>
  1344. <p class="tag-info" style="text-align:left;">
  1345. <a href="/tagged/#"class="links">tag</a><br>
  1346. <a href="/tagged/#"class="links">tag</a><br>
  1347. <a href="/tagged/#"class="links">tag</a><br>
  1348. <a href="/tagged/#"class="links">tag</a><br>
  1349. <a href="/tagged/#"class="links">tag</a><br>
  1350. <a href="/tagged/#"class="links">tag</a><br>
  1351. <a href="/tagged/#"class="links">tag</a><br>
  1352. <a href="/tagged/#"class="links">tag</a><br>
  1353. <a href="/tagged/#"class="links">tag</a><br>
  1354. <a href="/tagged/#"class="links">tag</a><br>
  1355. </p>
  1356. </div>
  1357.  
  1358. <div class="update-2">
  1359. <big class="update-title">Tag Title</big>
  1360. <p class="tag-info" style="text-align:left;">
  1361. <a href="/tagged/#"class="links">tag</a><br>
  1362. <a href="/tagged/#"class="links">tag</a><br>
  1363. <a href="/tagged/#"class="links">tag</a><br>
  1364. <a href="/tagged/#"class="links">tag</a><br>
  1365. <a href="/tagged/#"class="links">tag</a><br>
  1366. <a href="/tagged/#"class="links">tag</a><br>
  1367. <a href="/tagged/#"class="links">tag</a><br>
  1368. <a href="/tagged/#"class="links">tag</a><br>
  1369. <a href="/tagged/#"class="links">tag</a><br>
  1370. <a href="/tagged/#"class="links">tag</a><br>
  1371. </p>
  1372. </div>
  1373.  
  1374. <div class="update-2">
  1375. <big class="update-title">Tag Title</big>
  1376. <p class="tag-info" style="text-align:left;">
  1377. <a href="/tagged/#"class="links">tag</a><br>
  1378. <a href="/tagged/#"class="links">tag</a><br>
  1379. <a href="/tagged/#"class="links">tag</a><br>
  1380. <a href="/tagged/#"class="links">tag</a><br>
  1381. <a href="/tagged/#"class="links">tag</a><br>
  1382. <a href="/tagged/#"class="links">tag</a><br>
  1383. <a href="/tagged/#"class="links">tag</a><br>
  1384. <a href="/tagged/#"class="links">tag</a><br>
  1385. <a href="/tagged/#"class="links">tag</a><br>
  1386. <a href="/tagged/#"class="links">tag</a><br>
  1387. </p>
  1388. </div>
  1389.  
  1390.  
  1391. </div>
  1392. </div>
  1393. </div>
  1394. </div>
  1395. </div>
  1396. </div>
  1397.  
  1398.  
  1399. </body>
  1400. <script type="text/javascript"
  1401. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  1402.  
  1403. <script>
  1404. $(document).ready(function() {
  1405. //
  1406. //When you click on a link with class of poplight and the href starts with a #
  1407. $('a.poplight[href^=#]').click(function() {
  1408. var popID = $(this).attr('rel'); //Get Popup Name
  1409. var popURL = $(this).attr('href'); //Get Popup href to define size
  1410. //Pull Query & Variables from href URL
  1411. var query= popURL.split('?');
  1412. var dim= query[1].split('&');
  1413. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  1414. //Fade in the Popup and add close button
  1415. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i59.tinypic.com/ixcz12.png" class="btn_close" alt="close" /></a>');
  1416. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend;
  1417. //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
  1418. var popMargTop = ($('#' + popID).height() + 90) / 2;
  1419. var popMargLeft = ($('#' + popID).width() + 90) / 2;
  1420. //Apply Margin to Popup
  1421. $('#' + popID).css({
  1422. 'margin-top' : -popMargTop,
  1423. 'margin-left' : -popMargLeft
  1424. });
  1425. //Fade in Background
  1426. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  1427. $('#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
  1428. return false;
  1429. });
  1430. //Close Popups and Fade Layer
  1431. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  1432. $('#fade , .thepopup').fadeOut(function() {
  1433. $('#fade, a.close').remove(); //fade them both out
  1434.  
  1435. });
  1436. return false;
  1437. });
  1438.  
  1439. });
  1440. </script>
  1441. </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!