API tools faq
paste
Advertisement
okesan

soot by ryeou

okesan
Jun 21st, 2013
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5.  
  6. <!-----------
  7.  
  8. [#4] SOOT THEME BY RYEOU
  9.  
  10. -do not remove credits
  11. -do not restribute theme code
  12. -do not use as a base code
  13. -do not claim as your own
  14.  
  15. ------------>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.  
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24.  
  25. <meta name="color:bg colour" content ="#fff">
  26. <meta name="color:text colour" content ="#aaa">
  27. <meta name="color:highlight" content="#f1f1f0">
  28. <meta name="color:highlight text" content ="#fff">
  29. <meta name="color:bold" content="#ccc">
  30. <meta name="color:italics" content="#c7eadf">
  31. <meta name="color:scrollbar" content="#4c4c4c">
  32. <meta name="color:links" content="#cecece">
  33. <meta name="color:links hover" content="#5e5e5e">
  34. <meta name="color:link hover border" content="#ebebeb">
  35. <meta name="color:chat post bg" content="#f1f1f1">
  36. <meta name="color:ask border" content="#e8e8e8">
  37. <meta name="color:desc text" content="#aaa">
  38. <meta name="color:post color" content="#fff">
  39. <meta name="color:post border" content="#e8e8e8">
  40.  
  41. <meta name="if:endless scroll" content="0">
  42. <meta name="if:tiny cursor" content="1">
  43. <meta name="if:250px posts" content="0">
  44. <meta name="if:400px posts" content="1">
  45. <meta name="if:500px posts" content="0">
  46.  
  47. <meta name="image:sidebar pic" content="http://static.tumblr.com/90445ddae9e0a0394819dd427e200bbd/p7wg3p9/6Fymokv5y/tumblr_static_50x50.png">
  48.  
  49. <meta name="text:link 1 title" content="link 1">
  50. <meta name="text:link 1 url" content="/">
  51. <meta name="text:link 2 title" content="link 2">
  52. <meta name="text:link 2 url" content="/">
  53.  
  54. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  55. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  56.  
  57. <style type="text/css">
  58.  
  59. {block:ifTinyCursor}
  60. body, a {
  61. cursor:url('http://static.tumblr.com/p7wg3p9/o3jmn8igq/tiny.png'), auto
  62. }
  63.  
  64. a:hover {
  65. cursor: url('http://static.tumblr.com/p7wg3p9/EWnmn8ip5/tinyhover.png'), auto;
  66. }
  67. {/block:ifTinyCursor}
  68.  
  69. iframe#tumblr_controls {
  70. top:0%!important;
  71. right:0%!important;
  72. position:fixed!important;
  73. z-index:99999999!important;
  74. opacity:0.3;
  75. -webkit-filter:invert(100%);
  76. -moz-filter:invert(100%);
  77. -o-filter:invert(100%);
  78. -ms-filter:invert(100%);
  79. filter:invert(100%);
  80. }
  81.  
  82. /* hover titles */
  83.  
  84. #s-m-t-tooltip{
  85. max-width:300px;
  86. margin-top:15px;
  87. margin-left:15px;
  88. padding: 3px;
  89. z-index:100%;
  90. background-color:#fff;
  91. color:{color:Text};
  92. font-family:calibri;
  93. font-size:8px;
  94. line-height: 10px;
  95. text-transform:uppercase;
  96. border: 1px solid #e8e8e8;
  97. }
  98.  
  99. body {
  100. font-family: calibri;
  101. font-size: 10px;
  102. color: {color:text colour};
  103. margin: 0;
  104. background-color: {color:bg colour};
  105. }
  106.  
  107. /* links */
  108.  
  109. a {
  110. color:{color:links};
  111. border-bottom: 1px solid {color:post color};
  112. text-decoration: none;
  113. text-transform: uppercase;
  114. -webkit-transition: all 0.5s ease-in-out;
  115. -moz-transition: all 0.5s ease-in-out;
  116. -o-transition: all 0.5s ease-in-out;
  117. -ms-transition: all 0.5s ease-in-out;
  118. transition: all 0.5s ease-in-out;
  119. }
  120.  
  121. a:hover {
  122. color: {color:links hover};
  123. border-bottom: 1px solid {color:link hover border};
  124. -webkit-transition: all 0.5s ease-in-out;
  125. -moz-transition: all 0.5s ease-in-out;
  126. -o-transition: all 0.5s ease-in-out;
  127. -ms-transition: all 0.5s ease-in-out;
  128. transition: all 0.5s ease-in-out;
  129. }
  130.  
  131. /* scrollbar */
  132.  
  133. ::-webkit-scrollbar-thumb:vertical {
  134. background-color:{color:scrollbar};
  135. height:40px;
  136. border:3px solid #fff;
  137. z-index:1000;
  138. }
  139.  
  140. ::-webkit-scrollbar {
  141. background-color:{color:bg colour};
  142. height:10px;
  143. width:7px;
  144. z-index:1000;
  145. }
  146.  
  147. /* selection/highlight */
  148.  
  149. ::selection {
  150. background: {color:highlight};
  151. color: {color:highlight text};
  152. text-shadow: 3px 0px .2px {color:highlight text}, -3px 0px .2px {color:highlight text};
  153. }
  154.  
  155. ::-moz-selection {
  156. background: {color:highlight};
  157. color: {color:highlight text};
  158. text-shadow: 3px 0px .2px {color:highlight text}, -3px 0px .2px {color:highlight text};
  159. }
  160.  
  161. i, em {
  162. color: {color:italics};
  163. letter-spacing: 2px;
  164. }
  165.  
  166. b, strong {
  167. color: {color:bold};
  168. letter-spacing: 2px;
  169. }
  170.  
  171. h3 {
  172. font: 12px lucida console;
  173. font-weight: 500;
  174. text-align: center;
  175. text-transform:uppercase;
  176. letter-spacing:2px;
  177. }
  178.  
  179. blockquote {
  180. border-left: 2px solid {color:chat post bg};
  181. padding: 1px 1px 1px 10px;
  182. margin: 5px;
  183. }
  184.  
  185. .quote {
  186. font: 12px consolas;
  187. font-weight: 500;
  188. font-style:italic;
  189. text-align: center;
  190. text-transform:uppercase;
  191. letter-spacing:2px;
  192. }
  193.  
  194. .source {
  195. text-align: right;
  196. }
  197.  
  198. ul.chat {
  199. margin: 0 0 0 0;
  200. padding: 0 0 0 0;
  201. }
  202.  
  203. .chat li {
  204. list-style-type: none;
  205. padding: 2px;
  206. }
  207.  
  208. .chat li.odd {
  209. background-color: {color:chat post bg};
  210. }
  211.  
  212. #content {
  213. background: transparent;
  214. padding: 1px 20px 20px 20px;
  215. width: 540px;
  216. margin-left: 300px;
  217. margin-top: 20px;
  218. }
  219.  
  220. /* posts */
  221.  
  222. .posts {
  223. padding: 8px;
  224. margin-top: 10px;
  225. overflow: hidden;
  226. border: 1px solid {color:post border};
  227. background: {color:post color};
  228. opacity: 1;
  229. {block:if250pxPosts}
  230. width: 250px;
  231. {/block:if250pxPosts}
  232. {block:if400pxPosts}
  233. width: 400px;
  234. {/block:if400pxPosts}
  235. {block:if500pxPosts}
  236. width: 500px;
  237. {/block:if500pxPosts}
  238. {block:PermalinkPage}
  239. width: 500px;
  240. {/block:PermalinkPage}
  241. }
  242.  
  243. .posts img {
  244. max-width: 100%;
  245. -webkit-transition: all 0.7s ease-in-out;
  246. -moz-transition: all 0.7s ease-in-out;
  247. -o-transition: all 0.7s ease-in-out;
  248. -ms-transition: all 0.7s ease-in-out;
  249. transition: all 0.7s ease-in-out;
  250. }
  251.  
  252. .posts img:hover {
  253. opacity: 0.7;
  254. -webkit-transition: all 0.7s ease-in-out;
  255. -moz-transition: all 0.7s ease-in-out;
  256. -o-transition: all 0.7s ease-in-out;
  257. -ms-transition: all 0.7s ease-in-out;
  258. transition: all 0.7s ease-in-out;
  259. }
  260.  
  261. /* permalinks */
  262.  
  263. #info {
  264. {block:if250pxPosts}
  265. margin-left:270px;
  266. {/block:if250pxPosts}
  267. {block:if400pxPosts}
  268. margin-left:420px;
  269. {/block:if400pxPosts}
  270. {block:if500pxPosts}
  271. margin-left:520px;
  272. {/block:if500pxPosts}
  273. margin-top: -10px;
  274. opacity: 0;
  275. padding:3px;
  276. background-color: transparent;
  277. position: absolute;
  278. line-height: 15px;
  279. -webkit-transition: all 0.7s ease-in-out;
  280. -moz-transition: all 0.7s ease-in-out;
  281. -o-transition: all 0.7s ease-in-out;
  282. -ms-transition: all 0.7s ease-in-out;
  283. transition: all 0.7s ease-in-out;
  284. }
  285.  
  286. #info img {
  287. opacity: 0.2;
  288. -webkit-transition: all 0.7s ease-in-out;
  289. -moz-transition: all 0.7s ease-in-out;
  290. -o-transition: all 0.7s ease-in-out;
  291. -ms-transition: all 0.7s ease-in-out;
  292. transition: all 0.7s ease-in-out;
  293. }
  294.  
  295. #info img:hover {
  296. opacity:0.6;
  297. -webkit-transition: all 0.7s ease-in-out;
  298. -moz-transition: all 0.7s ease-in-out;
  299. -o-transition: all 0.7s ease-in-out;
  300. -ms-transition: all 0.7s ease-in-out;
  301. transition: all 0.7s ease-in-out;
  302. }
  303.  
  304. {block:IndexPage}
  305. .posts:hover #info {
  306. opacity: 1;
  307. -webkit-transition: all 0.7s ease-in-out;
  308. -moz-transition: all 0.7s ease-in-out;
  309. -o-transition: all 0.7s ease-in-out;
  310. -ms-transition: all 0.7s ease-in-out;
  311. transition: all 0.7s ease-in-out;
  312. }
  313. {/block:IndexPage}
  314.  
  315. #notes {
  316. width:500px;
  317. font-family:calibri;
  318. font-size:8px;
  319. letter-spacing:3px;
  320. text-transform:uppercase;
  321. }
  322.  
  323. #notes li, ol {
  324. list-style-type: none;
  325. padding:3px;
  326. }
  327.  
  328. #notes img {
  329. display:none;
  330. }
  331.  
  332. /* sidebar */
  333.  
  334. .sidebar {
  335. position: fixed;
  336. bottom: 70px;
  337. left: 180px;
  338. width: 180px;
  339. height:auto;
  340. padding: 10px;
  341. background: transparent;
  342. text-align: justify;
  343. }
  344.  
  345. .pic {
  346. margin-left:42px;
  347. margin-top:-47px;
  348. width: 50px;
  349. height: 50px;
  350. position:absolute;
  351. padding: 2px;
  352. border: 1px solid {color:post border};
  353. }
  354.  
  355. /* description */
  356.  
  357. .desc{
  358. width:100px;
  359. height:auto;
  360. font-size: 8px;
  361. letter-spacing: 1px;
  362. text-align: justify;
  363. color: {color:desc text};
  364. }
  365.  
  366. /* nav icons */
  367.  
  368. .links {
  369. width:40px;
  370. padding:4px;
  371. background-color:transparent;
  372. line-height:17px;
  373. margin-top: -48px;
  374. margin-left: -4px;
  375. position: absolute;
  376. letter-spacing: 3px;
  377. }
  378.  
  379. .links a, #info a {
  380. border: none;
  381. }
  382.  
  383. .links img{
  384. opacity: 0.7;
  385. -webkit-transition: all 0.7s ease-in-out;
  386. -moz-transition: all 0.7s ease-in-out;
  387. -o-transition: all 0.7s ease-in-out;
  388. -ms-transition: all 0.7s ease-in-out;
  389. transition: all 0.7s ease-in-out;
  390. }
  391.  
  392. .links img:hover{
  393. opacity: 0.3;
  394. -webkit-transition: all 0.7s ease-in-out;
  395. -moz-transition: all 0.7s ease-in-out;
  396. -o-transition: all 0.7s ease-in-out;
  397. -ms-transition: all 0.7s ease-in-out;
  398. transition: all 0.7s ease-in-out;
  399. }
  400.  
  401. #albumart img {
  402. width: 70px;
  403. height: 70px;
  404. }
  405.  
  406. /* pagination */
  407. .pagination {
  408. width: 100px;
  409. margin-left: 20px;
  410. text-align: center;
  411. }
  412.  
  413. .pagination a {
  414. border: none;
  415. }
  416.  
  417. .arrow {
  418. padding:8px;
  419. position:absolute;
  420. width:auto;
  421. height:auto;
  422. opacity:0.7;
  423. -webkit-transition: all 0.7s ease-in-out;
  424. -moz-transition: all 0.7s ease-in-out;
  425. -o-transition: all 0.7s ease-in-out;
  426. -ms-transition: all 0.7s ease-in-out;
  427. transition: all 0.7s ease-in-out;
  428. }
  429.  
  430. .arrow:hover {
  431. opacity: 0.3;
  432. -webkit-transition: all 0.7s ease-in-out;
  433. -moz-transition: all 0.7s ease-in-out;
  434. -o-transition: all 0.7s ease-in-out;
  435. -ms-transition: all 0.7s ease-in-out;
  436. transition: all 0.7s ease-in-out;
  437. }
  438.  
  439. .audio img {
  440. max-width: 80px;
  441. margin-right: 10px;
  442. float: left;
  443. border: 1px solid {color:ask border};
  444. padding: 3px;
  445. }
  446.  
  447. .auplayer {
  448. background-color: #fff;
  449. margin-top:1px;
  450. margin-left:1px;
  451. height: 25px;
  452. width: 22px;
  453. border-left: 20px solid #fff;
  454. border-top: 20px solid #fff;
  455. border-right: 26px solid #fff;
  456. border-bottom: 23px solid #fff;
  457. padding: 8px;
  458. overflow: hidden;
  459. position:absolute;
  460. opacity: 0.4;
  461. transition: 0.7s;
  462. -moz-transition: 0.7s;
  463. -webkit-transition: 0.7s;
  464. -o-transition: 0.7s;
  465. }
  466.  
  467. .auplayer:hover {
  468. opacity: 0.8;
  469. }
  470.  
  471. /* asker icon */
  472.  
  473. #asker {
  474. margin-right:5px;
  475. float:left;
  476. background-color: #f7f7f7;
  477. -moz-border-radius:10px;
  478. border-radius:10px;
  479. box-shadow:1px 1px 3px rgba(0,0,0,.1);
  480. }
  481.  
  482. </style>
  483.  
  484. {block:ifEndlessScroll}
  485. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  486. {/block:ifEndlessScroll}
  487.  
  488. </head>
  489.  
  490. <body>
  491.  
  492. <div id="content">
  493.  
  494. <div class="sidebar">
  495.  
  496. <div class="links">
  497. <a href="/" title="refresh"><img src="http://static.tumblr.com/p7wg3p9/TP5moktey/home.png"></a>&nbsp;&nbsp;
  498. <a href="/ask" title="message"><img src="http://static.tumblr.com/p7wg3p9/3Wdmoktn4/message.png"></a><br>
  499. <a href="/archive" title="history"><img src="http://static.tumblr.com/p7wg3p9/88tmokts4/plus.png"></a>&nbsp;&nbsp;
  500. <a href="{text:link 1 url}" title="{text:link 1 title}"><img src="http://static.tumblr.com/p7wg3p9/w2jmoktxx/heart.png"></a><br>
  501. <a href="{text:link 2 url}" title="{text:link 2 title}"><img src="http://static.tumblr.com/p7wg3p9/hlcmoku0k/star.png"></a>&nbsp;&nbsp;
  502. <a href="http://ryeou.tumblr.com" title="theme by ryeou"><img src="http://static.tumblr.com/p7wg3p9/Qvmmoku33/cross.png"></a>
  503. </div>
  504.  
  505. <a href="/"><img src="{image:sidebar pic}" class="pic"><br></a>
  506.  
  507. <div class="desc">{Description}</div>
  508.  
  509. {block:ifnotEndlessScroll}
  510. <center>
  511. {block:Pagination}
  512. <div class="pagination">
  513. {block:PreviousPage}
  514. <div class="arrow"><a href="{PreviousPage}"><img src="http://static.tumblr.com/p7wg3p9/OGnmokxyh/arrow2_w.png" title="backward"></a>
  515. </div>
  516. {/block:PreviousPage}
  517. {block:NextPage}
  518. <div class="arrow" style="margin-left:20px;"><a href="{NextPage}"><img src="http://static.tumblr.com/p7wg3p9/L5Omokxx3/arrow2_e.png" title="forward">
  519. </div>
  520. {/block:NextPage}
  521. </div>
  522. {/block:Pagination}
  523. </center>
  524. {/block:ifnotEndlessScroll}
  525.  
  526. </div>
  527.  
  528. {block:ifEndlessScroll}
  529. <div class="autopagerize_page_element">
  530. {/block:ifEndlessScroll}
  531.  
  532. {block:Posts}
  533. <div class="posts">
  534.  
  535. {block:IndexPage}
  536. <div id="info">
  537. <a href="{Permalink}" title="{NoteCountWithLabel}"><img src="http://static.tumblr.com/p7wg3p9/qzkmmo0li/heart.png"></a><br><a href="{ReblogURL}" target="_blank" title="reblog?"><img src="http://static.tumblr.com/p7wg3p9/Dd4mmo0ns/loop.png"></a>
  538. </div>
  539. {/block:IndexPage}
  540.  
  541. {block:Text}
  542. {block:Title}
  543. <h3><a href="{Permalink}">{Title}</a></h3>
  544. {/block:Title}
  545. {Body}
  546. {/block:Text}
  547.  
  548. {block:Photo}
  549. <center>
  550. {block:IndexPage}
  551. <a href="{Permalink}">
  552. {/block:IndexPage}
  553. {block:PermalinkPage}
  554. <a href="{LinkURL}">
  555. {/block:PermalinkPage}
  556. <img src="{PhotoURL-500}">
  557. </a>
  558. </center>
  559. {block:PermalinkPage}
  560. {block:Caption}
  561. {Caption}</div>
  562. {/block:Caption}
  563. {/block:PermalinkPage}
  564. {/block:Photo}
  565.  
  566. {block:Photoset}
  567. {block:IndexPage}
  568. {block:if250pxPosts}
  569. {Photoset-250}
  570. {/block:if250pxPosts}
  571. {block:if400pxPosts}
  572. {Photoset-400}
  573. {/block:if400pxPosts}
  574. {block:if500pxPosts}
  575. {Photoset-500}
  576. {/block:if500pxPosts}
  577. {/block:IndexPage}
  578. {block:PermalinkPage}
  579. {Photoset-500}
  580. {block:Caption}
  581. {Caption}</div>
  582. {/block:Caption}
  583. {/block:PermalinkPage}
  584. {/block:Photoset}
  585.  
  586. {block:Quote}
  587. <div class="quote">❝{Quote}❞</div>
  588. {block:Source}
  589. <div class="source">{Source}</div>
  590. {/block:Source}
  591. {/block:Quote}
  592.  
  593. {block:Link}
  594. <center><h3><a href="{URL}" {Target}>{Name}</a></h3></center>
  595. {block:Description}
  596. {Description}
  597. {/block:Description}
  598. {/block:Link}
  599.  
  600. {block:Chat}
  601. {block:Title}
  602. <h3>{Title}</h3>
  603. {/block:Title}
  604. <ul class="chat">
  605. {block:Lines}
  606. <li class="{Alt} user_{UserNumber}">
  607. {block:Label}
  608. <span class="label">{Label}</span>
  609. {/block:Label}
  610. {Line}
  611. </li>
  612. {/block:Lines}
  613. </ul>
  614. {/block:Chat}
  615.  
  616. {block:Audio}
  617. {block:AlbumArt}<div class="audio"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  618. <div class="auplayer">{AudioPlayerWhite}</div>
  619. <div style="text-transform: uppercase;">{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}<br>{block:TrackName}<b>Song:</b> {TrackName}{/block:TrackName}</div>
  620. {block:Caption}{Caption}{/block:Caption}<br>
  621. {/block:Audio}
  622.  
  623. {block:Video}
  624. <div class="video">
  625. {block:if250pxPosts}
  626. {block:IndexPage}{Video-250}{/block:IndexPage}
  627. {/block:if250pxPosts}
  628. {block:if400pxPosts}
  629. {block:IndexPage}{Video-400}{/block:IndexPage}
  630. {/block:if400pxPosts}
  631. {block:if500pxPosts}
  632. {block:IndexPage}{Video-500}{/block:IndexPage}
  633. {/block:if500pxPosts}
  634. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  635. </div>
  636. {/block:Video}
  637.  
  638. {block:Answer}
  639. <div style="text-transform:uppercase; border-bottom:1px solid {color:ask border}; text-align: center; padding-bottom:2px;"><b><div style="letter-spacing:2px;">{Asker};</div></b>{Question}</div>{Answer}
  640. {/block:Answer}
  641.  
  642. {block:PermalinkPage}
  643. <div style="text-align:justify; border-top:1px solid {color:ask border}; border-bottom:1px solid {color:ask border}; font-family:consolas; width:500px; margin:3px 0px 3px 0px;">
  644. <center>{block:NoteCount}{NoteCountWithLabel} ▴ {/block:NoteCount}{block:Date}{ShortYear}.{MonthNumberWithZero}.{DayOfMonthWithZero}{/block:Date}{block:RebloggedFrom} ▴ <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> ▴ <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom}{block:HasTags} ▴ {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags} {/block:HasTags}
  645. </center>
  646. </div>
  647. {block:PostNotes}
  648. <div style="margin-top:10px">{PostNotes}</div>
  649. {/block:PostNotes}
  650. {/block:PermalinkPage}
  651.  
  652. </div>
  653. {/block:Posts}
  654.  
  655. {block:ifEndlessScroll}
  656. </div>
  657. {/block:ifEndlessScroll}
  658. </div>
  659.  
  660. </body>
  661. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!