API tools faq
paste
katsthemes

paprika theme

katsthemes
Nov 27th, 2015
4,170
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. paprika theme by @kurapkia
  6. (base code by @animecharacter)
  7.  
  8. hey! thank you for using my
  9. theme! all i ask is that you
  10. don't remove the credit thank you!!
  11.  
  12. ----->
  13.  
  14. <meta charset="utf-8">
  15. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19.  
  20. <title>{Title}</title>
  21.  
  22. <meta name="color:background color" content="#fff"/>
  23. <meta name="image:background image" content=""/>
  24. <meta name="if:coverbackground" content=""/>
  25. <meta name="color:text color" content="#000"/>
  26.  
  27. <meta name="if:sidebarbackground" content=""/>
  28. <meta name="color:sidebar background" content="#fff"/>
  29. <meta name="if:postbackground" content=""/>
  30. <meta name="color:post background" content="#fff"/>
  31.  
  32. <meta name="color:link color" content="#000"/>
  33. <meta name="color:link hover color" content="#000"/>
  34. <meta name="if:nounderlinedlinks" content=""/>
  35. <meta name="if:hoverfooter" content="1"/>
  36.  
  37. <meta name="text:corner image url" content=""/>
  38. <meta name="text:corner image from bottom" content="0px"/>
  39. <meta name="text:corner image from right" content="0px"/>
  40.  
  41. <meta name="select:font" content="arial" title="arial"/>
  42. <meta name="select:font" content="consolas" title="consolas"/>
  43. <meta name="select:font" content="serif" title="times new roman"/>
  44. <meta name="select:font" content="ms pgothic" title="ms pgothic"/>
  45. <meta name="select:font size" content="14px" title="14px"/>
  46. <meta name="select:font size" content="12px" title="12px"/>
  47. <meta name="select:font size" content="10px" title="10px"/>
  48.  
  49. <meta name="text:first link url" content="/"/>
  50. <meta name="text:first link title" content="home"/>
  51. <meta name="text:second link url" content="/ask"/>
  52. <meta name="text:second link title" content="ask"/>
  53. <meta name="text:third link url" content="/about"/>
  54. <meta name="text:third link title" content="about"/>
  55. <meta name="text:fourth link url" content="/links"/>
  56. <meta name="text:fourth link title" content="links"/>
  57. <meta name="text:fifth link url" content=""/>
  58. <meta name="text:fifth link title" content=""/>
  59. <meta name="text:sixth link url" content=""/>
  60. <meta name="text:sixth link title" content=""/>
  61.  
  62.  
  63. <meta name="if:firstlink" content="1"/>
  64. <meta name="if:secondlink" content="1"/>
  65. <meta name="if:thirdlink" content="1"/>
  66. <meta name="if:fourthlink" content="1"/>
  67. <meta name="if:fifthlink" content="1"/>
  68. <meta name="if:sixthlink" content="1"/>
  69.  
  70. <link rel="shortcut icon" href="{Favicon}">
  71. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  72. <link rel="stylesheet" href="http://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  73.  
  74. <script src="http://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  75.  
  76. <style type="text/css">
  77.  
  78.  
  79.  
  80. body {
  81. margin:0px;
  82. background-image: url('{image:background image}');
  83. background-attachment: fixed;
  84. {block:ifcoverbackground}
  85. background-size: cover;
  86. -moz-background-size: cover;
  87. -o-background-size: cover;
  88. -webkit-background-size: cover;
  89. {/block:ifcoverbackground}
  90. background-color:{color:background color};
  91. font-family:{select:font};
  92. font-size:{select:font size};
  93. line-height:140%;
  94. color: {color:text color};
  95. }
  96.  
  97. p{
  98. margin:0 0 10px 0;
  99. padding:0;
  100. }
  101.  
  102. pre {
  103. white-space: pre-wrap;
  104. white-space: -moz-pre-wrap;
  105. white-space: -pre-wrap;
  106. white-space: -o-pre-wrap;
  107. word-wrap: break-word;
  108. }
  109.  
  110. a{
  111. color:{color:link color};
  112. {block:ifnounderlinedlinks}
  113. text-decoration:none;
  114. {/block:ifnounderlinedlinks}
  115. }
  116.  
  117. a:hover{
  118. color:{color:link hover color};
  119. {block:ifnounderlinedlinks}
  120. text-decoration:none;
  121. {/block:ifnounderlinedlinks}
  122. }
  123.  
  124. li{
  125. margin-left:-15px;
  126. }
  127.  
  128. #wrapper{
  129. width:600px;
  130. margin:50px auto;
  131. }
  132.  
  133. #sidebar{
  134. width:100px;
  135. margin-left:-200px;
  136. position:fixed;
  137. padding:10px;
  138. {block:ifsidebarbackground}
  139. background-color:{color:sidebar background};
  140. {/block:ifsidebarbackground}
  141. }
  142.  
  143. #content{
  144. width:300px;
  145. margin-left:0px;
  146. overflow:hidden;
  147. }
  148.  
  149. .post{
  150. width:300px;
  151. margin:0 0 50px 0;
  152. overflow:hidden;
  153. {block:ifpostbackground}
  154. background-color:{color:post background};
  155. {/block:ifpostbackground}
  156. }
  157.  
  158. #sidebar img, .post img{
  159. max-width:100%;
  160. }
  161.  
  162. #nav{
  163. margin:50px 0 0 0;
  164. {block:ifpostbackground}
  165. background-color:{color:post background};
  166. {/block:ifpostbackground}
  167. text-align:center;
  168. word-spacing: 15px;
  169. padding:5px;
  170. }
  171.  
  172. .textpost {
  173. padding:5px;
  174. }
  175.  
  176. .media {
  177. margin:0 0 10px 0;
  178. }
  179.  
  180. #video {
  181. margin:0 0 10px 0;
  182. position: relative;
  183. padding-bottom: 75%;
  184. height: 0;
  185. overflow: hidden;
  186. }
  187.  
  188. #video iframe,
  189. #video object,
  190. #video embed {
  191. position: absolute;
  192. top: 0;
  193. left: 0;
  194. width: 100%;
  195. height: 100%;
  196. }
  197.  
  198. .playerbuttonbg {
  199. position: absolute;
  200. left: 20px;
  201. top: 20px;
  202. width: 19px;
  203. height: 19px;
  204. background-color: #ffffff;
  205. padding: 10px;
  206. opacity: .4;
  207. filter: alpha(opacity=40);
  208. -moz-opacity: 0.4;
  209. -khtml-opacity: 0.4;
  210. transition: opacity .7s ease-in-out;
  211. -moz-transition: opacity .7s ease-in-out;
  212. -webkit-transition: opacity .7s ease-in-out;
  213. }
  214.  
  215. .playerbuttonbg:hover {
  216. opacity: 1;
  217. filter: alpha(opacity=100);
  218. -moz-opacity: 1;
  219. -khtml-opacity: 1;
  220. }
  221.  
  222. .newplayerbutton {
  223. position: relative;
  224. width: 19px;
  225. height: 19px;
  226. overflow: hidden;
  227. }
  228.  
  229. .playerbuttonhug {
  230. position: absolute;
  231. top: -18px;
  232. left: -7px;
  233. }
  234.  
  235. .tumblr_audio_player {
  236. height: 90px;
  237. width: 270px;
  238. -moz-transform: scale(0.60, 0.60);
  239. -webkit-transform: scale(0.60, 0.60);
  240. -o-transform: scale(0.60, 0.60);
  241. -ms-transform: scale(0.60, 0.60);
  242. transform: scale(0.60, 0.60);
  243. -moz-transform-origin: top left;
  244. -webkit-transform-origin: top left;
  245. -o-transform-origin: top left;
  246. -ms-transform-origin: top left;
  247. transform-origin: top left;
  248. }
  249.  
  250. .audioimgwrapper {
  251. position: absolute;
  252. left: 0px;
  253. top: 0px;
  254. overflow: hidden;
  255. width: 79px;
  256. height: 79px;
  257. }
  258.  
  259. .audioimgwrapper img {
  260. width: 100%;
  261. height: auto;
  262. }
  263.  
  264. .trackdetails {
  265. height:19px;
  266. width: auto;
  267. display:inline-block;
  268. margin-left: 90px;
  269. min-height: 85px;
  270. padding:5px;
  271. }
  272.  
  273. .audiowrapper {
  274. position: relative;
  275. display:inline-block;
  276. }
  277.  
  278. .title{
  279. font-weight:normal;
  280. font-size:18px;
  281. margin:0 0 10px 0;
  282. }
  283.  
  284. .quote{
  285. font-weight:normal;
  286. font-size:16px;
  287. font-style:italic;
  288. margin:0 0 10px 0;
  289. }
  290.  
  291. .question{
  292. margin-bottom:10px;
  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. .post .footer{
  302. margin:0;
  303. text-align:left;
  304. }
  305.  
  306. .footer{
  307. padding-bottom:10px;
  308. {block:ifhoverfooter}
  309. opacity:0;
  310. -webkit-transition:all 0.5s ease-in-out;
  311. -moz-transition:all 0.5s ease-in-out;
  312. -o-transition:all 0.5s ease-in-out;
  313. transition:all 0.5s ease-in-out;
  314. {/block:ifhoverfooter}
  315. }
  316.  
  317. {block:ifhoverfooter}
  318. .post:hover .footer{
  319. opacity:1;
  320. }
  321. {/block:ifhoverfooter}
  322.  
  323.  
  324. ol.notes{
  325. list-style-type:none;
  326. padding:0;
  327. margin:0;
  328. }
  329.  
  330. ol.notes li.note img{
  331. width:16px;
  332. height:16px;
  333. }
  334.  
  335. ol.notes li.note{
  336. margin:0px;
  337. }
  338.  
  339. #credit {
  340. position: fixed;
  341. bottom: 10px;
  342. right: 10px;
  343. z-index: 99999999999;
  344. {block:ifpostbackground}
  345. background-color:{color:post background};
  346. {/block:ifpostbackground}
  347. }
  348.  
  349. {CustomCSS}
  350. </style>
  351. </head>
  352.  
  353. <body>
  354. <div id="wrapper">
  355.  
  356.  
  357. <div id="sidebar">
  358. {block:Description}
  359. <p>{Description}</p>
  360. {/block:Description}
  361.  
  362. {block:iffirstlink}
  363. <a href="{text:first link url}">{text:first link title}</a><br>
  364. {/block:iffirstlink}
  365.  
  366. {block:ifsecondlink}
  367. <a href="{text:second link url}">{text:second link title}</a></a><br>
  368. {/block:ifsecondlink}
  369.  
  370. {block:ifthirdlink}
  371. <a href="{text:third link url}">{text:third link title}</a><br>
  372. {/block:ifthirdlink}
  373.  
  374. {block:iffourthlink}
  375. <a href="{text:fourth link url}">{text:fourth link title}</a><br>
  376. {/block:iffourthlink}
  377.  
  378. {block:iffifthlink}
  379. <a href="{text:fifth link url}">{text:fifth link title}</a><br>
  380. {/block:iffifthlink}
  381.  
  382. {block:ifsixthlink}
  383. <a href="{text:sixth link url}">{text:sixth link title}</a><br>
  384. {/block:ifsixthlink}
  385. </div>
  386.  
  387.  
  388.  
  389. <div id="content">
  390. {block:Posts}
  391.  
  392. <div class="post">
  393.  
  394. {block:Text}
  395. <div class="textpost">
  396. {block:Title}
  397. <div class="title">{Title}</div>
  398. {/block:Title}
  399. {Body}
  400. </div>
  401. {/block:Text}
  402.  
  403. {block:Photo}
  404. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  405. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  406. {/block:Photo}
  407.  
  408. {block:Photoset}
  409. <div class="media">{Photoset}</div>
  410. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  411. {/block:Photoset}
  412.  
  413. {block:Quote}
  414. <div class="textpost">
  415. <div class="quote">"{Quote}"</div>
  416. {block:Source}
  417. <div class="quotesource">{Source}</div>
  418. {/block:Source}
  419. </div>
  420. {/block:Quote}
  421.  
  422. {block:Link}
  423. <div class="textpost">
  424. <div class="title"><a href="{URL}">{Name}</a></div>
  425. {block:Description}
  426. <div class="description">{Description}</div>
  427. {/block:Description}
  428. </div>
  429. {/block:Link}
  430.  
  431. {block:Chat}
  432. <div class="textpost">
  433. {block:Title}
  434. <div class="title">{Title}</div>
  435. {/block:Title}
  436.  
  437. {block:Lines}
  438. <div class="{Alt} user_{UserNumber}">
  439. {block:Label}
  440. <b>{Label}</b>{/block:Label}
  441. &nbsp;{Line}
  442. </div>
  443. {/block:Lines}
  444. </div>
  445. {/block:Chat}
  446.  
  447. {block:Video}
  448. <div id="video">
  449. <div class="media">{Video-400}</div></div>
  450. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  451. {/block:Video}
  452.  
  453. {block:AudioPlayer}
  454. <div class="audiowrapper">
  455. {block:AlbumArt}
  456. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  457. {/block:AlbumArt}
  458.  
  459. <div class="playerbuttonbg">
  460. <div class="newplayerbutton">
  461. <div class="playerbuttonhug">
  462.  
  463. {AudioPlayerWhite}
  464.  
  465. </div>
  466. </div>
  467. </div>
  468.  
  469. <div class="trackdetails">
  470.  
  471. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  472. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  473. {block:Album}Album: {Album}{/block:Album}<br/>
  474. {PlayCountWithLabel}
  475.  
  476. </div>
  477. </div>
  478.  
  479. {block:Caption}{Caption}{/block:Caption}
  480. {/block:AudioPlayer}
  481.  
  482. {block:Answer}
  483. <div class="textpost">
  484. <div class="question">{Asker}: {Question}</div>
  485. <div class="caption">{Answer}</div>
  486. </div>
  487. {/block:Answer}
  488.  
  489.  
  490. {block:Date}
  491. <div class="footer">
  492. <center><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount}</a> {block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  493. {block:ContentSource}<a href="{SourceURL}">©</a>{/block:ContentSource}
  494. {block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  495. </center>
  496. </div>
  497.  
  498. {block:PermalinkPage}
  499. {block:NoteCount}
  500. {block:PostNotes}{PostNotes}{/block:PostNotes}
  501. {/block:NoteCount}
  502. {/block:PermalinkPage}
  503. {/block:Date}
  504.  
  505. </div>
  506. {/block:Posts}
  507.  
  508. {block:Pagination}
  509. <div id="nav">
  510. <center>
  511. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}
  512.  
  513. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  514. </center>
  515. </div>
  516. {/block:Pagination}
  517. </div>
  518. </div>
  519.  
  520. </div>
  521.  
  522. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  523. <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  524.  
  525. <div id="corner pic" style="position:fixed; bottom:{text:corner image from bottom}; right:{text:corner image from right}; z-index:-1;">
  526. <img src="{text:corner image url}" /></div>
  527.  
  528. <div id="credit">
  529. <a href="http://kurapkia.tumblr.com/" title="theme credit">☀</a>
  530. </div>
  531.  
  532. </body>
  533. </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!