API tools faq
paste
jcegers

ILLUSION

jcegers
Aug 23rd, 2015
3,592
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <title>{Title}</title>
  6.  
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <!-----------
  12.  
  13. T H E M E S B Y
  14.  
  15. ░░░▒█ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀█ ▒█▀▀▀ ▒█▀▀█
  16. ░▄░▒█ ▒█░░░ ▒█▀▀▀ ▒█░▄▄ ▒█▀▀▀ ▒█▄▄▀
  17. ▒█▄▄█ ▒█▄▄█ ▒█▄▄▄ ▒█▄▄█ ▒█▄▄▄ ▒█░▒█
  18.  
  19. I N F O R M A T I O N
  20.  
  21. — JCEGER'S THEME #18: ILLUSION
  22. — MADE IN OPERA ( 1600X900 SCREEN RESOLUTION)
  23. — THIS THEME COMES WITH A LOT OF OPTIONS
  24. — SO MAKE SURE YOU SELECTED EVERYTHING YOU WANT
  25. — HAVE A QUESTION? MESSAGE TO tumblr @jceger or @jcethemes
  26.  
  27. T E R M S O F U S E / R U L E S
  28.  
  29. — DON'T MOVE OR DELETE THE CREDIT! JUST LEAVE IT WHERE IT IS!
  30. AFTER ALL MY THEMES ARE FREE! SO RESPECT THAT!
  31. — DO NOT STEAL ANY PART OF MY CODE
  32. — DO NOT USE AS A BASECODE
  33. — DO NOT TWEAK IT UNTIL IT IS UNRECOGNIZABLE
  34.  
  35. T H A N K Y O U!
  36.  
  37. ------------->
  38.  
  39. <!--Default Variables-->
  40.  
  41. <meta name="color:Background" content="#ffffff"/>
  42. <meta name="color:Accent" content="#dcdcdc"/>
  43. <meta name="color:Accent Text" content="#ffffff"/>
  44. <meta name="color:Text" content="#aaaaaa"/>
  45. <meta name="color:Link" content="#000000"/>
  46. <meta name="color:Hover" content="#000000"/>
  47. <meta name="color:Sidebar BG" content="#fff"/>
  48. <meta name="color:Blog Title" content="#aaaaaa"/>
  49. <meta name="color:Side Link" content="#121212"/>
  50. <meta name="color:Side Link Hover" content="#cfcfcf"/>
  51. <meta name="color:Description" content="#121212"/>
  52. <meta name="color:Description BG" content="#f7f7f7"/>
  53. <meta name="color:Post BG" content="#f7f7f7"/>
  54. <meta name="color:Post Text" content="#121212"/>
  55. <meta name="color:Ask BG" content="#000000"/>
  56. <meta name="color:Ask Text" content="#fafafa"/>
  57. <meta name="color:Post Info" content="#121212"/>
  58. <meta name="color:Post Info Hover" content="#dcdcdc"/>
  59. <meta name="color:Tags" content="#121212"/>
  60. <meta name="color:Tags Hover" content="#cfcfcf"/>
  61.  
  62. <meta name="color:Popup BG" content="#ffffff"/>
  63. <meta name="color:Popup Links" content="#ffffff"/>
  64. <meta name="color:Popup Links Hover" content="#f7f7f7"/>
  65. <meta name="color:Popup" content="#121212"/>
  66.  
  67. <meta name="image:Icon Image" content=""/>
  68. <meta name="image:Popup Image" content=""/>
  69.  
  70. <meta name="if:Hide Tags" content="0"/>
  71. <meta name="if:Hide Description" content="1"/>
  72. <meta name="if:Hide Popup Image" content="0"/>
  73. <meta name="if:Lazy Load" content="0" />
  74.  
  75. <meta name="text:Post Width" content="400"/>
  76. <meta name="text:Sidebar Width" content="180"/>
  77. <meta name="text:Sidebar Position Top" content="50"/>
  78. <meta name="text:Sidebar Position Left" content="150"/>
  79. <meta name="text:Post Spacing" content="100"/>
  80.  
  81. <meta name="text:Title" content="title"/>
  82. <meta name="text:Popup" content="links"/>
  83. <meta name="text:Popup Width" content="250"/>
  84.  
  85. <meta name="text:Link 1 URL" content=""/>
  86. <meta name="text:Link 1" content="link01" />
  87. <meta name="text:Link 2 URL" content=""/>
  88. <meta name="text:Link 2" content="link02"/>
  89. <meta name="text:Link 3 URL" content=""/>
  90. <meta name="text:Link 3" content="link03"/>
  91. <meta name="text:Link 4 URL" content=""/>
  92. <meta name="text:Link 4" content="link04" />
  93. <meta name="text:Link 5 URL" content=""/>
  94. <meta name="text:Link 5" content="link05"/>
  95.  
  96. <meta name="text:Link 1 URL" content=""/>
  97. <meta name="text:Link 1" content="link01" />
  98. <meta name="text:Link 2 URL" content=""/>
  99. <meta name="text:Link 2" content="link02"/>
  100. <meta name="text:Link 3 URL" content=""/>
  101. <meta name="text:Link 3" content="link03"/>
  102. <meta name="text:Link 4 URL" content=""/>
  103. <meta name="text:Link 4" content="link04" />
  104. <meta name="text:Link 5 URL" content=""/>
  105. <meta name="text:Link 5" content="link05"/>
  106. <meta name="text:Link 6 URL" content=""/>
  107. <meta name="text:Link 6" content="link06"/>
  108. <meta name="text:Link 7 URL" content=""/>
  109. <meta name="text:Link 7" content="link07" />
  110. <meta name="text:Link 8 URL" content=""/>
  111. <meta name="text:Link 8" content="link08"/>
  112. <meta name="text:Link 9 URL" content=""/>
  113. <meta name="text:Link 9" content="link09"/>
  114. <meta name="text:Link 10 URL" content=""/>
  115. <meta name="text:Link 10" content="link10"/>
  116. <meta name="text:Link 11 URL" content=""/>
  117. <meta name="text:Link 11" content="link11" />
  118. <meta name="text:Link 12 URL" content=""/>
  119. <meta name="text:Link 12" content="link12"/>
  120.  
  121. <!----- FONT AWESOME ----->
  122.  
  123. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  124.  
  125. <!----- FONTS ----->
  126.  
  127. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  128. <script src="//use.edgefonts.net/open-sans;pt-sans.js"></script>
  129.  
  130. <!-- JQUERY FOR TOOLTIPS-->
  131.  
  132. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  133. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  134. <script>
  135. (function($){
  136. $(document).ready(function(){
  137. $("a[title]").style_my_tooltips({
  138. tip_follows_cursor:true,
  139. tip_delay_time:30,
  140. tip_fade_speed:300,
  141. attribute:"title"
  142. });
  143. });
  144. })(jQuery);
  145. </script>
  146.  
  147. <!----- PHOTOSET RESIZE SCRIPT ----->
  148.  
  149. <script type="text/javascript">
  150. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  151. $(document).ready(function() {
  152. function photosetResize() {
  153. $('iframe.photoset').each(function(){
  154. var newSize = {select:post width};
  155. var newSrc = $(this).attr('src').replace('500',newSize);
  156. $(this).attr('src', newSrc).width(newSize);
  157. var high = $(this).css('height');
  158. var calculate = parseInt(high, 10)* newSize/500;
  159. $(this).css('height', calculate);
  160. });
  161. }
  162. photosetResize();
  163. });
  164. </script>
  165.  
  166. <!-------- LAZY LOAD ------->
  167.  
  168. {block:ifLazyLoad}
  169. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  170. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  171. <script type="text/javascript" charset="utf-8">
  172. var $j = jQuery.noConflict();
  173. $j(function() {
  174. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  175. $j("img").lazyload({
  176. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  177. effect: "fadeIn",
  178. });
  179. });
  180. </script>
  181. {/block:ifLazyLoad}
  182.  
  183. <!----- HIDE SCRIPT ----->
  184.  
  185. <script type="text/javascript">
  186. function unhide(divID) {
  187. var item = document.getElementById(divID);
  188. if (item) {
  189. item.className=(item.className=='hidden')?'unhidden':'hidden';
  190. }
  191. }
  192. </script>
  193.  
  194. <style type="text/css">
  195.  
  196. ::-moz-selection {
  197. background: {color:accent};
  198. color: {color:accent text};
  199. }
  200.  
  201. ::selection {
  202. background: {color:accent};
  203. color: {color:accent text};
  204. }
  205.  
  206. #s-m-t-tooltip{
  207. position:absolute;
  208. margin-top:25px;
  209. z-index:99999999;
  210. font-family:'open-sans';
  211. font-size:9px;
  212. letter-spacing:0.5px;
  213. text-transform:uppercase;
  214. padding:5px;
  215. font-weight:600;
  216. color:{color:Ask text};
  217. background:{color:Ask BG};
  218. }
  219.  
  220. ::-webkit-scrollbar-thumb:vertical {
  221. background-color:{color:accent};
  222. height:auto;
  223. border-radius:0px;
  224. border:0px #ddd solid;
  225. }
  226. ::-webkit-scrollbar-thumb:horizontal {
  227. height:0px !important;
  228. border-radius:0px;
  229. display:none;
  230. }
  231. ::-webkit-scrollbar {
  232. height:auto;
  233. width:2px;
  234. background-color:{color:background};
  235. border-radius:0px;
  236. }
  237.  
  238. body {
  239. background:{color:background};
  240. color:{color:text};
  241. font-weight:500;
  242. font-size:9px;
  243. letter-spacing:0.5px;
  244. font-family:'open-sans';
  245. text-align:justify;
  246. line-height:12px;
  247. margin:0;
  248. }
  249.  
  250. blockquote {
  251. padding:0px 7px;
  252. border-left:1px solid {color:accent};
  253. margin-left:5px;
  254. margin-right:5px;
  255. max-width:100%;
  256. }
  257.  
  258. a {
  259. color:{color:link};
  260. text-decoration:none;
  261. -moz-transition-duration: 0.5s;
  262. -o-transition-duration: 0.5s;
  263. -webkit-transition-duration: 0.5s;
  264. transition-duration: 0.5s;
  265. border-bottom:1px solid transparent;
  266. }
  267.  
  268. a:hover {
  269. color:{color:hover};
  270. text-decoration:none;
  271. -moz-transition-duration: 0.5s;
  272. -o-transition-duration: 0.5s;
  273. -webkit-transition-duration: 0.5s;
  274. transition-duration: 0.5s;
  275. border-bottom:1px solid {color:Accent};
  276. }
  277.  
  278. img {
  279. opacity:1;
  280. border:none;
  281. text-decoration:none
  282. }
  283.  
  284. small {
  285. font-size:9px;
  286. }
  287.  
  288. big {
  289. font-size:9px;
  290. }
  291.  
  292. pre {
  293. width:{text:Post Width}px;
  294. text-align:left;
  295. word-wrap:break-word;
  296. color:{color:Text};
  297. }
  298.  
  299. h1, h2 {
  300. font-size:15px;
  301. line-height:12px;
  302. font-weight:bold;
  303. margin-bottom:20px;
  304. letter-spacing:1px;
  305. text-transform:uppercase;
  306. text-align:center;
  307. padding:15px;
  308. color:{color:Text};
  309. }
  310.  
  311. #title {
  312. font-size:10px;
  313. line-height:12px;
  314. letter-spacing:1px;
  315. font-weight:bold;
  316. margin-bottom:10px;
  317. text-transform:uppercase;
  318. text-align:left;
  319. }
  320.  
  321. /* SIDEBAR */
  322.  
  323. #sidebar {
  324. text-align:left;
  325. position:fixed;
  326. margin-left:{text:Sidebar Position Left}px;
  327. margin-top:{text:Sidebar Position Top}px;
  328. width:{text:Sidebar Width}px;
  329. background:{color:Sidebar BG};
  330. }
  331.  
  332. #sidebarim img {
  333. width:245px;
  334. opacity:0.9;
  335. border-radius:10px 10px 0px 0px;
  336. }
  337.  
  338. #iconim img {
  339. width:50px;
  340. border-radius:0px 0px 0px 0px;
  341. margin-right:12px;
  342. margin-left:0px;
  343. margin-top:0px;
  344. float:left;
  345. border-left:0px solid {color:Accent};
  346. }
  347.  
  348. #blogt {
  349. margin-top:4px;
  350. margin-left:45px;
  351. margin-bottom:7px;
  352. font-size:15px;
  353. font-family:'open-sans';
  354. text-transform:uppercase;
  355. letter-spacing:1px;
  356. text-align:left;
  357. font-weight:600;
  358. color:{color:Blog Title};
  359. }
  360.  
  361. #blogt a {
  362. padding:0px;
  363. color:{color:Blog Title};
  364. border-bottom:1px solid {color:Accent};
  365. }
  366.  
  367. #links {
  368. text-align:left;
  369. text-transform:uppercase;
  370. letter-spacing:0.5px;
  371. margin-bottom:2px;
  372. line-height:10px;
  373. margin-top:0px;
  374. margin-left:54px;
  375. font-size:8px;
  376. color:{color:Side Link};
  377. font-weight:600;
  378. width:110px;
  379. }
  380.  
  381. #links a {
  382. margin-right:5px;
  383. font-size:7px;
  384. letter-spacing:1px;
  385. font-family:trebuchet ms;
  386. display:inline-block;
  387. font-weight:none;
  388. color:{color:Side Link};
  389. border-bottom:1px solid transparent;
  390. }
  391.  
  392. #links a:hover {
  393. color:{color:Side Link Hover};
  394. border-bottom:1px solid {color:accent};
  395. }
  396.  
  397. {block:ifHideDescription}
  398. .hidden { display:none;}
  399. {/block:ifHideDescription}
  400.  
  401. {block:ifNotHideDescription}
  402. .unhidden { display:block;}
  403. {/block:ifNotHideDescription}
  404.  
  405. #displaybx {
  406. margin-top:0px;
  407. position:absolute;
  408. overflow:hidden;
  409. }
  410.  
  411. #description {
  412. line-height:12px;
  413. padding:10px;
  414. margin-top:1px;
  415. text-align:justify;
  416. text-transform:none;
  417. font-weight:500;
  418. font-size:9px;
  419. letter-spacing:0.5px;
  420. font-family:'open-sans';
  421. color:{color:Description};
  422. background:{color:Description BG};
  423. border-left:0px solid {color:Accent};
  424. }
  425.  
  426. #description a {
  427. color:{color:Description};
  428. }
  429.  
  430.  
  431. /*pagination*/
  432. {block:indexPage}
  433. #pagination {
  434. margin:50px 0;
  435. text-align:center;
  436. text-transform:uppercase;
  437. font-weight:600;
  438. font-size:12px;
  439. padding:10px;
  440. background:{color:Sidebar BG};
  441. }
  442.  
  443. #pagination a {
  444. padding:0px;
  445. color:{color:Blog Title};
  446. border-bottom:1px solid {color:Accent};
  447. }
  448. {/block:indexPage}
  449.  
  450. /*posts*/
  451.  
  452. #entries {
  453. margin-top:0px;
  454. margin-left:400px;
  455. background:{color:Background};
  456. padding:50px;
  457. width:{text:Post Width}px!important;
  458. }
  459.  
  460. #posts {
  461. width:{text:Post Width}px!important;
  462. overflow:hidden;
  463. background:{color:Post BG};
  464. color:{color:post Text};
  465. {block:IndexPage}
  466. margin-bottom:{text:Post Spacing}px!important;
  467. {/block:IndexPage}
  468. {block:PermalinkPage}
  469. margin-bottom:50px;
  470. {/block:PermalinkPage}}
  471.  
  472. #posts img {
  473. max-width:{text:Post Width}px!important;
  474. }
  475.  
  476. #photo img, #pho iframe {
  477. width:{text:Post Width}px!important;
  478. display:block;
  479. }
  480.  
  481. .caption {
  482. width:100%;
  483. margin-top:0px;
  484. padding:6px;
  485. }
  486.  
  487. .video {
  488. position:relative;
  489. height:0;
  490. padding-bottom:56.25%;
  491. }
  492.  
  493. .video iframe {
  494. position:absolute;
  495. top:0;left:0;
  496. height:100%;
  497. width:100%;
  498. }
  499.  
  500. /*quote*/
  501. #titlequote{
  502. text-align:center;
  503. font-size:12px;
  504. line-height:12px;
  505. font-weight:bold;}
  506.  
  507. #source {
  508. margin-top:4px;
  509. text-align:right;
  510. margin-left:15px;}
  511.  
  512. /*audio*/
  513. .cover {
  514. position:relative;
  515. z-index:1;
  516. width:50px;
  517. }
  518.  
  519. #playbutton {
  520. width:28px;
  521. height:30px;
  522. overflow:hidden;
  523. position:relative;
  524. z-index:3;
  525. margin-top:12px;
  526. margin-left:12px;
  527. }
  528.  
  529. .playbox {
  530. background-color:{color:Ask BG};
  531. position: absolute;
  532. z-index:2;
  533. width:50px;
  534. height:50px;
  535. margin-left:50px;
  536. }
  537.  
  538. .au b{
  539. color:{color:Ask text};
  540. font-weight:700;
  541. margin-right:2px;}
  542.  
  543. .au {
  544. overflow: hidden;
  545. margin-left:100px;
  546. text-align:left;
  547. margin-top:-53px;
  548. padding:7px;
  549. background:{color:Ask BG};
  550. color:{color:Ask Text};
  551. }
  552.  
  553. /*asks*/
  554. .askim img {
  555. float:left;
  556. width:50px;
  557. margin-left:0px;
  558. margin-top:0px;
  559. margin-right:8px;
  560. background:transparent;
  561. margin-bottom:1px;
  562. }
  563.  
  564. .question {
  565. margin-top:-12px;
  566. padding:10px;
  567. line-height:13px;
  568. min-height:30px;
  569. text-transform:none;
  570. font-family:'open-sans';
  571. font-size:9px;
  572. letter-spacing:0.5px;
  573. background:{color:Ask BG};
  574. color:{color:Ask Text};
  575. text-align:left;
  576. }
  577.  
  578. .asker {
  579. text-transform:uppercase;
  580. font-family:'open-sans';
  581. color:{color:Ask Text};
  582. font-size:11px;
  583. margin-left:1px;
  584. text-align:left;
  585. font-weight:bold;
  586. letter-spacing:1px;
  587. display:inline;
  588. border-bottom:1px solid {color:Accent};
  589. }
  590.  
  591. .asker:hover {
  592. border-bottom:1px solid {color:Accent};
  593. }
  594.  
  595. .asker a {
  596. color:{color:Ask Text};
  597. }
  598.  
  599. .asker a:hover {
  600. color:{color:Ask Text};
  601. }
  602.  
  603. .answer {
  604. display:block;
  605. padding:7px;
  606. line-height:12px;
  607. }
  608.  
  609. /*chat*/
  610.  
  611. .chat ol {
  612. padding:0;
  613. list-style:none;
  614. margin-top:0px;
  615. margin-bottom:0px;
  616. }
  617.  
  618. .line {
  619. padding:7px 0;
  620. }
  621.  
  622. .label {
  623. font-weight:bold;
  624. text-transform:uppercase;
  625. }
  626.  
  627. .odd, .even {
  628. padding:7px;
  629. }
  630.  
  631. .odd {
  632. background:{color:Ask BG};
  633. color:{color:Ask Text};
  634. }
  635.  
  636. /*permalink and notes*/
  637.  
  638. .permapage {
  639. margin-top:0px;
  640. padding:10px 0px 10px 0px;
  641. line-height:100%;
  642. text-transform:uppercase;
  643. text-align:left;
  644. background:{color:Background};
  645. }
  646.  
  647. .permapage a {
  648. margin-right:7px;
  649. color:{color:Post Info};
  650. letter-spacing:0.5px;
  651. font-size:9px;
  652. font-family:'open-sans';
  653. }
  654.  
  655. .permapage a:hover {
  656. color:{color:Post Info Hover};
  657. }
  658.  
  659. #date {
  660. font-size:9px;
  661. font-family:'open-sans';
  662. text-transform:uppercase;
  663. letter-spacing:1px;
  664. text-align:left;
  665. font-weight:600;
  666. border-bottom:1px solid {color:Accent};
  667. }
  668.  
  669. #date a {
  670. color:{color:Post Info};
  671. }
  672.  
  673. #date a:hover {
  674. color:{color:Post Info Hover};
  675. }
  676.  
  677. .via {
  678. float:right;
  679. text-align:right;
  680. font-weight:none;
  681. letter-spacing:0.5px;
  682. font-size:8px;
  683. text-transform:none;
  684. }
  685.  
  686. .via a {
  687. padding:0px;
  688. color:{color:Post Info};
  689. background:transparent;
  690. }
  691.  
  692. .via a:hover {
  693. color:{color:Post Info Hover};
  694. background:transparent;
  695. }
  696.  
  697. {block:IndexPage}
  698. {block:ifHideTags}
  699. #posts:hover .tags {
  700. opacity:1;
  701. -moz-transition-duration:1s;
  702. -webkit-transition-duration:1s;
  703. -o-transition-duration:1s;
  704. }
  705. {/block:ifHideTags}
  706. {/block:indexPage}
  707.  
  708.  
  709. .tags {
  710. opacity:1;
  711. margin-top:5px;
  712. font-weight:none;
  713. {block:indexPage}
  714. {block:ifHideTags}
  715. opacity:0;
  716. -moz-transition-duration:1s;
  717. -webkit-transition-duration:1s;
  718. -o-transition-duration:1s;
  719. {/block:ifHideTags}
  720. {/block:indexPage}
  721. }
  722.  
  723. .tags a {
  724. text-transform:none;
  725. font-weight:none;
  726. letter-spacing:0.5px;
  727. font-size:9px;
  728. margin-right:5px;
  729. color:{color:Tags};
  730. -moz-transition-duration: 0.6s;
  731. -o-transition-duration: 0.6s;
  732. -webkit-transition-duration: 0.6s;
  733. transition-duration: 0.6s;
  734. }
  735.  
  736. .tags a:hover {
  737. color:{color:Tags Hover};
  738. -moz-transition-duration: 0.6s;
  739. -o-transition-duration: 0.6s;
  740. -webkit-transition-duration: 0.6s;
  741. transition-duration: 0.6s;
  742. }
  743.  
  744. .pagenotes {
  745. {block:IndexPage}
  746. display: none!important;
  747. {/block:IndexPage}
  748. width:{text:Post Width};
  749. text-align:left;}
  750.  
  751. .pagenotes img {
  752. display:none!important;}
  753.  
  754. .pagenotes li {
  755. list-style-type:none;
  756. padding:1px 0px;
  757. text-align:left;
  758. margin:0 0 0 -40px;}
  759.  
  760. .credit {
  761. position:fixed;
  762. font-family:'open-sans';
  763. font-weight:normal;
  764. line-height:100%;
  765. letter-spacing:0.3px;
  766. right:10px;
  767. bottom:10px;
  768. text-align:center;}
  769.  
  770. .credit a {
  771. font-weight:500;
  772. font-size:8px;
  773. padding:3px;
  774. color:{color:link};
  775. -moz-transition-duration:0.5s;
  776. -webkit-transition-duration:0.5s;
  777. -o-transition-duration:0.5s;}
  778.  
  779. #fade {
  780. display:none;
  781. background-color:{color:Popup BG};
  782. position:fixed;
  783. left:0;
  784. top:0;
  785. width:100%;
  786. height:100%;
  787. opacity:.9;
  788. z-index:9999;
  789. }
  790.  
  791. .popup_block{
  792. display:none;
  793. background:{color:Popup};
  794. color:{color:Popup Links};
  795. border:0px solid #eeeeee;
  796. padding:20px;
  797. float:left;
  798. position:fixed;
  799. line-height:13px;
  800. top:40%;
  801. left:42%;
  802. z-index:99999;
  803. }
  804.  
  805. .popup_block a {
  806. color:{color:Popup Links};
  807. }
  808.  
  809. #popupt {
  810. margin:10px 0px 0px 0px;
  811. font-size:15px;
  812. font-family:'open-sans';
  813. text-transform:uppercase;
  814. letter-spacing:1px;
  815. text-align:left;
  816. font-weight:600;
  817. width:auto;
  818. color:{color:Popup Links};
  819. padding-bottom:2px;
  820. border-bottom:1px solid {color:Accent};
  821. }
  822.  
  823. {block:ifHidePopupImage}
  824. .popupim img {display:none;}
  825. {/block:ifHidePopupImage}
  826.  
  827. {block:ifNotHidePopupImage}
  828. .popupim img {
  829. width:245px;
  830. margin:10px 0px 0px 0px;
  831. }
  832. {/block:ifNotHidePopupImage}
  833.  
  834. .popuplinks {
  835. display:block;
  836. margin:10px 0px;
  837. text-align:center;
  838. }
  839.  
  840. .popuplinks a {
  841. display:inline-block;
  842. color:{color:popup Links};
  843. padding:2px 2px 0px 2px;
  844. margin-right:5px;
  845. text-transform:uppercase;
  846. font-size:8px;
  847. letter-spacing:1.5px;
  848. font-family:trebuchet ms;
  849. font-weight:bold;
  850. margin-bottom:5px;
  851. text-align:center;
  852. border-bottom:1px solid transparent;
  853. }
  854.  
  855. .popuplinks a:hover {
  856. color:{color:Popup Links Hover};
  857. border-bottom:1px solid {color:Accent};
  858. }
  859.  
  860. .btn_close {
  861. float:right;
  862. margin:-55px -55px 0 0;
  863. }
  864.  
  865. *html #fade {
  866. position:absolute;
  867. }
  868.  
  869. *html .popup_block {
  870. position:absolute;
  871. }
  872.  
  873. {CustomCSS}
  874.  
  875. </style>
  876.  
  877. <script type="text/javascript"
  878. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  879. <script>
  880. $(document).ready(function() {
  881. //
  882. //When you click on a link with class of poplight and the href starts with a #
  883. $('a.poplight[href^=#]').click(function() {
  884. var popID = $(this).attr('rel'); //Get Popup Name
  885. var popURL = $(this).attr('href'); //Get Popup href to define size
  886. //Pull Query & Variables from href URL
  887. var query= popURL.split('?');
  888. var dim= query[1].split('&');
  889. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  890. //Fade in the Popup and add close button
  891. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
  892. //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
  893. var popMargTop = ($('#' + popID).height() + 80) / 2;
  894. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  895. //Apply Margin to Popup
  896. $('#' + popID).css({
  897. 'margin-top' : -popMargTop,
  898. 'margin-left' : -popMargLeft
  899. });
  900. //Fade in Background
  901. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  902. $('#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
  903. return false;
  904. });
  905. //Close Popups and Fade Layer
  906. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  907. $('#fade , .popup_block').fadeOut(function() {
  908. $('#fade, a.close').remove(); //fade them both out
  909. });
  910. return false;
  911. });
  912. });
  913. </script>
  914.  
  915. </head>
  916.  
  917. <body>
  918.  
  919. <div id="popup_name" class="popup_block">
  920. {block:ifNotHidePopupImage}
  921. <div class="popupim"><img src="{image:Popup Image}"></div>
  922. {/block:ifNotHidePopupImage}
  923. <div class="popuplinks">
  924. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  925. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  926. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  927. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  928. <br> <a href="{text:Link 5 URL}">{text:Link 5}</a>
  929. <a href="{text:Link 6 URL}">{text:Link 6}</a>
  930. <a href="{text:Link 7 URL}">{text:Link 7}</a>
  931. <a href="{text:Link 8 URL}">{text:Link 8}</a>
  932. <br> <a href="{text:Link 9 URL}">{text:Link 9}</a>
  933. <a href="{text:Link 10 URL}">{text:Link 10}</a>
  934. <a href="{text:Link 11 URL}">{text:Link 11}</a>
  935. <a href="{text:Link 12 URL}">{text:Link 12}</a>
  936. </div>
  937. </div>
  938.  
  939. <div id="sidebar">
  940. <div id="iconim"><img src="{image:Icon Image}"></div>
  941. <div id="blogt"><a href="/" title="{Title}">{text:Title}</a></div>
  942. <div id="links">
  943. 01 <a href="/">home</a>
  944. 02 <a href="/ask">message</a>
  945. 03 <a href="javascript:unhide('displaybx');">desc.</a>
  946. 04 <a href="#?w={text:Popup Width}" rel="popup_name" class="poplight" style="cursor:help;">
  947. {text:Popup}
  948. </a>
  949. </div>
  950. <div id="displaybx" class="hidden">
  951. <div id="description">
  952. {Description}
  953. </div>
  954. </div>
  955.  
  956. </div>
  957.  
  958. <div class="credit">
  959. <a href="http://jceger.tumblr.com" title="Theme">JCE</a>
  960. </div>
  961.  
  962. <div id="entries">
  963.  
  964. {block:Posts}
  965. <div id="posts">
  966.  
  967. {block:Quote}
  968. <div id="titlequote">“{Quote}”</div>
  969. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  970. {/block:Quote}
  971.  
  972. {block:Text}
  973. {block:Title}
  974. <div id="title">{Title}</div>{/block:Title}
  975. {Body}
  976. {/block:Text}
  977.  
  978. {block:Link}
  979. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  980. {/block:Link}
  981.  
  982. {block:Chat}
  983. {block:Title}
  984. <h1>{Title}</h1>
  985. {/block:Title}
  986. <div class="chat">
  987. <ol>{block:Lines}
  988. <li class="line {Alt}">
  989. {block:Label}
  990. <span class="label">
  991. {Label}</span>
  992. {/block:Label}{Line}</li>
  993. {/block:Lines}
  994. </ol></div>
  995. {/block:Chat}
  996.  
  997. {block:Photo}
  998. <div id="photo"><a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a></div>
  999. {/block:Photo}
  1000.  
  1001. {block:Photoset}<div id="photo">{Photoset}</div>{/block:Photoset}
  1002.  
  1003. {block:Video}<div class="video">{VideoEmbed-700}</div>{/block:Video}
  1004.  
  1005. {block:Audio}
  1006. <div class="playbox"><div id="playbutton">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>
  1007. {block:AlbumArt}
  1008. <img src="{AlbumArtURL}" class="cover">
  1009. {/block:AlbumArt}
  1010. <div class="au">
  1011. <b>Track:</b> {block:TrackName}{TrackName}{/block:TrackName}<br>
  1012. <b>Artist:</b> {block:Artist}{Artist}{/block:Artist}<br>
  1013. <b>Plays:</b> {block:PlayCount}{PlayCount}{/block:PlayCount}
  1014. </div>
  1015. {/block:Audio}
  1016.  
  1017. {block:Answer}
  1018. <div class="askim"><img src="{AskerPortraitURL-64}"></div><br>
  1019. <span><div class="question">
  1020. <div class="asker">{Asker}:</div>
  1021. {Question}</div></span>
  1022. <div class="answer">
  1023. {Answer}</div>
  1024. {/block:Answer}
  1025.  
  1026. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1027.  
  1028. {block:IndexPage}
  1029. {block:Date}
  1030. <div class="permapage">
  1031. <a href="{Permalink}" title="{timeago}" id="date">{Month} {DayOfMonthWithZero}{DayOfMonthSuffix}</a><a href="{ReblogURL}" target="_blank" title="reblog?" float="right"><i class="fa fa-retweet fa-fw"></i></a>
  1032. {block:HasTags}
  1033. <span class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</span>
  1034. {/block:HasTags}
  1035. </div>
  1036. {/block:Date}
  1037. {/block:IndexPage}
  1038.  
  1039. {block:PermalinkPage}
  1040. {block:Date}
  1041. <div class="permapage">
  1042. <a href="{Permalink}" title="{timeago}" id="date">{DayOfWeek}, {Month} {DayOfMonthWithZero}{DayOfMonthSuffix}</a> <a href="{Permalink}">{NoteCountWithLabel}</a>
  1043. <div class="via">
  1044. {block:RebloggedFrom}
  1045. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1046. <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  1047. {/block:RebloggedFrom}
  1048. </div>
  1049. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1050. </div>
  1051. {/block:Date}
  1052. {/block:PermalinkPage}
  1053.  
  1054. </div>
  1055.  
  1056. {block:PostNotes}
  1057. <div class="pagenotes">
  1058. {PostNotes}
  1059. </div>
  1060. {/block:PostNotes}
  1061.  
  1062. {/block:Posts}
  1063.  
  1064. <div id="pagination">
  1065. {block:Pagination}
  1066. {block:PreviousPage}
  1067. <a href="{PreviousPage}">back</a>
  1068. {/block:PreviousPage}
  1069.  
  1070. {block:NextPage}
  1071. <a href="{NextPage}">next</a>
  1072. {/block:NextPage}
  1073. {/block:Pagination}
  1074. </div>
  1075.  
  1076. </div>
  1077.  
  1078. {block:ContentSource}
  1079. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1080. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1081. {/block:SourceLogo}
  1082. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1083. {/block:ContentSource}
  1084.  
  1085. </body></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!