Belgrravia

Passing Afternoon

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