API tools faq
paste
katsthemes

border theme by kurapkia

katsthemes
Sep 19th, 2015
4,162
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5. ☆ border 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:sidebar img" content=""/>
  22. <meta name="color:text" content="#000"/>
  23. <meta name="color:link" content="#aaa"/>
  24. <meta name="color:border" content="#ccc"/>
  25. <meta name="color:sidebar" content="#fff"/>
  26. <meta name="color:post background" content="#fff"/>
  27. <meta name="select:font" content="arial" title="arial"/>
  28. <meta name="select:font" content="consolas" title="consolas"/>
  29. <meta name="select:font" content="andale mono" title="andale mono"/>
  30.  
  31. <!--META NAME SCROLLBAR START-->
  32. <meta name="color:scrollbar" content=""/>
  33. <meta name="color:scrollbar border" content=""/>
  34. <meta name="color:scrollbar track" content=""/>
  35. <!--META NAME SCROLLBAR END-->
  36.  
  37. <!--META NAME BLOCK START-->
  38. <meta name="if:Small cursor" content=""/>
  39. <meta name="if:rounded corners" content=""/>
  40. <meta name="if:250px" content=""/>
  41. <meta name="if:400px" content=""/>
  42. <meta name="if:500px" content=""/>
  43. <!--META NAME BLOCK END-->
  44.  
  45. <!--META NAME BORDER START-->
  46. <meta name="text:border size" content="2px"/>
  47. <meta name="select:border" content="" title="none">
  48. <meta name="select:border" content="dotted" title="dotted">
  49. <meta name="select:border" content="dashed" title="dashed">
  50. <meta name="select:border" content="double" title="double">
  51. <meta name="select:border" content="solid" title="solid">
  52. <meta name="select:border" content="inset" title="inset">
  53. <meta name="select:border" content="outset" title="outset">
  54. <!--META NAME BORDER END-->
  55.  
  56. <!--META NAME LINKS START-->
  57. <meta name="text:link1title" content="home"/>
  58. <meta name="text:link1url" content="/"/>
  59.  
  60. <meta name="text:link2title" content="ask"/>
  61. <meta name="text:link2url" content="/ask"/>
  62.  
  63. <meta name="text:link3title" content="links"/>
  64. <meta name="text:link3url" content="/links"/>
  65.  
  66. <!--META NAME LINKS END-->
  67.  
  68.  
  69. <!---META NAMES END-->
  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. general text styles, fonts and colours
  81. */
  82. {block:ifSmallcursor}
  83. *, body, a, a:hover {cursor: url(http://i.imgur.com/2qleX.jpg), auto;}
  84. {/block:ifSmallcursor}
  85.  
  86. ::-webkit-scrollbar {
  87. width: 8px;
  88. height: 8px;
  89. }
  90. ::-webkit-scrollbar-thumb {
  91. background-color: {color:scrollbar};
  92. border: 1px solid {color:scrollbar border};
  93. }
  94. ::-webkit-scrollbar-track {
  95. background-color: {color:scrollbar track};
  96. }
  97.  
  98. body {
  99. margin:0px;
  100. font-family: {select:font};
  101. font-size:12px;
  102. line-height:140%;
  103. color: {color:text};
  104. background-color:{color:background};
  105. }
  106.  
  107. p{
  108. margin:0 0 10px 0;
  109. padding:0;
  110. }
  111.  
  112. pre {
  113. white-space: pre-wrap;
  114. white-space: -moz-pre-wrap;
  115. white-space: -pre-wrap;
  116. white-space: -o-pre-wrap;
  117. word-wrap: break-word;
  118. }
  119.  
  120. a{
  121. color:{color:link};
  122. text-decoration:none;
  123. }
  124.  
  125. a:hover{
  126. text-decoration:underline;
  127. }
  128.  
  129. li{
  130. margin-left:-15px;
  131. }
  132.  
  133. /*
  134. containers etc
  135. */
  136. #wrapper{
  137. width:600px;
  138. margin:50px auto;
  139. }
  140.  
  141. #sidebar{
  142. width:120px;
  143. position:fixed;
  144. border:{text:border size} {select:border} {color:border};
  145. padding:15px;
  146. background-color:{color:sidebar};
  147. margin-top:70px;
  148. {block:ifroundedcorners}
  149. border-radius:25px;
  150. {/block:ifroundedcorners}
  151. }
  152.  
  153. #desc{
  154. text-align:center;
  155. padding:5px 0px;
  156. }
  157.  
  158. #links{
  159. font-style:none;
  160. text-align:center;
  161. word-spacing:5px;
  162. }
  163.  
  164. #content{
  165. width:{block:if250px}280px{/block:if250px} {block:if400px}430px{/block:if400px} {block:if500px}530px{/block:if500px};
  166. margin-left:200px;
  167. overflow:hidden;
  168. padding:20px;
  169.  
  170. }
  171.  
  172. .post{
  173. width:{block:if250px}250px{/block:if250px} {block:if400px}400px{/block:if400px};
  174. margin:0 0 50px 0;
  175. overflow:hidden;
  176. border:{text:border size} {select:border} {color:border};
  177. padding: 15px;
  178. background-color:{color:post background};
  179. {block:ifroundedcorners}
  180. border-radius:25px;
  181. {/block:ifroundedcorners}
  182. }
  183.  
  184. #sidebar img, .post img{
  185. max-width:100%;
  186. }
  187.  
  188. #sidebar img{
  189. {block:ifroundedcorners}
  190. border-radius:25px;
  191. {/block:ifroundedcorners}
  192. display: block;
  193. margin-left: auto;
  194. margin-right: auto;
  195. }
  196.  
  197. #nav{
  198. margin:50px 0 0 0;
  199. text-align:center;
  200. text-transform:lowercase;
  201. word-spacing:5px;
  202. }
  203.  
  204.  
  205. /*
  206. content in the body of the posts - quotes, asks, etc
  207. "media" contains photos, photosets, videos, audio posts
  208. */
  209. .media{
  210. margin:0 0 10px 0;
  211. }
  212.  
  213. .title{
  214. font-weight:normal;
  215. font-size:18px;
  216. margin:0 0 10px 0;
  217. }
  218.  
  219. .quote{
  220. font-weight:normal;
  221. font-size:16px;
  222. font-style:normal;
  223. margin:0 0 10px 0;
  224. }
  225.  
  226. .question{
  227. margin-bottom:10px;
  228. font-style:italic;
  229. }
  230.  
  231. blockquote{
  232. margin:0 0 10px 10px;
  233. padding:0 0 0 10px;
  234. border-left:solid 1px #000;
  235. }
  236.  
  237. /*AUDIO*/
  238.  
  239. .playerbuttonbg {
  240. position: absolute;
  241. left: 20px;
  242. top: 20px;
  243. width: 19px;
  244. height: 19px;
  245. background-color: #ffffff;
  246. padding: 10px;
  247. -webkit-border-radius: 40px;
  248. -moz-border-radius: 40px;
  249. border-radius: 40px;
  250. opacity: .4;
  251. filter: alpha(opacity=40);
  252. -moz-opacity: 0.4;
  253. -khtml-opacity: 0.4;
  254. transition: opacity .7s ease-in-out;
  255. -moz-transition: opacity .7s ease-in-out;
  256. -webkit-transition: opacity .7s ease-in-out;
  257. }
  258.  
  259. .playerbuttonbg:hover {
  260. opacity: 1;
  261. filter: alpha(opacity=100);
  262. -moz-opacity: 1;
  263. -khtml-opacity: 1;
  264. }
  265.  
  266. .newplayerbutton {
  267. position: relative;
  268. width: 19px;
  269. height: 19px;
  270. overflow: hidden;
  271. }
  272.  
  273. .playerbuttonhug {
  274. position: absolute;
  275. top: -18px;
  276. left: -7px;
  277. }
  278.  
  279. .tumblr_audio_player {
  280. height: 90px;
  281. width: 270px;
  282. -moz-transform: scale(0.60, 0.60);
  283. -webkit-transform: scale(0.60, 0.60);
  284. -o-transform: scale(0.60, 0.60);
  285. -ms-transform: scale(0.60, 0.60);
  286. transform: scale(0.60, 0.60);
  287. -moz-transform-origin: top left;
  288. -webkit-transform-origin: top left;
  289. -o-transform-origin: top left;
  290. -ms-transform-origin: top left;
  291. transform-origin: top left;
  292. }
  293.  
  294. .audioimgwrapper {
  295. position: absolute;
  296. left: 0px;
  297. top: 0px;
  298. -webkit-border-radius: 40px;
  299. -moz-border-radius: 40px;
  300. border-radius: 40px;
  301. overflow: hidden;
  302. width: 79px;
  303. height: 79px;
  304. }
  305.  
  306. .audioimgwrapper img {
  307. width: 100%;
  308. height: auto;
  309. -webkit-border-radius: 40px;
  310. -moz-border-radius: 40px;
  311. border-radius: 40px;
  312. }
  313.  
  314. .trackdetails {
  315. height:19px;
  316. width: auto;
  317. display:inline-block;
  318. margin-left: 90px;
  319. min-height: 85px;
  320. padding:5px;
  321. }
  322.  
  323. .audiowrapper {
  324. position: relative;
  325. display:inline-block;
  326. }
  327.  
  328. /*
  329. post footers - date, tags, via and source
  330. */
  331. .post .footer{
  332. margin:0;
  333. text-align:center;
  334. font-size:11px;
  335. }
  336.  
  337. /*
  338. post notes
  339. */
  340. ol.notes{
  341. list-style-type:none;
  342. padding:0;
  343. margin:0;
  344. }
  345.  
  346. ol.notes li.note img{
  347. width:16px;
  348. height:16px;
  349. }
  350.  
  351. ol.notes li.note{
  352. margin:0px;
  353. }
  354.  
  355. #credit {
  356. position: fixed;
  357. bottom: 10px;
  358. right: 10px;
  359. z-index: 1;
  360. }
  361.  
  362. {CustomCSS}
  363. </style>
  364. </head>
  365.  
  366. <body>
  367. <div id="wrapper">
  368.  
  369.  
  370. <div id="sidebar">
  371. <img src="{image:sidebar img}">
  372.  
  373. <div id="desc">
  374. <p>{Description}</p>
  375. </div>
  376.  
  377. <div id="links">
  378. <a href="{text:link1url}">{text:link1title}</a>
  379. <a href="{text:link2url}">{text:link2title}</a>
  380. <a href="{text:link3url}">{text:link3title}</a>
  381. </div>
  382. </div>
  383.  
  384.  
  385.  
  386. <div id="content">
  387. {block:Posts}
  388.  
  389. <div class="post">
  390.  
  391. {block:Text}
  392. {block:Title}
  393. <div class="title">{Title}</div>
  394. {/block:Title}
  395. {Body}
  396. {/block:Text}
  397.  
  398. {block:Photo}
  399. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  400. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  401. {/block:Photo}
  402.  
  403. {block:Photoset}
  404. {block:if250px}
  405. <div class="media">{Photoset-250}</div>
  406. {/block:if250px}
  407.  
  408. {block:if400px}
  409. <div class="media">{Photoset-400}</div>
  410. {/block:if400px}
  411.  
  412. {block:if500px}
  413. <div class="media">{Photoset-500}</div>
  414. {/block:if500px}
  415. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  416. {/block:Photoset}
  417.  
  418. {block:Quote}
  419. <div class="quote">"{Quote}"</div>
  420. {block:Source}
  421. <div class="quotesource">{Source}</div>
  422. {/block:Source}
  423. {/block:Quote}
  424.  
  425. {block:Link}
  426. <div class="title"><a href="{URL}">{Name}</a></div>
  427. {block:Description}
  428. <div class="description">{Description}</div>
  429. {/block:Description}
  430. {/block:Link}
  431.  
  432. {block:Chat}
  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. {/block:Chat}
  445.  
  446. {block:Video}
  447.  
  448. {block:if250px}
  449. <div class="media">{Video-250}</div>
  450. {/block:if250px}
  451.  
  452. {block:if400px}
  453. <div class="media">{Video-400}</div>
  454. {/block:if400px}
  455.  
  456. {block:if500px}
  457. <div class="media">{Video-500}</div>
  458. {/block:if500px}
  459.  
  460.  
  461. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  462. {/block:Video}
  463.  
  464. {block:AudioPlayer}
  465. <div class="audiowrapper">
  466. {block:AlbumArt}
  467. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  468. {/block:AlbumArt}
  469.  
  470. <div class="playerbuttonbg">
  471. <div class="newplayerbutton">
  472. <div class="playerbuttonhug">
  473.  
  474. {AudioPlayerWhite}
  475.  
  476. </div>
  477. </div>
  478. </div>
  479.  
  480. <div class="trackdetails">
  481.  
  482. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  483. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  484. {block:Album}Album: {Album}{/block:Album}<br/>
  485. {PlayCountWithLabel}
  486.  
  487. </div>
  488. </div>
  489.  
  490. {block:Caption}{Caption}{/block:Caption}
  491. {/block:AudioPlayer}
  492.  
  493.  
  494.  
  495. {block:Answer}
  496. <div class="question">{Asker} asked: {Question}</div>
  497. <div class="caption">{Answer}</div>
  498. {/block:Answer}
  499.  
  500.  
  501. {block:Date}
  502. <div class="footer">
  503. <a href="{Permalink}">{TimeAgo}{block:NoteCount} (+{NoteCount}){/block:NoteCount}</a>
  504. {block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  505. {block:RebloggedFrom}<br><a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  506. {block:ContentSource}<a href="{SourceURL}">src</a>{/block:ContentSource}
  507. </div>
  508.  
  509. {block:PermalinkPage}
  510. {block:NoteCount}
  511. {block:PostNotes}{PostNotes}{/block:PostNotes}
  512. {/block:NoteCount}
  513. {/block:PermalinkPage}
  514. {/block:Date}
  515.  
  516. </div>
  517. {/block:Posts}
  518.  
  519. {block:Pagination}
  520. <div id="nav">
  521. {block:PreviousPage}<a href="{PreviousPage}">{lang:Prev}</a>{/block:PreviousPage}
  522.  
  523. {block:NextPage}<a href="{NextPage}">{lang:Next}</a>{/block:NextPage}
  524. </div>
  525. {/block:Pagination}
  526. </div>
  527. </div>
  528.  
  529. </div>
  530.  
  531. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  532. <script>window.jQuery || document.write('<script src="http://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  533.  
  534. <div id="credit">
  535. <a href="http://kurapkia.tumblr.com/" title="theme credit">★</a>
  536. </div>
  537.  
  538. </body>
  539. </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!