Belgrravia

Human

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