API tools faq
paste
Advertisement
jaesoonie

THEME #42.2

jaesoonie
Jun 23rd, 2014
3,389
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6.  
  7.  
  8. ᴛʜᴇᴍᴇ #42; ᴠᴇʀsɪᴏɴ 2
  9. © ᴍᴀᴅᴇ ʙʏ ᴄʜʟᴏᴇ
  10. [ ʏ-ᴏɴɢɪɴ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ] & [ sᴏᴏɴᴊᴜɴs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  11.  
  12. ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ:
  13. [ sᴏᴏɴ-co.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]
  14.  
  15.  
  16. - ᴅᴏɴ'ᴛ sᴛᴇᴀʟ ɪᴛ.
  17. - ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴛʜᴇᴍᴇ.
  18.  
  19.  
  20.  
  21. -->
  22.  
  23. <head>
  24. <title>{Title}</title>
  25. <link rel="shortcut icon" href="{Favicon}">
  26. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><script type="text/javascript"
  27. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  28.  
  29.  
  30. <meta name="select:Font" content="trebuchet ms" title="Trebuchet ms"/>
  31. <meta name="select:Font" content="arial" title="Arial"/>
  32. <meta name="select:Font" content="calibri" title="Calibri"/>
  33. <meta name="select:Font" content="consolas" title="Consolas"/>
  34. <meta name="select:Font" content="times" title="Times New Roman"/>
  35. <meta name="select:Font" content="tunga" title="Tunga"/>
  36. <meta name="select:Font" content="century gothic" title="Century Gothic"/>
  37. <meta name="select:Font" content="cambria" title="Cambria"/>
  38. <meta name="select:Font" content="georgia" title="Georgia"/>
  39. <meta name="color:Blog Background" content="#fff" />
  40. <meta name="color:Headers Background" content="#f5f5f5" />
  41. <meta name="color:Title Font" content="#ffffff" />
  42. <meta name="color:Title Background" content="#000" />
  43. <meta name="color:Post Title Font" content="#888" />
  44. <meta name="color:All General Text" content="#565656" />
  45. <meta name="color:Bold Text" content="#6f6e6e" />
  46. <meta name="color:Italic Text" content="#b9b8b8" />
  47. <meta name="color:Navigation Background" content="#f5f5f5" />
  48. <meta name="color:Navigation Font" content="#777" />
  49. <meta name="color:Links Background" content="#fff" />
  50. <meta name="color:Links Font" content="#777" />
  51. <meta name="color:Description Font" content="#aaa" />
  52. <meta name="color:Description Background" content="#fff" />
  53. <meta name="color:Hyperlinks" content="#ede5f3"/>
  54. <meta name="color:Hyperlinks Hover" content="#fff" />
  55. <meta name="color:Text Posts Background" content="#f5f5f5" />
  56. <meta name="color:Info Font" content="#aaa" />
  57. <meta name="color:Info Background" content="#fff" />
  58. <meta name="color:Tags Font" content="#777" />
  59. <meta name="color:Tags Background" content="#ede5f3" />
  60. <meta name="color:Tooltip Background" content="#222" />
  61. <meta name="color:Tooltip Font" content="#ffffff" />
  62. <meta name="color:Pagination Font" content="#888" />
  63. <meta name="color:Question Background" content="#f5f5f5" />
  64. <meta name="image:Blog Background" content="" />
  65. <meta name="image:Sidebar Image" content="" />
  66. <meta name="image:Special Cursor Default" content="" />
  67. <meta name="image:Special Cursor Pointer" content="" />
  68. <meta name="text:Text Size" content="10px" />
  69. <meta name="text:Home" content="home" />
  70. <meta name="text:Ask" content="message" />
  71. <meta name="text:Archive" content="archive" />
  72. <meta name="text:Archive Link" content="/archive" />
  73. <meta name="text:Link1" content="/" />
  74. <meta name="text:Link1 Title" content="link 1" />
  75. <meta name="text:Link2" content="/" />
  76. <meta name="text:Link2 Title" content="link 2" />
  77. <meta name="text:Link3" content="/" />
  78. <meta name="text:Link3 Title" content="link 3" />
  79. <meta name="if:2columns200" content="0"/>
  80. <meta name="if:3columns200" content="1"/>
  81. <meta name="if:InfiniteScroll" content="0">
  82. <meta name="if:Caption" content="1">
  83. <meta name="text:Opacity Value" content="1"/>
  84. <meta name="if:Greyscale" content="0"/>
  85. <meta name="if:TinyCursor" content="0"/>
  86. <meta name="if:SpecialCursor" content="0"/>
  87. <meta name="select:Cursor" content="default" title="default">
  88. <meta name="select:Cursor" content="crosshair" title="crosshair">
  89. <meta name="select:Cursor" content="help" title="help">
  90. <meta name="select:Cursor" content="sw-resize" title="resize">
  91.  
  92. <script type="text/javascript"
  93. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  94. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  95. <script>
  96. (function($){
  97. $(document).ready(function(){
  98. $("[title]").style_my_tooltips();
  99. });
  100. })(jQuery);
  101. </script>
  102. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  103. <script>
  104. $(document).ready(function(){
  105. $("#flip").click(function(){
  106. $("#navigation").slideToggle("slow");
  107. });
  108. });
  109. </script>
  110.  
  111. {block:indexpage}
  112. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  113. </script>
  114. <script type="text/javascript">
  115. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  116. $(document).ready(function() {
  117. function photosetResize() {
  118. $('iframe.photoset').each(function(){
  119. var newSize = 200;
  120. var newSrc = $(this).attr('src').replace('500',newSize);
  121. $(this).attr('src', newSrc).width(newSize);
  122. var high = $(this).css('height');
  123. var calculate = parseInt(high, 10)* newSize/500;
  124. $(this).css('height', calculate);
  125. });
  126. }
  127. photosetResize();
  128. });
  129. </script>
  130. {/block:indexpage}
  131.  
  132. <style type="text/css">
  133.  
  134.  
  135.  
  136. /* --- general --- */
  137.  
  138.  
  139.  
  140. body { font-family:{select:Font};line-height:120%;color:{color:All General Text};word-wrap: break-word;font-size:{text:Text Size};background: {color:Blog Background} url('{image:Blog Background}') fixed repeat;
  141. cursor:{select:Cursor};}
  142.  
  143.  
  144.  
  145. a {
  146. text-decoration:none;
  147. cursor:pointer;
  148. color:{color:Hyperlinks};
  149. -webkit-transition: all 0.7s ease-in-out;
  150. -moz-transition: all 0.7s ease-in-out;
  151. -o-transition: all 0.7s ease-in-out;
  152. -ms-transition: all 0.7s ease-in-out;
  153. transition: all 0.7s ease-in-out;}
  154.  
  155. a:link, a:active, a:visited {
  156. color: {color:Hyperlinks};
  157. -webkit-transition: all 0.7s ease-in-out;
  158. -moz-transition: all 0.7s ease-in-out;
  159. -o-transition: all 0.7s ease-in-out;
  160. -ms-transition: all 0.7s ease-in-out;
  161. transition: all 0.7s ease-in-out;}
  162.  
  163. a:hover {color:{color:Hyperlinks Hover};}
  164.  
  165.  
  166. b, strong {
  167. font-weight:700;
  168. color:{color:Bold Text};}
  169.  
  170. i, em {
  171. font-weight:light;
  172. color:{color:Italic Text};}
  173.  
  174. h2 { font:bold 15px arial;}
  175.  
  176.  
  177. blockquote {
  178. margin: 3px;
  179. padding:0px 3px 0px 3px;
  180. line-height:120%;
  181. border-left: 2px solid #fff;
  182. background-color:{color:Text Posts Background};}
  183.  
  184.  
  185. blockquote img {
  186. {block:indexpage}
  187. width:160px;
  188. {/block:indexpage}
  189. {block:permalinkpage}
  190. width:410px;
  191. {/block:permalinkpage}
  192. overflow: auto;}
  193.  
  194.  
  195. #caption {
  196. padding: 5px;
  197. color:{color:All General Text};
  198. background-color:{color:Text Posts Background};
  199. margin-top:0px;
  200. text-align:justify;
  201. border:4px double #fff;}
  202.  
  203.  
  204. pre, xmp, plaintext, listing {
  205. display: block;
  206. white-space: pre;
  207. background: {color:Text Posts Background};
  208. padding: 5px;
  209. word-wrap: break-word;
  210. font: 10px consolas;}
  211.  
  212.  
  213.  
  214.  
  215. /* --- sidebar --- */
  216.  
  217.  
  218.  
  219.  
  220. #sidebar {
  221. position: fixed;
  222. top:0px;
  223. height:100%;
  224. width:150px;
  225. padding:15px;
  226. font:10px consolas;
  227. letter-spacing:1px;
  228. {block:if3Columns200}
  229. margin-left:100px;
  230. {/block:if3Columns200}
  231. {block:if2Columns200}
  232. margin-left:170px;
  233. {/block:if2Columns200}}
  234.  
  235. #title {
  236. width:130px;
  237. margin-top:50px;
  238. font: bold 23px arial;
  239. letter-spacing:5px;
  240. line-height:110%;
  241. text-align:center;
  242. padding:10px;
  243. color:{color:Title Font};
  244. z-index:99;
  245. background:{color:Title Background};}
  246.  
  247. #flip {
  248. text-align:center;
  249. cursor:pointer;
  250. border:10px solid {color:Navigation Background};
  251. padding:2px;
  252. background:{color:Links Background};
  253. width:126px;}
  254.  
  255. #navigation {
  256. width: 140px;
  257. padding:5px;
  258. text-align:center;
  259. z-index:9;
  260. position:relative;
  261. display:none;
  262. background:{color:Navigation Background};
  263. border-top:2px solid #fff;}
  264.  
  265. #navigation a {
  266. display:inline-block;
  267. width:57px;
  268. color:{color:Links Font};
  269. margin:3px;
  270. padding:2px;
  271. font:8px consolas;
  272. text-transform:uppercase;
  273. background:{color:Links Background};
  274. letter-spacing:1px;}
  275.  
  276. #description {
  277. width: 130px;
  278. font: 9px arial;
  279. letter-spacing:0px;
  280. line-height:100%;
  281. padding:10px;
  282. text-align: justify;
  283. color:{color:Description Font};
  284. z-index:9999;
  285. background:{color:Description Background};}
  286.  
  287. #pagination {
  288. margin:auto;
  289. position:relative;
  290. text-align:center;
  291. font:8px arial;
  292. letter-spacing:3px;
  293. text-transform:lowercase;
  294. width: 205px;
  295. z-index:9999;
  296. margin-top:7px;
  297. {block:permalinkpage}display:none;{/block:permalinkpage}
  298. {block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}}
  299.  
  300. #pagn {display:inline-block;text-align:center;padding:2px 4px 2px 4px;}
  301. #pagp {display:inline-block;text-align:center;padding:2px 4px 2px 4px;}
  302.  
  303. #pagination a{color:{color:Pagination Font}; cursor:pointer;}
  304.  
  305.  
  306.  
  307.  
  308. /* --- posts --- */
  309.  
  310.  
  311.  
  312.  
  313. #container{
  314. margin:auto;
  315. padding:0px 0px 20px 0px;
  316. margin-top:50px;
  317. {block:indexpage}
  318. {block:if3Columns200}
  319. width:790px;margin-left:310px;
  320. {/block:if3Columns200}
  321. {block:if2Columns200}
  322. width:700px;margin-left:390px;
  323. {/block:if2Columns200}
  324. {/block:indexpage}
  325. {block:permalinkpage}
  326. width:500px;margin-left:410px;
  327. {/block:permalinkpage}}
  328.  
  329. #posts{
  330. {block:indexpage}
  331. {block:if3columns200}
  332. width:200px; margin-bottom:55px;margin-right:55px;
  333. {/block:if3columns200}
  334. {block:if2Columns200}
  335. width:200px; margin-bottom:55px;margin-right:55px;
  336. {/block:if2Columns200}
  337. {/block:indexpage}
  338. {block:PermalinkPage}
  339. width:500px;margin-bottom:20px;line-height:120%;
  340. {/block:PermalinkPage}}
  341.  
  342. .titles{
  343. color:{color:Post Title Font};
  344. font: bold 16px arial;
  345. line-height: 100%;
  346. text-align:left;
  347. padding:9px;
  348. text-transform:lowercase;
  349. letter-spacing:2px;}
  350.  
  351.  
  352. #opandgrey {
  353. opacity:{text:Opacity Value};
  354. -webkit-transition-duration:0.8s;
  355. -moz-transition-duration: 0.8s;
  356. transition: all 0.8s ease-in-out;
  357. {block:ifgreyscale}
  358. filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: gray;
  359. -webkit-filter: grayscale(100%);-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;transition: all 0.8s ease-in-out;{/block:ifgreyscale}}
  360. #opandgrey:hover{{block:indexpage}opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;-webkit-filter: grayscale(0%);{/block:indexpage}}
  361.  
  362. #posts img {
  363. {block:if3columns200}
  364. max-width:170px;height:auto;
  365. {/block:if3columns200}
  366. {block:if2Columns200}
  367. max-width:170px;height:auto;
  368. {/block:if2Columns200}
  369. {block:permalinkpage}max-width:450px;height:auto;{/block:permalinkpage};}
  370.  
  371. #text {
  372. padding: 5px 15px 5px 15px;
  373. text-align:justify;
  374. background:{color:Text Posts Background};}
  375.  
  376. #quote {
  377. text-align:center;
  378. font: oblique bold 20px 'bodoni';
  379. letter-spacing:1px;
  380. line-height: 100%;
  381. padding: 20px 20px 15px 20px;
  382. background:{color:Text Posts Background};}
  383.  
  384. #source {font: oblique 9px cambria;letter-spacing:1px; text-align:center;padding: 5px; margin-top:5px;color:#888;}
  385.  
  386. .chat ul{padding:0px 0px 0px 0px;margin:0px;}
  387. .chat li{margin-bottom:1px;padding:6px;list-style-type:none;}
  388. .chat li.odd {background:#f5f5f5;}
  389. .chat li.even {background:#fcfcfc;}
  390. span.chats {color:#222;font: 10px calibri; font-weight:700;letter-spacing:1px;text-transform:uppercase;}
  391.  
  392. .audioplayer {position:relative;display:inline-block;width:100%;}
  393. .player {left: 5px;top: 5px;padding:10px;background:#f5f5f5;overflow:hidden;border-right:10px solid #f5f5f5;}
  394. .button {position: relative;width: 40px;height: 40px;}
  395. .tumblr_audio_player {margin-left:60px;width: 500px;height:40px;background:#111;{block:if3columns200} width:200px;{/block:if3columns200}{block:if2Columns200}width:200px; {/block:if2Columns200}}
  396. .audioalbum {position: absolute;left: 5px;top: 5px;overflow: hidden;width: 40px;height: 40px;border:5px solid #fff;border-radius:50%;}
  397. .audioalbum img {width: 100%;height: auto;}
  398. .audioinfo {width:auto;margin-top:10px; padding:0px;text-align:center; font-family:consolas;letter-spacing:1px;font-size:9px;font-weight:bold;color:#777;text-transform:uppercase;overflow:hidden;}
  399.  
  400. #asker {
  401. line-height: 100%;
  402. text-align:left;
  403. letter-spacing:4px;
  404. text-transform:lowercase;
  405. color:{color:Post Title Font};
  406. font:oblique bold 14px arial;
  407. -webkit-transition: all 0.7s ease-in-out;
  408. -moz-transition: all 0.7s ease-in-out;
  409. -o-transition: all 0.7s ease-in-out;
  410. -ms-transition: all 0.7s ease-in-out;
  411. transition: all 0.7s ease-in-out;}
  412.  
  413. #asker img {padding:3px;background:#fff;}
  414.  
  415. #questions {
  416. text-align:justify;
  417. padding:20px;
  418. font:oblique bold 11px calibri;
  419. margin-bottom:5px;
  420. letter-spacing:1px;
  421. background: {color:Question Background};}
  422.  
  423. #asker a {color:#888;}
  424. #asker a:hover {color:#666;}
  425.  
  426.  
  427.  
  428.  
  429. /* --- post information --- */
  430.  
  431.  
  432.  
  433.  
  434. .info {
  435. {block:indexpage}
  436. position:absolute;
  437. letter-spacing:1px;
  438. font: 9px consolas;
  439. text-align:center;
  440. text-transform:uppercase;
  441. color:{color:Info Font};
  442. z-index:2;
  443. padding:10px;
  444. opacity:0;
  445. line-height:160%;
  446. background:{color:Info Background};
  447. {block:if3Columns200}
  448. width:150px;
  449. margin-left:15px;
  450. margin-top:15px;
  451. font: 8px consolas;
  452. {/block:if3Columns200}
  453. {block:if2Columns200}
  454. font: 8px consolas;
  455. width:150px;
  456. margin-left:15px;
  457. margin-top:15px;
  458. {/block:if2Columns200}
  459. -webkit-transition: all 0.7s ease-in-out;
  460. -moz-transition: all 0.7s ease-in-out;
  461. -o-transition: all 0.7s ease-in-out;
  462. -ms-transition: all 0.7s ease-in-out;
  463. transition: all 0.7s ease-in-out;
  464. {/block:indexpage}
  465. {block:PermalinkPage}
  466. display:none;
  467. {/block:PermalinkPage}}
  468.  
  469. .info_text {
  470. {block:indexpage}
  471. text-transform:uppercase;
  472. letter-spacing:1px;
  473. font-family: calibri;
  474. font-size:8px;
  475. margin-top:-15px;
  476. opacity:0;
  477. color:{color:Info Font};
  478. z-index:2;
  479. padding:1px 3px 1px 3px;
  480. -webkit-transition: all 0.7s ease-in-out;
  481. -moz-transition: all 0.7s ease-in-out;
  482. -o-transition: all 0.7s ease-in-out;
  483. -ms-transition: all 0.7s ease-in-out;
  484. transition: all 0.7s ease-in-out;
  485. {/block:indexpage}
  486. {block:PermalinkPage}
  487. display:none;
  488. {/block:PermalinkPage}}
  489.  
  490. .tagging{
  491. {block:indexpage}
  492. position:absolute;
  493. text-transform:uppercase;
  494. font-family: calibri;
  495. font-size:8px;
  496. margin-top:5px;
  497. opacity:0;
  498. line-height:140%;
  499. text-align:justify;
  500. word-wrap: break-word;
  501. text-shadow:1px 1px 0px #eee;
  502. {/block:indexpage}
  503. {block:PermalinkPage}
  504. display:none;
  505. {/block:PermalinkPage}
  506. -webkit-transition: all 0.5s ease-in-out;
  507. -moz-transition: all 0.5s ease-in-out;
  508. -o-transition: all 0.5s ease-in-out;
  509. -ms-transition: all 0.5s ease-in-out;
  510. transition: all 0.5s ease-in-out;}
  511.  
  512. #posts:hover .info_text {opacity:1;}
  513. #posts:hover .tagging, #posts:hover .info {opacity:1;}
  514. .info_text a{color:{color:Info Font};}
  515. .info a{color:{color:Info Font};}
  516. .tagging a{color:{color:Tags Font};background:{color:Tags Background};}
  517. .infofoot a:hover, .info a:hover, .tagging a:hover{text-decoration:underline;}
  518.  
  519.  
  520.  
  521.  
  522. /* --- permalink --- */
  523.  
  524.  
  525.  
  526.  
  527. #infoperm{
  528. font-family: arial;
  529. font-size:9px;
  530. text-transform:lowercase;
  531. letter-spacing:1px;
  532. text-align:left;
  533. margin-top:10px;
  534. padding-left: 13px;
  535. padding-right: 13px;
  536. padding-top: 8px;
  537. padding-bottom: 8px;
  538. background-color: #f5f5f5;
  539. {block:permalinkpage}width:474px;{/block:permalinkpage}}
  540.  
  541. #tagperm{
  542. font-family:calibri;
  543. text-transform:normal;
  544. text-transform:uppercase;
  545. font-size:8px;
  546. letter-spacing: 1px;
  547. text-align:left;
  548. margin-top: 3px;
  549. padding: 13px;
  550. background-color: #f5f5f5;}
  551.  
  552. #notecount{
  553. font:bold 17px arial;
  554. text-transform:normal;
  555. letter-spacing: -1px;
  556. text-align:center;
  557. margin-top:5px;
  558. margin-bottom: 10px;
  559. padding: 1px;
  560. color:#333;
  561. background-color:#f5f5f5;}
  562.  
  563. #infoperm a {{color:hyperlinks};}
  564. #tagperm a {{color:hyperlinks};}
  565. #tagperm a:hover {color:{color:hyperlinks hover};}
  566.  
  567. .pnotes {
  568. background:transparent;
  569. width:500px;
  570. text-align: left;
  571. overflow:auto;
  572. line-height:15px;
  573. padding:5px;
  574. margin-left: -20px;}
  575.  
  576. .pnotes img{width:26px;margin:5px;border:3px solid #f5f5f5;}
  577. .pnotes li{list-style-type:none; padding:4px;margin-right: 20px;margin-bottom:2px;}
  578. ol.notes {margin: 25px 0px;}
  579. img.avatar {
  580. vertical-align: -18px;
  581. width: 26px;
  582. height: 26px;
  583. padding: 1px;}
  584.  
  585.  
  586.  
  587. /* --- etc --- */
  588.  
  589.  
  590.  
  591. #top {
  592. margin:auto;
  593. background:{color:Headers Background};
  594. position:fixed;
  595. top:0;
  596. height:30px;
  597. z-index:9999;
  598. {block:if3Columns200}
  599. width:710px;margin-left:310px;
  600. {/block:if3Columns200}
  601. {block:if2Columns200}
  602. width:455px;margin-left:390px;
  603. {/block:if2Columns200}
  604. {block:PermalinkPage}
  605. width:500px;margin-left:410px;
  606. {/block:PermalinkPage}
  607. }
  608.  
  609. #bottom{
  610. margin:auto;
  611. background:{color:Headers Background};
  612. position:fixed;
  613. bottom:0;
  614. height:30px;
  615. z-index:9999;
  616. {block:if3Columns200}
  617. width:710px;margin-left:310px;
  618. {/block:if3Columns200}
  619. {block:if2Columns200}
  620. width:455px;margin-left:390px;
  621. {/block:if2Columns200}
  622. {block:PermalinkPage}
  623. width:500px;margin-left:410px;
  624. {/block:PermalinkPage}
  625. }
  626.  
  627. #chloe {font-size:8px;font-family:consolas;text-align:center;letter-spacing:2px;padding: 5px 8px 5px 8px;z-index:99999;position:fixed;top:0px;left:0px;color:#ccc;}
  628. #chloe a {color:#aaa;}
  629.  
  630. #s-m-t-tooltip {display: block;background: {color:Tooltip Background};font-size: 8px;font-family: calibri;letter-spacing: 1px;text-transform: uppercase;line-height:130%;color: {color:Tooltip Font};text-align: center;margin-left: 18px;padding:10px;min-width: 40px;max-width: 150px;z-index: 999999;}
  631.  
  632. iframe#tumblr_controls {right:0px !important;position:fixed !important;opacity:0.5;z-index:999999;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  633. iframe#tumblr_controls:hover {opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  634.  
  635. ::-webkit-scrollbar-track {background-color:#fff;}
  636. ::-webkit-scrollbar-thumb {background-color:#f5f5f5;}
  637. ::-webkit-scrollbar {width:10px;height:7px;}
  638.  
  639. ::selection {color: #bbb; background: #f5f5f5; }
  640. ::-moz-selection {color: #bbb; background: #f5f5f5; }
  641. ::-webkit-selection {color: #bbb; background: #f5f5f5; }
  642.  
  643. {block:iftinycursor}
  644. body{cursor:url('http://www.totallylayouts.com/cursors/random/tiny_cursor.png'), auto;}
  645. a, a:hover,a:link, a:active, a:visited, #navigation a:hover, #pagination a:hover {cursor:url('http://media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif'), auto;}
  646. {/block:iftinycursor}
  647. {block:ifspecialcursor}
  648. body{cursor:url('{image:Special Cursor Default}'), auto;}
  649. a, a:hover,a:link, a:active, a:visited, #navigation a:hover, #pagination a:hover {cursor:url('{image:Special Cursor Pointer}'), auto;}
  650. {/block:ifspecialcursor}
  651.  
  652.  
  653.  
  654. </style>
  655.  
  656.  
  657.  
  658. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  659. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  660. <script type="text/javascript">
  661. $(window).load(function () {
  662. $('#container').masonry({
  663. itemSelector : "#posts",
  664. },
  665. function() { $('#container').masonry({ appendedContent: $(this) }); },
  666. // trigger Masonry as a callback
  667. function( newElements ) {
  668. var $newElems = $( newElements ).css({ opacity: 0 });
  669. // ensure that images load before adding to masonry layout
  670. $newElems.imagesLoaded(function(){
  671. $newElems.animate({ opacity: 1 });
  672. $container.masonry( 'appended', $newElems, true );
  673. });
  674. }
  675. );
  676. });
  677. </script>
  678.  
  679.  
  680.  
  681. </head>
  682. <body>
  683.  
  684.  
  685.  
  686. <div id="top">
  687. <div id="pagination">
  688. {block:Pagination}
  689. {block:PreviousPage}
  690. <div id="pagp"><a href="{PreviousPage}">« previous page</a>
  691. </div>
  692. {/block:PreviousPage}
  693. {block:NextPage}
  694. <div id="pagn"><a href="{NextPage}">next page »</a>
  695. </div>
  696. {/block:NextPage}
  697. {/block:Pagination}
  698. </div>
  699. </div>
  700.  
  701. <div id="bottom"></div>
  702.  
  703. <div id="sidebar">
  704. <div id="title">{Title}</div>
  705.  
  706. <div id="flip">navigation ▾</div>
  707. <div id="navigation">
  708. <a href="/">home</a><a href="/ask">askbox</a><a href="{text:archive link}">{text:archive}</a>{block:ifLink1}<a href="{text:Link1}">{text:Link1 Title}</a>{/block:ifLink1}{block:ifLink2}<a href="{text:Link2}">{text:Link2 Title}</a>{/block:ifLink2}{block:ifLink3}<a href="{text:Link3}">{text:Link3 Title}</a>{/block:ifLink3}
  709. </div>
  710.  
  711. <div id="description">{block:Description}{Description}{/block:Description}</div>
  712.  
  713. <img src="{image:Sidebar Image}" width="150">
  714.  
  715. </div>
  716.  
  717.  
  718.  
  719.  
  720.  
  721. <!-----------posts-------------->
  722.  
  723.  
  724.  
  725. <div id="container">
  726.  
  727. {block:Posts}
  728. <div id="posts">
  729.  
  730.  
  731.  
  732.  
  733. {block:Quote}
  734.  
  735. <div class="info_text">
  736. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  737. </div>
  738.  
  739. <div id="quote">{Quote}<div id="source">{Source}</div></div>
  740.  
  741. <div class="tagging">
  742. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  743. </div>
  744.  
  745. {/block:Quote}
  746.  
  747.  
  748.  
  749.  
  750.  
  751. {block:Photo}
  752.  
  753. {block:indexpage}
  754.  
  755. <div class="info">
  756. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a> <br>{/block:Date} <span style="font-size:12px;">▸{NoteCountWithLabel}◂</span> {block:RebloggedFrom} <br> <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> & <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} <br><a href="{ReblogURL}" title="reblog this post">reblog</a>
  757. </div>
  758.  
  759. <div id="opandgrey">
  760.  
  761. <center>
  762. <img src="{PhotoURL-500}" style="
  763. {block:if3columns200}max-width:200px;{/block:if3columns200}
  764. {block:if2columns200}max-width:200px;{/block:if2columns200}"/>
  765. </center>
  766.  
  767. </div>
  768.  
  769. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  770.  
  771. <div class="tagging">
  772. {block:HasTags}<span style="padding:2px 3px 2px 3px;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  773.  
  774. {/block:indexpage}
  775.  
  776. {block:permalinkpage}
  777. <center>
  778. <img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:500px;">
  779. </center>
  780. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  781. {/block:permalinkpage}
  782.  
  783. {/block:Photo}
  784.  
  785.  
  786.  
  787.  
  788.  
  789. {block:Photoset}
  790.  
  791. {block:indexpage}
  792.  
  793. <div class="info">
  794. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a> <br>{/block:Date} <span style="font-size:12px;">▸{NoteCountWithLabel}◂</span> {block:RebloggedFrom} <br> <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> & <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom} <br><a href="{ReblogURL}" title="reblog this post">reblog</a>
  795. </div>
  796.  
  797. <div id="opandgrey">
  798.  
  799. <center>
  800. {block:if3columns200}{Photoset-500}{/block:if3columns200}
  801. {block:if2columns200}{Photoset-500}{/block:if2columns200}
  802. </center>
  803.  
  804. </div>
  805.  
  806. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  807.  
  808. <div class="tagging">
  809. {block:HasTags}<span style="padding:2px 3px 2px 3px;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  810. </div>
  811.  
  812. {/block:indexpage}
  813.  
  814. {block:permalinkpage}
  815. <center>{Photoset-500}</center>
  816. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  817. {/block:permalinkpage}
  818.  
  819. {/block:Photoset}
  820.  
  821.  
  822.  
  823.  
  824.  
  825. {block:Link}
  826.  
  827. <div class="info_text">
  828. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  829. </div>
  830.  
  831. <a href="{URL}" class="link" {Target}>
  832. <div class="titles">{Name} ▹</div>
  833. </a>
  834. {block:Description}
  835. <div id="text">{Description}</div>
  836. {/block:Description}
  837.  
  838. <div class="tagging">
  839. {block:HasTags}<br/><br/>{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  840. </div>
  841.  
  842. {block:Link}
  843.  
  844.  
  845.  
  846.  
  847.  
  848. {block:Chat}
  849.  
  850. <div class="info_text">
  851. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  852. </div>
  853.  
  854. {block:Title}
  855. <div class="titles">{Title}</div>
  856. {/block:Title}
  857. <div class="chat">
  858. <ul>
  859. {block:Lines}
  860. <li class="{Alt} u{UserNumber}">
  861. {block:Label}<span class="chats">{Label}</span>{/block:Label}
  862. {Line}</li>
  863. {/block:Lines}
  864. </ul>
  865. </div>
  866.  
  867. <div class="tagging">
  868. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  869. </div>
  870.  
  871. {/block:Chat}
  872.  
  873.  
  874.  
  875.  
  876.  
  877. {block:Audio}
  878.  
  879. <div class="info_text">
  880. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  881. </div>
  882.  
  883. {block:AudioPlayer}
  884. <div class="audioplayer">
  885. {block:AlbumArt}<div class="audioalbum"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  886. <div class="player">
  887. <div class="button">{AudioPlayerWhite}</div>
  888. </div>
  889. <div class="audioinfo">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist} // {Artist}{/block:Artist} {block:PlayCount}// {PlayCountWithLabel}{/block:PlayCount}
  890. </div>
  891. </div>
  892. {/block:AudioPlayer}
  893.  
  894. {block:ifcaption}{block:Caption}<br><br><div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  895.  
  896. <div class="tagging">
  897. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  898. </div>
  899.  
  900. {/block:Audio}
  901.  
  902.  
  903.  
  904.  
  905.  
  906. {block:Text}
  907.  
  908. {block:indexpage}
  909.  
  910. <div class="info_text">
  911. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  912. </div>
  913.  
  914. <div id="opandgrey">
  915.  
  916. {block:Title}
  917. <div class="titles">{Title}</div>
  918. {/block:Title}
  919. <div id="text">{Body}</div>
  920.  
  921. </div>
  922.  
  923. <div class="tagging">
  924. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  925. </div>
  926.  
  927. {/block:indexpage}
  928.  
  929. {block:permalinkpage}
  930. {block:Title}
  931. <div class="titles">{Title}</div>
  932. {/block:Title}
  933. <div id="text">{Body}</div>
  934. {/block:permalinkpage}
  935.  
  936. {/block:Text}
  937.  
  938.  
  939.  
  940.  
  941.  
  942. {block:Video}
  943.  
  944. {block:indexpage}
  945.  
  946. <div class="info_text">
  947. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  948. </div>
  949.  
  950. <center>
  951. {block:if3columns200}{Video-250}{/block:if3columns200}
  952. {block:if2columns200}{Video-250}{/block:if2columns200}
  953. </center>
  954.  
  955. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  956.  
  957. <div class="tagging">
  958. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  959. </div>
  960.  
  961. {/block:indexpage}
  962.  
  963. {block:permalinkpage}
  964. <center>{Video-500}</center>
  965. {block:Caption}{Caption}{/block:Caption}
  966. {/block:permalinkpage}
  967.  
  968. {block:Video}
  969.  
  970.  
  971.  
  972.  
  973.  
  974. {block:Answer}
  975.  
  976. <div class="info_text">
  977. {block:Date}<a href="{Permalink}" title="permalink">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date} {block:NoteCount} // {NoteCountWithLabel}{/block:NoteCount} <a href="{ReblogURL}" title="reblog this post">// reblog</a>
  978. </div>
  979.  
  980. <div id="asker">
  981. <img src="https://31.media.tumblr.com/da6ec800b306286814b56c85c065973c/tumblr_inline_n2aigp3RjV1r7v6wt.png" style="vertical-align:-3px;"> {Asker}:</div>
  982. <div id="questions">{Question}</div>
  983. <div id="text">{Answer}</div>
  984.  
  985. <div class="tagging">
  986. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}
  987. </div>
  988.  
  989. {/block:Answer}
  990.  
  991.  
  992.  
  993.  
  994.  
  995. <!----------------------->
  996.  
  997.  
  998.  
  999.  
  1000. {block:permalinkpage}
  1001.  
  1002.  
  1003. <div id="infoperm">
  1004. {block:Date}Posted on {Month} {DayOfMonth}, {Year} at {24Hour}:{Minutes}{/block:Date}
  1005. {block:RebloggedFrom} - <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom}
  1006. {block:ContentSource} - <b>source:</b> <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource}</div>
  1007.  
  1008. {block:HasTags}
  1009. <div id="tagperm">
  1010. <b>Tagged as:</b>{block:Tags} <a href="{TagURL}"> <small>#</small>{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  1011.  
  1012. <div id="notecount">{block:NoteCount}<p>{NoteCountWithLabel}{/block:NoteCount}</div>
  1013.  
  1014. <div class="pnotes">
  1015. {block:PostNotes}
  1016. {PostNotes-64}
  1017. {/block:PostNotes}
  1018. </div>
  1019.  
  1020.  
  1021. {/block:permalinkpage}
  1022.  
  1023.  
  1024. </div>
  1025. {/block:Posts}
  1026. </div>
  1027.  
  1028.  
  1029.  
  1030. <!----------------------->
  1031.  
  1032.  
  1033.  
  1034.  
  1035. {block:ifinfinitescroll}
  1036. {block:indexpage}
  1037. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  1038. <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  1039. <script src="/jquery.masonry.min.js" type="text/javascript"></script>
  1040. <script src="/jquery.infinitescroll.min.js" type="text/javascript" ></script>
  1041. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  1042. <script type="text/javascript">
  1043. $(document).ready(function() {
  1044. $('iframe.photoset').each(function() {
  1045. var i = this;
  1046. $(i).attr("onload", "ps_resize(this)");
  1047. var s = $(i).attr("src");
  1048. s = s.replace(/\/500\//, "/200/");
  1049. $(i).attr("src", s);
  1050. });
  1051. $(function(){
  1052. var $container = $('#container');
  1053. $container.imagesLoaded(function(){
  1054. $container.masonry({
  1055. itemSelector: '#posts',
  1056. });
  1057. });
  1058. $container.infinitescroll({
  1059. navSelector : '#page-nav',
  1060. nextSelector : '#page-nav a',
  1061. itemSelector : '#posts',
  1062. loading: {
  1063. finishedMsg: '~ THE END ~',
  1064. img: '',
  1065. text: '....'
  1066. }
  1067. },
  1068. function( newElements ) {
  1069. $(newElements).find('iframe.photoset').each(function() {
  1070. var i = this;
  1071. $(i).attr("onload", "ps_resize(this)");
  1072. var s = $(i).attr("src");
  1073. s = s.replace(/\/500\//, "/200/");
  1074. $(i).attr("src", s);
  1075. });
  1076. var $newElems = $( newElements ).css({ opacity: 0 });
  1077. $newElems.imagesLoaded(function(){
  1078. $newElems.animate({ opacity: 1 });
  1079. $container.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
  1080. });
  1081. }
  1082. );
  1083. });
  1084. });
  1085.  
  1086. function ps_resize(i) {
  1087. $(i).contents().find("body").imagesLoaded(function() {
  1088. $(i).attr("width", 200);
  1089. $(i).attr("height", $(this).height());
  1090. var $container = $('#container');
  1091. $container.imagesLoaded(function(){
  1092. $container.masonry({
  1093. itemSelector: '#posts',
  1094. bufferPx : 1000,
  1095. });
  1096. });
  1097. });
  1098. return false;
  1099. }
  1100. </script>
  1101. <script type="text/javascript">
  1102. (function($, undefined) {
  1103. $.extend($.infinitescroll.prototype,{
  1104. _callback_masonry: function infscr_callback_masonry (newElements) {
  1105. $(this).masonry('appended',$(newElements));
  1106. }
  1107. });
  1108. })(jQuery);
  1109. </script>
  1110.  
  1111. {/block:indexpage}
  1112. {/block:ifinfinitescroll}
  1113.  
  1114.  
  1115. <div id="chloe" title="coded by chloe"><a href="http://soon-co.tumblr.com/">SOONCO</a></div>
  1116.  
  1117. </body>
  1118. </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!