API tools faq
paste
Advertisement
jaesoonie

THEME #41 SUGA

jaesoonie
Apr 25th, 2014
7,533
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6.  
  7.  
  8. ᴛʜᴇᴍᴇ #41;
  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="#f5f5f5" />
  40. <meta name="color:Container Background" content="#fff" />
  41. <meta name="color:Sidebar Color" content="#000" />
  42. <meta name="color:Title Font" content="#f0f0f0" />
  43. <meta name="color:Post Title Font" content="#fff" />
  44. <meta name="color:Post Title Background" content="#c7dbe1" />
  45. <meta name="color:All General Text" content="#565656" />
  46. <meta name="color:Bold Text" content="#6f6e6e" />
  47. <meta name="color:Italic Text" content="#b9b8b8" />
  48. <meta name="color:Navigation Borders Background" content="#c7dbe1" />
  49. <meta name="color:Navigation Background" content="#fff" />
  50. <meta name="color:Navigation Font" content="#555" />
  51. <meta name="color:Description Font" content="#f0f0f0" />
  52. <meta name="color:Hyperlinks" content="#c7dbe1"/>
  53. <meta name="color:Hyperlinks Hover" content="#fff" />
  54. <meta name="color:Text Posts Background" content="#f5f5f5" />
  55. <meta name="color:Info Font" content="#fff" />
  56. <meta name="color:Info Background" content="#000" />
  57. <meta name="color:Tooltip Background" content="#222" />
  58. <meta name="color:Tooltip Font" content="#ffffff" />
  59. <meta name="color:Pagination Background" content="#92d2da" />
  60. <meta name="color:Pagination Font" content="#fff" />
  61. <meta name="color:Question Background" content="#f5f5f5" />
  62. <meta name="image:Blog Background" content="" />
  63. <meta name="image:Sidebar Image" content="" />
  64. <meta name="image:Special Cursor Default" content="" />
  65. <meta name="image:Special Cursor Pointer" content="" />
  66. <meta name="text:Title Size" content="15px" />
  67. <meta name="text:Text Size" content="10px" />
  68. <meta name="text:Home" content="home" />
  69. <meta name="text:Ask" content="message" />
  70. <meta name="text:Archive" content="archive" />
  71. <meta name="text:Archive Link" content="/archive" />
  72. <meta name="text:Link1" content="/" />
  73. <meta name="text:Link1 Title" content="link 1" />
  74. <meta name="text:Link2" content="/" />
  75. <meta name="text:Link2 Title" content="link 2" />
  76. <meta name="text:Link3" content="/" />
  77. <meta name="text:Link3 Title" content="link 3" />
  78. <meta name="if:350px" content="0"/>
  79. <meta name="if:400px" content="0"/>
  80. <meta name="if:500px" 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.  
  103. {block:if350px}
  104. {block:indexpage}
  105. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  106. </script>
  107. <script type="text/javascript">
  108. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  109. $(document).ready(function() {
  110. function photosetResize() {
  111. $('iframe.photoset').each(function(){
  112. var newSize = 350;
  113. var newSrc = $(this).attr('src').replace('500',newSize);
  114. $(this).attr('src', newSrc).width(newSize);
  115. var high = $(this).css('height');
  116. var calculate = parseInt(high, 10)* newSize/500;
  117. $(this).css('height', calculate);
  118. });
  119. }
  120. photosetResize();
  121. });
  122. </script>
  123. {/block:indexpage}
  124. {/block:if350px}
  125.  
  126. <style type="text/css">
  127.  
  128. #s-m-t-tooltip {display: block;background: {color:Tooltip Background};font-size: 8px;font-family: calibri;letter-spacing: 1px;text-transform: uppercase;line-height:100%;color: {color:Tooltip Font};text-align: center;margin-left: 18px;padding:4px;min-width: 40px;max-width: 200px;z-index: 999999;}
  129.  
  130. 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;}
  131. iframe#tumblr_controls:hover {opacity:1;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;}
  132.  
  133. ::-webkit-scrollbar-track {background-color:#fff;}
  134. ::-webkit-scrollbar-thumb {background-color:#000;}
  135. ::-webkit-scrollbar {width:6px;height:6px;}
  136.  
  137. ::selection {color: #fff; background: #111; }
  138. ::-moz-selection {color: #fff; background: #111; }
  139. ::-webkit-selection {color: #fff; background: #111; }
  140.  
  141. {block:iftinycursor}
  142. body{cursor:url('http://www.totallylayouts.com/cursors/random/tiny_cursor.png'), auto;}
  143. 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;}
  144. {/block:iftinycursor}
  145. {block:ifspecialcursor}
  146. body{cursor:url('{image:Special Cursor Default}'), auto;}
  147. a, a:hover,a:link, a:active, a:visited, #navigation a:hover, #pagination a:hover {cursor:url('{image:Special Cursor Pointer}'), auto;}
  148. {/block:ifspecialcursor}
  149.  
  150. body{font-family:{select:Font};font-size:{text:Text Size};line-height:100%;color:{color:All General Text};word-wrap: break-word;background: {color:Blog Background} url('{image:Blog Background}') fixed repeat;cursor:{select:Cursor};}
  151.  
  152. a { text-decoration:none;cursor:pointer;color:{color:Hyperlinks};-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
  153.  
  154. a:link, a:active, a:visited {color: {color:Hyperlinks};-webkit-transition: all 0.7s ease-in-out;-moz-transition: all 0.7s ease-in-out;transition: all 0.7s ease-in-out;}
  155. a:hover {color:{color:Hyperlinks Hover};}
  156.  
  157. b, strong {
  158. font-weight:700;
  159. color:{color:Bold Text};}
  160.  
  161. i, em {
  162. font-weight:light;
  163. color:{color:Italic Text};}
  164.  
  165. h2 {font:bold 15px arial; }
  166.  
  167. blockquote {
  168. margin: 3px;
  169. padding:0px 3px 0px 3px;
  170. line-height:90%;
  171. border-left: 1px solid #ddd;
  172. background-color:{color:Text Posts Background};}
  173.  
  174. blockquote img {
  175. {block:indexpage}
  176. width:160px;
  177. {/block:indexpage}
  178. {block:permalinkpage}
  179. width:410px;
  180. {/block:permalinkpage}
  181. overflow: auto;}
  182.  
  183. #caption{
  184. padding: 3px 10px 3px 10px;
  185. color:{color:All General Text};
  186. background-color:{color:Text Posts Background};
  187. margin-top:0px;
  188. text-align:justify;}
  189.  
  190. pre, xmp, plaintext, listing {
  191. display: block;
  192. white-space: pre;
  193. background: {color:Text Posts Background};
  194. padding: 5px;
  195. word-wrap: break-word;
  196. font: 10px consolas;}
  197.  
  198. /*************sidebar*************/
  199.  
  200. #sidebar {
  201. position: fixed;
  202. top:0px;
  203. margin-left:20px;
  204. height:100%;
  205. width:120px;
  206. padding:15px;}
  207.  
  208. #head {
  209. margin:auto;
  210. background:{color:Sidebar Color} url('{image:Sidebar Image}');
  211. background-size:cover;
  212. background-position:center;
  213. position:fixed;
  214. top:0;
  215. height:100%;
  216. width:100%;
  217. {block:if350px}
  218. left:810px;
  219. {/block:if350px}
  220. {block:if400px}
  221. left:860px;
  222. {/block:if400px}
  223. {block:if500px}
  224. left:940px;
  225. {/block:if500px}
  226. {block:permalinkpage}
  227. left:940px;
  228. {/block:permalinkpage}}
  229.  
  230. #title {
  231. width:110px;
  232. margin-top:50px;
  233. font: bold {text:Title Size} arial;
  234. letter-spacing:5px;
  235. line-height:110%;
  236. text-align:left;
  237. padding:5px;
  238. color:{color:Title Font};
  239. z-index:99;
  240. -webkit-transition: all 0.9s ease-in-out;
  241. -moz-transition: all 0.9s ease-in-out;
  242. -o-transition: all 0.9s ease-in-out;
  243. -ms-transition: all 0.9s ease-in-out;
  244. transition: all 0.9s ease-in-out;}
  245.  
  246. #navigation{
  247. width: 104px;
  248. padding:8px;
  249. text-align:center;
  250. z-index:9;
  251. background:{color:Navigation Borders Background};
  252. position:relative;}
  253.  
  254. #description {
  255. width: 100px;
  256. height:auto;
  257. font: 9px arial;
  258. letter-spacing:0px;
  259. line-height:100%;
  260. padding:10px;
  261. text-align: justify;
  262. color:{color:Description Font};}
  263.  
  264. #pagination {
  265. {block:Pagination}
  266. margin:auto;
  267. position:relative;
  268. text-align:center;
  269. font:bold 8px consolas;
  270. padding:0px;
  271. margin-top:5px;
  272. margin-bottom:5px;
  273. letter-spacing:2px;
  274. opacity:0;
  275. text-transform:uppercase;
  276. width: 100px;
  277. -webkit-transition: all 0.5s ease-in-out;
  278. -moz-transition: all 0.5s ease-in-out;
  279. transition: all 0.5s ease-in-out;
  280. {/block:Pagination}
  281. {block:permalinkpage}display:none;{/block:permalinkpage}
  282. {block:ifinfinitescroll}display:none;{/block:ifinfinitescroll}}
  283.  
  284. #pagn {display:inline-block;text-align:right;padding:2px 4px 2px 4px;}
  285. #pagp {display:inline-block;text-align:left;padding:2px 4px 2px 4px;}
  286.  
  287. #pagination a{color:{color:Description Font}; cursor:pointer;}
  288.  
  289. #head:hover #pagination {opacity:1;}
  290.  
  291. /**********posts***********/
  292.  
  293. #container{
  294. padding:60px 0px 20px 20px;
  295. margin-top:-20px;
  296. background:{color:Container Background};
  297. {block:indexpage}
  298. {block:if350px}
  299. width:395px;margin-left:388px;
  300. {/block:if350px}
  301. {block:if400px}
  302. width:445px;margin-left:388px;
  303. {/block:if400px}
  304. {block:if500px}
  305. width:545px;margin-left:368px;
  306. {/block:if500px}
  307. {/block:indexpage}
  308. {block:permalinkpage}
  309. width:545px;margin-left:368px;
  310. {/block:permalinkpage}}
  311.  
  312. #posts{
  313. background:#fff;
  314. padding:12px;
  315. {block:indexpage}
  316. {block:if350px}
  317. width:350px; margin-bottom:100px;
  318. {/block:if350px}
  319. {block:if400px}
  320. width:400px;margin-bottom:80px;
  321. {/block:if400px}
  322. {block:if500px}
  323. width:500px; margin-bottom:90px;
  324. {/block:if500px}
  325. {/block:indexpage}
  326. {block:PermalinkPage}
  327. width:500px;margin-bottom:20px;line-height:110%;
  328. {/block:PermalinkPage}}
  329.  
  330. .titles{
  331. color:{color:Post Title Font};
  332. font:bold 15px arial;
  333. line-height: 100%;
  334. text-align:justify;
  335. padding:9px;
  336. text-align:left;
  337. background:{color:Post Title Background};
  338. text-transform:lowercase;
  339. letter-spacing:2px;}
  340.  
  341. #opandgrey {
  342. opacity:{text:Opacity Value};
  343. -webkit-transition-duration:0.8s;
  344. -moz-transition-duration: 0.8s;
  345. transition: all 0.8s ease-in-out;
  346. {block:ifgreyscale}
  347. 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;
  348. -webkit-filter: grayscale(100%);-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;transition: all 0.8s ease-in-out;{/block:ifgreyscale}}
  349. #opandgrey:hover{{block:indexpage}opacity:1;filter:none;-webkit-transition-duration:0.8s;-moz-transition-duration: 0.8s;-webkit-filter: grayscale(0%);{/block:indexpage}}
  350.  
  351. #posts img {{block:if350px}max-width:170px;{/block:if350px}{block:if400px}max-width:360px;height:auto;{/block:if400px}{block:if500px}max-width:460px;height:auto;{/block:if500px}{block:permalinkpage}max-width:450px;height:auto;{/block:permalinkpage};}
  352.  
  353. #text {padding: 15px 25px 20px 25px;text-align:justify; font-family:{select:Font};font-size:{text:Text Size};background:{color:Text Posts Background};}
  354.  
  355. #quote {
  356. text-align:left;
  357. font: bold 15px arial;
  358. letter-spacing:1px;
  359. line-height: 100%;
  360. padding: 20px 20px 15px 20px;
  361. margin-bottom: 0px;
  362. background:{color:Text Posts Background};}
  363.  
  364. #source {font: oblique 9px calibri;letter-spacing:1px; text-align:right;padding: 5px; margin-top:0px;color:#888;}
  365.  
  366. .chat ul{padding:0px 0px 0px 0px;margin:0px;}
  367. .chat li{margin-bottom:1px;padding:5px;list-style-type:none;}
  368. .chat li.odd {background:#f5f5f5;}
  369. .chat li.even {background:#fcfcfc;}
  370. span.chats {color:#222;font: 10px calibri; font-weight:700;letter-spacing:1px;text-transform:uppercase;}
  371.  
  372. .audioplayer {position:relative;display:inline-block;width:100%;}
  373. .player {left: 5px;top: 5px;padding:10px;background:#f5f5f5;overflow:hidden;border-right:10px solid #f5f5f5;}
  374. .button {position: relative;width: 40px;height: 40px;}
  375. .tumblr_audio_player {margin-left:60px;width: 500px;height:40px;background:#111;{block:if350px}width: 350px;{/block:if350px}{block:if400px}width: 400px;{/block:if400px}{block:if500px}width: 500px;{/block:if500px}{block:PermalinkPage}width: 500px;{/block:PermalinkPage}}
  376. .audioalbum {position: absolute;left: 5px;top: 5px;overflow: hidden;width: 40px;height: 40px;border:5px solid #fff;border-radius:50%;}
  377. .audioalbum img {width: 100%;height: auto;}
  378. .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;}
  379.  
  380. #asker {
  381. line-height: 100%;
  382. font:bold 15px arial;
  383. text-align:left;
  384. letter-spacing:4px;
  385. padding:4px 10px 4px 10px;
  386. background:{color:Post Title Background};
  387. text-transform:lowercase;
  388. color:#fff;
  389. -webkit-transition: all 0.7s ease-in-out;
  390. -moz-transition: all 0.7s ease-in-out;
  391. -o-transition: all 0.7s ease-in-out;
  392. -ms-transition: all 0.7s ease-in-out;
  393. transition: all 0.7s ease-in-out;}
  394.  
  395. #asker img {border-radius:3px;padding:3px;background:#fff;}
  396.  
  397. #questions {
  398. text-align:justify;
  399. padding:20px;
  400. font-family:helvetica;
  401. font-size:10px;
  402. font-weight:bold;
  403. margin-bottom:5px;
  404. background: {color:Question Background};}
  405.  
  406. #asker a {color:#fff;}
  407. #asker a:hover {color:#666;}
  408.  
  409. /***********info***********/
  410.  
  411. .info {
  412. {block:indexpage}
  413. {block:if350px}
  414. width:330px;
  415. {/block:if350px}
  416. {block:if400px}
  417. width:380px;
  418. {/block:if400px}
  419. {block:if500px}
  420. width:480px;
  421. {/block:if500px}
  422. text-transform:uppercase;
  423. letter-spacing:1px;
  424. word-spacing:5px;
  425. text-align:center;
  426. font:8px consolas;
  427. color:{color:Info Font};
  428. z-index:2;
  429. padding:10px;
  430. margin-bottom:-35px;
  431. opacity:1;
  432. line-height:190%;
  433. background:{color:Info Background};
  434. height:15px;
  435. -webkit-transition: all 0.7s ease-in-out;
  436. -moz-transition: all 0.7s ease-in-out;
  437. -o-transition: all 0.7s ease-in-out;
  438. -ms-transition: all 0.7s ease-in-out;
  439. transition: all 0.7s ease-in-out;
  440. {/block:indexpage}
  441. {block:PermalinkPage}
  442. display:none;
  443. {/block:PermalinkPage}}
  444.  
  445. #posts:hover .info {margin-bottom:0px;}
  446.  
  447. .info200 {
  448. {block:indexpage}
  449. position:absolute;
  450. text-transform:uppercase;
  451. letter-spacing:1px;
  452. font-family: consolas;
  453. font-size:8px;
  454. margin-top:-15px;
  455. opacity:0;
  456. color:{color:Info Font};
  457. z-index:2;
  458. padding:2px 5px 1px 5px;
  459. background:{color:Info Background};
  460. -webkit-transition: all 0.7s ease-in-out;
  461. -moz-transition: all 0.7s ease-in-out;
  462. -o-transition: all 0.7s ease-in-out;
  463. -ms-transition: all 0.7s ease-in-out;
  464. transition: all 0.7s ease-in-out;
  465. {/block:indexpage}
  466. {block:PermalinkPage}
  467. display:none;
  468. {/block:PermalinkPage}}
  469.  
  470. #posts:hover .info200 {opacity:1;}
  471.  
  472. .tagging{
  473. {block:indexpage}
  474. position:absolute;
  475. text-transform:uppercase;
  476. font-family: calibri;
  477. font-size:8px;
  478. margin-top:10px;
  479. color:#444;
  480. opacity:0;
  481. text-align:justify;
  482. word-wrap: break-word;
  483. {block:if350px}
  484. width:350px;
  485. {/block:if350px}
  486. {block:if400px}
  487. width:400px;
  488. {/block:if400px}
  489. {block:if500px}
  490. width:500px;
  491. {/block:if500px}
  492. {/block:indexpage}
  493. {block:PermalinkPage}
  494. display:none;
  495. {/block:PermalinkPage}
  496. -webkit-transition: all 0.5s ease-in-out;
  497. -moz-transition: all 0.5s ease-in-out;
  498. -o-transition: all 0.5s ease-in-out;
  499. -ms-transition: all 0.5s ease-in-out;
  500. transition: all 0.5s ease-in-out;}
  501.  
  502.  
  503. #posts:hover .tagging {opacity:1;}
  504. .info200 a{color:{color:Info Font};}
  505. .info a{color:{color:Info Font};}
  506. .tagging a{color:#444;}
  507.  
  508. /********permalink**********/
  509.  
  510. #infoperm{
  511. font-family: arial;
  512. font-size:9px;
  513. text-transform:lowercase;
  514. letter-spacing:1px;
  515. text-align:left;
  516. margin-top:10px;
  517. padding-left: 13px;
  518. padding-right: 13px;
  519. padding-top: 8px;
  520. padding-bottom: 8px;
  521. background-color: #f5f5f5;
  522. {block:permalinkpage}width:474px;{/block:permalinkpage}}
  523.  
  524. #tagperm{
  525. font-family:calibri;
  526. text-transform:normal;
  527. text-transform:uppercase;
  528. font-size:8px;
  529. letter-spacing: 1px;
  530. text-align:left;
  531. margin-top: 3px;
  532. padding: 13px;
  533. background-color: #f5f5f5;}
  534.  
  535. #notecount{
  536. font:bold 20px arial;
  537. text-transform:normal;
  538. letter-spacing: -1px;
  539. text-align:center;
  540. margin-top:5px;
  541. margin-bottom: 10px;
  542. padding: 1px;
  543. color:#333;
  544. background-color:#f5f5f5;}
  545.  
  546. #infoperm a {{color:hyperlinks};}
  547. #tagperm a {{color:hyperlinks};}
  548. #tagperm a:hover {color:{color:hyperlinks hover};}
  549.  
  550. .pnotes {
  551. background:transparent;
  552. width:500px;
  553. text-align: left;
  554. overflow:auto;
  555. line-height:15px;
  556. padding:5px;
  557. margin-left: -20px;}
  558.  
  559. .pnotes img{width:26px;margin:5px;border:3px solid #f5f5f5;}
  560. .pnotes li{list-style-type:none; padding:4px;margin-right: 20px;margin-bottom:2px;}
  561. ol.notes {margin: 25px 0px;}
  562. img.avatar {
  563. vertical-align: -18px;
  564. width: 26px;
  565. height: 26px;
  566. padding: 1px;}
  567.  
  568. #cr {font-size:9px;font-family:arial;text-align:center;padding: 4px;z-index:99999;position:fixed;top:5px;left:5px;color:#888;}
  569. #cr a {color:#333;}
  570.  
  571.  
  572. </style>
  573. </head>
  574. <body>
  575.  
  576. <div id="head">
  577. <div id="sidebar">
  578. <div id="title">{title}</div>
  579. <div id="navigation">
  580. <select onchange='location=this.options[this.selectedIndex].value;' style="font:9px arial;text-transform:lowercase;letter-spacing:2px; color:{color:Navigation Font}; background:{color:Navigation Background};border:none;width:105px;">
  581. <option>navigation</option>
  582. <option value="/">{text:home}</option>
  583. <option value="/ask">{text:ask}</option>
  584. <option value="{text:archive link}">{text:archive}</option>
  585. {block:ifLink1}<option value="{text:Link1}">{text:Link1 Title}</option>{/block:ifLink1}
  586. {block:ifLink2}<option value="{text:Link2}">{text:Link2 Title}</option>{/block:ifLink2}
  587. {block:ifLink3}<option value="{text:Link3}">{text:Link3 Title}</option>{/block:ifLink3}
  588. </select>
  589. </div>
  590.  
  591. <div id="description">{block:Description}{Description}{/block:Description}</div>
  592. {block:Pagination}
  593. <div id="pagination">
  594. {block:PreviousPage}<div id="pagp"><a href="{PreviousPage}">◄ previous</a></div>{/block:PreviousPage}
  595. {block:NextPage}<div id="pagn"><a href="{NextPage}">next ►</a></div>{/block:NextPage}</div>
  596. {/block:Pagination}
  597. </div></div>
  598. <div id="container">
  599.  
  600. {block:Posts}
  601. <div id="posts">
  602.  
  603. {block:Quote}
  604. <div class="info200">
  605. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  606. <div id="quote">{Quote}<div id="source">{Source} ▴</div></div>
  607. <div class="tagging">
  608. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  609. {/block:Quote}
  610.  
  611. {block:Photo}
  612. {block:indexpage}
  613. <div class="info">
  614. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  615. <div id="opandgrey">
  616. <center><img src="{PhotoURL-500}" style="{block:if350px}max-width:350px;{/block:if350px}{block:if400px}max-width:400px;
  617. {/block:if400px}{block:if500px}max-width:500px;
  618. {/block:if500px}"/></center></div>
  619. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  620. <div class="tagging">
  621. {block:HasTags}<span style="padding:2px 3px 2px 3px;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  622. {/block:indexpage}
  623. {block:permalinkpage}
  624. <center><img src="{PhotoURL-500}" alt="{PhotoAlt}" style="max-width:500px;"></center>
  625. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  626. {/block:permalinkpage}
  627. {/block:Photo}
  628.  
  629. {block:Photoset}
  630. {block:indexpage}
  631. <div class="info">
  632. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  633. <div style="background:#fff;"><div id="opandgrey">
  634. <center> {block:if350px}{Photoset-500}{/block:if350px}{block:if400px}{Photoset-400}
  635. {/block:if400px}{block:if500px}{Photoset-500}
  636. {/block:if500px}</center></div></div>
  637. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  638. <div class="tagging">
  639. {block:HasTags}<span style="padding:2px 3px 2px 3px;">Tags:</span>{block:Tags} <a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  640. {/block:indexpage}
  641. {block:permalinkpage}
  642. <center>{Photoset-500}</center>
  643. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  644. {/block:permalinkpage}
  645. {/block:Photoset}
  646.  
  647. {block:Link}
  648. <div class="info200">
  649. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  650. <a href="{URL}" class="link" {Target}><div class="titles">{Name} ►</div></a>
  651. {block:Description}<div id="text">{Description}</div>{/block:Description}
  652. <div class="tagging">
  653. {block:HasTags}<br/><br/>{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  654. {block:Link}
  655.  
  656. {block:Chat}
  657. <div class="info200">
  658. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  659. {block:Title}<div class="titles">{Title}</div>{/block:Title}
  660. <div class="chat">
  661. <ul>{block:Lines}
  662. <li class="{Alt} u{UserNumber}">
  663. {block:Label}<span class="chats">{Label}</span>{/block:Label}
  664. {Line}</li>
  665. {/block:Lines}</ul></div>
  666. {/block:Label}
  667. <div class="tagging">
  668. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  669. {/block:Chat}
  670.  
  671. {block:Audio}
  672. <div class="info200">
  673. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  674. {block:AudioPlayer}<div class="audioplayer">{block:AlbumArt}<div class="audioalbum"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  675. <div class="player"><div class="button">{AudioPlayerWhite}</div></div>
  676. <div class="audioinfo">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist} // {Artist}{/block:Artist} {block:PlayCount}// {PlayCountWithLabel}{/block:PlayCount}
  677. </div></div>{/block:AudioPlayer}
  678. {block:ifcaption}{block:Caption}<br><br><div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  679. <div class="tagging">
  680. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  681. {/block:Audio}
  682.  
  683. {block:Text}
  684. {block:indexpage}
  685. <div class="info200">
  686. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  687. {block:Title}
  688. <div class="titles">{Title}</div>
  689. {/block:Title}
  690. <div id="opandgrey">
  691. <div id="text">{Body}</div></div>
  692. <div class="tagging">
  693. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  694. {/block:indexpage}
  695. {block:permalinkpage}
  696. {block:Title}
  697. <div class="titles">{Title}</div>
  698. {/block:Title}
  699. <div id="text">{Body}</div>
  700. {/block:permalinkpage}
  701. {/block:Text}
  702.  
  703. {block:Video}
  704. {block:indexpage}
  705. <div class="info200">
  706. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  707. <center>
  708. {block:if350px}{video-250}{/block:if350px}{block:if400px}{Video-400}{/block:if400px}{block:if500px}{Video-500}{/block:if500px}</center>
  709. {block:ifcaption}{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}{/block:ifcaption}
  710. <div class="tagging">
  711. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  712. {/block:indexpage}
  713. {block:permalinkpage}
  714. <center>{Video-500}</center>
  715. {block:Caption}{Caption}{/block:Caption}
  716. {/block:permalinkpage}
  717. {block:Video}
  718.  
  719. {block:Answer}
  720. <div class="info200">
  721. {block:Date}<a href="{Permalink}" title="permalink">{TimeAgo}</a>{/block:Date}{block:NoteCount} ▴ <span style="font:bold 11px consolas;color:{color:Notes Font};">[{NoteCountWithLabel}]</span>{/block:NoteCount} ▴ <a href="{ReblogURL}" title="reblog this post">reblog</a></div>
  722. <div id="asker"><img src="https://31.media.tumblr.com/da6ec800b306286814b56c85c065973c/tumblr_inline_n2aigp3RjV1r7v6wt.png" style="vertical-align:-2px;"> {Asker}:</div>
  723. <div id="questions">{Question}</div>
  724. <div id="text">{Answer}</div>
  725. <div class="tagging">
  726. {block:HasTags}{block:Tags}<a href="{TagURL}"> #{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  727. {/block:Answer}
  728.  
  729. <!----->
  730. {block:permalinkpage}
  731. <div id="infoperm">
  732. {block:Date}Posted on {Month} {DayOfMonth}, {Year} at {24Hour}:{Minutes}{/block:Date}
  733. {block:RebloggedFrom} - <b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a> {/block:RebloggedFrom}
  734. {block:ContentSource} - <b>source:</b> <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource}</div>
  735.  
  736. {block:HasTags}
  737. <div id="tagperm">
  738. <b>Tagged as:</b>{block:Tags} <a href="{TagURL}"> <small>#</small>{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  739.  
  740. <div id="notecount">{block:NoteCount}<p>{NoteCountWithLabel}{/block:NoteCount}</div>
  741.  
  742. <div class="pnotes">
  743. {block:PostNotes}
  744. {PostNotes-64}
  745. {/block:PostNotes}
  746. </div>
  747. {/block:permalinkpage}</div>
  748. {/block:Posts}
  749. </div>
  750.  
  751.  
  752. {block:ifinfinitescroll}
  753. {block:indexpage}
  754. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  755. <script src="jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  756. <script src="/jquery.masonry.min.js" type="text/javascript"></script>
  757. <script src="/jquery.infinitescroll.min.js" type="text/javascript" ></script>
  758. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  759. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  760. <script type="text/javascript">
  761. $(document).ready(function() {
  762. $('iframe.photoset').each(function() {
  763. var i = this;
  764. $(i).attr("onload", "ps_resize(this)");
  765. var s = $(i).attr("src");
  766. s = s.replace(/\/500\//, "/350/");
  767. $(i).attr("src", s);
  768. });
  769. $(function(){
  770. var $container = $('#container');
  771. $container.imagesLoaded(function(){
  772. $container.masonry({
  773. itemSelector: '#posts',
  774. });
  775. });
  776. $container.infinitescroll({
  777. navSelector : '#page-nav',
  778. nextSelector : '#page-nav a',
  779. itemSelector : '#posts',
  780. loading: {
  781. finishedMsg: '~ THE END ~',
  782. img: '',
  783. text: '....'
  784. }
  785. },
  786. function( newElements ) {
  787. $(newElements).find('iframe.photoset').each(function() {
  788. var i = this;
  789. $(i).attr("onload", "ps_resize(this)");
  790. var s = $(i).attr("src");
  791. s = s.replace(/\/500\//, "/350/");
  792. $(i).attr("src", s);
  793. });
  794. var $newElems = $( newElements ).css({ opacity: 0 });
  795. $newElems.imagesLoaded(function(){
  796. $newElems.animate({ opacity: 1 });
  797. $container.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
  798. });
  799. }
  800. );
  801. });
  802. });
  803.  
  804. function ps_resize(i) {
  805. $(i).contents().find("body").imagesLoaded(function() {
  806. $(i).attr("width", 350);
  807. $(i).attr("height", $(this).height());
  808. var $container = $('#container');
  809. $container.imagesLoaded(function(){
  810. $container.masonry({
  811. itemSelector: '#posts',
  812. bufferPx : 4000,
  813. extraScrollPx: 50,
  814. isAnimated : true
  815. });
  816. });
  817. });
  818. return false;
  819. }
  820. </script>
  821. <script type="text/javascript">
  822. (function($, undefined) {
  823. $.extend($.infinitescroll.prototype,{
  824. _callback_masonry: function infscr_callback_masonry (newElements) {
  825. $(this).masonry('appended',$(newElements));
  826. }
  827. });
  828. })(jQuery);
  829. </script>
  830.  
  831. {/block:indexpage}
  832. {/block:ifinfinitescroll}
  833.  
  834. <div id="cr" title="theme by soonjun"><a href="http://soon-co.tumblr.com/">©</a></div>
  835.  
  836.  
  837. </body>
  838. </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!