API tools faq
paste
Advertisement
mogimochi

Theme [08] Queen of Lies

mogimochi
Oct 6th, 2012
24,886
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 08 Queen of Lies
  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] ++ [YUKOKI REVAMP PACK #03] ++
  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 'Haru'.
  18.  
  19. It was originally a giveaway theme, won by korumi. \o/
  20.  
  21. ---------------------------------------------------------- VER 231114 -->
  22.  
  23. <meta name="color:background" content="#fcfcfc" />
  24.  
  25. <meta name="color:sidebar background" content="#141414">
  26.  
  27. <meta name="color:custom links bar bg" content="#ffffff">
  28. <meta name="color:custom links bg" content="#252525">
  29. <meta name="color:custom links text" content="#9b9b9b">
  30. <meta name="color:custom links first letter" content="#681e2c">
  31. <meta name="color:custom links hover bg" content="#494949">
  32. <meta name="color:custom links hover text" content="#ffffff">
  33.  
  34. <meta name="color:navigation text" content="#b4b4b4">
  35. <meta name="color:navigation background" content="#4b4b4b">
  36. <meta name="color:navigation hover text" content="#ffffff">
  37. <meta name="color:navigation hover space" content="#3f1f1f">
  38.  
  39. <meta name="color:blog title" content="#a1a1a1">
  40. <meta name="color:blog title border" content="#5f2227">
  41.  
  42. <meta name="color:desc background" content="#020202">
  43. <meta name="color:desc text" content="#8a8a8a" />
  44. <meta name="color:desc links" content="#b63030" />
  45. <meta name="color:desc links hover" content="#d1d3d0" />
  46. <meta name="color:desc bold" content="#612626" />
  47. <meta name="color:desc italic" content="#e4e4e4" />
  48.  
  49. <meta name="color:post background" content="#1f1f1f" />
  50.  
  51. <meta name="color:body" content="#a1a1a1" />
  52. <meta name="color:body links" content="#cb5d5d" />
  53. <meta name="color:body links hover" content="#e8e8e8" />
  54. <meta name="color:bold text" content="#cacaca" />
  55. <meta name="color:italic text" content="#696969" />
  56. <meta name="color:blockquote" content="#dbdada" />
  57.  
  58. <meta name="color:post title" content="#a3a3a3" />
  59. <meta name="color:post title background" content="#72363b" />
  60. <meta name="color:link post title" content="#bbbbbb" />
  61. <meta name="color:link post title hover" content="#ffffff" />
  62. <meta name="color:link title background" content="#4b272a" />
  63. <meta name="color:post quote" content="#969696" />
  64.  
  65. <meta name="color:tags" content="#a0a0a0" />
  66. <meta name="color:tags hover" content="#dfdfdf" />
  67.  
  68. <meta name="color:audio lines" content="#f5f5f5">
  69. <meta name="color:audio text" content="#7a7a7a">
  70.  
  71. <meta name="color:ask background" content="#2e2e2e" />
  72. <meta name="color:asker link" content="#a64848" />
  73. <meta name="color:asker link hover" content="#fcfcfc" />
  74. <meta name="color:asker text" content="#ababab" />
  75. <meta name="color:ask text" content="#b7b7b7" />
  76.  
  77. <meta name="color:chat even background" content="#1f1f1f" />
  78. <meta name="color:chat even name" content="#aa4848" />
  79. <meta name="color:chat even text" content="#797979" />
  80. <meta name="color:chat odd background" content="#121212" />
  81. <meta name="color:chat odd name" content="#c5c5c3" />
  82. <meta name="color:chat odd text" content="#747373" />
  83.  
  84. <meta name="color:perma bg" content="#121212" />
  85. <meta name="color:perma text" content="#9b9b9b" />
  86. <meta name="color:perma links" content="#dedede" />
  87. <meta name="color:perma links hover" content="#757575" />
  88.  
  89. <meta name="color:pagination bg" content="#792121" />
  90. <meta name="color:pagination text" content="#ffffff" />
  91. <meta name="color:pagination bg hover" content="#444444" />
  92. <meta name="color:pagination text hover" content="#af3f3f" />
  93.  
  94. <meta name="color:scrollbar bg" content="#4d4b4a" />
  95. <meta name="color:scrollbar" content="#80272d" />
  96.  
  97. <meta name="image:background" content="">
  98. <meta name="image:sidebar" content="">
  99. <meta name="image:custom links background" content="">
  100.  
  101. <meta name="text:billy music player code" content="">
  102. <meta name="text:link 1" content="">
  103. <meta name="text:link 1 URL" content="">
  104. <meta name="text:link 2" content="">
  105. <meta name="text:link 2 URL" content="">
  106. <meta name="text:link 3" content="">
  107. <meta name="text:link 3 URL" content="">
  108. <meta name="text:link 4" content="">
  109. <meta name="text:link 4 URL" content="">
  110. <meta name="text:link 5" content="">
  111. <meta name="text:link 5 URL" content="">
  112. <meta name="text:link 6" content="">
  113. <meta name="text:link 6 URL" content="">
  114.  
  115. <meta name="if:post type 1" content="1">
  116. <meta name="if:post type 2" content="0">
  117. <meta name="if:post type 3" content="0">
  118. <meta name="if:reblog button" content="0">
  119. <meta name="if:infinite scroll" content="0">
  120. <meta name="if:music player" content="0">
  121. <meta name="if:photo fading" content="1">
  122. <meta name="if:monochrome posts" content="0">
  123. <meta name="if:show tags" content="1">
  124. <meta name="if:white audio player" content="0">
  125. <meta name="if:shadows" content="1">
  126. <meta name="if:sidebar on left" content="1">
  127.  
  128. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  129. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  130. <link rel="shortcut icon" href="{Favicon}" />
  131.  
  132. <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  133. <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
  134. <link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>
  135.  
  136. <style type="text/css">
  137.  
  138. iframe#tumblr_controls {
  139. z-index: 100000; right:3px !important; position:fixed !important; opacity: 0.2;
  140. -webkit-transition: all 0.4s ease-in-out;
  141. -moz-transition: all 0.4s ease-in-out;
  142. -o-transition: all 0.4s ease-in-out;
  143. -ms-transition: all 0.4s ease-in-out;
  144. transition: all 0.4s ease-in-out;
  145. }
  146. iframe#tumblr_controls:hover {
  147. opacity: 1;
  148. -webkit-transition: all 0.4s ease-in-out;
  149. -moz-transition: all 0.4s ease-in-out;
  150. -o-transition: all 0.4s ease-in-out;
  151. -ms-transition: all 0.4s ease-in-out;
  152. transition: all 0.4s ease-in-out;
  153. }
  154.  
  155. ::-webkit-scrollbar { width: 7px; }
  156. ::-webkit-scrollbar-track-piece { background-color:{color:scrollbar bg}; }
  157. ::-webkit-scrollbar-thumb:vertical {
  158. width: 10px;
  159. background-color: {color:scrollbar};
  160. }
  161.  
  162. body {
  163. background-color: {color:background};
  164. background-image: url({image:background});
  165. background-attachment: fixed;
  166. margin: 0;
  167. word-wrap: break-word;
  168. }
  169. a { text-decoration:none;
  170. -webkit-transition: all 0.4s ease-in-out;
  171. -moz-transition: all 0.4s ease-in-out;
  172. -o-transition: all 0.4s ease-in-out;
  173. -ms-transition: all 0.4s ease-in-out;
  174. transition: all 0.4s ease-in-out;}
  175.  
  176. #content {
  177. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  178. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  179. {block:ifposttype3}width: 700px;{/block:ifposttype3}
  180. {block:ifnotsidebaronleft}
  181. margin: 10px 0 0 150px;
  182. {/block:ifnotsidebaronleft}
  183. {block:ifsidebaronleft}
  184. margin: 10px 0 0 400px;
  185. {/block:ifsidebaronleft}
  186. }
  187. .posts {
  188. padding: 10px;
  189. background-color: {color:post background};
  190. margin: 10px 0;
  191. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  192. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  193. {block:ifposttype3}width: 250px;margin: 10px;{/block:ifposttype3}
  194. {block:ifshadows}box-shadow: -5px 5px 10px 1px #808080;{/block:ifshadows}
  195. }
  196.  
  197. .posts img {
  198. {block:ifposttype1}max-width: 500px;{/block:ifposttype1}
  199. {block:ifposttype2}max-width: 400px;{/block:ifposttype2}
  200. {block:ifposttype3}max-width: 250px;{/block:ifposttype3}
  201. display: block;
  202. }
  203. .posts blockquote img {max-width: 100%;}
  204.  
  205. .postu {
  206. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  207. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  208. {block:ifposttype3}width: 400px;{/block:ifposttype3}
  209. {block:ifphotofading}opacity: 0.8;{/block:ifphotofading}
  210. display: block;
  211. {block:Ifmonochromeposts}
  212. 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+ */
  213. filter: gray; /* IE6-9 */
  214. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  215. {/block:Ifmonochromeposts}
  216. -webkit-transition: all 0.4s ease-in-out;
  217. -moz-transition: all 0.4s ease-in-out;
  218. -o-transition: all 0.4s ease-in-out;
  219. -ms-transition: all 0.4s ease-in-out;
  220. transition: all 0.4s ease-in-out;
  221. }
  222. .posts:hover .postu {
  223. opacity: 1;
  224. {block:IfMonochromePosts}
  225. filter: none;
  226. -webkit-filter: grayscale(0%);
  227. {/block:IfMonochromePosts}
  228. }
  229.  
  230. .title {
  231. font-family: 'Economica', sans-serif;
  232. text-transform: uppercase;
  233. background-color: {color:post title background};
  234. font-size: 16px;
  235. letter-spacing: 5px;
  236. padding: 5px 0 5px 30px;
  237. color: {color:post title};
  238. }
  239. .ltitle {
  240. font-family: 'Economica', sans-serif;
  241. text-transform: uppercase;
  242. background-color: {color:link title background};
  243. font-size: 16px;
  244. letter-spacing: 5px;
  245. padding: 5px 0 5px 30px;
  246. color: {color:link post title};
  247. -webkit-transition: all 0.4s ease-in-out;
  248. -moz-transition: all 0.4s ease-in-out;
  249. -o-transition: all 0.4s ease-in-out;
  250. -ms-transition: all 0.4s ease-in-out;
  251. transition: all 0.4s ease-in-out;
  252. }
  253. .ltitle:hover { color: {color:link post title hover};}
  254.  
  255. blockquote {
  256. border-left: 3px solid {color:blockquote};
  257. padding-left: 10px;
  258. margin-left: 10px;
  259. }
  260. .text {
  261. font-family: calibri;
  262. font-size: 12px;
  263. color: {color:body};
  264. }
  265. .text ul {list-style-type: square;}
  266. .text a, .src a, .permalinkpg a {color: {color:body links};
  267. -webkit-transition: all 0.4s ease-in-out;
  268. -moz-transition: all 0.4s ease-in-out;
  269. -o-transition: all 0.4s ease-in-out;
  270. -ms-transition: all 0.4s ease-in-out;
  271. transition: all 0.4s ease-in-out;}
  272. .text a:hover, .src a:hover, .permalinkpg a:hover {color: {color:body links hover};}
  273.  
  274. .quote {
  275. font-family: 'Economica', sans-serif;
  276. text-transform: uppercase;
  277. font-size: 16px;
  278. margin-left: -10px;
  279. padding: 10px 10px 0 10px;
  280. text-align: right;
  281. border-bottom: 1px dashed {color: bold text};
  282. color: {color:post quote};
  283. }
  284. .src {
  285. margin-top: -20px;
  286. font-family: source code pro;
  287. text-transform: uppercase;
  288. font-size: 10px;
  289. color: {color:body};
  290. padding: 0 5px 10px 0;
  291. text-align: right;
  292. }
  293. .odd .line {background-color: {color:chat odd background};padding: 3px 5px;color:{color:chat odd text};}
  294. .even .line {background-color: {color:chat even background};padding: 3px 5px;color:{color:chat even text};}
  295. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  296. .even .name {color: {color:chat even name};padding: 3px 5px;}
  297.  
  298. #album {
  299. width: 150px;
  300. height: 150px;
  301. background-color: #888;
  302. {block:ifposttype1}position: absolute;{/block:ifposttype1}
  303. {block:ifposttype2}position: absolute;{/block:ifposttype2}
  304. {block:ifposttype3}width: 250px;height: 250px;{/block:ifposttype3}
  305.  
  306. {block:permalinkpage}{block:ifposttype3}
  307. position: absolute;
  308. width: 150px;
  309. height: 150px;
  310. {/block:ifposttype3}{/block:permalinkpage}
  311. }
  312. .noalbum {
  313. {block:ifposttype1}width: 150px;height: 150px;{/block:ifposttype1}
  314. {block:ifposttype2}width: 150px;height: 150px;{/block:ifposttype2}
  315. background-color: #888;
  316. z-index: 50;
  317. {block:ifposttype3}width: 250px;height: 250px;{/block:ifposttype3}
  318.  
  319. {block:permalinkpage}
  320. {block:ifposttype3}
  321. width: 150px;
  322. height: 150px;
  323. {/block:ifposttype3}
  324. {/block:permalinkpage}
  325. }
  326. .albumart {
  327. {block:ifposttype1}width: 150px;height: 150px;{/block:ifposttype1}
  328. {block:ifposttype2}width: 150px;height: 150px;{/block:ifposttype2}
  329. z-index: 50;
  330. {block:ifposttype3}max-width: 250px;max-height: 250px;{/block:ifposttype3}
  331.  
  332. {block:permalinkpage}
  333. {block:ifposttype3}width: 150px;height: 150px;
  334. {/block:ifposttype3}
  335. {/block:permalinkpage}
  336. }
  337.  
  338. #audinfo {
  339. width: 340px;
  340. margin-left: 160px;
  341. min-height: 150px;
  342. {block:ifposttype3}
  343. position: absolute;
  344. z-index: 10;
  345. width:250px;
  346. margin-left: 0;
  347. margin-top: -200px;
  348. {/block:ifposttype3}
  349. {block:permalinkpage}
  350. {block:ifposttype3}
  351. position: static;
  352. width: 340px;
  353. margin-left: 160px;
  354. margin-top: 0;
  355. min-height: 150px;
  356. {/block:ifposttype3}{/block:permalinkpage}
  357. }
  358.  
  359. .aud {
  360. height: 27px;
  361. margin-bottom: 5px;
  362. {block:ifwhiteaudioplayer}
  363. background-color: #fff;
  364. {/block:ifwhiteaudioplayer}
  365. {block:ifnotwhiteaudioplayer}
  366. background-color: #000;
  367. {/block:ifnotwhiteaudioplayer}
  368. {block:ifposttype1}width: 340px;{/block:ifposttype1}
  369. {block:ifposttype2}width: 240px;{/block:ifposttype2}
  370. {block:ifposttype3}
  371. opacity: 0.1;
  372. {block:ifposttype3}
  373. {block:permalinkpage}
  374. {block:ifposttype3}width: 340px;opacity: 1;{/block:ifposttype3}
  375. {block:ifposttype2}width: 340px;{/block:ifposttype2}
  376. {/block:permalinkpage}
  377. -webkit-transition: all 0.4s ease-in-out;
  378. -moz-transition: all 0.4s ease-in-out;
  379. -o-transition: all 0.4s ease-in-out;
  380. -ms-transition: all 0.4s ease-in-out;
  381. transition: all 0.4s ease-in-out;
  382. }
  383. .posts:hover .aud, .posts:hover .audline {
  384. {block:ifposttype3}opacity: 0.4;{/block:ifposttype3}
  385. }
  386.  
  387. .audline {
  388. {block:ifposttype1}width: 320px;{/block:ifposttype1}
  389. {block:ifposttype2}width: 220px;{/block:ifposttype2}
  390. {block:ifposttype3}opacity: 0.1;{/block:ifposttype3}
  391. {block:permalinkpage}
  392. {block:ifposttype3}width: 320px;opacity: 1;{/block:ifposttype3}
  393. {/block:permalinkpage}
  394. text-align: left;
  395. height: 26px;
  396. margin-bottom: 5px;
  397. background-color: {color:audio lines};
  398. color: {color:audio text};
  399. padding: 0 10px;
  400. line-height: 27px;
  401. font-family: consolas;
  402. font-size: 10px;
  403. text-transform: uppercase;
  404. -webkit-transition: all 0.4s ease-in-out;
  405. -moz-transition: all 0.4s ease-in-out;
  406. -o-transition: all 0.4s ease-in-out;
  407. -ms-transition: all 0.4s ease-in-out;
  408. transition: all 0.4s ease-in-out;
  409. }
  410.  
  411. .posts:hover .audline:hover, .posts:hover .aud:hover { opacity: 1; }
  412.  
  413. #ask {
  414. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  415. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  416. {block:ifposttype3}width: 250px;{/block:ifposttype3}
  417. background-color: {color:ask background};
  418. }
  419. .askerportrait {
  420. margin: 10px;
  421. position: absolute;
  422. }
  423. .a {
  424. margin-left: 80px;
  425. min-height: 64px;
  426. padding: 10px;
  427. }
  428. .asker {
  429. color: {color:asker text};
  430. font-family: consolas;
  431. font-size: 10px;
  432. text-transform: uppercase;
  433. border-bottom: 1px dashed {color:asker text};
  434. }
  435. .asker a {color: {color:asker link};
  436. -webkit-transition: all 0.4s ease-in-out;
  437. -moz-transition: all 0.4s ease-in-out;
  438. -o-transition: all 0.4s ease-in-out;
  439. -ms-transition: all 0.4s ease-in-out;
  440. transition: all 0.4s ease-in-out;}
  441. .asker a:hover {color: {color:asker link hover};}
  442. .q {
  443. font-family: consolas;
  444. margin-top: 5px;
  445. font-size: 10px;
  446. color: {color:ask text};
  447. }
  448.  
  449. #notecontainer {
  450. padding: 10px;
  451. text-decoration: none;
  452. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  453. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  454. {block:ifposttype3}width: 500px;{/block:ifposttype3}
  455. }
  456. #notecontainer ol.notes {
  457. list-style-type: none;
  458. letter-spacing: -1px;
  459. font-size: 11px;
  460. color: {color:body};
  461. font-family: consolas, source code pro;
  462. text-decoration: none;
  463. margin: 0;
  464. {block:ifposttype1}width: 500px;{/block:ifposttype1}
  465. {block:ifposttype2}width: 400px;{/block:ifposttype2}
  466. {block:ifposttype3}width: 500px;{/block:ifposttype3}
  467. width: 500px;
  468. padding: 5px;
  469. text-align: left;
  470. }
  471. #notecontainer ol.notes a {color: {color:body links};}
  472. #notecontainer ol.notes a:hover {color: {color:hover body links};}
  473. #notecontainer img.avatar {
  474. margin-right: 5px;
  475. float: left;
  476. width: 10px;
  477. height: 10px;
  478. }
  479.  
  480. .permalinkpg {
  481. text-align: right;
  482. border-top: 1px dashed {color:bold text};
  483. border-bottom: 1px dashed {color:bold text};
  484. margin-top: 10px;
  485. font-family: source code pro;
  486. font-size: 10px;
  487. padding: 10px;
  488. color: {color:body};
  489. }
  490. .permalinkpg a {color:{color:body links};}
  491. .permalinkpg a:hover {color:{color:hover body links};}
  492.  
  493. #permalink {
  494. font-family: consolas, source code pro;
  495. font-size: 9px;
  496. text-transform: uppercase;
  497. text-align: center;
  498. background-color: {color:perma bg};
  499. color: {color:perma text};
  500. margin-top: 5px;
  501. padding: 3px 10px;
  502. {block:ifposttype1}width:480px;{/block:ifposttype1}
  503. {block:ifposttype2}width:380px;{/block:ifposttype2}
  504. -webkit-transition: all 0.4s ease-in-out;
  505. -moz-transition: all 0.4s ease-in-out;
  506. -o-transition: all 0.4s ease-in-out;
  507. -ms-transition: all 0.4s ease-in-out;
  508. transition: all 0.4s ease-in-out;
  509. }
  510. #permalink a { color: {color:perma links};}
  511. #permalink a:hover { color: {color:perma links hover}; }
  512.  
  513. #taggu a {
  514. font-size: 8px;
  515. letter-spacing: 1px;
  516. color: {color:tags};
  517. }
  518. #taggu a:hover { color: {color:tags hover};}
  519.  
  520. #sidebar {
  521. width: 170px;
  522. position: fixed;
  523. height: 440px;
  524. top: 90px;
  525. {block:ifsidebaronleft}left: 150px;{/block:ifsidebaronleft}
  526. {block:ifnotsidebaronleft}
  527. {block:ifposttype1}left: 695px;{/block:ifposttype1}
  528. {block:ifposttype2}left: 595px;{/block:ifposttype2}
  529. {block:ifposttype3}left: 750px;{/block:ifposttype3}
  530. {/block:ifnotsidebaronleft}
  531. background-color: {color:sidebar background};
  532. border: 10px solid {color:sidebar background};
  533. {block:ifshadows}box-shadow: -5px 5px 5px 1px #808080;{/block:ifshadows}
  534. }
  535. .sbpic {width: 170px;height:440px;display: block;position: absolute;
  536. -webkit-transition: all 0.8s ease-in-out;
  537. -moz-transition: all 0.8s ease-in-out;
  538. -o-transition: all 0.8s ease-in-out;
  539. -ms-transition: all 0.8s ease-in-out;
  540. transition: all 0.8s ease-in-out;}
  541.  
  542. #nav {
  543. width: 180px;
  544. position: fixed;
  545. margin: -20px -5px;
  546. }
  547.  
  548. #navi {
  549. float: left;
  550. width:40px;
  551. text-align: center;
  552. font-family: consolas;
  553. font-size: 10px;
  554. text-transform: uppercase;
  555. margin: 0 2px;
  556. height: 10px;
  557. line-height: 10px;
  558. }
  559. .aa {background-color: {color:sidebar background};color: {color:navigation hover text};border-top:0 solid {color:sidebar background};
  560. -webkit-transition: all 0.4s ease-in-out;
  561. -moz-transition: all 0.4s ease-in-out;
  562. -o-transition: all 0.4s ease-in-out;
  563. -ms-transition: all 0.4s ease-in-out;
  564. transition: all 0.4s ease-in-out;}
  565. .b {background-color: {color:navigation background};color: {color:navigation text};border-top:0 solid {color:sidebar background};
  566. -webkit-transition: all 0.4s ease-in-out;
  567. -moz-transition: all 0.4s ease-in-out;
  568. -o-transition: all 0.4s ease-in-out;
  569. -ms-transition: all 0.4s ease-in-out;
  570. transition: all 0.4s ease-in-out;}
  571. .c {background-color: {color:navigation background};color: {color:navigation text};border-top:0 solid {color:sidebar background};
  572. -webkit-transition: all 0.4s ease-in-out;
  573. -moz-transition: all 0.4s ease-in-out;
  574. -o-transition: all 0.4s ease-in-out;
  575. -ms-transition: all 0.4s ease-in-out;
  576. transition: all 0.4s ease-in-out;}
  577. .d {background-color: {color:navigation background};color: {color:navigation text};border-top:0 solid {color:sidebar background};
  578. -webkit-transition: all 0.4s ease-in-out;
  579. -moz-transition: all 0.4s ease-in-out;
  580. -o-transition: all 0.4s ease-in-out;
  581. -ms-transition: all 0.4s ease-in-out;
  582. transition: all 0.4s ease-in-out;}
  583. #nav:hover .aa {background-color: {color:navigation background};color: {color:navigation text};}
  584. .aa:hover, .b:hover, .c:hover, .d:hover, #nav:hover .aa:hover { background-color: {color:sidebar background};color: {color:navigation hover text};border-top: 10px solid {color:navigation hover space};}
  585.  
  586. .desc {
  587. position:absolute;
  588. background-color: {color:desc background};
  589. color: {color:desc text};
  590. font-family: consolas;
  591. margin: 315px 10px 10px 10px;
  592. font-size: 10px;
  593. width: 130px;
  594. overflow: auto;
  595. height: 90px;
  596. padding: 10px;
  597. text-align: justify;
  598. opacity: 0.1;
  599. -webkit-transition: all 0.8s ease-in-out;
  600. -moz-transition: all 0.8s ease-in-out;
  601. -o-transition: all 0.8s ease-in-out;
  602. -ms-transition: all 0.8s ease-in-out;
  603. transition: all 0.8s ease-in-out;}
  604. .desc b,strong { color:{color:desc bold};}
  605. .desc i,em { color:{color:desc italic};}
  606. .desc a { color:{color:desc links};
  607. -webkit-transition: all 0.4s ease-in-out;
  608. -moz-transition: all 0.4s ease-in-out;
  609. -o-transition: all 0.4s ease-in-out;
  610. -ms-transition: all 0.4s ease-in-out;
  611. transition: all 0.4s ease-in-out;}
  612. .desc a:hover { color:{color:desc links hover};}
  613. #sidebar:hover .desc {
  614. opacity: 0.9;
  615. padding: 10px;
  616. margin: 320px 10px 10px 10px;
  617. }
  618.  
  619. .btitle {
  620. position: fixed;
  621. width: 10px;
  622. color: {color:blog title};
  623. margin: 0 185px;
  624. border-left: 3px solid {color:blog title border};
  625. padding: 0 5px;
  626. font-family: courier new;
  627. }
  628.  
  629. #custom {
  630. position: fixed;
  631. margin: auto 40px;
  632. top: 0;
  633. padding: 170px 10px 10px 10px;
  634. width: 64px;
  635. height: 100%;
  636. background-color: {color:custom links bar bg};
  637. background-image: url({image:custom links background});
  638. }
  639. .icon {
  640. display: block;
  641. margin-top: 30px;
  642. position: absolute;
  643. border-radius: 60px 0 60px 0;
  644. }
  645. .icon2 {
  646. display: block;
  647. margin-top: 30px;
  648. margin-bottom: 5px;
  649. border-radius: 0 60px 0 60px;
  650. }
  651. .customl {
  652. margin-top: 10px;
  653. width: 64px;
  654. -webkit-transition: all 1.2s ease-in-out;
  655. -moz-transition: all 1.2s ease-in-out;
  656. -o-transition: all 1.2s ease-in-out;
  657. -ms-transition: all 1.2s ease-in-out;
  658. transition: all 1.2s ease-in-out;}
  659.  
  660.  
  661. .cl {
  662. color: {color:custom links text};
  663. padding: 1px 5px;
  664. background-color: {color:custom links bg};
  665. font-family: consolas;
  666. font-size: 10px;
  667. margin: 2px 0;
  668. text-align: center;
  669. -webkit-transition: all 0.4s ease-in-out;
  670. -moz-transition: all 0.4s ease-in-out;
  671. -o-transition: all 0.4s ease-in-out;
  672. -ms-transition: all 0.4s ease-in-out;
  673. transition: all 0.4s ease-in-out;
  674. }
  675. .cl:first-letter {color:{color:custom links first letter};}
  676. .cl:hover {
  677. background-color: {color:custom links hover bg};
  678. color: {color:custom links hover text};
  679. padding: 10px 5px;
  680. }
  681. .taggu {
  682. line-height: 10px;
  683. color: {color:tags};
  684. position: absolute;
  685. max-width: 200px;
  686. margin-top: 10px;
  687. opacity: 0;
  688. {block:ifposttype1}margin-left: 520px;{/block:ifposttype1}
  689. {block:ifposttype2}margin-left: 410px;{/block:ifposttype2}
  690. -webkit-transition: all 0.4s ease-in-out;
  691. -moz-transition: all 0.4s ease-in-out;
  692. -o-transition: all 0.4s ease-in-out;
  693. -ms-transition: all 0.4s ease-in-out;
  694. transition: all 0.4s ease-in-out;
  695. }
  696. .posts:hover .taggu {margin-top: 0px;opacity:1;}
  697.  
  698. .taggu a {
  699. font-family: consolas, source code pro;
  700. font-size: 9px;
  701. letter-spacing: 1px;
  702. color: {color:tags};
  703. -webkit-transition: all 0.4s ease-in-out;
  704. -moz-transition: all 0.4s ease-in-out;
  705. -o-transition: all 0.4s ease-in-out;
  706. -ms-transition: all 0.4s ease-in-out;
  707. transition: all 0.4s ease-in-out;
  708. }
  709.  
  710. .taggu a:hover {color: {color:tags hover};}
  711.  
  712. #pagination {
  713. position: fixed;
  714. font-family: consolas;
  715. font-size: 16px;
  716. bottom: 10px;
  717. width: 30px;
  718. {block:ifsidebaronleft}
  719. {block:ifposttype1}left: 930px;{/block:ifposttype1}
  720. {block:ifposttype2}left: 820px;{/block:ifposttype2}
  721. {/block:ifsidebaronleft}
  722. {block:ifnotsidebaronleft}
  723. left: 60px;
  724. {/block:ifnotsidebaronleft}
  725. }
  726. #pagination a {
  727. background-color: {color:pagination bg};
  728. color: {color:pagination text};
  729. padding: 0 15px;
  730. line-height: 24px;
  731. -webkit-transition: all 0.4s ease-in-out;
  732. -moz-transition: all 0.4s ease-in-out;
  733. -o-transition: all 0.4s ease-in-out;
  734. -ms-transition: all 0.4s ease-in-out;
  735. transition: all 0.4s ease-in-out;
  736. }
  737. #pagination a:hover {
  738. background-color: {color:pagination bg hover};
  739. color: {color:pagination text hover};
  740. }
  741.  
  742. .text b,strong {color:{color:bold text};}
  743. .text i,em {color:{color:italic text};}
  744.  
  745. #warning {
  746. z-index: -10000;
  747. position: fixed;
  748. top: 0;left: 0;
  749. width: 100%;
  750. height: 100%;
  751. background-color: #000;
  752. color: #fff;
  753. text-align: center;
  754. padding-top: 250px;
  755. font-family: courier new;
  756. font-size: 12px;
  757. opacity: 0;
  758. {block:ifposttype1}
  759. {block:ifposttype3}opacity: 1;z-index:10000;{/block:ifposttype3}
  760. {block:ifposttype2}opacity: 1;z-index:10000;{/block:ifposttype2}
  761. {block:ifposttype2}{block:ifposttype3}opacity: 1;z-index:10000;{/block:ifposttype3}{/block:ifposttype2}
  762. {/block:ifposttype1}
  763. {block:ifposttype2}{block:ifposttype3}opacity: 1;z-index:10000;{/block:ifposttype3}{/block:ifposttype2}
  764. {block:ifnotposttype1}{block:ifnotposttype2}{block:ifnotposttype3}opacity: 1;z-index:10000;{/block:ifnotposttype3}{/block:ifnotposttype2}{/block:ifnotposttype1}
  765. }
  766.  
  767. #ongaku {
  768. width: 25px;
  769. height: 25px;
  770. overflow: hidden;
  771. position: absolute;
  772. z-index: 1000;
  773. background-color: {color:custom links bg};
  774. margin: 50px 20px;
  775. opacity: 0.3;
  776. border-radius: 50px;
  777. -moz-border-radius: 50px;
  778. -webkit-border-radius: 50px;
  779. -webkit-transition: all 0.4s ease-in-out;
  780. -moz-transition: all 0.4s ease-in-out;
  781. -o-transition: all 0.4s ease-in-out;
  782. -ms-transition: all 0.4s ease-in-out;
  783. transition: all 0.4s ease-in-out;
  784. }
  785. #ongaku:hover { opacity: 1; }
  786. .musicgif {
  787. margin: 2px 2px 2px 5px;
  788. -webkit-transition: all 0.4s ease-in-out;
  789. -moz-transition: all 0.4s ease-in-out;
  790. -o-transition: all 0.4s ease-in-out;
  791. -ms-transition: all 0.4s ease-in-out;
  792. transition: all 0.4s ease-in-out;
  793. }
  794. #ongaku:hover .musicgif {margin-top: -27px;}
  795.  
  796. #musicpl {
  797. background-color: {color:custom links bg};
  798. width: 20px;
  799. overflow: hidden;
  800. height: 20px;
  801. padding: 2px 20px 10px 0px;
  802. margin-left: -17px;
  803. }
  804.  
  805. {CustomCSS}
  806.  
  807. </style>
  808.  
  809. {block:indexpage}
  810. {block:ifposttype3}
  811. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  812.  
  813. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  814. <script type="text/javascript">
  815. $(window).load(function () {
  816. $('#content').masonry({
  817. itemSelector : ".posts",
  818. },
  819. function() { $('#content').masonry({ appendedContent: $(this) }); }
  820. );
  821. });
  822. </script>
  823. {/block:ifposttype3}
  824. {block:ifnotposttype3}{block:ifinfinitescroll}
  825. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  826. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j("img").lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script>
  827. {/block:ifinfinitescroll}{/block:ifnotposttype3}
  828. {/block:indexpage}
  829.  
  830. </head>
  831. <body>
  832.  
  833. <div id="warning">please pick only one post size!</div>
  834.  
  835. <div id="custom">
  836.  
  837. {block:ifmusicplayer}
  838. <div id="ongaku">
  839. <div class="musicgif"><img src="http://media.tumblr.com/tumblr_m7vzw2cqLS1r6o8v2.gif"/></div>
  840. <div id="musicpl">
  841. {text:billy music player code}
  842. </div>
  843. </div><!--ongaku-->
  844. {/block:ifmusicplayer}
  845.  
  846. <img class="icon" src="{PortraitURL-64}">
  847. <img class="icon2" src="{PortraitURL-64}">
  848. <div class="customl">
  849. {block:iflink1}<a href="{text:link 1 URL}"><div class="cl">{text:link 1}</div></a>{/block:iflink1}
  850. {block:iflink2}<a href="{text:link 2 URL}"><div class="cl">{text:link 2}</div></a>{/block:iflink2}
  851. {block:iflink3}<a href="{text:link 3 URL}"><div class="cl">{text:link 3}</div></a>{/block:iflink3}
  852. {block:iflink4}<a href="{text:link 4 URL}"><div class="cl">{text:link 4}</div></a>{/block:iflink4}
  853. {block:iflink5}<a href="{text:link 5 URL}"><div class="cl">{text:link 5}</div></a>{/block:iflink5}
  854. {block:iflink6}<a href="{text:link 6 URL}"><div class="cl">{text:link 6}</div></a>{/block:iflink6}
  855. </div>
  856. </div><!--custom-->
  857.  
  858. <div id="sidebar">
  859. <div id="nav">
  860. <a href="/"><div id="navi" class="aa">index</div></a>
  861. <a href="/ask"><div id="navi" class="b">ask</div></a>
  862. <a href="/archive"><div id="navi" class="c">past</div></a>
  863. <a href="http://yukoki.tumblr.com"><div id="navi" class="d">credit</div></a>
  864. </div><!--nav-->
  865. <div class="btitle">{title}</div>
  866. <img class="sbpic" src="{image:sidebar}">
  867. <div class="desc">{description}</div>
  868. </div><!--sidebar-->
  869.  
  870. <!--content-->
  871.  
  872. <div id="content">
  873. {block:Posts}<div class="posts">
  874.  
  875. {block:ifsidebaronleft}
  876. {block:indexpage}{block:ifshowtags}{block:ifnotposttype3}
  877. {block:HasTags}<div class="taggu">{block:Tags}
  878. <a href="{TagURL}">#{Tag} </a><br>
  879. {/block:Tags}</div>{/block:HasTags}
  880. {/block:ifnotposttype3}{/block:ifshowtags}{/block:indexpage}
  881. {/block:ifsidebaronleft}
  882.  
  883. {block:Photo}
  884. {LinkOpenTag}<div class="postu">
  885. {block:ifposttype1}<img src="{PhotoURL-500}" />{/block:ifposttype1}
  886. {block:ifposttype2}<img src="{PhotoURL-400}" />{/block:ifposttype2}
  887. {block:ifposttype3}<img src="{PhotoURL-250}" />{/block:ifposttype3}
  888. </div>
  889. {LinkCloseTag}
  890. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  891. {/block:Photo}
  892.  
  893. {block:Photoset}
  894. <div class="postu">
  895. {block:ifposttype1}{Photoset-500}{/block:ifposttype1}
  896. {block:ifposttype2}{Photoset-400}{/block:ifposttype2}
  897. {block:ifposttype3}{Photoset-250}{/block:ifposttype3}
  898. </div>
  899. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  900. {/block:Photoset}
  901.  
  902. {block:Video}
  903. <div class="postu">
  904. {block:ifposttype1}{Video-500}{/block:ifposttype1}
  905. {block:ifposttype2}{Video-400}{/block:ifposttype2}
  906. {block:ifposttype3}{Video-250}{/block:ifposttype3}
  907. </div>
  908. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  909. {/block:Video}
  910.  
  911. {block:Audio}
  912. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  913. <div id="audinfo">
  914. <div class="aud">{block:ifwhiteaudioplayer}{AudioPlayerWhite}{/block:ifwhiteaudioplayer}{block:ifnotwhiteaudioplayer}{AudioPlayerBlack}{/block:ifnotwhiteaudioplayer}</div>
  915. {block:TrackName}<div class="audline">Track: {TrackName}</div>{/block:TrackName}
  916. {block:Album}<div class="audline">Album: {Album}</div>{/block:Album}
  917. {block:Artist}<div class="audline">Artist: {Artist}</div>{/block:Artist}
  918. <div class="audline">{PlayCountWithLabel}</div>
  919. </div><!--audinfo-->
  920. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  921. {/block:Audio}
  922.  
  923. {block:Quote}
  924. <div class="quote">“{Quote}”</div>
  925. {block:Source}<br><div class="src">- {Source}</div>{/block:Source}
  926. {/block:Quote}
  927.  
  928. {block:Text}
  929. {block:Title}<div class="title">{Title}</div>{/block:Title}
  930. <div class="text">{body}</div>
  931. {/block:Text}
  932.  
  933. {block:Answer}
  934. <div id="ask">
  935. <img class="askerportrait" src="{AskerPortraitURL-64}">
  936. <div class="a">
  937. <div class="asker">{Asker} whispered:</div>
  938. <div class="q">{Question}</div>
  939. </div>
  940. </div>
  941. <div class="text">{Answer}</div>
  942. {/block:Answer}
  943.  
  944. {block:Chat}
  945. {block:Title}<div class="title">{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}
  959.  
  960. <div id="permalink">
  961. Posted {block:date}<a href="{permalink}">{timeago}</a>{/block:date} with <a href="{permalink}">{NoteCountWithLabel}</a> || {block:ifreblogbutton}<a href="{ReblogURL}">Reblog</a>{/block:ifreblogbutton}
  962. {block:ifnotsidebaronleft}{block:ifshowtags}
  963. {block:HasTags}<div id="taggu"> >
  964. {block:Tags}
  965. <a href="{TagURL}">#{Tag} </a>
  966. {/block:Tags} < </div> {/block:HasTags}
  967. {/block:ifshowtags}{/block:ifnotsidebaronleft}
  968. </div><!--permalink-->
  969.  
  970. {/block:indexpage}
  971.  
  972. {block:permalinkpage}
  973.  
  974. <div class="permalinkpg">
  975. Posted at {block:date}{12hour}.{minutes}{ampm}, on {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}{/block:date}{block:notecount}, with {notecountwithlabel}{/block:notecount}.<br>
  976. {block:RebloggedFrom}Originally by <a href="{reblogrooturl}">{reblogrootname}</a>, reblogged via <a href="{reblogparenturl}">{reblogparentname}</a>.{/block:rebloggedfrom}<br>
  977. {block:HasTags}
  978. {block:tags}<a href="{tagurl}">#{tag} {/block:tags}
  979. {/block:HasTags}
  980. </div><!--permalinkpg-->
  981.  
  982. {block:PostNotes}
  983. <div id="notecontainer">{PostNotes}</div>
  984. {/block:PostNotes}
  985.  
  986. {/block:permalinkpage}
  987.  
  988. </div><!--posts-->{/block:Posts}
  989.  
  990. {block:ContentSource}
  991. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  992. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  993. {/block:SourceLogo}
  994. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  995. {/block:ContentSource}
  996.  
  997. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  998.  
  999. </div><!--content-->
  1000.  
  1001. {block:ifnotinfinitescroll}
  1002. <div id="pagination">
  1003. {block:pagination}
  1004. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  1005. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  1006. {/block:pagination}
  1007. </div><!--pagination-->
  1008. {/block:ifnotinfinitescroll}
  1009.  
  1010. </body>
  1011. </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!