Belgrravia

Dear Jack

Jan 16th, 2015
337
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.00 KB | None | 0 0
  1. <!--
  2. dear jack
  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. <link href='http://fonts.googleapis.com/css?family=Questrial|Roboto:400,700|Inconsolata' rel='stylesheet' type='text/css'>
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  21.  
  22.  
  23.  
  24. <meta name="color:Background" content="#ffffff"/>
  25. <meta name="color:title" content="#000000"/>
  26. <meta name="color:post background" content="#ffffff"/>
  27. <meta name="color:link" content="#000000"/>
  28. <meta name="color:link hover" content="#000000"/>
  29. <meta name="color:nav" content="#ffffff"/>
  30. <meta name="color:nav hover" content="#ffffff"/>
  31. <meta name="color:text" content="#000000"/>
  32. <meta name="image:sidebar" content=""/>
  33.  
  34. <meta name="if:500px posts" content="1"/>
  35. <meta name="if:400px posts" content="0"/>
  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.  
  76.  
  77. <style type="text/css">
  78.  
  79.  
  80.  
  81. ::-webkit-scrollbar {height: 2px;
  82. width: 4px;
  83. -webkit-border-radius: 0px;
  84. background-color:{color:posts}}
  85. ::-webkit-scrollbar-thumb{background-color:{color:text};
  86.  
  87. border:0px solid {color:scrollbar};}
  88. ::-webkit-scrollbar-track{background-color:{color:background};}
  89.  
  90.  
  91. #s-m-t-tooltip {max-width:400px;
  92. padding:2px;
  93. margin:10px 0px 0px 10px;
  94. padding:1px 4px;
  95. background-color:{color:text};
  96. text-transform:uppercase;
  97. font-size:7px;
  98. letter-spacing:2px;
  99. font-weight:700;
  100. font-family: 'Roboto', sans-serif;
  101. color:{color:background};
  102. z-index:999;
  103.  
  104. }
  105. body {
  106. background:{color:background};
  107. color:{color:text};
  108. font-size:11px;
  109. margin:0;
  110. font-family: 'Inconsolata', ;
  111. line-height:16px;}
  112.  
  113.  
  114. blockquote {
  115. padding-left:10px;
  116. margin:5px;
  117. margin-left:20px;
  118. word-wrap:break-word;
  119. }
  120.  
  121. #posts {
  122. {block:If500pxposts}
  123. width:500px;
  124. {/block:If500pxposts}
  125. {block:If400pxposts}
  126. width:400px;
  127. {/block:If400pxposts}
  128. margin-top:50px;
  129. }
  130.  
  131. #posts img {
  132. {block:If500pxposts}
  133. max-width:500px;
  134. {/block:If500pxposts}
  135. {block:If400pxposts}
  136. max-width:400px;
  137. {/block:If400pxposts}
  138. }
  139.  
  140.  
  141. #posts, #posts img, #posts blockquote {
  142. font-size:11px;
  143. color:{color:text};
  144. }
  145.  
  146. #entries {
  147. margin-bottom:100px;
  148. }
  149.  
  150.  
  151. small {
  152. font-size:10px;
  153. }
  154.  
  155. big {
  156. font-size:12px;
  157. }
  158.  
  159.  
  160. h2 {
  161. display:inline;
  162. font-size:14px;
  163. color:{color:title};
  164. font-weight:700;
  165. text-transform:uppercase;
  166. font-family: 'Roboto', sans-serif;
  167. }
  168.  
  169. h1 {
  170. font-size:10px;
  171. Text-align:center;
  172. letter-spacing:1px;
  173. color:{color:text};
  174. }
  175.  
  176. h3 {
  177. font-size:13px;
  178. color:{color:title};
  179. letter-spacing:1px;
  180. text-transform:uppercase;
  181.  
  182. }
  183.  
  184. #entire {
  185. width:550px;
  186. height:100%;
  187. margin:auto;
  188. background-color:{color:post background};
  189. }
  190.  
  191.  
  192. #content {
  193.  
  194. width:100%;
  195. {block:If500pxposts}
  196. width:500px;
  197. {/block:If500pxposts}
  198. {block:If400pxposts}
  199. width:400px;
  200. {/block:If400pxposts}
  201. margin:auto;
  202. margin-top:50px;
  203. }
  204.  
  205. #header {
  206. width:550px;
  207. height:200px;
  208. }
  209.  
  210. #header img {
  211. width:550px;
  212. height:200px;
  213. margin:auto;
  214. }
  215.  
  216. #sidebar {
  217. width:550px;
  218. margin:auto;
  219. padding-top:10px;
  220. }
  221.  
  222. #top {
  223. width:350px;
  224. margin:auto;
  225. text-align:center;
  226. }
  227.  
  228. #title{
  229. margin-top:10px;
  230. text-align:center;
  231. text-transform:uppercase;
  232. font-size:20px;
  233. display:inline;
  234. letter-spacing:2px;
  235. color:{color:title};
  236. font-weight:700;
  237. font-family: 'Roboto', sans-serif;
  238.  
  239. }
  240.  
  241. #description {
  242. width:350px;
  243. margin:auto;
  244. margin-top:10px;
  245. padding-bottom:10px;
  246. font-size:11px;
  247. word-wrap:break-word;
  248. text-align:center;
  249. line-height:180%;
  250. }
  251.  
  252. #postinfo {
  253. position:absolute;
  254. font-size:7px;
  255. {block:PermalinkPage}
  256. font-size:8px;
  257. margin-top:10px;
  258. {/block:PermalinkPage}
  259. {block:If500pxposts}
  260. margin-left:545px;
  261. {/block:If500pxposts}
  262. {block:If400pxposts}
  263. margin-left:495px;
  264. {/block:If400pxposts}
  265. text-align:left;
  266. width:100px;
  267. color:{color:link};
  268. word-wrap:break-word;
  269. line-height:400%;
  270. letter-spacing:2px;
  271. font-family: 'Roboto', sans-serif;
  272. text-transform:uppercase;
  273. opacity:0;
  274. -moz-transition-duration:all .7s ease-in-out;
  275. -webkit-transition-duration:all .7s ease-in-out;
  276. -o-transition-duration:all .7s ease-in-out;
  277. }
  278.  
  279. #posts:hover #postinfo {
  280. opacity:1;
  281. -moz-transition-duration:.7s;
  282. -webkit-transition-duration: .7s;
  283. -o-transition-duration:.7s;
  284. }
  285.  
  286.  
  287. a:link,a:visited {
  288. text-decoration:none;
  289. color:{color:link};
  290. }
  291.  
  292. a:hover {
  293. cursor:crosshair;
  294. text-decoration:none;
  295. color:{color:link hover};
  296. }
  297. #nav {
  298. margin-top:10px;
  299. margin-left:5px;
  300. font-size:11px;
  301. word-spacing:4px;
  302. font-style:italic;
  303. text-transform:lowercase;
  304. }
  305.  
  306. #nav a {
  307. color:{color:nav};
  308. text-decoration:none;
  309. }
  310.  
  311. #nav a:hover {
  312. color:{color:nav hover};
  313. text-decoration:none;
  314. }
  315.  
  316.  
  317. #permalink {
  318. font-size:8px;
  319. word-wrap:break-word;
  320. margin-top:5px;
  321. text-align:center;
  322. letter-spacing:1px;
  323. text-transform:uppercase;
  324. {block:If500pxposts}
  325. width:500px;
  326. {/block:If500pxposts}
  327. {block:If400pxposts}
  328. width:400px;
  329. {/block:If400pxposts}
  330. }
  331.  
  332. .tags {
  333. text-align:center;
  334. margin-top:5px;
  335. font-size:8px;
  336. font-family: 'Roboto', sans-serif;
  337. word-wrap:break-word;
  338. letter-spacing:1px;
  339. text-transform:lowercase;
  340. {block:IndexPage}
  341. opacity:0;
  342. {/block:IndexPage}
  343. }
  344.  
  345.  
  346. .pagenotes {
  347. margin-top:40px;
  348. margin-left:-20px;
  349. font-family: 'Roboto', sans-serif;
  350. text-transform:lowercase;
  351. font-size:9px;
  352. letter-spacing:1px;
  353. {block:IndexPage}
  354. display: none;
  355. {/block:IndexPage}
  356. {block:If500pxposts}
  357. width:500px;
  358. {/block:If500pxposts}
  359. {block:If400pxposts}
  360. width:400px;
  361. {/block:If400pxposts}
  362. }
  363.  
  364.  
  365.  
  366. .pagenotes img {
  367. display:none;}
  368. .pagenotes li {
  369. list-style-type:none;
  370. padding:5px 0px;
  371. text-align:center;
  372. margin:0 0 0 0px;
  373. }
  374.  
  375.  
  376.  
  377. #pagi {
  378. font-size:10px;
  379. width:100%;
  380. text-align:center;
  381. margin-bottom:50px;
  382. color:{color:links};
  383. letter-spacing:0px;
  384. }
  385.  
  386. #pagi a {
  387. display:inline-block;
  388. color:{color:links};
  389. }
  390.  
  391. #pagi a:hover {
  392. color:{color:links hover};
  393. }
  394.  
  395. .player {
  396. width:25px;
  397. height:25px;
  398. overflow:hidden;
  399. position:absolute;
  400. background:white;}
  401.  
  402. .audioinfo {
  403. margin-left:50px;
  404. font-size:12px;
  405. }
  406.  
  407. .q {
  408. text-align:center;
  409. font-weight:bold;
  410. }
  411.  
  412. .as {
  413. font-weight:bold;
  414. text-transform:uppercase;
  415. margin-bottom:10px;
  416. }
  417.  
  418.  
  419. .a {
  420. margin-top:10px;
  421.  
  422. }
  423.  
  424. .chat ol {
  425. padding:0;
  426. list-style:none;
  427. }
  428.  
  429. .label {font-weight:bold;
  430. }
  431.  
  432. .newplayerbutton {
  433. position: relative;
  434. width: 20px;
  435. height: 27px;
  436. top:15px;
  437. left:20px;
  438. overflow: hidden;
  439. }
  440.  
  441. .playerbuttonhug {
  442. position:absolute;
  443. top: -15px;
  444. left: -10px;
  445. }
  446.  
  447.  
  448. .tumblr_audio_player {
  449. border: none;
  450. padding: 0px;
  451. margin: 0px;
  452. height: 50px;
  453. width: 500px;
  454. }
  455.  
  456. .playerbuttonbg {
  457. position:absolute;
  458. left: 20px;
  459. top: 0px;
  460. width: 50px;
  461. height: 50px;
  462. background-color: #ffffff;
  463. padding: 10px;
  464. }
  465.  
  466. .audioimgwrapper {
  467. position:absolute;
  468. left: 0px;
  469. top: 0px;
  470. overflow: hidden;
  471. width: 90px;
  472. height: 88px;
  473. }
  474.  
  475. .audioimgwrapper img {
  476. width: 100%;
  477. height: auto;
  478. }
  479.  
  480. .trackdetails {
  481. width: auto;
  482. display:inline-block;
  483. text-transform:uppercase;
  484. line-height:200%;
  485. margin-left: 110px;
  486. min-height: 85px;
  487. }
  488.  
  489. .audiowrapper {
  490. position: relative;
  491. display:inline-block;
  492. }
  493. #credit {
  494. position:fixed;
  495. color:{color:text};
  496. bottom:5px;
  497. right:10px;
  498. padding:4px;
  499. font-size:12px;
  500. }
  501.  
  502. #credit a {
  503. text-decoration:none;
  504. }
  505.  
  506.  
  507. </style>
  508. </head>
  509. <body>
  510.  
  511. <div id="entire">
  512. <div id="header"><img src="{image:sidebar}"></div>
  513. <div id="sidebar">
  514. <div id="top">
  515. <div id="title">{Title}</div>
  516. <div id="nav">
  517. <a href="{text:Link1url}">{text:link1}</a> //
  518. <a href="{text:Link2url}">{text:link2}</a> //
  519. <a href="{text:Link3url}">{text:link3}</a> //
  520. <a href="{text:Link4url}">{text:link4}</a> //
  521. <a href="{text:Link5url}">{text:link5}</a>
  522. </div></div>
  523. <div id="description">{Description}</div>
  524. </div>
  525.  
  526. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js"></script>
  527. <div id="content">
  528. <div class="autopagerize_page_element">
  529. {block:Posts}<div id="posts">
  530.  
  531. {block:Date}{block:IndexPage}<div id="postinfo">{12Hour}:{Minutes}&nbsp;{CapitalAmPm}&nbsp;<a href="{Permalink}">+{NoteCount}</a>{/block:NoteCount}<br><a href="{ReblogURL}">reblog</a>
  532. </div>{/block:IndexPage}{/block:Date}
  533.  
  534. <div id="entries">
  535. {block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}{Body}{/block:Text}
  536.  
  537. {block:Quote}<h2><center>&#x201C;{Quote}&#x201D;</center></h2><h1>-{Source}</h1>{/block:Quote}
  538.  
  539. {block:Link}</div><a href="{URL}"><h3>{Name}</h3></a>
  540.  
  541. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  542.  
  543. {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}
  544.  
  545. {block:Photoset}
  546. {block:If500pxposts}
  547. <center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}
  548. {/block:If500pxposts}
  549. {block:If400pxposts}
  550. <center>{Photoset-400}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  551.  
  552. {/block:If400pxposts}
  553. {block:If250pxposts}
  554. <center>{Photoset-250}</center>{block:Caption}{Caption} {/block:If400pxposts}{/block:Caption}
  555.  
  556. {/block:If250pxposts}
  557. {/block:Photoset}
  558.  
  559. {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}
  560.  
  561. {block:Video} {block:If500pxposts}
  562. {Video-500}{block:Caption}{Caption}{/block:Caption}
  563. {/block:If500pxposts}
  564. {block:If400pxposts}
  565. {Video-400}{block:Caption}{Caption}{/block:Caption}
  566. {/block:If400pxposts}
  567. {block:If250pxposts}
  568. {Video-250}{block:Caption}{Caption}{/block:Caption}
  569. {/block:If250pxposts}{/block:Video}
  570.  
  571. {block:Audio}{block:AudioPlayer}
  572. <div class="audiowrapper">
  573.  
  574. <div class="playerbuttonbg">
  575. <div class="newplayerbutton">
  576. <div class="playerbuttonhug">
  577.  
  578. {AudioPlayerWhite}
  579.  
  580. </div>
  581. </div>
  582. </div>
  583.  
  584. <div class="trackdetails">
  585.  
  586. {block:TrackName}<strong>{TrackName}</strong>{/block:TrackName}<br/>
  587. {block:Artist}<em>{Artist}</em>{/block:Artist}<br/>
  588. {block:Album}{Album}{/block:Album}<br/>
  589.  
  590. </div>
  591. </div>
  592. {/block:AudioPlayer}{/block:Audio}
  593.  
  594.  
  595. {block:Answer}
  596. <div class="q">
  597. <div class="as">{Asker} inquired: </div>
  598. {Question}</div>
  599. <div class="a">{Answer}</div>
  600. {/block:Answer}
  601.  
  602.  
  603. {block:Date}
  604. {block:PermalinkPage}<div id="permalink">{12Hour}:{Minutes}&nbsp;{CapitalAmPm}&nbsp;<a href="{Permalink}">+{NoteCount}</a>{/block:NoteCount}&nbsp;&nbsp;{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via&nbsp;</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">//&nbsp;src&nbsp;</a>{/block:ContentSource}{/block:RebloggedFrom}<br>{block:HasTags}<div class="tags">filed under:{block:Tags}<a href="{TagUrl}">&nbsp;{Tag},&nbsp;</a>{/block:Tags}</div>{/block:HasTags}</div>{/block:PermalinkPage}{/block:Date}
  605.  
  606.  
  607. {block:PostNotes}
  608. <div class="pagenotes">
  609. {PostNotes}
  610. </div>
  611. {/block:PostNotes}
  612. </div>
  613. {/block:Posts}
  614. </div>
  615. </div>
  616. </div>
  617. </div>
  618.  
  619. {block:ContentSource}
  620. {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  621. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  622. {/block:SourceLogo}
  623. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}
  624. {/block:ContentSource}
  625.  
  626. <div id="credit">
  627. <a href="http://kalopsiathemes.tumblr.com" title="kalopsiathemes"</div>&#916;</a></div>
  628.  
  629. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment