API tools faq
paste
jamidanielle_

CHASM

jamidanielle_
Feb 1st, 2016
1,881
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <!--------------------------------->
  8. <!-------------[CHASM]------------->
  9. <!-----THEME BY FOLKLORE THEMES---->
  10. <!----------FEBRUARY 2016---------->
  11. <!--DO NOT STEAL OR REMOVE CREDIT-->
  12. <!--------------------------------->
  13. <!--------------------------------->
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21. <title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24.  
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26.  
  27.  
  28.  
  29.  
  30. <!--meta stuff here-->
  31. <meta name="description" content="" />
  32. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  33. <meta name="image:Left Sidebar" content=""/>
  34. <meta name="image:Right Sidebar" content=""/>
  35. <meta name="color:Title" content=""/>
  36. <meta name="color:Title Background" content=""/>
  37. <meta name="color:Left Sidebar" content=""/>
  38. <meta name="color:Right Sidebar" content=""/>
  39. <meta name="color:Posts Background" content="#fff"/>
  40. <meta name="color:Background" content="#ffffff"/>
  41. <meta name="color:Text" content="#313030"/>
  42. <meta name="color:Links" content="#605f5f"/>
  43. <meta name="color:Link Hover" content="#CECECE" />
  44. <meta name="color:Scrollbar" content="#605f5f" />
  45. <meta name="text:Panel 1" content="" />
  46. <meta name="text:Panel 1 Content" content=""/>
  47. <meta name="text:Panel 2" content=""/>
  48. <meta name="text:Panel 2 Content" content=""/>
  49. <meta name="text:Panel 3" content=""/>
  50. <meta name="text:Panel 3 Content" content=""/>
  51. <meta name="text:Panel 4" content=""/>
  52. <meta name="text:Panel 4 Content" content=""/>
  53.  
  54.  
  55.  
  56. <style type="text/css">
  57.  
  58.  
  59. /*scrollbar stuff*/
  60.  
  61. ::-webkit-scrollbar-thumb:vertical {
  62. background-color:{color:Scrollbar};
  63. /*scrollbar's slider color*/
  64. height:100px;
  65. padding:2px;
  66. -moz-border-radius: 0px; /*these make bar rounded*/
  67. border-radius: 0px;
  68. }
  69.  
  70. ::-webkit-scrollbar-thumb:horizontal {
  71. background-color:#fff; /*scrollbar's slider color*/
  72. height:100px !important;
  73. }
  74.  
  75. ::-webkit-scrollbar {
  76. height:10px;
  77. padding:2px;
  78. width:7px; /*width of slider*/
  79. background-color:#fff;
  80. /*scrollbar's main color*/
  81. }
  82.  
  83. /**body**/
  84.  
  85. body {
  86. font-size:12px;
  87. font-family:Courier;
  88. color:{color:Text};
  89. margin:0 auto;
  90. background: {color:Background} url('{image:Background}') top left fixed; {block:ifbackgroundcover} background-repeat:no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; {/block:ifbackgroundcover} {block:ifnotbackgroundcover} background-repeat:repeat;{block:ifnotbackgroundcover}
  91. }
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98. a {
  99. color:{color:Links};
  100. text-decoration:none;
  101. -moz-transition-duration: 0.5s;
  102. -o-transition-duration: 0.5s;
  103. -webkit-transition-duration: 0.5s;
  104. transition-duration: 0.5s;
  105. }
  106.  
  107. a:hover {
  108. color:{color:Link Hover};
  109. text-decoration:none;
  110. -moz-transition-duration: 0.5s;
  111. -o-transition-duration: 0.5s;
  112. -webkit-transition-duration: 0.5s;
  113. transition-duration: 0.5s;
  114. }
  115.  
  116. #sidebar_left{
  117. height:100%;
  118. position:fixed;
  119. width:350px;
  120. background-color:{color:Left Sidebar};
  121. background-image:url('{image:Left Sidebar}');
  122. top:0px;
  123. left:0px;
  124.  
  125. }
  126.  
  127. #title{
  128. font-size:22px;
  129. letter-spacing:5px;
  130. text-transform:uppercase;
  131. font-weight:bold;
  132.  
  133. color:{color:Title};
  134. text-align:center;
  135. margin-top:240px;
  136. border:1px solid #000;
  137. width:150px;
  138. max-width:200px;
  139. margin-left:auto;
  140. margin-right:auto;
  141. background-color:{color:Title Background};
  142.  
  143.  
  144.  
  145. }
  146.  
  147.  
  148. #title a{
  149. color:{color:Title};
  150. }
  151.  
  152. #title a:hover{
  153. color:{color:Link Hover};
  154. }
  155.  
  156. #description{
  157. font-size:14px;
  158. text-align:center;
  159. color:{color:Title};
  160. background-color:{color:Title Background};
  161. max-width:300px;
  162. margin:12px auto 0px auto;
  163. border: 1px solid #000;
  164. padding:2px 1px;
  165.  
  166.  
  167. }
  168.  
  169.  
  170. #sidebar_right{
  171. height:100%;
  172. position:fixed;
  173. width:350px;
  174. background-color:{color:Right Sidebar};
  175. background-image:url('{image:Right Sidebar}');
  176. top:0px;
  177. right:0px;
  178.  
  179. }
  180.  
  181.  
  182. #accordion{
  183. margin-top:210px;
  184. margin-right:15px;
  185.  
  186. }
  187.  
  188. #accordion ul {
  189.  
  190. text-align: center;
  191.  
  192. margin: 0;
  193.  
  194. }
  195.  
  196. #accordion ul li {
  197.  
  198. list-style-type: none;
  199. text-transform:uppercase;
  200.  
  201. padding: 0.4em;
  202.  
  203. font-size: 14px;
  204.  
  205. color:{color:Title};
  206. background-color:{color:Title Background};
  207. border:1px solid #000;
  208.  
  209. letter-spacing: 0.2em;
  210. margin:10px;
  211.  
  212. transition: 0.3s ease all;
  213.  
  214.  
  215.  
  216. }
  217.  
  218.  
  219. .panel {
  220.  
  221. display: none;
  222.  
  223. padding: 25px;
  224.  
  225. border: 1px #000 solid;
  226.  
  227. margin:10px;
  228.  
  229. text-align:center;
  230. padding: 0.4em;
  231.  
  232. font-size: 11px;
  233.  
  234. background-color:{color:Title Background};
  235.  
  236. letter-spacing: 0.2em;
  237.  
  238. color:{color:Title};
  239.  
  240.  
  241.  
  242. }
  243.  
  244.  
  245. #posts {
  246.  
  247.  
  248. width:500px;
  249. margin:50px auto;
  250. padding:15px;
  251.  
  252. background-color:{color:Posts Background};
  253. border:1px solid {color:Border};
  254.  
  255.  
  256.  
  257.  
  258. }
  259.  
  260.  
  261.  
  262. #posts img {
  263.  
  264. margin:0 auto;
  265. width:500px;
  266. }
  267.  
  268.  
  269. #posts .title {
  270. color:{color:Links};
  271. font-size:18px;
  272. font-family:'PT Sans Narrow', sans-serif;
  273. padding:3px 2px 2px 2px;
  274. text-transform:uppercase;
  275.  
  276. }
  277.  
  278. #posts .text {
  279. font-size:11px;
  280. font-family:arial;
  281. }
  282.  
  283. #posts h2 {
  284. font-size:14px;
  285. font-weight:normal;
  286. margin:0px;
  287. font-family:Verdana;
  288. }
  289.  
  290. #posts h2 a {
  291. font-size:12px;
  292. }
  293.  
  294. blockquote {
  295. border-left: solid 1px {color:Text};
  296. margin: 0;
  297. padding-left: 10px;
  298. }
  299.  
  300.  
  301. #posts .photocap {
  302. opacity:1;
  303. font-size:11px;
  304. padding-bottom:2px;
  305.  
  306.  
  307. }
  308.  
  309. #posts:hover .photocap {
  310. opacity:1;
  311. font-size:11px;
  312. padding-bottom:2px;
  313. transition:0.5s ease;
  314. -o-transition:0.5s ease;
  315. -moz-transition:0.5s ease;
  316. -webkit-transition:0.5s ease;
  317.  
  318.  
  319. }
  320.  
  321.  
  322.  
  323. #posts .qut {
  324. font-size:15px;
  325. font-family:'PT Sans Narrow',sans-serif;
  326. text-transform:uppercase;
  327. text-align:center;
  328.  
  329. }
  330.  
  331. #posts .src {
  332. text-align:right;
  333. margin-top:-7px;
  334.  
  335.  
  336. }
  337.  
  338. #posts #qtmrk1 {
  339. font-size:30px;
  340. text-align:center;
  341. font-family:serif;
  342. margin-bottom:6px;
  343. }
  344.  
  345. #posts #qtmrk2 {
  346. font-size:30px;
  347. text-align:center;
  348. font-family:serif;
  349. margin-top:8px;
  350. }
  351.  
  352.  
  353. #posts .photoset {
  354. width:500px;
  355. padding-right:10px;
  356. /*edited~*/
  357. margin:0 auto;
  358.  
  359. /*edited~*/
  360. }
  361.  
  362. #posts .label{
  363. font-family:arial;
  364. display:inline;
  365. font-size:11px;
  366. padding-right:2px;
  367.  
  368. }
  369.  
  370. #posts .lines{
  371. font-family:arial;
  372. display:inline;
  373. font-size:11px;
  374.  
  375. }
  376.  
  377. .question {
  378. font-size:13px;
  379. color:{color:Text};
  380. font-family:arial;
  381. text-align:left;
  382.  
  383. }
  384.  
  385. .asker {
  386. font-size:12px;
  387. color:{color:Links};
  388. font-family:arial;
  389. text-align:left;
  390. padding-top:4px;
  391. padding-bottom:10px;
  392. display:inline;
  393. }
  394.  
  395. .answer {
  396. font-size:12px;
  397. color:{color:Text};
  398. font-family:arial;
  399. text-align:left;
  400.  
  401.  
  402. }
  403.  
  404.  
  405. td img{
  406. max-height:64px;
  407. max-width:64px;
  408. }
  409.  
  410. img {
  411. max-width:100%;
  412. }
  413.  
  414. .playerbuttonbg {
  415. position: absolute;
  416. left: 20px;
  417. top: 20px;
  418. width: 19px;
  419. height: 19px;
  420. background-color: #ffffff;
  421. padding: 10px;
  422. -webkit-border-radius: 40px;
  423. -moz-border-radius: 40px;
  424. border-radius: 40px;
  425. opacity: .4;
  426. filter: alpha(opacity=40);
  427. -moz-opacity: 0.4;
  428. -khtml-opacity: 0.4;
  429. transition: opacity .7s ease-in-out;
  430. -moz-transition: opacity .7s ease-in-out;
  431. -webkit-transition: opacity .7s ease-in-out;
  432. }
  433.  
  434. .playerbuttonbg:hover {
  435. opacity: 1;
  436. filter: alpha(opacity=100);
  437. -moz-opacity: 1;
  438. -khtml-opacity: 1;
  439. }
  440.  
  441. .newplayerbutton {
  442. position: relative;
  443. width: 19px;
  444. height: 19px;
  445. overflow: hidden;
  446. }
  447.  
  448. .playerbuttonhug {
  449. position: absolute;
  450. top: -18px;
  451. left: -7px;
  452. }
  453.  
  454. .tumblr_audio_player {
  455. height: 90px;
  456. width: 270px;
  457. -moz-transform: scale(0.60, 0.60);
  458. -webkit-transform: scale(0.60, 0.60);
  459. -o-transform: scale(0.60, 0.60);
  460. -ms-transform: scale(0.60, 0.60);
  461. transform: scale(0.60, 0.60);
  462. -moz-transform-origin: top left;
  463. -webkit-transform-origin: top left;
  464. -o-transform-origin: top left;
  465. -ms-transform-origin: top left;
  466. transform-origin: top left;
  467. }
  468.  
  469. .audioimgwrapper {
  470. position: absolute;
  471. left: 0px;
  472. top: 0px;
  473. -webkit-border-radius: 40px;
  474. -moz-border-radius: 40px;
  475. border-radius: 40px;
  476. overflow: hidden;
  477. width: 79px;
  478. height: 79px;
  479. }
  480.  
  481. .audioimgwrapper img {
  482. width: 100%;
  483. height: auto;
  484. -webkit-border-radius: 40px;
  485. -moz-border-radius: 40px;
  486. border-radius: 40px;
  487. }
  488.  
  489. .trackdetails {
  490. width: auto;
  491.  
  492. display:inline-block;
  493. margin-left: 90px;
  494. min-height: 85px;
  495. font-size:12px;
  496. font-family:sans-serif;
  497. color:{color:Text};
  498. }
  499.  
  500. .audiowrapper {
  501. position: relative;
  502. display:inline-block;
  503. }
  504. /**info & tags**/
  505.  
  506. #posts #info {
  507. opacity:1;
  508. font-size:11px;
  509.  
  510. padding-top:8px;
  511. font-family:Courier;
  512. text-align:right;
  513. text-transform:uppercase;
  514. margin:0 auto;
  515. border-top: 1px solid #dccbe7;
  516. }
  517.  
  518.  
  519.  
  520.  
  521. #posts:hover #info {
  522. opacity:1;
  523. font-size:11px;
  524.  
  525. font-family:Courier;
  526. text-transform:uppercase;
  527. padding-top:8px;
  528. text-align:right;
  529. border-top: 1px solid #eee;
  530. text-transform:uppercase;
  531. transition:0.5s ease;
  532. -o-transition:0.5s ease;
  533. -moz-transition:0.5s ease;
  534. -webkit-transition:0.5s ease;
  535. margin:0 auto;
  536. }
  537.  
  538.  
  539. #posts #info .tags{
  540. opacity:0;
  541. font-size:10px;
  542. font-family:Courier;
  543. letter-spacing:1px;
  544. text-align:right;
  545. text-transform:none;
  546. font-style:italic;
  547. }
  548.  
  549. #posts:hover #info .tags{
  550. opacity:1;
  551. font-size:10px;
  552. letter-spacing:1px;
  553. font-family:Courier;
  554. text-transform:none;
  555. text-align:right;
  556.  
  557. transition:0.5s ease;
  558. -o-transition:0.5s ease;
  559. -moz-transition:0.5s ease;
  560. -webkit-transition:0.5s ease;
  561.  
  562. }
  563.  
  564. #notecontainer {
  565. margin: 20px auto;
  566. width: 500px;
  567. font-size: 11px;
  568. }
  569.  
  570. #notecontainer ol.notes {
  571. list-style-type: none;
  572. margin: 0;
  573. padding: 0;
  574. }
  575.  
  576. #notecontainer img.avatar {
  577. margin-right: 10px;
  578. width: 16px;
  579. height: 16px;
  580. }
  581.  
  582.  
  583.  
  584. /**credit**/
  585.  
  586. #cred {
  587.  
  588. font-family:sans-serif;
  589. font-size:10px;
  590. }
  591.  
  592. #cred a {
  593. position:fixed;
  594. width:20px;
  595. padding-top:3px;
  596. padding-bottom:3px;
  597. bottom:5px;
  598. right:7px;
  599. text-align:center;
  600. box-align:center;
  601. text-transform:none;
  602. color:{color:Links};
  603. background-color:{color:Posts Background};
  604. border:1px solid {color:Border Color};
  605. }
  606.  
  607. #cred a:hover {
  608. color:{color:Links};
  609. background-color:#dccbe7;
  610. }
  611.  
  612. </style>
  613.  
  614.  
  615.  
  616. <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
  617.  
  618. <script type="text/javascript">
  619.  
  620. $(function() {
  621.  
  622.  
  623.  
  624. var $navLink = $('#accordion').find('li');
  625.  
  626.  
  627.  
  628. $navLink.on('click', function() {
  629.  
  630. var panelToShow = $(this).data('panel-id');
  631.  
  632. var $activeLink = $('#accordion').find('.active');
  633.  
  634.  
  635.  
  636. // show new panel
  637.  
  638. // .stop is used to prevent the animation from repeating
  639.  
  640. // if you keep clicking the same link
  641.  
  642. $('.' + panelToShow).stop().slideDown();
  643.  
  644. $('.' + panelToShow).addClass('active');
  645.  
  646.  
  647.  
  648.  
  649.  
  650. // hide the previous panel
  651.  
  652. $activeLink.stop().slideUp()
  653.  
  654. .removeClass('active');
  655.  
  656.  
  657.  
  658. });
  659.  
  660.  
  661.  
  662. });
  663.  
  664. </script>
  665.  
  666.  
  667. <script type="text/javascript" src="http://yourjavascript.com/21212225154/esz.js"></script>
  668.  
  669. </head>
  670.  
  671. <body>
  672.  
  673.  
  674.  
  675.  
  676. </div>
  677.  
  678.  
  679.  
  680. <!--posts & content-->
  681.  
  682.  
  683.  
  684. <div id="sidebar_left">
  685. <div id="title"><a href="/">{Title}</a></div>
  686. {block:Description} <div id="description">{Description}</div>{/block:Description}
  687.  
  688.  
  689. </div>
  690.  
  691.  
  692. <div class = "autopagerize_page_element" >
  693.  
  694. {block:Posts}
  695. <div id="posts">
  696.  
  697. {block:Photo}
  698. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  699. {block:Caption}<div class="photocap">{Caption}</div>{/block:Caption}
  700. {/block:Photo}
  701.  
  702. {block:Photoset}<div id="photoset">
  703. {Photoset}<!-- edited~ -->
  704. {block:Caption}<div class="photocap">{Caption}</div>{/block:Caption}</div>
  705. {/block:Photoset}
  706.  
  707. {block:Video}
  708. {Video-500}
  709. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  710. {/block:Video}
  711.  
  712. {block:Audio}
  713. {block:AudioPlayer}
  714. <div class="audiowrapper">
  715. {block:AlbumArt}
  716. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  717. {/block:AlbumArt}
  718.  
  719. <div class="playerbuttonbg">
  720. <div class="newplayerbutton">
  721. <div class="playerbuttonhug">
  722.  
  723. {AudioPlayerWhite}
  724.  
  725. </div>
  726. </div>
  727. </div>
  728.  
  729. <div class="trackdetails">
  730.  
  731. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  732. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  733. {block:Album}Album: {Album}{/block:Album}<br/>
  734. {PlayCountWithLabel}
  735.  
  736. </div>
  737. </div>
  738. {/block:AudioPlayer}
  739.  
  740. {block:Caption}{Caption}{/block:Caption}
  741. {/block:Audio}
  742.  
  743. {block:Quote}
  744. <div class="qut"><div id="qtmrk1">“</div>{Quote}<div id="qtmrk2">”</div></div>
  745. {block:Source}<div class="src"><br>&mdash; {Source}</div>{/block:Source}
  746. {/block:Quote}
  747.  
  748. {block:Text}
  749. {block:Title}<div class="title">{Title}</div>{/block:Title}
  750. <div class="text">{Body}</div>
  751. {/block:Text}
  752.  
  753. {block:Answer}
  754. <table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
  755. <tr>
  756. <td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-40}"></td>
  757. <td style="vertical-align:top;"><div class="asker">{Asker}</div> asked: <div class="question"><em>{Question}</em></div></td>
  758. </tr>
  759. </table>
  760. <div class="answer">{Answer}</div>
  761. {/block:Answer}
  762.  
  763.  
  764.  
  765. {block:Chat}
  766. {block:Title}<h1>{Title}</h1>{/block:Title}
  767. {block:Lines}{block:Label}<div class="label"><b>{Label}</b></div>{/block:Label}<div class="lines">{Line}</div><br>{/block:Lines}
  768. {/block:Chat}
  769.  
  770. {block:Link}
  771. <div class="title"><a href="{URL}">{Name}</a></div>
  772. {block:Description}
  773. <div class="text">{Description}</div>
  774. {/block:Description}
  775. {/block:Link}
  776.  
  777.  
  778.  
  779. <div id="info">
  780. <a href="{Permalink}">{block:Date}{TimeAgo}&nbsp;/&nbsp;{/block:Date}</a><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount}</a> &nbsp;
  781. {block:PermalinkPage}
  782. {block:RebloggedFrom} <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  783. &nbsp; {block:ContentSource} <a href="{SourceURL}"><a href="{SourceURL}">source</a>{/block:ContentSource}
  784. {block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}{/block:PermalinkPage}
  785.  
  786. {block:HasTags}<div id="tags">
  787. {block:Tags}
  788. <a href="{TagURL}"> #{Tag}&nbsp;</a>
  789. {/block:Tags}
  790. </div>
  791. {/block:HasTags}
  792.  
  793.  
  794.  
  795. </div>
  796.  
  797. {block:PostNotes}
  798. <div id="notecontainer">{PostNotes}</div>
  799. {/block:PostNotes}
  800. </div>
  801.  
  802.  
  803.  
  804.  
  805. {/block:Posts}
  806.  
  807.  
  808. </div>
  809.  
  810.  
  811. <div id="sidebar_right">
  812.  
  813. <div id="accordion">
  814.  
  815. <ul class="panels">
  816.  
  817. <li data-panel-id="panel1">{text:Panel 1}</li>
  818. <div class="panel panel1">
  819. <p>{text:Panel 1 Content}</p>
  820. </div>
  821. <li data-panel-id="panel2">{text:Panel 2}</li>
  822. <div class="panel panel2">
  823. <p>{text:Panel 2 Content}</p>
  824. </div>
  825. <li data-panel-id="panel3">{text:Panel 3}</li>
  826. <div class="panel panel3">
  827. <p>{text:Panel 3 Content}</p>
  828. </div>
  829. <li data-panel-id="panel4">{text:Panel 4}</li>
  830. <div class="panel panel4">
  831. <p>{text:Panel 4 Content}</p>
  832. </div>
  833.  
  834.  
  835.  
  836.  
  837.  
  838.  
  839. </ul>
  840.  
  841.  
  842.  
  843.  
  844. </div>
  845.  
  846.  
  847. </div>
  848.  
  849.  
  850. <div id="cred">
  851. <a href="http://folklorethemes.tumblr.com">f</a>
  852.  
  853. </div>
  854.  
  855. </body>
  856.  
  857.  
  858.  
  859.  
  860. </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!