API tools faq
paste
katsthemes

header theme by kurapkia

katsthemes
Oct 24th, 2015
1,563
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.00 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. ♫ header theme by @kurapkia // base code by @animecharacter ♫
  6. ♫ please don't steal anything or claim as your own ♫
  7. ♫ thanks for using my theme! ♫
  8.  
  9. ----->
  10.  
  11. <meta charset="utf-8">
  12. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  13. {block:Description}
  14. <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16.  
  17. <title>{Title}</title>
  18.  
  19. <!---META NAMES START-->
  20. <meta name="color:background" content="#fff"/>
  21. <meta name="image:bg img" content=""/>
  22. <meta name="color:contentbg" content="#fff"/>
  23. <meta name="image:header img" content=""/>
  24. <meta name="color:text" content="#000"/>
  25. <meta name="color:textbg" content="#fff"/>
  26. <meta name="color:link" content="#aaa"/>
  27. <meta name="color:content border" content="#ccc"/>
  28. <meta name="select:font" content="arial" title="arial"/>
  29. <meta name="select:font" content="consolas" title="consolas"/>
  30. <meta name="select:font" content="andale mono" title="andale mono"/>
  31. <meta name="select:font" content="ms pgothic" title="ms pgothic"/>
  32.  
  33.  
  34. <!--META NAME SCROLLBAR START-->
  35. <meta name="color:scrollbar" content=""/>
  36. <meta name="color:scrollbar border" content=""/>
  37. <meta name="color:scrollbar track" content=""/>
  38. <!--META NAME SCROLLBAR END-->
  39.  
  40. <!--META NAME BLOCK START-->
  41. <meta name="if:centerposts" content="1"/>
  42. <meta name="if:leftposts" content=""/>
  43. <meta name="if:rightposts" content=""/>
  44. <meta name="if:textbg" content=""/>
  45. <meta name="if:hoverfooter" content=""/>
  46. <meta name="if:Small cursor" content=""/>
  47. <meta name="if:coverbg" content=""/>
  48. <meta name="if:250px" content=""/>
  49. <meta name="if:400px" content="1"/>
  50. <meta name="if:500px" content=""/>
  51. <!--META NAME BLOCK END-->
  52. <meta name="text:corner img url" content=""/>
  53. <meta name="text:corner img from bottom" content="0px"/>
  54. <meta name="text:corner img from right" content="0px"/>
  55. <meta name="text:corner img from left" content="0px"/>
  56.  
  57. <!--META NAME LINKS START-->
  58. <meta name="text:link1title" content="♪"/>
  59. <meta name="text:link1url" content="/"/>
  60. <meta name="text:link1hover" content="home"/>
  61. <meta name="if:link1" content="1"/>
  62.  
  63. <meta name="text:link2title" content="♫"/>
  64. <meta name="text:link2url" content="/ask"/>
  65. <meta name="text:link2hover" content="ask"/>
  66. <meta name="if:link2" content="1"/>
  67.  
  68. <meta name="text:link3title" content="♪"/>
  69. <meta name="text:link3url" content="/links"/>
  70. <meta name="text:link3hover" content="links"/>
  71. <meta name="if:link3" content="1"/>
  72.  
  73. <meta name="text:link4title" content="♫"/>
  74. <meta name="text:link4url" content="/about"/>
  75. <meta name="text:link4hover" content="about"/>
  76. <meta name="if:link4" content="1"/>
  77.  
  78. <meta name="text:link5title" content=""/>
  79. <meta name="text:link5url" content="/"/>
  80. <meta name="text:link5hover" content=""/>
  81. <meta name="if:link5" content=""/>
  82.  
  83. <meta name="text:link6title" content=""/>
  84. <meta name="text:link6url" content="/"/>
  85. <meta name="text:link6hover" content=""/>
  86. <meta name="if:link6" content=""/>
  87.  
  88. <!--META NAME LINKS END-->
  89.  
  90.  
  91. <!---META NAMES END-->
  92. <link rel="shortcut icon" href="{Favicon}">
  93. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  94. <link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  95.  
  96. <script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  97.  
  98. <style type="text/css">
  99.  
  100.  
  101. /*
  102. general text styles, fonts and colours
  103. */
  104. {block:ifSmallcursor}
  105. *, body, a, a:hover {cursor: url(http://i.imgur.com/2qleX.jpg), auto;}
  106. {/block:ifSmallcursor}
  107.  
  108. ::-webkit-scrollbar {
  109. width: 8px;
  110. height: 8px;
  111.  
  112. }
  113. ::-webkit-scrollbar-thumb {
  114. background-color: {color:scrollbar};
  115. border: 1px solid {color:scrollbar border};
  116.  
  117. }
  118. ::-webkit-scrollbar-track {
  119. background-color: {color:scrollbar track};
  120. border: 1px solid {color:scrollbar border};
  121. }
  122.  
  123. body {
  124. margin:0px;
  125. font-family: {select:font};
  126. font-size:12px;
  127. line-height:140%;
  128. color: {color:text};
  129. background-color:{color:background};
  130. background-attachment: fixed;
  131. background-image: url('{image:bg img}');
  132. {block:ifcoverbg}
  133. background-size: cover;
  134. -moz-background-size: cover;
  135. -o-background-size: cover;
  136. -webkit-background-size: cover;
  137. {/block:ifcoverbg}
  138. }
  139.  
  140. p{
  141. margin:0 0 10px 0;
  142. padding:0;
  143. }
  144.  
  145. {block:iftextbg}
  146. span{
  147. background:{color:textbg};
  148. }
  149. {/block:iftextbg}
  150.  
  151. pre {
  152. white-space: pre-wrap;
  153. white-space: -moz-pre-wrap;
  154. white-space: -pre-wrap;
  155. white-space: -o-pre-wrap;
  156. word-wrap: break-word;
  157. }
  158.  
  159. a{
  160. color:{color:link};
  161. text-decoration:none;
  162. }
  163.  
  164. a:hover{
  165. text-decoration:underline;
  166. }
  167.  
  168. li{
  169. margin-left:-15px;
  170. }
  171.  
  172. /*
  173. containers etc
  174. */
  175. #wrapper{
  176. width:600px;
  177. margin:50px auto;
  178. margin-top:0px;
  179. margin-bottom:0px;
  180.  
  181. }
  182.  
  183. #header{
  184. border:{text:border size} {select:border} {color:border};
  185. padding:35px;
  186. background-color:{color:contentbg};
  187. {block:ifcenterposts}
  188. margin-left:auto;
  189. margin-right:auto;
  190. {/block:ifcenterposts}
  191.  
  192. {block:ifleftposts}
  193. margin-left:0;
  194. margin-right:auto;
  195. {/block:ifleftposts}
  196.  
  197. {block:ifrightposts}
  198. margin-left:auto;
  199. margin-right:0;
  200. {/block:ifrightposts}
  201. max-width:{block:if250px}250px{/block:if250px} {block:if400px}400px{/block:if400px} {block:if500px}500px{/block:if500px};
  202. border-left: {color:content border} 1px solid;
  203. border-right: {color:content border} 1px solid;
  204. }
  205. #title{
  206. text-align:center;
  207. font-size:14px;
  208. }
  209. #desc{
  210. text-align:center;
  211. padding:5px 0px;
  212. }
  213.  
  214. #links{
  215. font-style:none;
  216. text-align:center;
  217. word-spacing:5px;
  218. }
  219.  
  220. #content{
  221. width:{block:if250px}280px{/block:if250px} {block:if400px}430px{/block:if400px} {block:if500px}530px{/block:if500px};
  222. overflow:hidden;
  223. padding:20px;
  224.  
  225. {block:ifcenterposts}
  226. margin-left:auto;
  227. margin-right:auto;
  228. {/block:ifcenterposts}
  229.  
  230. {block:ifleftposts}
  231. margin-left:0;
  232. margin-right:auto;
  233. {/block:ifleftposts}
  234.  
  235. {block:ifrightposts}
  236. margin-left:auto;
  237. margin-right:0;
  238. {/block:ifrightposts}
  239.  
  240.  
  241. background-color:{color:contentbg};
  242. border-left: {color:content border} 1px solid;
  243. border-right: {color:content border} 1px solid;
  244. }
  245.  
  246. .post{
  247. width:{block:if250px}250px{/block:if250px} {block:if400px}400px{/block:if400px};
  248. margin:0 0 50px 0;
  249. overflow:hidden;
  250. padding: 15px;
  251. }
  252.  
  253. #header img, .post img{
  254. max-width:100%;
  255. }
  256.  
  257. #header img{
  258. width:100px;
  259. border-radius:50%;
  260. display: block;
  261. margin-left: auto;
  262. margin-right: auto;
  263. padding:15px;
  264. }
  265.  
  266. #nav{
  267. margin:50px 0 0 0;
  268. text-align:center;
  269. text-transform:lowercase;
  270. word-spacing:5px;
  271. }
  272.  
  273. .media{
  274. margin:0 0 10px 0;
  275. }
  276.  
  277. .title{
  278. font-weight:normal;
  279. font-size:18px;
  280. margin:0 0 10px 0;
  281. }
  282.  
  283. .quote{
  284. font-weight:normal;
  285. font-size:16px;
  286. font-style:normal;
  287. margin:0 0 10px 0;
  288. }
  289.  
  290. .question{
  291. margin-bottom:10px;
  292. font-style:italic;
  293. }
  294.  
  295. blockquote{
  296. margin:0 0 10px 10px;
  297. padding:0 0 0 10px;
  298. border-left:solid 1px #000;
  299. }
  300.  
  301. .playerbuttonbg {
  302. position: absolute;
  303. left: 20px;
  304. top: 20px;
  305. width: 19px;
  306. height: 19px;
  307. background-color: #ffffff;
  308. padding: 10px;
  309. -webkit-border-radius: 40px;
  310. -moz-border-radius: 40px;
  311. border-radius: 40px;
  312. opacity: .4;
  313. filter: alpha(opacity=40);
  314. -moz-opacity: 0.4;
  315. -khtml-opacity: 0.4;
  316. transition: opacity .7s ease-in-out;
  317. -moz-transition: opacity .7s ease-in-out;
  318. -webkit-transition: opacity .7s ease-in-out;
  319. }
  320.  
  321. .playerbuttonbg:hover {
  322. opacity: 1;
  323. filter: alpha(opacity=100);
  324. -moz-opacity: 1;
  325. -khtml-opacity: 1;
  326. }
  327.  
  328. .newplayerbutton {
  329. position: relative;
  330. width: 19px;
  331. height: 19px;
  332. overflow: hidden;
  333. }
  334.  
  335. .playerbuttonhug {
  336. position: absolute;
  337. top: -18px;
  338. left: -7px;
  339. }
  340.  
  341. .tumblr_audio_player {
  342. height: 90px;
  343. width: 270px;
  344. -moz-transform: scale(0.60, 0.60);
  345. -webkit-transform: scale(0.60, 0.60);
  346. -o-transform: scale(0.60, 0.60);
  347. -ms-transform: scale(0.60, 0.60);
  348. transform: scale(0.60, 0.60);
  349. -moz-transform-origin: top left;
  350. -webkit-transform-origin: top left;
  351. -o-transform-origin: top left;
  352. -ms-transform-origin: top left;
  353. transform-origin: top left;
  354. }
  355.  
  356. .audioimgwrapper {
  357. position: absolute;
  358. left: 0px;
  359. top: 0px;
  360. -webkit-border-radius: 40px;
  361. -moz-border-radius: 40px;
  362. border-radius: 40px;
  363. overflow: hidden;
  364. width: 79px;
  365. height: 79px;
  366. }
  367.  
  368. .audioimgwrapper img {
  369. width: 100%;
  370. height: auto;
  371. -webkit-border-radius: 40px;
  372. -moz-border-radius: 40px;
  373. border-radius: 40px;
  374. }
  375.  
  376. .trackdetails {
  377. height:19px;
  378. width: auto;
  379. display:inline-block;
  380. margin-left: 90px;
  381. min-height: 85px;
  382. padding:5px;
  383. }
  384.  
  385. .audiowrapper {
  386. position: relative;
  387. display:inline-block;
  388. }
  389.  
  390. .post .footer{
  391. margin:0;
  392. text-align:center;
  393. font-size:11px;
  394. }
  395.  
  396. {block:ifhoverfooter}
  397. .footer{
  398. opacity:0;
  399. -webkit-transition:all 0.5s ease-in-out;
  400. -moz-transition:all 0.5s ease-in-out;
  401. -o-transition:all 0.5s ease-in-out;
  402. transition:all 0.5s ease-in-out;
  403. }
  404. .post:hover .footer{
  405. opacity:1;
  406. }
  407. {/block:ifhoverfooter}
  408.  
  409. ol.notes{
  410. list-style-type:none;
  411. padding:0;
  412. margin:0;
  413. }
  414.  
  415. ol.notes li.note img{
  416. width:16px;
  417. height:16px;
  418. }
  419.  
  420. ol.notes li.note{
  421. margin:0px;
  422. }
  423.  
  424. #credit {
  425. position: fixed;
  426. bottom: 10px;
  427. right: 10px;
  428. z-index: 1;
  429. }
  430.  
  431. {CustomCSS}
  432. </style>
  433. </head>
  434.  
  435. <body>
  436.  
  437.  
  438.  
  439. <div id="wrapper">
  440.  
  441.  
  442. <div id="header">
  443. <a href="/">
  444. <img src="{image:header img}">
  445. </a>
  446.  
  447.  
  448. <div id="title">
  449. <p><span>{Title}</span></p>
  450. </div>
  451.  
  452.  
  453. <div id="desc">
  454. <p><span>{Description}</span></p>
  455. </div>
  456.  
  457.  
  458. <div id="links">
  459. {block:iflink1}
  460. <a href="{text:link1url}" title="{text:link1hover}">{text:link1title}</a>
  461. {/block:iflink1}
  462.  
  463. {block:iflink2}
  464. <a href="{text:link2url}" title="{text:link2hover}">{text:link2title}</a>
  465. {/block:iflink2}
  466.  
  467. {block:iflink3}
  468. <a href="{text:link3url}" title="{text:link3hover}">{text:link3title}</a>
  469. {/block:iflink3}
  470.  
  471. {block:iflink4}
  472. <a href="{text:link4url}" title="{text:link4hover}">{text:link4title}</a>
  473. {/block:iflink4}
  474.  
  475. {block:iflink5}
  476. <a href="{text:link5url}" title="{text:link5hover}">{text:link5title}</a>
  477. {/block:iflink5}
  478.  
  479. {block:iflink6}
  480. <a href="{text:link6url}" title="{text:link6hover}">{text:link6title}</a>
  481. {/block:iflink6}
  482. </div>
  483. </div>
  484.  
  485.  
  486.  
  487. <div id="content">
  488. {block:Posts}
  489.  
  490. <div class="post">
  491.  
  492. {block:Text}
  493. {block:Title}
  494. <div class="title">{Title}</div>
  495. {/block:Title}
  496. {Body}
  497. {/block:Text}
  498.  
  499. {block:Photo}
  500. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  501.  
  502. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  503.  
  504. {/block:Photo}
  505.  
  506.  
  507. {block:Photoset}
  508. {block:if250px}
  509. <div class="media">{Photoset-250}</div>
  510. {/block:if250px}
  511.  
  512. {block:if400px}
  513. <div class="media">{Photoset-400}</div>
  514. {/block:if400px}
  515.  
  516. {block:if500px}
  517. <div class="media">{Photoset-500}</div>
  518. {/block:if500px}
  519.  
  520. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  521.  
  522. {/block:Photoset}
  523.  
  524. {block:Quote}
  525. <div class="quote">"{Quote}"</div>
  526. {block:Source}
  527. <div class="quotesource">{Source}</div>
  528. {/block:Source}
  529. {/block:Quote}
  530.  
  531. {block:Link}
  532. <div class="title"><a href="{URL}">{Name}</a></div>
  533. {block:Description}
  534. <div class="description">{Description}</div>
  535. {/block:Description}
  536. {/block:Link}
  537.  
  538. {block:Chat}
  539. {block:Title}
  540. <div class="title">{Title}</div>
  541. {/block:Title}
  542.  
  543. {block:Lines}
  544. <div class="{Alt} user_{UserNumber}">
  545. {block:Label}
  546. <b>{Label}</b>{/block:Label}
  547. &nbsp;{Line}
  548. </div>
  549. {/block:Lines}
  550. {/block:Chat}
  551.  
  552. {block:Video}
  553.  
  554. {block:if250px}
  555. <div class="media">{Video-250}</div>
  556. {/block:if250px}
  557.  
  558. {block:if400px}
  559. <div class="media">{Video-400}</div>
  560. {/block:if400px}
  561.  
  562. {block:if500px}
  563. <div class="media">{Video-500}</div>
  564. {/block:if500px}
  565.  
  566.  
  567. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  568.  
  569. {/block:Video}
  570.  
  571. {block:AudioPlayer}
  572. <div class="audiowrapper">
  573. {block:AlbumArt}
  574. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  575. {/block:AlbumArt}
  576.  
  577. <div class="playerbuttonbg">
  578. <div class="newplayerbutton">
  579. <div class="playerbuttonhug">
  580.  
  581. {AudioPlayerWhite}
  582.  
  583. </div>
  584. </div>
  585. </div>
  586.  
  587. <div class="trackdetails">
  588.  
  589. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  590. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  591. {block:Album}Album: {Album}{/block:Album}<br/>
  592. {PlayCountWithLabel}
  593.  
  594. </div>
  595. </div>
  596.  
  597. {block:Caption}{Caption}{/block:Caption}
  598.  
  599. {/block:AudioPlayer}
  600.  
  601.  
  602.  
  603. {block:Answer}
  604. <div class="question">{Asker} asked: {Question}</div>
  605. <div class="caption">{Answer}</div>
  606. {/block:Answer}
  607.  
  608.  
  609. {block:Date}
  610. <div class="footer">
  611. <span>
  612. <a href="{Permalink}">{TimeAgo}{block:NoteCount} (+{NoteCount}){/block:NoteCount}</a>
  613. {block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  614. {block:RebloggedFrom}<br><a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  615. {block:ContentSource}<a href="{SourceURL}">src</a>{/block:ContentSource}
  616. </span>
  617. </div>
  618.  
  619. {block:PermalinkPage}
  620. {block:NoteCount}
  621. {block:PostNotes}{PostNotes}{/block:PostNotes}
  622. {/block:NoteCount}
  623. {/block:PermalinkPage}
  624. {/block:Date}
  625.  
  626. </div>
  627. {/block:Posts}
  628.  
  629. {block:Pagination}
  630. <div id="nav">
  631. {block:PreviousPage}<a href="{PreviousPage}">{lang:Prev}</a>{/block:PreviousPage}
  632.  
  633. {block:NextPage}<a href="{NextPage}">{lang:Next}</a>{/block:NextPage}
  634. </div>
  635. {/block:Pagination}
  636. </div>
  637. </div>
  638.  
  639. </div>
  640.  
  641. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  642. <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  643.  
  644.  
  645. <div id="corner pic" style="position:fixed; bottom:{text:corner img from bottom}; left:{text:corner img from left}; right:{text:corner img from right}; z-index:-1;">
  646. <img src="{text:corner img url}" /></div>
  647.  
  648. <div id="credit">
  649. <a href="http://kurapkia.tumblr.com/" title="theme credit">♬</a>
  650. </div>
  651.  
  652. </body>
  653. </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!