API tools faq
paste
Advertisement
mogimochi

Theme [30] Don't Lose Your Way

mogimochi
Mar 17th, 2014
15,607
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 30 Don't Lose Your Way
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. --------------------------------------------------- UPDATE VER 250318 -->
  16.  
  17. <meta name="image:background" content="">
  18. <meta name="image:header icon" content="">
  19. <meta name="image:render image" content="">
  20. <meta name="image:custom cursor" content="">
  21. <meta name="image:music player gif" content="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif">
  22.  
  23. <meta name="color:text highlight bg" content="#e86b47">
  24. <meta name="color:text highlight" content="#ffffff">
  25. <meta name="color:scrollbar" content="#6a6a6a">
  26. <meta name="color:scrollbar bg" content="#e86b47">
  27.  
  28. <meta name="color:background" content="#ffffff">
  29. <meta name="color:tooltip background" content="#454545">
  30. <meta name="color:tooltip colour" content="#ffffff">
  31. <meta name="color:tooltip shadow" content="#e86b47">
  32.  
  33. <meta name="color:header title" content="#aaaaaa">
  34. <meta name="color:header accent" content="#e86b47">
  35.  
  36. <meta name="color:desc outline" content="#d4d4d4">
  37. <meta name="color:desc background" content="#ffffff">
  38. <meta name="color:desc text" content="#888888">
  39. <meta name="color:desc bold" content="#b36d59">
  40. <meta name="color:desc italic" content="#b8b8b8">
  41. <meta name="color:desc links" content="#e86b47">
  42. <meta name="color:desc links hover" content="#c0c0c0">
  43.  
  44. <meta name="color:dropdown menu text" content="#959595">
  45. <meta name="color:dropdown menu background" content="#ffffff">
  46. <meta name="color:dropdown menu border" content="#dadada">
  47.  
  48. <meta name="color:pagination background" content="#e86b47">
  49. <meta name="color:pagination text" content="#ffffff">
  50. <meta name="color:pagination background hover" content=#e8e8e8"">
  51. <meta name="color:pagination text hover" content="#aaaaaa">
  52.  
  53. <meta name="color:post background" content="#ffffff">
  54. <meta name="color:post border" content="#ececec">
  55.  
  56. <meta name="color:body text" content="#aaaaaa">
  57. <meta name="color:body bold" content="#b7624a">
  58. <meta name="color:body italic" content="#dba2b2">
  59. <meta name="color:body links" content="#e86b47">
  60. <meta name="color:body links hover" content="#898989">
  61. <meta name="color:blockquote" content="#bebebe">
  62.  
  63. <meta name="color:post title text" content="#6f6f6f">
  64. <meta name="color:post title underline" content="#dea2b3">
  65. <meta name="color:link post text" content="#949494">
  66. <meta name="color:link post underline" content="#f1f1f1">
  67. <meta name="color:link post hover underline" content="#cecece">
  68.  
  69. <meta name="color:quote post" content="#898989">
  70. <meta name="color:quote post quotation marks" content="#f3f3f3">
  71. <meta name="color:quote post source" content="#b1b1b1">
  72.  
  73. <meta name="color:chat even name" content="#e85b47">
  74. <meta name="color:chat even text" content="#b8b8b8">
  75. <meta name="color:chat odd name" content="#a7645a">
  76. <meta name="color:chat odd text" content="#777777">
  77. <meta name="color:chat dividers" content="#e4e4e4">
  78.  
  79. <meta name="color:audio info background" content="#ececec">
  80. <meta name="color:audio info text" content="#929292">
  81.  
  82. <meta name="color:ask background" content="#f2f2f2">
  83. <meta name="color:ask text" content="#9b9b9b">
  84. <meta name="color:asker text" content="#5e5e5e">
  85. <meta name="color:asker link" content="#f39494">
  86.  
  87. <meta name="color:perma background" content="#ececec">
  88. <meta name="color:perma text" content="#aaaaaa">
  89. <meta name="color:perma reblog background" content="#e86b47">
  90. <meta name="color:perma reblog text" content="#ffffff">
  91.  
  92. <meta name="text:link 1" content="">
  93. <meta name="text:link url 1" content="">
  94. <meta name="text:link 2" content="">
  95. <meta name="text:link url 2" content="">
  96. <meta name="text:link 3" content="">
  97. <meta name="text:link url 3" content="">
  98. <meta name="text:link 4" content="">
  99. <meta name="text:link url 4" content="">
  100. <meta name="text:link 5" content="">
  101. <meta name="text:link url 5" content="">
  102. <meta name="text:link 6" content="">
  103. <meta name="text:link url 6" content="">
  104. <meta name="text:link 7" content="">
  105. <meta name="text:link url 7" content="">
  106. <meta name="text:link 8" content="">
  107. <meta name="text:link url 8" content="">
  108. <meta name="text:render image size" content="350">
  109. <meta name="text:billy music code" content="">
  110.  
  111. <meta name="if:250px posts" content="0">
  112. <meta name="if:400px posts" content="0">
  113. <meta name="if:500px posts" content="1">
  114. <meta name="if:custom cursor" content="0">
  115. <meta name="if:music player" content="0">
  116. <meta name="if:monochrome posts" content="0">
  117. <meta name="if:photo fading" content="0">
  118. <meta name="if:show captions" content="1">
  119. <meta name="if:infinite scroll" content="0">
  120.  
  121. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  122. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  123. <link rel="shortcut icon" href="{Favicon}" />
  124.  
  125. <style type="text/css">
  126.  
  127. @font-face { font-family: "bitxmap"; src: url('https://dl.dropboxusercontent.com/s/sq28ejp56rarabs/BitxMap%20Font%20tfb.ttf'); }
  128. @font-face { font-family: "silkscreen"; src: url('https://dl.dropboxusercontent.com/s/f2dq1vddn86tmb3/slkscr.ttf'); }
  129.  
  130. .tmblr-iframe {z-index:999999999!important;}
  131.  
  132. {block:ifcustomcursor}
  133. * {cursor: url({image:custom cursor}), auto}
  134. {/block:ifcustomcursor}
  135.  
  136. ::selection {
  137. background:{color:text highlight bg};
  138. color: {color:text highlight};
  139. }
  140.  
  141. ::-moz-selection {
  142. background:{color:text highlight bg};
  143. color: {color:text highlight};
  144. }
  145.  
  146. ::-webkit-scrollbar { width: 5px; }
  147. ::-webkit-scrollbar-track-piece { background-color:{color:scrollbar bg}; }
  148. ::-webkit-scrollbar-thumb:vertical {
  149. width: 10px;
  150. background-color: {color:scrollbar};
  151. }
  152.  
  153. body {
  154. background-color: {color:background};
  155. background-image: url({image:background});
  156. background-attachment: fixed;
  157. margin: 0;
  158. word-wrap: break-word;
  159. }
  160. a { text-decoration:none; }
  161.  
  162. #s-m-t-tooltip {
  163. padding: 4px 5px;
  164. margin: 28px 14px 7px 14px;
  165. font-family: silkscreen;
  166. font-size: 8px;
  167. letter-spacing: 1px;
  168. z-index: 999999999999999999;
  169. text-align: center;
  170. background-color: {color:tooltip background};
  171. color: {color:tooltip colour};
  172. box-shadow: 2px 2px 0 {color:tooltip shadow};
  173. }
  174.  
  175. #header {
  176. height: 81px;
  177. top: 0;
  178. width: 100%;
  179. position: fixed;
  180. z-index: 10000;
  181. }
  182. .aheader {
  183. {block:if250pxposts}width: 550px;{/block:if250pxposts}
  184. {block:if400pxposts}width: 700px;{/block:if400pxposts}
  185. {block:if500pxposts}width: 800px;{/block:if500pxposts}
  186. {block:permalinkpage}width: 800px;{/block:permalinkpage}
  187. }
  188. .headert {
  189. margin-left: 30px;
  190. position: fixed;
  191. background-color: {color:background};
  192. background-image: url({image:background});
  193. top: 0;
  194. z-index: 10000;
  195. font-family: bitxmap;
  196. font-size: 10px;
  197. color: {color:header title};
  198. letter-spacing: 3px;
  199. line-height: 80px;
  200. {block:if250pxposts}width: 480px;{/block:if250pxposts}
  201. {block:if400pxposts}width: 630px;{/block:if400pxposts}
  202. {block:if500pxposts}width: 730px;{/block:if500pxposts}
  203. {block:permalinkpage}width:730px;{/block:permalinkpage}
  204. }
  205. .headerimg {
  206. width: 80px;
  207. height: 80px;
  208. border-radius: 100px;
  209. -moz-border-radius: 100px;
  210. -webkit-border-radius: 100px;
  211. -o-border-radius: 100px;
  212. padding: 7px;
  213. border: 1px solid {color:header accent};
  214. position: absolute;
  215. z-index: 999999999;
  216. top: 33px;
  217. background-color: {color:background};
  218. background-image: url({image:background});
  219. {block:if250pxposts}margin-left: -276px;{/block:if250pxposts}
  220. {block:if400pxposts}margin-left: -351px;{/block:if400pxposts}
  221. {block:if500pxposts}margin-left: -401px;{/block:if500pxposts}
  222. {block:permalinkpage}margin-left: -401px; {/block:permalinkpage}
  223. }
  224. .hline {
  225. height: 1px;
  226. background-color: {color:header accent};
  227. top: 80px;
  228. position: fixed;
  229. {block:if250pxposts}width: 470px;
  230. {block:ifmusicplayer}width: 490px;{/block:ifmusicplayer}
  231. {/block:if250pxposts}
  232. {block:if400pxposts}width: 620px;
  233. {block:ifmusicplayer}width: 640px;{/block:ifmusicplayer}
  234. {/block:if400pxposts}
  235. {block:if500pxposts}width: 720px;
  236. {block:ifmusicplayer}width: 740px;{/block:ifmusicplayer}
  237. {/block:if500pxposts}
  238. {block:permalinkpage}width:720px;{/block:permalinkpage}
  239. }
  240. .desc {
  241. position: absolute;
  242. width: 90px;
  243. font-family: silkscreen;
  244. letter-spacing: -1px;
  245. font-size: 8px;
  246. margin-left: 0;
  247. margin-top: 150px;
  248. text-align: justify;
  249. border-top: 1px solid {color:desc outline};
  250. border-bottom: 1px solid {color:desc outline};
  251. background-color: {color:desc background};
  252. padding: 15px 5px;
  253. color: {color:desc text};
  254. }
  255. .desc b,strong { color:{color:desc bold};font-weight:100;}
  256. .desc i,em { color:{color:desc italic};}
  257. .desc a { color:{color:desc links};}
  258. .desc a:hover { color:{color:desc links hover};}
  259.  
  260. .dest {
  261. text-shadow: 0 -3px 0 {color:desc outline};
  262. color: {color:desc background};
  263. position: absolute;
  264. text-align: center;
  265. font-size: 22px;
  266. margin: -30px 37px;
  267. }
  268. .shortl, .midl, .longl {
  269. background-color: {color:header accent};
  270. width: 1px;
  271. position: absolute;
  272. top: 0;
  273. margin-top: -20px;
  274. margin: 0 2.5px;
  275. transition: 0.6s;
  276. -moz-transition: 0.6s;
  277. -webkit-transition: 0.6s;
  278. -o-transition: 0.6s;
  279. }
  280. {block:if250pxposts}
  281. .midl {margin-left: 445px;height: 180px;}
  282. .shortl {margin-left: 455px;height: 160px;}
  283. .longl {margin-left: 465px;height: 200px;}
  284. {/block:if250pxposts}
  285. {block:if400pxposts}
  286. .midl {margin-left: 600px;height: 180px;}
  287. .shortl {margin-left: 610px;height: 160px;}
  288. .longl {margin-left: 620px;height: 200px;}
  289. {/block:if400pxposts}
  290. {block:if500pxposts}
  291. .midl {margin-left: 700px;height: 180px;}
  292. .shortl {margin-left: 710px;height: 160px;}
  293. .longl {margin-left: 720px;height: 200px;}
  294. {/block:if500pxposts}
  295. {block:permalinkpage}
  296. .midl {margin-left: 700px;height: 180px;}
  297. .shortl {margin-left: 710px;height: 160px;}
  298. .longl {margin-left: 720px;height: 200px;}
  299. {/block:permalinkpage}
  300. .midl:hover {height: 210px;}
  301. .shortl:hover {height: 190px;}
  302. .longl:hover {height: 230px;}
  303.  
  304. .navi {
  305. position: absolute;
  306. margin-top: 26px;
  307. }
  308.  
  309. #content {
  310. {block:if250pxposts}width:300px;{/block:if250pxposts}
  311. {block:if400pxposts}width:500px;{/block:if400pxposts}
  312. {block:if500pxposts}width:600px;{/block:if500pxposts}
  313. {block:permalinkpage}width:600px;{/block:permalinkpage}
  314. padding: 10px;
  315. margin: 100px 0;
  316. {block:permalinkpage}
  317. width: 600px;
  318. {/block:permalinkpage}
  319. }
  320.  
  321. .posts {
  322. background-color: {color:post background};
  323. border: 1px solid {color:post border};
  324. padding: 20px;
  325. margin-bottom: 40px;
  326. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  327. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  328. {block:if250pxposts}width: 250px;{/block:if250pxposts}
  329. {block:permalinkpage}
  330. width: 500px;
  331. margin-bottom: 10px;
  332. {/block:permalinkpage}
  333. transition: 0.8s;
  334. -moz-transition: 0.8s;
  335. webkit-transition: 0.8s;
  336. -o-transition: 0.8s;
  337. }
  338.  
  339. .photo {
  340. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  341. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  342. {block:if250pxposts}width: 250px;{/block:if250pxposts}
  343. {block:permalinkpage}width: 500px;{/block:permalinkpage}
  344. display: block;
  345. {block:ifphotofading}opacity: 0.6;{/block:ifphotofading}
  346. {block:ifmonochromeposts}
  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"); /* Firefox 3.5+ */
  348. filter: gray; /* IE6-9 */
  349. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  350. {/block:ifmonochromeposts}
  351. transition: 0.8s;
  352. -moz-transition: 0.8s;
  353. webkit-transition: 0.8s;
  354. -o-transition: 0.8s;
  355. }
  356.  
  357. .posts:hover .photo {
  358. opacity: 1;
  359. {block:ifmonochromeposts}
  360. filter: none;
  361. -webkit-filter: grayscale(0%);
  362. {/block:ifmonochromeposts}
  363. }
  364.  
  365. .posts img {
  366. {block:if500pxposts}max-width: 500px;{/block:if500pxposts}
  367. {block:if400pxposts}max-width: 400px;{/block:if400pxposts}
  368. {block:if250pxposts}max-width: 250px;{/block:if250pxposts}
  369. {block:permalinkpage}max-width: 500px;{/block:permalinkpage}
  370. }
  371. .posts blockquote img {max-width: 100%;}
  372.  
  373. .text {
  374. text-align: justify;
  375. font-family: consolas;
  376. font-size: 11px;
  377. color: {color:body text};
  378. }
  379.  
  380. #content blockquote {
  381. margin: 5px;
  382. padding: 0 10px;
  383. border-left: 1px solid {color:blockquote};
  384. }
  385.  
  386. .line {
  387. border-bottom: 1px solid {color:chat dividers};
  388. background-color: {color:post background};
  389. }
  390.  
  391. .odd .line {padding: 5px;color:{color:chat odd text};}
  392. .even .line {padding: 5px;color:{color:chat even text};}
  393. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  394. .even .name {color: {color:chat even name};padding: 3px 5px;}
  395.  
  396. .ptitle, .ltitle {
  397. font-family: courier new;
  398. font-size: 10px;
  399. text-transform: uppercase;
  400. border-bottom: 1px solid {color:post title underline};
  401. color: {color:post title text};
  402. padding: 5px 10px;
  403. letter-spacing: 2px;
  404. transition: 0.6s;
  405. -moz-transition: 0.6s;
  406. webkit-transition: 0.6s;
  407. }
  408. .ltitle {
  409. color: {color:link post text};
  410. border-bottom: 1px solid {color:link post underline};
  411. }
  412. .ltitle:hover {border-bottom:1px solid {color:link post hover underline};}
  413.  
  414. .quom, .quomr {
  415. font-family: georgia;
  416. font-size: 100px;
  417. margin: -15px 0;
  418. position: absolute;
  419. color: {color:quote post quotation marks};
  420. z-index: 1;
  421. }
  422. .quomr {
  423. {block:if500pxposts}margin: -15px 460px;{/block:if500pxposts}
  424. {block:if400pxposts}margin: -15px 360px;{/block:if400pxposts}
  425. {block:if250pxposts}margin: -15px 210px;{/block:if250pxposts}
  426. {block:permalinkpage}margin: -15px 460px;{/block:permalinkpage}
  427. }
  428.  
  429. .pquote {
  430. font-family: courier new;
  431. font-size: 14px;
  432. text-align: center;
  433. position: relative;
  434. z-index: 2;
  435. color: {color:quote post};
  436. }
  437.  
  438. .psrc {
  439. font-family: consolas;
  440. font-size: 8px;
  441. letter-spacing: 1px;
  442. text-transform: uppercase;
  443. text-align: center;
  444. margin-top: -20px;
  445. margin-bottom: 10px;
  446. color: {color:quote post source};
  447. }
  448.  
  449. .askerportrait {
  450. max-width: 64px;
  451. max-height: 64px;
  452. position: absolute;
  453. border: 10px solid {color:ask background};
  454. margin-left: -250px;
  455. }
  456. .a {
  457. margin-left: 100px;
  458. background-color: {color:ask background};
  459. min-height: 64px;
  460. padding: 10px;
  461. font-family: consolas;
  462. font-size: 11px;
  463. text-align: justify;
  464. color: {color:ask text};
  465. }
  466. .asker {
  467. color: {color:asker text};
  468. font-family: consolas;
  469. font-size: 11px;
  470. text-transform: uppercase;
  471. }
  472. .asker a {color: {color:body links};}
  473. .asker a:hover {color: {color:body links hover};}
  474. .q {margin-top: 10px;}
  475. .tri {
  476. position: absolute;
  477. font-size: 30px;
  478. margin: 20px 0 0 85px;
  479. color: {color:ask background};
  480. }
  481. .permainfo {
  482. margin-top: 0;
  483. padding: 20px 30px;
  484. font-family: consolas;
  485. font-size: 11px;
  486. text-align: center;
  487. background-color: {color:post background};
  488. border: 1px solid {color:post border};
  489. color: {color:body text};
  490. width: 480px;
  491. }
  492.  
  493. #notecontainer {
  494. padding: 10px;
  495. text-decoration: none;
  496. width: 500px;
  497. background-color: {color:post background};
  498. border: 1px solid {color:post border};
  499. padding: 20px;
  500. margin-top: 20px;
  501. }
  502. ol.notes {
  503. list-style-type: none;
  504. letter-spacing: -1px;
  505. font-size: 11px;
  506. color: {color:body text};
  507. font-family: consolas;
  508. text-decoration: none;
  509. margin: 0;
  510. width: 500px;
  511. padding: 5px;
  512. text-align: left;
  513. }
  514. ol.notes a {
  515. color: {color:body links};
  516. -webkit-transition: all 0.4s ease-in-out;
  517. -moz-transition: all 0.4s ease-in-out;
  518. -o-transition: all 0.4s ease-in-out;
  519. -ms-transition: all 0.4s ease-in-out;
  520. transition: all 0.4s ease-in-out;
  521. }
  522. ol.notes a:hover {color:{color:body links};}
  523. img.avatar {
  524. margin-right: 5px;
  525. width: 10px;
  526. height: 10px;
  527. float: left;
  528. }
  529. .text b,strong, .permainfo b,strong { color: {color:body bold}; font-weight: 400; }
  530. .text i,em, .permainfo a {
  531. color: {color:body italic};
  532. }
  533. .text a, .ptags a, #notecon a, .psrc a, .asker a {
  534. color: {color:body links};
  535. border-bottom: 1px solid transparent;
  536. padding-bottom: 5px;
  537. }
  538. .text a:hover, .permainfo a:hover, #notecon a:hover, .ptags a:hover, .psrc a:hover, ol.notes a:hover, .asker a:hover {
  539. padding-bottom: 0;
  540. text-decoration: line-through;
  541. color: {color:body links hover};
  542. }
  543.  
  544. .tumblr_audio_player {height: 40px; width: 210px;}
  545. .audiopost { height: 150px; }
  546. .albumno {
  547. width: 150px;
  548. height: 150px;
  549. background-color: {color:no album art};
  550. position: absolute;
  551. z-index: 1;
  552. {block:indexpage}{block:if250pxposts}
  553. width: 250px;
  554. height: 250px;
  555. {/block:if250pxposts}{/block:indexpage}
  556. }
  557.  
  558. .albumartp {
  559. z-index: 10;
  560. width: 150px;
  561. height: 150px;
  562. position: relative;
  563. z-index: 2;
  564. display: block;
  565. {block:if400pxposts}margin-left: -250px;{/block:if400pxposts}
  566. {block:if500pxposts}margin-left: -350px;{/block:if500pxposts}
  567. {block:indexpage}{block:if250pxposts}
  568. width: 250px;
  569. height: 250px;
  570. {/block:if250pxposts}{/block:indexpage}
  571. {block:permalinkpage}margin-left: -350px;{/block:permalinkpage}
  572. }
  573.  
  574. .albumart {
  575. width: 150px;
  576. height: 150px;
  577. display: block;
  578. position: relative;
  579. {block:indexpage}{block:if250pxposts}
  580. width: 250px;
  581. height: 250px;
  582. {/block:if250pxposts}{/block:indexpage}
  583. }
  584.  
  585. .audioplayer {
  586. position: absolute;
  587. z-index: 11;
  588. margin-top: -90px;
  589. margin-left: 65px;
  590. width: 25px;
  591. height: 25px;
  592. overflow: hidden;
  593. opacity: 0.5;
  594. {block:indexpage}{block:if250pxposts}
  595. margin-top: -140px;
  596. margin-left: 115px;
  597. {/block:if250pxposts}{/block:indexpage}
  598. transition: 0.6s;
  599. -moz-transition: 0.6s;
  600. -webkit-transition: 0.6s;
  601. -o-transition: 0.6s;
  602. }
  603. .audioplayer:hover {opacity: 1;}
  604.  
  605. .audioinfo {
  606. position: absolute;
  607. margin-left: 155px;
  608. height: 150px;
  609. }
  610.  
  611. .aline {
  612. {block:if500pxposts}width: 325px;{/block:if500pxposts}
  613. {block:if400pxposts}width: 225px;{/block:if400pxposts}
  614. {block:indexpage}{block:if250pxposts}margin-top: 5px;{/block:if250pxposts}{/block:indexpage}
  615. {block:permalinkpage}width: 325px;{/block:permalinkpage}
  616. font-family: consolas;
  617. font-size: 10px;
  618. padding: 11px 10px;
  619. margin-bottom: 5px;
  620. text-transform: uppercase;
  621. background-color: {color:audio info background};
  622. color: {color:audio info text};
  623. }
  624. .aline b,strong {
  625. font-weight: 400;
  626. color: {color:audio info list headings};
  627. }
  628.  
  629. #permalink {
  630. font-family: silkscreen;
  631. font-size: 8px;
  632. position: absolute;
  633. margin-top: 20px;
  634. text-align: right;
  635. {block:if250pxposts}width: 250px;{/block:if250pxposts}
  636. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  637. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  638. }
  639. .ptime, .pnotes, .preblog {
  640. float: right;
  641. margin-left: 5px;
  642. padding: 3px 5px;
  643. border-radius: 0 0 6px 6px;
  644. transition: 0.6s;
  645. -o-transition: 0.6s;
  646. -moz-transition: 0.6s;
  647. -webkit-transition: 0.6s;
  648. }
  649. .ptime, .pnotes {
  650. background-color: {color:perma background};
  651. color: {color:perma text};
  652. }
  653. .preblog {
  654. background-color: {color:perma reblog background};
  655. color: {color:perma reblog text};
  656. }
  657. .ptime:hover, .pnotes:hover, .preblog:hover {padding: 7px 5px 3px 5px;}
  658.  
  659. .pagi {
  660. width: 90px;
  661. position: absolute;
  662. margin-top: 54px;
  663. text-align: center;
  664. letter-spacing: -1px;
  665. }
  666. .pagi a {
  667. background-color: {color:pagination background};
  668. color: {color:pagination text};
  669. padding: 2px 3px;
  670. -webkit-transition: all 0.4s ease-in-out;
  671. -moz-transition: all 0.4s ease-in-out;
  672. -o-transition: all 0.4s ease-in-out;
  673. -ms-transition: all 0.4s ease-in-out;
  674. transition: all 0.4s ease-in-out
  675. }
  676. .pagi a:hover { background-color: {color:pagination background hover}; color: {color:pagination text hover}; }
  677.  
  678. #wa {
  679. position: fixed;
  680. top: 0;left: 0;
  681. width: 100%;height: 100%;
  682. background-color: #000;
  683. color: #fff;
  684. font-family: bitxmap;
  685. font-size: 16px;
  686. padding-top: 270px;
  687. text-align: center;
  688. opacity: 0;
  689. z-index: -10000;
  690. {block:if500pxposts}
  691. {block:if400pxposts}opacity: 1;z-index:100000000000000000000000;{/block:if400pxposts}
  692. {block:if250pxposts}opacity: 1;z-index:100000000000000000000000;{/block:if250pxposts}
  693. {block:if400pxposts}{block:if250pxposts}opacity: 1;z-index:1000000000000000000;{/block:if250pxposts}{/block:if400pxposts}
  694. {/block:if500pxposts}
  695. {block:if400pxposts}{block:if250pxposts}opacity: 1;z-index:100000000000000000000;{/block:if250pxposts}{/block:if400pxposts}
  696. {block:ifnot500pxposts}{block:ifnot400pxposts}{block:ifnot250pxposts}opacity: 1;z-index:1000000000000000000000;{/block:ifnot250pxposts}{/block:ifnot400pxposts}{/block:ifnot500pxposts}
  697. }
  698.  
  699. #music {
  700. width: 25px;
  701. height: 25px;
  702. overflow: hidden;
  703. position: absolute;
  704. background-color: {color:header accent};
  705. margin-top: 70px;
  706. float: right;
  707. z-index: 100000000;
  708. {block:if250pxposts}margin-left: 480px;{/block:if250pxposts}
  709. {block:if400pxposts}margin-left: 635px;{/block:if400pxposts}
  710. {block:if500pxposts}margin-left: 735px;{/block:if500pxposts}
  711. }
  712. .musicgif {
  713. margin: 5px;
  714. -webkit-transition: all 0.4s ease-in-out;
  715. -moz-transition: all 0.4s ease-in-out;
  716. -o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;
  717. transition: all 0.4s ease-in-out;
  718. }
  719. #music:hover .musicgif {
  720. margin-top: -30px;
  721. }
  722.  
  723. #musicpl {
  724. width: 20px;
  725. overflow: hidden;
  726. height: 20px;
  727. padding: 2px 20px 10px 0;
  728. margin-left: -17px;
  729. background-color: {color:header accent};
  730. }
  731.  
  732. {CustomCSS}
  733.  
  734. </style>
  735. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  736. <script type="text/javascript">
  737. jQuery(document).ready(function() {
  738. jQuery(".sub").hide();
  739. //toggle the componenet with class msg_body
  740. jQuery(".cthrough").click(function()
  741. {
  742. jQuery(this).next(".sub").slideToggle(500); return false;
  743. });});
  744. </script>
  745. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  746. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  747. <script>
  748. (function($){
  749. $(document).ready(function(){
  750. $("a[title]").style_my_tooltips({
  751. tip_follows_cursor:true,
  752. tip_delay_time:0,
  753. tip_fade_speed:0,
  754. attribute:"title"
  755. });
  756. });
  757. })(jQuery);
  758. </script>
  759. {block:ifinfinitescroll}
  760. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  761. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  762. <script type="text/javascript" charset="utf-8">
  763. var $j = jQuery.noConflict();
  764. $j(function() {
  765. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  766. $j("img").lazyload({
  767. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  768. effect: "fadeIn",
  769. });
  770. });
  771. </script>
  772. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  773. {/block:ifinfinitescroll}
  774. </head>
  775. <body>
  776.  
  777. <div id="wa">please pick only one post size.</div>
  778.  
  779. <center>
  780. <div id="header"><div class="aheader">
  781.  
  782. <a title="refresh" href="/"><div class="midl"></div></a>
  783. <a title="message" href="/ask"><div class="shortl"></div></a>
  784. <a title="archives" href="/archive"><div class="longl"></div></a>
  785.  
  786. <div class="headert">{title}</div>
  787. <div class="hline"></div>
  788.  
  789. {block:ifmusicplayer}
  790. <div id="music">
  791. <div class="musicgif"><img src="{image:music player gif}"/></div>
  792. <div id="musicpl">{text:billy music code}</div>
  793. </div>
  794. {/block:ifmusicplayer}
  795.  
  796. <div class="desc">
  797. <div class="dest">▲</div>
  798. {description}
  799. <div class="navi">
  800. <select style="font-family:consolas; color:{color:dropdown menu text};background:{color:dropdown menu background};width:90px;font-size:8px;letter-spacing: 1px; border:1px solid {color:dropdown menu border};padding:2px; text-transform: uppercase;" onChange="location.href=this.options[this.selectedIndex].value;">
  801. <option value=''>explore</option>
  802. {block:iflink1}<option value="{text:link url 1}">{text:link 1}</option>{/block:iflink1}
  803. {block:iflink2}<option value="{text:link url 2}">{text:link 2}</option>{/block:iflink2}
  804. {block:iflink3}<option value="{text:link url 3}">{text:link 3}</option>{/block:iflink3}
  805. {block:iflink4}<option value="{text:link url 4}">{text:link 4}</option>{/block:iflink4}
  806. {block:iflink5}<option value="{text:link url 5}">{text:link 5}</option>{/block:iflink5}
  807. {block:iflink6}<option value="{text:link url 6}">{text:link 6}</option>{/block:iflink6}
  808. {block:iflink7}<option value="{text:link url 7}">{text:link 7}</option>{/block:iflink7}
  809. {block:iflink8}<option value="{text:link url 8}">{text:link 8}</option>{/block:iflink8}
  810. <option value="http://yukoki.tumblr.com">theme by yukoki</option>
  811. </select>
  812. </div><!--navi-->
  813.  
  814. {block:ifnotinfinitescroll}
  815. <div class="pagi">
  816. {block:Pagination}
  817. {block:PreviousPage}
  818. <a href="{PreviousPage}"><</a>{/block:PreviousPage}
  819. {block:JumpPagination length="3"}
  820. {block:CurrentPage}
  821. <span class="current_page">{PageNumber}</span>
  822. {/block:CurrentPage}
  823. {block:JumpPage}
  824. <a class="jump_page" href="{URL}">{PageNumber}</a>
  825. {/block:JumpPage}
  826. {/block:JumpPagination}
  827. {block:NextPage}<a href="{NextPage}">></a>{/block:NextPage}
  828. {/block:Pagination}
  829. </div><!--pagi-->
  830. {/block:ifnotinfinitescroll}
  831.  
  832. </div><!--desc-->
  833.  
  834. <img class="headerimg" src="{image:header icon}">
  835.  
  836. </div></div><!--header--><!--aheader-->
  837. </center>
  838.  
  839. <center>
  840.  
  841. <div id="content">{block:posts}<div class="posts">
  842.  
  843. {block:quote}
  844. <div class="quom">“</div><div class="quomr">”</div>
  845. <div class="pquote">{quote}</div><br>
  846. <div class="psrc">- {Source} -</div>
  847. {/block:quote}
  848.  
  849. {block:photo}
  850. {LinkOpenTag}<div class="photo">
  851. <img class="photo" src="{PhotoURL-500}">
  852. </div>{LinkCloseTag}
  853. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  854. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  855. <div class="text">{Caption}</div>
  856. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  857. {/block:photo}
  858.  
  859. {block:Photoset}
  860. <div class="photo">
  861. {block:indexpage}
  862. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  863. {block:if400pxposts}{Photoset-400}{/block:if400pxposts}
  864. {block:if250pxposts}{Photoset-250}{/block:if250pxposts}
  865. {/block:indexpage}
  866. {block:permalinkpage}
  867. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  868. {block:if400pxposts}{Photoset-500}{/block:if400pxposts}
  869. {block:if250pxposts}{Photoset-500}{/block:if250pxposts}
  870. {/block:permalinkpage}
  871. </div>
  872. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  873. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  874. <div class="text">{Caption}</div>
  875. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  876. {/block:Photoset}
  877.  
  878. {block:text}
  879. {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
  880. <div class="text">{body}</div>
  881. {/block:text}
  882.  
  883. {block:Audio}
  884. {block:indexpage}{block:ifnot250pxposts}
  885. <div class="audiopost">
  886. <div class="audioinfo">
  887. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  888. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  889. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  890. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  891. </div><!--audioinfo-->
  892. {/block:ifnot250pxposts}{/block:indexpage}
  893. {block:permalinkpage}
  894. <div class="audioinfo">
  895. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  896. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  897. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  898. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  899. </div><!--audioinfo-->
  900. {/block:permalinkpage}
  901. <div class="albumart"><div class="albumno"></div>{block:AlbumArt}<img class="albumartp" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  902. <div class="audioplayer">{AudioPlayer}</div>
  903. {block:if250pxposts}{block:permalinkpage}</div><!--audiopost-->{block:permalinkpage}{/block:if250pxposts}
  904. {block:ifnot250pxposts}{block:indexpage}</div><!--audiopost-->{block:indexpage}{/block:ifnot250pxposts}
  905. {block:indexpage}{block:if250pxposts}
  906. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  907. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  908. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  909. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  910. {/block:if250pxposts}{/block:indexpage}
  911. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  912. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  913. <div class="text">{Caption}</div>
  914. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  915. {/block:Audio}
  916.  
  917. {block:Video}
  918. {block:indexpage}
  919. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  920. {block:if400pxposts}{Video-400}{/block:if400pxposts}
  921. {block:if250pxposts}{Video-250}{/block:if250pxposts}
  922. {/block:indexpage}
  923. {block:permalinkpage}
  924. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  925. {block:if400pxposts}{Video-500}{/block:if400pxposts}
  926. {block:if250pxposts}{Video-500}{/block:if250pxposts}
  927. {/block:permalinkpage}
  928. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  929. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  930. <div class="text">{Caption}</div>
  931. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  932. {/block:Video}
  933.  
  934. {block:Answer}
  935. <img class="askerportrait" src="{AskerPortraitURL-64}">
  936. <div class="tri">◀</div>
  937. <div class="a">
  938. <span class="asker">{Asker} whispered:</span>
  939. <span class="q">{Question}</span>
  940. </div>
  941. <div class="text">{Answer}</div>
  942. {/block:Answer}
  943.  
  944. {block:Chat}
  945. {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
  946. <div class="text">
  947. {block:Lines}<div class="{Alt}">
  948. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  949. {/block:Lines}
  950. </div>
  951. {/block:Chat}
  952.  
  953. {block:link}
  954. <a href="{URL}"><div class="ltitle">{Name} ▷</div></a>
  955. {block:Description}<div class="text">{Description}</div>{/block:Description}
  956. {/block:link}
  957.  
  958. {block:indexpage}{block:date}
  959. <div id="permalink">
  960. <a href="{reblogurl}"><div class="preblog">reblog</div></a>
  961. <a href="{permalink}"><div class="ptime">{dayofmonthwithzero} {shortmonth}</div></a>
  962. {block:notecount}<a href="{permalink}"><div class="pnotes">{notecount}</div></a>{/block:notecount}
  963. </div><!--permalink-->
  964. {/block:date}{/block:indexpage}
  965.  
  966. </div><!--posts-->
  967.  
  968. {block:permalinkpage}
  969. {block:date}<div class="permainfo">
  970. Posted on <b>{DayOfMonth} {Month} {Year}</b>, at <b>{12Hour}.{Minutes}{AmPm}</b>, with <b>{NoteCountWithLabel}</b><br>
  971. {block:RebloggedFrom}
  972. Reblogged via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
  973. {/block:RebloggedFrom}
  974. {block:HasTags}<div class="ptags">{block:Tags}
  975. <a href="{TagURL}">#{Tag} </a>
  976. {/block:Tags}</div>{/block:HasTags}
  977. </div>{/block:date}
  978. {block:date}
  979. {block:PostNotes}
  980. <div id="notecontainer">{PostNotes}</div>
  981. {/block:PostNotes}{/block:date}
  982. {/block:permalinkpage}
  983.  
  984. {/block:posts}
  985.  
  986. {block:ContentSource}
  987. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  988. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  989. {/block:SourceLogo}
  990. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  991. {/block:ContentSource}
  992.  
  993. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}-->
  994.  
  995. </div><!--content-->
  996.  
  997. </center>
  998.  
  999. <img style="position:fixed;bottom:0;right:0;z-index:-1;width:{text:render image size}px;" src="{image:render image}">
  1000.  
  1001. </body>
  1002. </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!