Advertisement
mogimochi

Theme [05] Rhapsody

Aug 4th, 2012
37,193
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.74 KB | None
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 05 Rhapsody
  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. 5. Do not redistribute.
  15.  
  16. ++ [YUKOKI 2012 THEMES' REVAMPS] ++
  17. This theme is unlikely to be further edited or updated, & its preview will also be moved to a static page. It's similar to being labeled as an 'old theme'. This theme's first title was 'Umi'.
  18.  
  19. --------------------------------------------------- UPDATE VER 160515 -->
  20.  
  21. <meta name="color:scrollbar" content="#F59871">
  22. <meta name="color:scrollbar bg" content="#dddddd">
  23. <meta name="color:text highlight" content="#f59871">
  24.  
  25. <meta name="color:background" content="#ffffff">
  26.  
  27. <meta name="color:custom link 1" content="#D4CB85">
  28. <meta name="color:custom link 2" content="#D9C481">
  29. <meta name="color:custom link 3" content="#DEBD7D">
  30. <meta name="color:custom link 4" content="#E3B679">
  31. <meta name="color:custom link 5" content="#E8AE76">
  32. <meta name="color:custom link 6" content="#EDA772">
  33. <meta name="color:custom link 7" content="#F2A06E">
  34. <meta name="color:custom link 8" content="#F7996A">
  35. <meta name="color:custom links text" content="#ffffff">
  36. <meta name="color:custom links hover background" content="#cccccc">
  37. <meta name="color:custom links hover text" content="#ffffff">
  38.  
  39. <meta name="color:nav bubble border" content="#cccccc">
  40. <meta name="color:nav bubble text" content="#555555">
  41. <meta name="color:nav bubble background" content="#ffffff">
  42. <meta name="color:nav reset background" content="#818D9C">
  43. <meta name="color:nav ask background" content="#A8918E">
  44. <meta name="color:nav archive background" content="#CE947F">
  45. <meta name="color:nav theme background" content="#F59871">
  46. <meta name="color:nav hover background" content="#dddddd">
  47.  
  48. <meta name="color:blog title text" content="#555555">
  49. <meta name="color:blog title border" content="#aaaaaa">
  50. <meta name="color:blog title background" content="#ffffff">
  51.  
  52. <meta name="color:desc text" content="#555555">
  53. <meta name="color:desc border" content="#aaaaaa">
  54. <meta name="color:desc background" content="#ffffff">
  55. <meta name="color:desc bold" content="#f0763e">
  56. <meta name="color:desc italic" content="#e89262">
  57. <meta name="color:desc links" content="#f0c073">
  58. <meta name="color:desc links hover" content="#c9c9c9">
  59.  
  60. <meta name="color:post background" content="#ffffff">
  61. <meta name="color:post bottom border" content="#cfc77a">
  62.  
  63. <meta name="color:body text" content="#aaaaaa">
  64. <meta name="color:body bold" content="#f0bf71">
  65. <meta name="color:body italic" content="#c7c17f">
  66. <meta name="color:body links" content="#f5a37f">
  67. <meta name="color:body links hover" content="#cfcfcf">
  68.  
  69. <meta name="color:post title text" content="#aaaaaa">
  70. <meta name="color:post title underline" content="#e8e8e8">
  71.  
  72. <meta name="color:link post text" content="#aaaaaa">
  73. <meta name="color:link post underline" content="#f2be6f">
  74. <meta name="color:link post hover underline" content="#dbdbdb">
  75.  
  76. <meta name="color:quote post" content="#898989">
  77. <meta name="color:quote post quotation marks" content="#e8d29e">
  78. <meta name="color:quote post source" content="#dcdcdc">
  79.  
  80. <meta name="color:chat even name" content="#df8063">
  81. <meta name="color:chat even text" content="#b8b8b8">
  82. <meta name="color:chat odd name" content="#c2bb97">
  83. <meta name="color:chat odd text" content="#919191">
  84. <meta name="color:chat dividers" content="#e7e7e7">
  85.  
  86. <meta name="color:audio info background" content="#fff7d9">
  87. <meta name="color:audio info text" content="#929292">
  88. <meta name="color:audio info list headings" content="#ecb45b">
  89. <meta name="color:no album art" content="#888888">
  90.  
  91. <meta name="color:ask background" content="#f6f6f6">
  92. <meta name="color:ask text" content="#9b9b9b">
  93. <meta name="color:asker text" content="#747474">
  94. <meta name="color:asker link" content="#d9876b">
  95.  
  96. <meta name="color:permalink background" content="#ffffff">
  97. <meta name="color:permalink text" content="#bbbbbb">
  98. <meta name="color:permalink hover background" content="#cfc77a">
  99. <meta name="color:permalink hover text" content="#ffffff">
  100. <meta name="color:tags background" content="#d9c88d">
  101. <meta name="color:tags colour" content="#ffffff">
  102. <meta name="color:tags hover background" content="#ffffff">
  103. <meta name="color:tags hover colour" content="#cccccc">
  104.  
  105. <meta name="color:pagination links" content="#ffffff">
  106. <meta name="color:pagination text" content="#777777">
  107. <meta name="color:pagination bg" content="#cfc77a">
  108. <meta name="color:pagination bg hover" content="#ffffff">
  109. <meta name="color:pagination links hover" content="#aaaaaa">
  110.  
  111. <meta name="image:background" content="">
  112. <meta name="image:sidebar" content="">
  113.  
  114. <meta name="text:billy music player code" content="">
  115. <meta name="text:link 1" content="">
  116. <meta name="text:link 1 URL" content="">
  117. <meta name="text:link 2" content="">
  118. <meta name="text:link 2 URL" content="">
  119. <meta name="text:link 3" content="">
  120. <meta name="text:link 3 URL" content="">
  121. <meta name="text:link 4" content="">
  122. <meta name="text:link 4 URL" content="">
  123. <meta name="text:link 5" content="">
  124. <meta name="text:link 5 URL" content="">
  125. <meta name="text:link 6" content="">
  126. <meta name="text:link 6 URL" content="">
  127. <meta name="text:link 7" content="">
  128. <meta name="text:link 7 URL" content="">
  129. <meta name="text:link 8" content="">
  130. <meta name="text:link 8 URL" content="">
  131.  
  132. <meta name="if:post type 1" content="1">
  133. <meta name="if:post type 2" content="0">
  134. <meta name="if:post type 3" content="0">
  135. <meta name="if:show captions" content="1">
  136. <meta name="if:infinite scroll" content="0">
  137. <meta name="if:monochrome posts" content="0">
  138. <meta name="if:photo fading" content="1">
  139. <meta name="if:music player" content="0">
  140. <meta name="if:rounded sidebar" content="1">
  141.  
  142. <link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
  143.  
  144. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  145. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  146. <link rel="shortcut icon" href="{Favicon}" />
  147.  
  148. <style type="text/css">
  149.  
  150. iframe#tumblr_controls {
  151. z-index: 100000; right:3px !important; position:fixed !important; opacity: 0.2;
  152. -webkit-transition: all 0.4s ease-in-out;
  153. -moz-transition: all 0.4s ease-in-out;
  154. -o-transition: all 0.4s ease-in-out;
  155. -ms-transition: all 0.4s ease-in-out;
  156. transition: all 0.4s ease-in-out;
  157. }
  158. iframe#tumblr_controls:hover {
  159. opacity: 1;
  160. -webkit-transition: all 0.4s ease-in-out;
  161. -moz-transition: all 0.4s ease-in-out;
  162. -o-transition: all 0.4s ease-in-out;
  163. -ms-transition: all 0.4s ease-in-out;
  164. transition: all 0.4s ease-in-out;
  165. }
  166.  
  167. ::-webkit-scrollbar { width: 5px; }
  168. ::-webkit-scrollbar-track-piece {background-color:{color:scrollbar bg};}
  169. ::-webkit-scrollbar-thumb:vertical {
  170. width: 10px;
  171. border-radius: 100px;
  172. -moz-border-radius: 100px;
  173. -webkit-border-radius: 100px;
  174. -o-border-radius: 100px;
  175. background-color: {color:scrollbar};
  176. }
  177.  
  178. ::selection {
  179. background: transparent;
  180. color: {color:text highlight};
  181. }
  182.  
  183. ::-moz-selection {
  184. background: transparent;
  185. color: {color:text highlight};
  186. }
  187.  
  188. body {
  189. background-color: {color:background};
  190. background-image: url({image:background});
  191. background-attachment: fixed;
  192. margin: 0;
  193. word-wrap: break-word;
  194. }
  195. a { text-decoration:none; }
  196.  
  197. #sidebar {
  198. position: fixed;
  199. background-image: url({image:background});
  200. top: 100px;
  201. left: 170px;
  202. z-index: 1000;
  203. width: 220px;
  204. padding: 5px;
  205. background-color: {color:background};
  206. {block:ifroundedsidebar}
  207. border-radius: 100px 0 0 0;
  208. -moz-border-radius: 100px 0 0 0;
  209. -webkit-border-radius: 100px 0 0 0;
  210. {/block:ifroundedsidebar}
  211. }
  212.  
  213. .sbpic {
  214. width: 220px;
  215. display: block;
  216. {block:ifroundedsidebar}
  217. border-radius: 100px 0 0 0;
  218. -moz-border-radius: 100px 0 0 0;
  219. -webkit-border-radius: 100px 0 0 0;
  220. {/block:ifroundedsidebar}
  221. }
  222.  
  223. #links {
  224. position: fixed;
  225. z-index: 999;
  226. top: 150px;
  227. left: 40px;/**40**/
  228. }
  229.  
  230. .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8 {
  231. width: 360px;
  232. height: 15px;
  233. line-height: 15px;
  234. padding: 0 10px;
  235. margin-bottom: 5px;
  236. font-family: consolas;
  237. font-size: 8px;
  238. letter-spacing: 1px;
  239. color: {color:custom links text};
  240. transition: 0.6s;
  241. -moz-transition: 0.6s;
  242. -webkit-transition: 0.6s;
  243. }
  244. .c1 {background-color:{color:custom link 1};margin-left:-10px;width: 365px;}
  245. .c2 {background-color:{color:custom link 2};margin-left:40px;width: 315px;}
  246. .c3 {background-color:{color:custom link 3};margin-left:20px;width: 335px;}
  247. .c4 {background-color:{color:custom link 4};margin-left:30px;width: 325px;}
  248. .c5 {background-color:{color:custom link 5};margin-left:10px;width: 345px;}
  249. .c6 {background-color:{color:custom link 6};margin-left:50px;width: 305px;}
  250. .c7 {background-color:{color:custom link 7};margin-left:00px;width: 355px;}
  251. .c8 {background-color:{color:custom link 8};margin-left:20px;width: 335px;}
  252. .c1:hover, .c2:hover, .c3:hover, .c4:hover, .c5:hover, .c6:hover, .c7:hover, .c8:hover { background-color: {color:custom links hover background}; color: {color:custom links hover text}; }
  253.  
  254. .nav {
  255. opacity: 0;
  256. font-family: pixelfont;
  257. font-size: 8px;
  258. text-transform: uppercase;
  259. border: 1px solid {color:nav bubble border};
  260. border-radius: 5px;
  261. color: {color:nav bubble text};
  262. background-color: {color:nav bubble background};
  263. width: auto;
  264. margin-top:10px;
  265. padding:5px 5px 3px 5px;
  266. text-align: center;
  267. transition: 0.6s;
  268. -moz-transition: 0.6s;
  269. -webkit-transition: 0.6s;
  270. }
  271. .n2:hover .nav { margin-top: 20px; opacity: 1; }
  272. .n3:hover .nav { margin-top: 20px; opacity: 1; }
  273. .n4:hover .nav { margin-top: 20px; opacity: 1; }
  274. .n5:hover .nav { margin-top: 20px; opacity: 1; }
  275.  
  276. .navt {
  277. position: absolute;
  278. z-index: 1;
  279. color: {color:nav bubble background};
  280. font-size: 12px;
  281. text-shadow: 0 -2px 0 {color:nav bubble border};
  282. margin-top: -12px;
  283. margin-left: 18px;
  284. }
  285.  
  286. .navigate { width: 300px;margin: 5px 0 0 0; }
  287. .n2, .n3, .n4, .n5 {
  288. width: 55px;
  289. height: 7px;
  290. float: left;
  291. font-family: pixelfont;
  292. font-size: 8px;
  293. text-transform: uppercase;
  294. text-align: center;
  295. line-height: 11px;
  296. transition: 0.6s;
  297. -moz-transition: 0.6s;
  298. -webkit-transition: 0.6s;
  299. }
  300. .n2 { background-color: {color:nav reset background}; }
  301. .n3 { background-color: {color:nav ask background}; }
  302. .n4 { background-color: {color:nav archive background}; }
  303. .n5 { background-color: {color:nav theme background}; }
  304. .n1:hover, .n2:hover, .n3:hover, .n4:hover, .n5:hover {
  305. background-color: {color:nav hover background};
  306. }
  307.  
  308. .blogt {
  309. font-size: 10px;
  310. letter-spacing: 1px;
  311. text-align: center;
  312. width: 200px;
  313. padding: 2px 0;
  314. font-family: courier new;
  315. position: absolute;
  316. margin: -26px 9px;
  317. border-radius: 5px;
  318. background-color: {color:blog title background};
  319. border: 1px solid {color:blog title border};
  320. color: {color:blog title text};
  321. opacity: 0.4;
  322. text-transform: uppercase;
  323. transition: 0.8s;
  324. -moz-transition: 0.8s;
  325. -webkit-transition: 0.8s;
  326. }
  327. #sidebar:hover .blogt {margin-top: -100px;}
  328. .desc {
  329. font-family: pixelfont;
  330. overflow: auto;
  331. font-size: 9px;
  332. text-align: justify;
  333. text-transform: uppercase;
  334. position: absolute;
  335. width: 190px;
  336. border: 1px solid transparent;
  337. margin: -5px 9px;
  338. color: transparent;
  339. border-radius: 5px;
  340. height: 56px;
  341. padding: 5px;
  342. margin-top: -76px;
  343. font-size: 8px;
  344. opacity: 0;
  345. background-color: {color:desc background};
  346. border: 1px solid {color:desc border};
  347. color: {color:desc text};
  348. transition: 0.8s;
  349. -moz-transition: 0.8s;
  350. -webkit-transition: 0.8s;
  351. }
  352. .desc b,strong { color: {color:desc bold};font-weight:400; }
  353. .desc i,em { color: {color:desc italic}; }
  354. .desc a { color: {color:desc links}; }
  355. .desc a:hover { color: {color:desc links hover}; }
  356.  
  357. #sidebar:hover .desc {opacity: 0.8;}
  358. #sidebar:hover .blogt { opacity: 0.8; }
  359.  
  360. #content {
  361. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  362. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  363. {block:ifposttype3}width: 620px;{/block:ifposttype3}
  364. padding: 10px;
  365. margin: 10px 450px;
  366. {block:permalinkpage}
  367. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  368. {block:ifposttype2}width: 500px;{/block:ifposttype2}
  369. {block:ifposttype3}width: 500px;{/block:ifposttype3}
  370. {/block:permalinkpage}
  371. }
  372.  
  373. .posts {
  374. background-color: {color:post background};
  375. padding: 20px;
  376. margin-bottom: 20px;
  377. border-bottom: 3px solid {color:post bottom border};
  378. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  379. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  380. {block:ifposttype3}width: 250px;float: left;margin-right: 20px;{/block:ifposttype3}
  381. {block:permalinkpage}
  382. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  383. {block:ifposttype2}width: 500px;{/block:ifposttype2}
  384. {block:ifposttype3}width: 500px;{/block:ifposttype3}
  385. {/block:permalinkpage}
  386. transition: 0.8s;
  387. -moz-transition: 0.8s;
  388. webkit-transition: 0.8s;
  389. -o-transition: 0.8s;
  390. }
  391.  
  392. .photo {
  393. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  394. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  395. {block:ifposttype3}width: 250px;{/block:ifposttype3}
  396. {block:permalinkpage}
  397. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  398. {block:ifposttype2}width: 500px;{/block:ifposttype2}
  399. {block:ifposttype3}width: 500px;{/block:ifposttype3}
  400. {/block:permalinkpage}
  401. display: block;
  402. {block:ifphotofading}opacity: 0.6;{/block:ifphotofading}
  403. {block:ifmonochromeposts}
  404. 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+ */
  405. filter: gray; /* IE6-9 */
  406. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  407. {/block:ifmonochromeposts}
  408. transition: 0.8s;
  409. -moz-transition: 0.8s;
  410. webkit-transition: 0.8s;
  411. -o-transition: 0.8s;
  412. }
  413.  
  414. .posts:hover .photo {
  415. opacity: 1;
  416. {block:ifmonochromeposts}
  417. filter: none;
  418. -webkit-filter: grayscale(0%);
  419. {/block:ifmonochromeposts}
  420. }
  421.  
  422. .posts img {
  423. {block:ifposttype1}max-width: 500px;{/block:ifposttype1}
  424. {block:ifposttype2}max-width: 400px;{/block:ifposttype2}
  425. {block:ifposttype3}max-width: 250px;{/block:ifposttype3}
  426.  
  427. {block:permalinkpage}
  428. {block:ifposttype1}max-width: 500px;{/block:ifposttype1}
  429. {block:ifposttype2}max-width: 500px;{/block:ifposttype2}
  430. {block:ifposttype3}max-width: 500px;{/block:ifposttype3}
  431. {/block:permalinkpage}
  432. }
  433. .posts blockquote img {max-width: 100%;}
  434.  
  435. .text {
  436. text-align: justify;
  437. font-family: consolas;
  438. font-size: 11px;
  439. color: {color:body text};
  440. }
  441.  
  442. #content blockquote {
  443. margin: 5px;
  444. padding: 0 10px;
  445. border-left: 1px solid {color:blockquote};
  446. }
  447.  
  448. .line {
  449. border-bottom: 1px solid {color:chat dividers};
  450. background-color: {color:post background};
  451. }
  452.  
  453. .odd .line {padding: 10px 5px;color:{color:chat odd text};}
  454. .even .line {padding: 10px 5px;color:{color:chat even text};}
  455. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  456. .even .name {color: {color:chat even name};padding: 3px 5px;}
  457.  
  458. .ptitle, .ltitle {
  459. font-family: courier new;
  460. font-size: 12px;
  461. text-transform: uppercase;
  462. border-bottom: 1px solid {color:post title underline};
  463. color: {color:post title text};
  464. padding: 5px 10px;
  465. letter-spacing: 2px;
  466. transition: 0.6s;
  467. -moz-transition: 0.6s;
  468. webkit-transition: 0.6s;
  469. }
  470. .ltitle {
  471. color: {color:link post text};
  472. border-bottom: 1px solid {color:link post underline};
  473. }
  474. .ltitle:hover {
  475. padding-left: 20px;
  476. border-bottom: 1px solid {color:link post hover underline};
  477. }
  478.  
  479. .quom, .quomr {
  480. font-family: georgia;
  481. font-size: 100px;
  482. margin: -15px 0;
  483. position: absolute;
  484. color: {color:quote post quotation marks};
  485. z-index: 1;
  486. }
  487. .quomr {
  488. {block:ifposttype1}margin: -15px 460px;{/block:ifposttype1}
  489. {block:ifposttype2}margin: -15px 360px;{/block:ifposttype2}
  490. {block:ifposttype3}margin: -15px 210px;{/block:ifposttype3}
  491. {block:permalinkpage}{block:ifposttype2}margin: -15px 460px;{/block:ifposttype2}{/block:permalinkpage}
  492. }
  493.  
  494. .pquote {
  495. font-family: lekton;
  496. font-size: 14px;
  497. text-align: center;
  498. position: relative;
  499. z-index: 2;
  500. color: {color:quote post};
  501. }
  502.  
  503. .psrc {
  504. font-family: pixelfont;
  505. font-size: 8px;
  506. letter-spacing: 1px;
  507. text-transform: uppercase;
  508. text-align: center;
  509. margin-top: -20px;
  510. color: {color:quote post source};
  511. }
  512.  
  513. .audiopost { height: 150px; }
  514.  
  515. .albumno {
  516. width: 150px;
  517. height: 150px;
  518. background-color: {color:no album art};
  519. position: absolute;
  520. z-index: 1;
  521. {block:indexpage}{block:ifposttype3}
  522. width: 250px;
  523. height: 250px;
  524. {/block:ifposttype3}{/block:indexpage}
  525. }
  526.  
  527. .albumartp {
  528. z-index: 10;
  529. width: 150px;
  530. height: 150px;
  531. position: relative;
  532. z-index: 2;
  533. display: block;
  534. {block:indexpage}{block:ifposttype3}
  535. width: 250px;
  536. height: 250px;
  537. {/block:ifposttype3}{/block:indexpage}
  538. }
  539.  
  540. .albumart {
  541. width: 150px;
  542. height: 150px;
  543. display: block;
  544. position: relative;
  545. {block:indexpage}{block:ifposttype3}
  546. width: 250px;
  547. height: 250px;
  548. {/block:ifposttype3}{/block:indexpage}
  549. }
  550.  
  551. .audioplayer {
  552. position: absolute;
  553. z-index: 11;
  554. margin-top: -90px;
  555. margin-left: 65px;
  556. width: 25px;
  557. height: 25px;
  558. overflow: hidden;
  559. opacity: 0.5;
  560. {block:indexpage}{block:ifposttype3}
  561. margin-top: -140px;
  562. margin-left: 115px;
  563. {/block:ifposttype3}{/block:indexpage}
  564. transition: 0.6s;
  565. -moz-transition: 0.6s;
  566. -webkit-transition: 0.6s;
  567. -o-transition: 0.6s;
  568. }
  569. .audioplayer:hover {opacity: 1;}
  570.  
  571. .audioinfo {
  572. position: absolute;
  573. margin-left: 155px;
  574. height: 150px;
  575. }
  576.  
  577. .aline {
  578. {block:ifposttype1}width: 325px;{/block:ifposttype1}
  579. {block:ifposttype2}width: 225px;{/block:ifposttype2}
  580. {block:indexpage}{block:ifposttype3}margin-top: 5px;{/block:ifposttype3}{/block:indexpage}
  581. {block:permalinkpage}width: 325px;{/block:permalinkpage}
  582. font-family: consolas;
  583. font-size: 10px;
  584. padding: 11px 10px;
  585. margin-bottom: 5px;
  586. text-transform: uppercase;
  587. background-color: {color:audio info background};
  588. color: {color:audio info text};
  589. }
  590. .aline b,strong {
  591. font-weight: 400;
  592. color: {color:audio info list headings};
  593. }
  594. .askerportrait {
  595. max-width: 64px;
  596. max-height: 64px;
  597. position: absolute;
  598. border: 10px solid {color:ask background};
  599. }
  600. .a {
  601. margin-left: 100px;
  602. background-color: {color:ask background};
  603. min-height: 64px;
  604. padding: 10px;
  605. font-family: consolas;
  606. font-size: 11px;
  607. color: {color:ask text};
  608. }
  609. .asker {
  610. color: {color:asker text};
  611. font-family: consolas;
  612. font-size: 11px;
  613. text-transform: uppercase;
  614. }
  615. .asker a {color: {color:asker link};border-bottom: 1px solid {color:asker link};}
  616. .q {margin-top: 10px;}
  617. .tri {
  618. position: absolute;
  619. font-size: 30px;
  620. margin: 20px 0 0 85px;
  621. color: {color:ask background};
  622. }
  623.  
  624. .permalink {
  625. text-align: right;
  626. margin-left: -10px;
  627. opacity: 0;
  628. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  629. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  630. {block:ifposttype3}
  631. width: 250px;
  632. position: absolute;
  633. margin-left: 0;
  634. text-align: center;
  635. {/block:ifposttype3}
  636. transition: 0.8s;
  637. -moz-transition: 0.8s;
  638. -webkit-transition: 0.8s;
  639. -o-transition: 0.8s;
  640. }
  641. .permalink a {
  642. text-align: right;
  643. font-family: courier new;
  644. font-size: 8px;
  645. letter-spacing: 1px;
  646. text-transform: uppercase;
  647. display: block;
  648. padding: 2px 5px;
  649. margin: 14px 5px;
  650. color: {color:permalink text};
  651. background-color: {color:permalink background};
  652. border-radius: 3px;
  653. border: 1px solid {color:post bottom border};
  654. float: right;
  655. transition: 0.6s;
  656. -moz-transition: 0.6s;
  657. -webkit-transition: 0.6s;
  658. -o-transition: 0.6s;
  659. }
  660. .permalink a:hover {
  661. color: {color:permalink hover text};
  662. background-color: {color:permalink hover background};
  663. }
  664. .posts:hover .permalink { margin-left: 0; opacity: 1; }
  665.  
  666. .rightperm {
  667. {block:ifposttype1}margin-left: 530px;{/block:ifposttype1}
  668. {block:ifposttype2}margin-left: 430px;{/block:ifposttype2}
  669. position: absolute;
  670. opacity: 0;
  671. transition: 0.6s;
  672. -moz-transition: 0.6s;
  673. -webkit-transition: 0.6s;
  674. -o-transition: 0.6s;
  675. }
  676. .posts:hover .rightperm { opacity: 1;margin-top: 10px; }
  677.  
  678. .rtags {
  679. font-family: pixelfont;
  680. font-size: 8px;
  681. text-transform: uppercase;
  682. text-align: left;
  683. width: 300px;
  684. transition: 0.6s;
  685. -moz-transition: 0.6s;
  686. -webkit-transition: 0.6s;
  687. -o-transition: 0.6s;
  688. }
  689.  
  690. .rtags a {
  691. color: {color:tags colour};
  692. background-color: {color:tags background};
  693. padding: 2px 5px;
  694. line-height: 18px;
  695. transition: 0.6s;
  696. -moz-transition: 0.6s;
  697. -webkit-transition: 0.6s;
  698. -o-transition: 0.6s;
  699. }
  700.  
  701. .rtags a:hover {
  702. color: {color:tags hover colour};
  703. background-color: {color:tags hover background};
  704. margin-left: 10px;
  705. }
  706.  
  707. .permainfo {
  708. margin-top: 10px;
  709. width: 480px;
  710. padding: 20px 30px;
  711. font-family: consolas;
  712. font-size: 11px;
  713. text-align: center;
  714. background-color: {color:post background};
  715. color: {color:body text};
  716. }
  717.  
  718. #notecon {
  719. padding: 20px;
  720. width: 500px;
  721. background-color: {color:post background};
  722. color: {color:body text};
  723. font-family: consolas;
  724. font-size: 11px;
  725. margin-top: 10px;
  726. text-transform: uppercase;
  727. }
  728. #notecon ol.notes { list-style-type: none; }
  729. .text b,strong, .permainfo b,strong { color: {color:body bold}; font-weight: 400; }
  730. .text i,em, .permainfo a {
  731. color: {color:body italic};
  732. transition: 0.6s;
  733. -moz-transition: 0.6s;
  734. -webkit-transition: 0.6s;
  735. -o-transition: 0.6s;
  736. }
  737. .text a, .ptags a, #notecon a, .psrc a {
  738. color: {color:body links};
  739. border-bottom: 1px solid transparent;
  740. padding-bottom: 5px;
  741. transition: 0.6s;
  742. -moz-transition: 0.6s;
  743. -webkit-transition: 0.6s;
  744. -o-transition: 0.6s;
  745. }
  746. .text a:hover, .permainfo a:hover, #notecon a:hover, .ptags a:hover, .psrc a:hover {
  747. padding-bottom: 0;
  748. color: {color:body links hover};
  749. border-bottom: 1px solid {color:body links hover};
  750. }
  751.  
  752. #music {
  753. position: absolute;
  754. margin: -30px 150px;
  755. width: 70px;
  756. height: 30px;
  757. overflow: hidden;
  758. }
  759. .musicgif {margin-left: 10px;}
  760. #music:hover .ongaku {margin-top: 3px;}
  761. .ongaku {
  762. margin-top: -20px;
  763. margin-left: 12px;
  764. transition: 0.6s;
  765. -moz-transition: 0.6s;
  766. -webkit-transition: 0.6s;
  767. -o-transition: 0.6s;
  768. }
  769.  
  770. #warning {
  771. position: fixed;
  772. background-color: #000;
  773. color: #fff;
  774. width: 100%;
  775. height: 100%;
  776. position: fixed;
  777. z-index: -1;
  778. opacity: 0;
  779. top: 0;
  780. left: 0;
  781. padding-top: 300px;
  782. text-align: center;
  783. font-family: courier new;
  784. font-size: 16px;
  785. {block:ifposttype1}
  786. {block:ifposttype2}opacity:0.9;z-index: 100001;{/block:ifposttype2}
  787. {block:ifposttype3}opacity:0.9;z-index: 100001;{/block:ifposttype3}
  788. {/block:ifposttype1}
  789. {block:ifposttype2}
  790. {block:ifposttype3}opacity:0.9;z-index: 100001;{/block:ifposttype3}
  791. {/block:ifposttype2}
  792. {block:ifposttype1}{block:ifposttype2}{block:ifposttype3}
  793. opacity: 1;z-index: 100001;
  794. {/block:ifposttype3}{block:ifposttype2}{block:ifposttype1}
  795. {block:ifnotposttype1}{block:ifnotposttype2}{block:ifnotposttype3}
  796. opacity: 1;z-index: 100001;
  797. {/block:ifnotposttype3}{block:ifnotposttype2}{block:ifnotposttype1}
  798. }
  799. .pagination {display: none;}
  800.  
  801. .pagi {
  802. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  803. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  804. {block:ifposttype3}{block:ifnotinfinitescroll}
  805. width: 270px;
  806. {/block:ifnotinfinitescroll}{/block:ifposttype3}
  807. margin-top: 10px;
  808. padding: 0 10px;
  809. text-align: center;
  810. font-family: consolas;
  811. font-size: 12px;
  812. color: {color:pagination text};
  813. }
  814. .pagi a {
  815. background-color: {color:pagination bg};
  816. color: {color:pagination links};
  817. padding: 0 3px;
  818. margin: 0 -3px;
  819. -webkit-transition: all 0.4s ease-in-out;
  820. -moz-transition: all 0.4s ease-in-out;
  821. -o-transition: all 0.4s ease-in-out;
  822. -ms-transition: all 0.4s ease-in-out;
  823. transition: all 0.4s ease-in-out;
  824. }
  825. .pagi a:hover {
  826. background-color: {color:pagination bg hover};
  827. color: {color:pagination links hover};
  828. }
  829.  
  830.  
  831. {CustomCSS}
  832.  
  833. @font-face { font-family: "pixelfont"; src: url('https://dl.dropboxusercontent.com/s/68bdyrv4fsayhg8/04B_03__.TTF'); }
  834.  
  835. </style>
  836.  
  837. {block:indexpage}
  838. {block:ifposttype3}{block:ifinfinitescroll}
  839. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  840. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  841.  
  842. <script>
  843. $(function(){
  844. var $container = $('#content');
  845. $container.imagesLoaded(function(){
  846. $container.masonry({
  847. itemSelector: '.posts',
  848. });
  849. });
  850. $container.infinitescroll({
  851. itemSelector : ".posts",
  852. navSelector : "div.pagination",
  853. nextSelector : ".pagination a#next",
  854. loadingImg : "",
  855. loadingText : "<em></em>",
  856. bufferPx : 10000,
  857. extraScrollPx: 12000,
  858. },
  859. // trigger Masonry as a callback
  860. function( newElements ) {
  861. var $newElems = $( newElements ).css({ opacity: 0 });
  862. // ensure that images load before adding to masonry layout
  863. $newElems.imagesLoaded(function(){
  864. $newElems.animate({ opacity: 1 });
  865. $container.masonry( 'appended', $newElems, true );
  866. });
  867. }
  868. );
  869. });
  870. </script>
  871. {/block:ifinfinitescroll}
  872.  
  873. {block:ifnotinfinitescroll}
  874. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  875.  
  876. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  877. <script type="text/javascript">
  878. $(window).load(function () {
  879. $('#content').masonry({
  880. itemSelector : ".posts",
  881. },
  882. function() { $('#content').masonry({ appendedContent: $(this) }); }
  883. );
  884. });
  885. </script>
  886. {/block:ifnotinfinitescroll}
  887.  
  888. {/block:ifposttype3}
  889.  
  890. {block:ifnotposttype3}{block:ifinfinitescroll}
  891. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  892. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  893. <script type="text/javascript" charset="utf-8">
  894. var $j = jQuery.noConflict();
  895. $j(function() {
  896. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  897. $j("img").lazyload({
  898. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  899. effect: "fadeIn",
  900. });
  901. });
  902. </script>
  903. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  904. {/block:ifinfinitescroll}{/block:ifnotposttype3}
  905.  
  906. {block:ifinfinitescroll}{block:ifnotposttype3}
  907. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  908. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  909. <script type="text/javascript" charset="utf-8">
  910. var $j = jQuery.noConflict();
  911. $j(function() {
  912. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  913. $j("img").lazyload({
  914. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  915. effect: "fadeIn",
  916. });
  917. });
  918. </script>
  919. {/block:ifnotposttype3}{/block:ifinfinitescroll}
  920. {/block:indexpage}
  921.  
  922. </head>
  923. <body>
  924.  
  925. <div id="warning">Please pick only one post type!!</div>
  926.  
  927. <div id="links">
  928. {block:IfLink1}<a href="{text:Link 1 URL}"><div class="c1">{text:Link 1}</div></a>{/block:IfLink1}
  929. {block:IfLink2}<a href="{text:Link 2 URL}"><div class="c2">{text:Link 2}</div></a>{/block:IfLink2}
  930. {block:IfLink3}<a href="{text:Link 3 URL}"><div class="c3">{text:Link 3}</div></a>{/block:IfLink3}
  931. {block:IfLink4}<a href="{text:Link 4 URL}"><div class="c4">{text:Link 4}</div></a>{/block:IfLink4}
  932. {block:IfLink5}<a href="{text:Link 5 URL}"><div class="c5">{text:Link 5}</div></a>{/block:IfLink5}
  933. {block:IfLink6}<a href="{text:Link 6 URL}"><div class="c6">{text:Link 6}</div></a>{/block:IfLink6}
  934. {block:IfLink7}<a href="{text:Link 7 URL}"><div class="c7">{text:Link 7}</div></a>{/block:IfLink7}
  935. {block:IfLink8}<a href="{text:Link 8 URL}"><div class="c8">{text:Link 8}</div></a>{/block:IfLink8}
  936. </div>
  937.  
  938. <div id="sidebar">
  939.  
  940. {block:ifmusicplayer}
  941. <div id="music">
  942. <div class="ongaku">
  943. {text:billy music player code}
  944. </div><!--ongaku-->
  945. <img class="musicgif" src="http://media.tumblr.com/tumblr_m1zdobeFFY1r3we0y.gif">
  946. </div>
  947. {/block:ifmusicplayer}
  948.  
  949. <img class="sbpic" src="{image:sidebar}">
  950.  
  951. <div class="blogt">{title}</div>
  952. <div class="desc">{description}</div>
  953.  
  954. <div class="navigate">
  955. <a href="/"><div class="n2"><div class="nav"><div class="navt">▲</div>reset</div></div></a>
  956. <a href="/ask"><div class="n3"><div class="nav"><div class="navt">▲</div>ask</div></div></a>
  957. <a href="/archive"><div class="n4"><div class="nav"><div class="navt">▲</div>archive</div></div></a>
  958. <a href="http://yukoki.tumblr.com"><div class="n5"><div class="nav"><div class="navt">▲</div>theme</div></div></a>
  959. </div><!--navigate-->
  960.  
  961. </div><!--sidebar-->
  962.  
  963. <div id="content">{block:posts}<div class="posts">
  964.  
  965. {block:indexpage}{block:ifnotposttype3}{block:date}
  966. <div class="rightperm">
  967. {block:HasTags}<div class="rtags">{block:Tags}
  968. <a href="{TagURL}">#{Tag} <br></a>
  969. {/block:Tags}</div>{/block:HasTags}
  970. </div><!--rightperm-->
  971. {/block:date}{/block:ifnotposttype3}{/block:indexpage}
  972.  
  973. {block:quote}
  974. <div class="quom">“</div><div class="quomr">”</div>
  975. <div class="pquote">{quote}</div><br>
  976. <div class="psrc">- {Source} -</div>
  977. {/block:quote}
  978.  
  979. {block:photo}
  980. {LinkOpenTag}<div class="photo">
  981. <img class="photo" src="{PhotoURL-500}">
  982. </div>{LinkCloseTag}
  983. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  984. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  985. <div class="text">{Caption}</div>
  986. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  987. {/block:photo}
  988.  
  989. {block:Photoset}
  990. <div class="photo">
  991. {block:indexpage}
  992. {block:ifposttype1}{Photoset-500}{/block:ifposttype1}
  993. {block:ifposttype2}{Photoset-400}{/block:ifposttype2}
  994. {block:ifposttype3}{Photoset-250}{/block:ifposttype3}
  995. {/block:indexpage}
  996. {block:permalinkpage}
  997. {block:ifposttype1}{Photoset-500}{/block:ifposttype1}
  998. {block:ifposttype2}{Photoset-500}{/block:ifposttype2}
  999. {block:ifposttype3}{Photoset-500}{/block:ifposttype3}
  1000. {/block:permalinkpage}
  1001. </div>
  1002. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1003. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1004. <div class="text">{Caption}</div>
  1005. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1006. {/block:Photoset}
  1007.  
  1008. {block:text}
  1009. {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
  1010. <div class="text">{body}</div>
  1011. {/block:text}
  1012.  
  1013. {block:Audio}
  1014. {block:indexpage}{block:ifnotposttype3}
  1015. <div class="audioinfo">
  1016. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  1017. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  1018. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  1019. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  1020. </div><!--audioinfo-->
  1021. {/block:ifnotposttype3}{/block:indexpage}
  1022. {block:permalinkpage}
  1023. <div class="audioinfo">
  1024. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  1025. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  1026. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  1027. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  1028. </div><!--audioinfo-->
  1029. {/block:permalinkpage}
  1030. <div class="albumart"><div class="albumno"></div>{block:AlbumArt}<img class="albumartp" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1031. <div class="audioplayer">{AudioPlayer}</div>
  1032. {block:indexpage}{block:ifposttype3}
  1033. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  1034. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  1035. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  1036. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  1037. {/block:ifposttype3}{/block:indexpage}
  1038. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1039. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1040. <div class="text">{Caption}</div>
  1041. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1042. {/block:Audio}
  1043.  
  1044. {block:Video}
  1045. {block:indexpage}
  1046. {block:ifposttype1}{Video-500}{/block:ifposttype1}
  1047. {block:ifposttype2}{Video-400}{/block:ifposttype2}
  1048. {block:ifposttype3}{Video-250}{/block:ifposttype3}
  1049. {/block:indexpage}
  1050. {block:permalinkpage}
  1051. {block:ifposttype1}{Video-500}{/block:ifposttype1}
  1052. {block:ifposttype2}{Video-500}{/block:ifposttype2}
  1053. {block:ifposttype3}{Video-500}{/block:ifposttype3}
  1054. {/block:permalinkpage}
  1055. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1056. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1057. <div class="text">{Caption}</div>
  1058. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1059. {/block:Video}
  1060.  
  1061. {block:Answer}
  1062. <img class="askerportrait" src="{AskerPortraitURL-64}">
  1063. <div class="tri">◀</div>
  1064. <div class="a">
  1065. <span class="asker">{Asker} whispered:</span>
  1066. <span class="q">{Question}</span>
  1067. </div>
  1068. <div class="text">{Answer}</div>
  1069. {/block:Answer}
  1070.  
  1071. {block:Chat}
  1072. {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
  1073. <div class="text">
  1074. {block:Lines}<div class="{Alt}">
  1075. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  1076. {/block:Lines}
  1077. </div>
  1078. {/block:Chat}
  1079.  
  1080. {block:link}
  1081. <a href="{URL}"><div class="ltitle">{Name} ▷</div></a>
  1082. {block:Description}<div class="text">{Description}</div>{/block:Description}
  1083. {/block:link}
  1084.  
  1085. {block:indexpage}{block:date}
  1086. <div class="permalink">
  1087. <a href="{ReblogURL}">reblog</a>
  1088. <a href="{permalink}">{timeago}</a>
  1089. <a href="{permalink}">{NoteCountWithLabel}</a>
  1090. {/block:date}{/block:indexpage}
  1091. </div><!--permalink-->
  1092.  
  1093. {block:permalinkpage}
  1094. {block:date}<div class="permainfo">
  1095. Posted on <b>{DayOfMonth} {Month} {Year}</b>, at <b>{12Hour}.{Minutes}{AmPm}</b>, with <b>{NoteCountWithLabel}</b><br>
  1096. {block:RebloggedFrom}
  1097. Reblogged via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
  1098. {/block:RebloggedFrom}
  1099. {block:HasTags}<div class="ptags">{block:Tags}
  1100. <a href="{TagURL}">#{Tag} </a>
  1101. {/block:Tags}</div>{/block:HasTags}
  1102. </div>{/block:date}
  1103. {block:date}{block:NoteCount}<div id="notecon">
  1104. {PostNotes-16}
  1105. </div><!--notecon-->{/block:NoteCount}{/block:date}
  1106. {/block:permalinkpage}
  1107.  
  1108. </div>{/block:posts}
  1109.  
  1110. {block:ContentSource}
  1111. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1112. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1113. {/block:SourceLogo}
  1114. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1115. {/block:ContentSource}
  1116.  
  1117. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}-->
  1118.  
  1119. {block:ifnotinfinitescroll}
  1120. {block:pagination}<div class="pagi">
  1121. {block:PreviousPage}
  1122. <a href="{PreviousPage}">←</a>
  1123. {/block:PreviousPage}
  1124. {block:JumpPagination length="7"}
  1125. {block:CurrentPage}
  1126. <span class="current_page">{PageNumber}</span>
  1127. {/block:CurrentPage}
  1128. {block:JumpPage}
  1129. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1130. {/block:JumpPage}
  1131. {/block:JumpPagination}
  1132. {block:NextPage}
  1133. <a href="{NextPage}">→</a>
  1134. {/block:NextPage}
  1135. </div><!--pagination-->{/block:pagination}
  1136. {/block:ifnotinfinitescroll}
  1137.  
  1138. </div><!--content-->
  1139.  
  1140. <div class="pagination">
  1141. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  1142. </div>
  1143.  
  1144. </body>
  1145. </html>
Advertisement
RAW Paste Data Copied
Advertisement