Belgrravia

Sounds Like Hallelujah

Jun 14th, 2015
452
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.61 KB | None | 0 0
  1. <!--
  2. sounds like hallelujah
  3. theme by kalopsiathemes
  4. Please do not
  5. -remove the credit
  6. -steal parts of code
  7. -use as a base
  8.  
  9. Feel free to
  10. -edit parts of the theme
  11. -ask me any questions
  12. -->
  13. <!DOCTYPE html>
  14. <head>
  15. <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700|Open+Sans:400,700' rel='stylesheet' type='text/css'>
  16. <title>{Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}">
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20.  
  21.  
  22.  
  23. <meta name="color:Background" content="#ffffff"/>
  24. <meta name="color:link" content="#090909"/>
  25. <meta name="color:link hover" content="#090909"/>
  26. <meta name="color:borders" content="#090909"/>
  27. <meta name="color:title" content="#090909"/>
  28. <meta name="color:text" content="#090909"/>
  29. <meta name="image:Background" content=""/>
  30. <meta name="image:sidebar" content=""/>
  31.  
  32. <meta name="if:500px posts" content="0"/>
  33. <meta name="if:400px posts" content="1"/>
  34. <meta name="if:250px posts" content="0"/>
  35.  
  36.  
  37. <meta name="text:link1" content="">
  38. <meta name="text:link1url" content="" />
  39. <meta name="text:link2" content="">
  40. <meta name="text:link2url" content="" />
  41. <meta name="text:link3" content="">
  42. <meta name="text:link3url" content="" />
  43. <meta name="text:link4" content="">
  44. <meta name="text:link4url" content="" />
  45. <meta name="text:link5" content="">
  46. <meta name="text:link5url" content="" />
  47.  
  48. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  49. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  50.  
  51. <script>
  52.  
  53. (function($){
  54.  
  55. $(document).ready(function(){
  56.  
  57. $("a[title]").style_my_tooltips({
  58.  
  59. tip_follows_cursor:true,
  60.  
  61. tip_delay_time:30,
  62.  
  63. tip_fade_speed:300,
  64.  
  65. attribute:"title"
  66.  
  67. });
  68.  
  69. });
  70.  
  71. })(jQuery);
  72.  
  73. </script>
  74.  
  75. <script type="text/javascript"
  76. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  77.  
  78. <script>
  79.  
  80.  
  81.  
  82. $(document).ready(function() {
  83.  
  84. //
  85.  
  86.  
  87.  
  88. //When you click on a link with class of poplight and the href starts with a #
  89.  
  90. $('a.poplight[href^=#]').click(function() {
  91.  
  92. var popID = $(this).attr('rel'); //Get Popup Name
  93.  
  94. var popURL = $(this).attr('href'); //Get Popup href to define size
  95.  
  96.  
  97.  
  98. //Pull Query & Variables from href URL
  99.  
  100. var query= popURL.split('?');
  101.  
  102. var dim= query[1].split('&');
  103.  
  104. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  105.  
  106.  
  107.  
  108. //Fade in the Popup and add close button
  109.  
  110.  
  111. //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
  112.  
  113. var popMargTop = ($('#' + popID).height() + 80) / 2;
  114.  
  115. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  116.  
  117.  
  118.  
  119. //Apply Margin to Popup
  120.  
  121. $('#' + popID).css({
  122.  
  123. 'margin-top' : -popMargTop,
  124.  
  125. 'margin-left' : -popMargLeft
  126.  
  127. });
  128.  
  129.  
  130.  
  131. //Fade in Background
  132.  
  133. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  134.  
  135. $('#fade').css({'filter' : 'alpha(opacity=80)'}).delay(300).fadeIn(600); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  136.  
  137. $('#' + popID).delay(200).fadeIn(600).css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://static.tumblr.com/wi2dwmg/QUXnpy73e/button_close-128.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  138.  
  139. return false;
  140.  
  141. });
  142.  
  143.  
  144.  
  145. //Close Popups and Fade Layer
  146.  
  147. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  148.  
  149. $('#fade , .popup_block').fadeOut(function() {
  150.  
  151. $('#fade, a.close').remove(); //fade them both out
  152.  
  153. });
  154.  
  155. return false;
  156.  
  157. });
  158.  
  159.  
  160.  
  161.  
  162.  
  163. });
  164.  
  165. </script>
  166.  
  167.  
  168.  
  169.  
  170. <style type="text/css">
  171.  
  172. #s-m-t-tooltip {max-width:400px;
  173. padding:2px;
  174. margin:10px 0px 0px 10px;
  175. padding:2px 4px;
  176. background-color:{color:text};
  177. text-transform:uppercase;
  178. font-size:7px;
  179. letter-spacing:3px;
  180. color:{color:background};
  181. font-weight:700;
  182. z-index:999999999;
  183. }
  184.  
  185. ::-webkit-scrollbar {height: 0px;
  186. width: 3px;
  187. -webkit-border-radius: 0px;
  188. background-color:{color:background}}
  189. ::-webkit-scrollbar-thumb{background-color:{color:text};
  190. }
  191.  
  192. html, body {margin:0;padding:0;height:100%;}
  193.  
  194. body {
  195. background-color:{color:background};
  196. color:{color:text};
  197. font-size:9px;
  198. margin:0;
  199. font-family: 'PT Sans', sans-serif;
  200. background-image: url("{image:background}");
  201. background-repeat:repeat;
  202. background-position: bottom;
  203. background-attachment: fixed;
  204. }
  205.  
  206. #posts {
  207. {block:If500pxposts}
  208. width:500px;
  209. {/block:If500pxposts}
  210. {block:If400pxposts}
  211. width:400px;
  212. {/block:If400pxposts}
  213. {block:If250pxposts}
  214. width:250px;
  215. {/block:If250pxposts}
  216. margin-top:100px;
  217. }
  218.  
  219. #posts img {
  220. {block:If500pxposts}
  221. max-width:500px;
  222. {/block:If500pxposts}
  223. {block:If400pxposts}
  224. max-width:400px;
  225. {/block:If400pxposts}
  226. {block:If250pxposts}
  227. max-width:250px;
  228. {/block:If250pxposts}
  229. }
  230.  
  231.  
  232. #posts, #posts img, #posts blockquote {
  233. font-size:11px;
  234. color:{color:text};
  235. }
  236.  
  237.  
  238. .entries {
  239. {block:If500pxposts}
  240. width:500px;
  241. {/block:If500pxposts}
  242. {block:If400pxposts}
  243. width:400px;
  244. {/block:If400pxposts}
  245. {block:If250pxposts}
  246. width:250px;
  247. {/block:If250pxposts}
  248. padding:10px;
  249.  
  250. }
  251.  
  252. small {
  253. font-size:10px;
  254. }
  255.  
  256. big {
  257. font-size:12px;
  258. }
  259.  
  260.  
  261. h2 {
  262. font-size:14px;
  263. color:{color:title};
  264. text-align:center;
  265. text-transform:lowercase;
  266. }
  267.  
  268. h1 {
  269. font-size:10px;
  270. Text-align:center;
  271. letter-spacing:1px;
  272. color:{color:text};
  273. }
  274.  
  275. h3 {
  276. font-size:11px;
  277. color:{color:text};
  278. letter-spacing:1px;
  279.  
  280. }
  281.  
  282. #fade {
  283. display: none;
  284. background: #ffffff;
  285. position: fixed;
  286. left: 0;
  287. top: 0;
  288. width: 100%;
  289. height: 100%;
  290. opacity: 1;
  291. z-index: 9999;
  292. }
  293.  
  294. .popup_block{
  295. display:none;
  296. position:fixed;
  297. width:400px;
  298. left:55%;
  299. top:45%;
  300. padding:10px;
  301. text-align:center;
  302. background-color:{color:sidebar background};
  303. z-index: 99999;
  304. }
  305.  
  306. img.btn_close {
  307. position:fixed;
  308. top:50px;
  309. right:50px;
  310. }
  311.  
  312. *html #fade {
  313. position: absolute;
  314. }
  315.  
  316. *html .popup_block {
  317. position: absolute;
  318. }
  319.  
  320.  
  321. #content {
  322. width:100%;
  323. margin-left:40%;
  324. {block:If500pxposts}
  325. width:500px;
  326. {/block:If500pxposts}
  327. {block:If400pxposts}
  328. width:400px;
  329. {/block:If400pxposts}
  330. {block:If250pxposts}
  331. width:250px;
  332. {/block:If250pxposts}
  333. }
  334.  
  335.  
  336. #sidebar {
  337. width:100px;
  338. margin-left:200px;
  339. margin-top:100px;
  340. position:fixed;
  341. text-align:center;
  342. word-wrap:break-word;
  343. }
  344.  
  345. #sidebarimage img {
  346. width:60px;
  347. border-radius:50px;
  348. padding:5px;
  349. background-color:{color:borders};
  350. }
  351.  
  352. #description {
  353. font-size:10px;
  354. line-height:120%;
  355. padding:10px;
  356. padding-top:0px;
  357. text-align:left;
  358. background-color:{color:borders};
  359. }
  360.  
  361. #nav {
  362. text-transform:uppercase;
  363. word-wrap:break-word;
  364. text-align:center;
  365. font-size:9px;
  366. margin-top:5px;
  367. word-spacing:5px;
  368. letter-spacing:1px;
  369. padding:5px;
  370. }
  371.  
  372. #nav a:hover {
  373. cursor:help;
  374. }
  375.  
  376. .plus {
  377. font-size:9px;
  378. margin-top:2px;
  379. padding:5px;
  380. color:{color:title};
  381. font-weight:700;
  382. text-align:center;
  383. font-family: 'Open Sans', sans-serif;
  384. background-color:{color:borders};
  385. }
  386.  
  387. .plus a {
  388. font-size:11px;
  389. }
  390.  
  391. .plus a:hover {
  392. cursor:help;
  393. text-decoration:none;
  394. }
  395.  
  396.  
  397. #title {
  398. word-wrap:break-word;
  399. font-size:11px;
  400. text-transform:lowercase;
  401. color:{color:title};
  402. padding:10px;
  403. text-align:center;
  404. background-color:{color:borders};
  405. text-align:left;
  406. font-family: 'Open Sans', sans-serif;
  407. font-weight:700;
  408. }
  409.  
  410. #title1 {
  411. word-wrap:break-word;
  412. font-size:11px;
  413. text-transform:lowercase;
  414. color:{color:title};
  415. padding:5px;
  416. text-align:center;
  417. font-family:Arial, sans-serif;
  418. font-weight:700;
  419. }
  420.  
  421.  
  422.  
  423. #postinfo {
  424. {block:If500pxposts}
  425. width:490px;
  426. {/block:If500pxposts}
  427. {block:If400pxposts}
  428. width:390px;
  429. {/block:If400pxposts}
  430. {block:If250pxposts}
  431. width:240px;
  432. {/block:If250pxposts}
  433. font-size:9px;
  434. line-height:125%;
  435. margin-top:10px;
  436. padding:5px;
  437. letter-spacing:.5px;
  438. text-align:left;
  439. text-transform:lowercase;
  440. background-color:{color:borders};
  441. }
  442.  
  443. a:visited, a:link {
  444. text-decoration:none;
  445. color:{color:link};
  446. }
  447.  
  448. a:hover {
  449. cursor: crosshair;
  450. color:{color:link hover};
  451. }
  452.  
  453. .pagenotes {
  454. {block:IndexPage}
  455. display: none;
  456. {/block:IndexPage}
  457. {block:If500pxposts}
  458. width:490px;
  459. {/block:If500pxposts}
  460. {block:If400pxposts}
  461. width:390px;
  462. {/block:If400pxposts}
  463. {block:If250pxposts}
  464. width:240px;
  465. {/block:If250pxposts}
  466. margin-top:20px;
  467. text-transform:lowercase;
  468. font-size:9px;
  469. padding:5px;
  470. margin-left:10px;
  471. letter-spacing:1px;
  472. background-color:{color:borders};
  473. }
  474.  
  475. .pagenotes img {
  476. display:none;
  477. }
  478.  
  479. .pagenotes li {
  480. list-style-type:none;
  481. margin-left:-10px;
  482. padding:5px 0px;
  483. text-align:left;
  484. }
  485.  
  486. .pagi {
  487. {block:If500pxposts}
  488. width:490px;
  489. {/block:If500pxposts}
  490. {block:If400pxposts}
  491. width:390px;
  492. {/block:If400pxposts}
  493. {block:If250pxposts}
  494. width:240px;
  495. {/block:If250pxposts}
  496. margin-left:40%;
  497. text-align:center;
  498. word-spacing:5px;
  499. margin-top:50px;
  500. margin-bottom:30px;
  501. padding:10px;
  502. letter-spacing:1px;
  503. background-color:{color:borders};
  504. margin-bottom:50px;
  505. color:{color:link};
  506. font-size:10px;
  507. color:{color:title};
  508. font-weight:700;
  509. }
  510.  
  511. .pagi a {
  512. color:{color:title};
  513. }
  514.  
  515. .player {
  516. width:50px;
  517. height:25px;
  518. overflow:hidden;
  519. position:absolute;
  520. background:white;}
  521.  
  522. .audioinfo {
  523. margin-left:50px;
  524. font-size:12px;
  525. }
  526.  
  527. .q {
  528. text-align:center;
  529. font-weight:bold;
  530. }
  531.  
  532. .as {
  533. font-weight:bold;
  534. text-transform:uppercase;
  535. margin-bottom:10px;
  536. }
  537.  
  538.  
  539. .a {
  540. margin-top:10px;
  541.  
  542. }
  543.  
  544. .chat ol {
  545. padding:0;
  546. list-style:none;
  547. }
  548.  
  549. .label {font-weight:bold;
  550. }
  551.  
  552. .newplayerbutton {
  553. position: relative;
  554. width: 28px;
  555. height: 27px;
  556. overflow: hidden;
  557. }
  558.  
  559. .playerbuttonhug {
  560. position: absolute;
  561. top: -11px;
  562. left: -12px;
  563. }
  564.  
  565.  
  566. .tumblr_audio_player {
  567. border: none;
  568. padding: 0px;
  569. margin: 0px;
  570. height: 50px;
  571. width: 500px;
  572. }
  573.  
  574. .playerbuttonbg {
  575. position: absolute;
  576. z-index:999;
  577. left: 30px;
  578. top: 30px;
  579. width: 28px;
  580. height: 28px;
  581. background-color: #ffffff;
  582. padding: 10px;
  583. -webkit-border-radius: 40px;
  584. -moz-border-radius: 40px;
  585. border-radius: 0px;
  586. opacity: .4;
  587. filter: alpha(opacity=40);
  588. -moz-opacity: 0.4;
  589. -khtml-opacity: 0.4;
  590. transition: opacity .7s ease-in-out;
  591. -moz-transition: opacity .7s ease-in-out;
  592. -webkit-transition: opacity .7s ease-in-out;
  593. }
  594.  
  595. .playerbuttonbg:hover {
  596. opacity: 1;
  597. filter: alpha(opacity=100);
  598. -moz-opacity: 1;
  599. -khtml-opacity: 1;
  600. }
  601.  
  602. .audioimgwrapper {
  603. position: absolute;
  604. padding:10px;
  605. background-color:{color:sidebar background};
  606. left: 0px;
  607. top: 0px;
  608. -webkit-border-radius: 50px;
  609. -moz-border-radius: 50px;
  610. border-radius: 0px;
  611. overflow: hidden;
  612. width: 90px;
  613. height: 88px;
  614. }
  615.  
  616. .audioimgwrapper img {
  617. width: 100%;
  618. height: auto;
  619. -webkit-border-radius: 50px;
  620. -moz-border-radius: 50px;
  621. border-radius: 0px;
  622. }
  623.  
  624. .trackdetails {
  625. width: auto;
  626. display:inline-block;
  627. margin-left: 120px;
  628. line-height:200%;
  629. min-height: 85px;
  630. margin-top:0px;
  631. }
  632.  
  633. .audiowrapper {
  634. position: relative;
  635. display:inline-block;
  636. margin-bottom:20px;
  637. }
  638. #credit {
  639. position:fixed;
  640. color:{color:text};
  641. bottom:2px;
  642. right:1px;
  643. padding:4px;
  644. font-size:12px;
  645. }
  646.  
  647. #credit a {
  648. text-decoration:none;
  649. }
  650.  
  651.  
  652.  
  653. </style>
  654. </head>
  655. <body>
  656.  
  657. <div id="sidebar">
  658. <div id="title">{title}</div>
  659. <div id="description">{description}</div>
  660. <div class="plus"><a href="#?w=300" rel="popup_name" class="poplight">explore</a></div>
  661. </div>
  662. <div id="popup_name" class="popup_block">
  663. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  664. <div id="title1">{title}</div>
  665. <div id="nav">
  666. <a href="{text:link1url}">{text:link1}</a>
  667. <a href="{text:link2url}">{text:link2}</a>
  668. <a href="{text:link3url}">{text:link3}</a>
  669. <a href="{text:link4url}">{text:link4}</a>
  670. <a href="{text:link5url}">{text:link5}</a>
  671. </div></div>
  672.  
  673. <div id="content">
  674. {block:Posts}<div id="posts">
  675.  
  676. <div class="entries">
  677. {block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}
  678.  
  679. {block:Quote}<h2>&#147;{Quote}&#148;</h2><h1>{Source}</h1>{/block:Quote}
  680.  
  681. {block:Link}<a href="{URL}"><h3>{Name}</h3></a>
  682.  
  683. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  684.  
  685. {block:Photo} {block:If500pxposts}<img src="{PhotoURL-500}" />{block:Caption}{Caption}{/block:Caption} {/block:If500pxposts}{block:If400pxposts}<img src="{PhotoURL-400}" />{block:Caption}{Caption}{/block:Caption} {/block:If400pxposts}{block:If250pxposts}<img src="{PhotoURL-250}" />{block:Caption}{Caption}{/block:Caption} {/block:If250pxposts}{/block:Photo}
  686.  
  687. {block:Photoset}
  688. {block:If500pxposts}
  689. <center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}
  690. {/block:If500pxposts}
  691. {block:If400pxposts}
  692. <center>{Photoset-400}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  693.  
  694. {/block:If400pxposts}
  695. {block:If250pxposts}
  696. <center>{Photoset-250}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  697.  
  698. {/block:If250pxposts}
  699. {/block:Photoset}
  700.  
  701. {block:Chat}<ul class="chat">{block:Title}<h3>{Title}</h3>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</li>{/block:Lines}</ul>{/block:Chat}
  702.  
  703.  
  704. {block:Video} {block:If500pxposts} {Video-500}{block:Caption}{Caption}{/block:Caption}
  705. {/block:If500pxposts}
  706. {block:If400pxposts}
  707. {Video-400}{block:Caption}{Caption}{/block:Caption}
  708. {/block:If400pxposts}
  709. {block:If250pxposts}
  710. {Video-250}{block:Caption}{Caption}{/block:Caption}
  711. {/block:If250pxposts}{/block:Video}
  712.  
  713. {block:Audio}{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}<strong>{TrackName}</strong>{/block:TrackName}<br/>
  732. {block:Artist}<em>{Artist}</em> {/block:Artist}<br/>
  733. {block:Album}{Album}{/block:Album}<br/>
  734. {PlayCountWithLabel}
  735.  
  736. </div>
  737. </div>
  738. {/block:AudioPlayer}{/block:Audio}
  739.  
  740.  
  741. {block:Answer}
  742. <div class="q">
  743. <div class="as">{Asker} inquired: </div>
  744. {Question}</div>
  745. <div class="a">{Answer}</div>
  746. {/block:Answer}
  747.  
  748. {block:Date}<div id="postinfo">date: <a href="{permalink}">{ShortMonth}&nbsp;{DayofMonth}{DayofMonthSuffix}</a><br> notes: <a href="{permalink}">{NoteCount}</a>&nbsp;{block:RebloggedFrom}<br>via: <a href="{ReblogParentURL}">{ReblogParentName}</a>,{block:ContentSource}&nbsp;src: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}{/block:RebloggedFrom}{block:HasTags}<br>filed under: {block:Tags}<a href="{TagUrl}">{Tag},&nbsp;</a>{/block:Tags}</div>{/block:HasTags}{/block:Date}
  749. </div>
  750. {block:PostNotes}
  751. <div class="pagenotes">
  752. {PostNotes}
  753. </div>
  754. {/block:PostNotes}
  755. </div>
  756. {/block:Posts}
  757. </div>
  758. </div>
  759. {block:Pagination}
  760. <div class="pagi">
  761. {block:PreviousPage}
  762. <a href="{PreviousPage}"> back</a>
  763. {/block:PreviousPage}
  764.  
  765.  
  766. {block:NextPage}
  767. <a href="{NextPage}">next </a>
  768. {/block:NextPage}
  769. </div>
  770. {/block:Pagination}
  771.  
  772.  
  773. {block:ContentSource}
  774. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  775. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  776. {/block:SourceLogo}
  777. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  778. {/block:ContentSource}
  779. <div id="credit">
  780. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div>
  781.  
  782. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment