API tools faq
paste
Advertisement
mogimochi

Theme [25] Shinjitsu

mogimochi
Jul 8th, 2013
35,430
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.36 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 25 Shinjitsu
  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 070216 -->
  16.  
  17. <meta name="color:background" content="#f0f0f0">
  18.  
  19. <meta name="color:post background" content="#ffffff" />
  20. <meta name="color:post border" content="#dce4c5">
  21. <meta name="color:post title" content="#8d8b8b">
  22. <meta name="color:post title bar" content="#93c0ad">
  23. <meta name="color:post title hover" content="#dadf84">
  24. <meta name="color:blockquote" content="#cfd6a0">
  25.  
  26. <meta name="color:body" content="#666666">
  27. <meta name="color:body links" content="#a5cf8a">
  28. <meta name="color:body links hover" content="#6dc59c">
  29. <meta name="color:body bold" content="#75bdac">
  30. <meta name="color:body italic" content="#d9e4b8">
  31.  
  32. <meta name="color:chat even background" content="#ffffff" />
  33. <meta name="color:chat even name" content="#76bea2" />
  34. <meta name="color:chat even text" content="#76bea2" />
  35. <meta name="color:chat odd background" content="#eeecec" />
  36. <meta name="color:chat odd name" content="#98a36e" />
  37. <meta name="color:chat odd text" content="#646464" />
  38.  
  39. <meta name="color:ask bg" content="#edf1d6">
  40. <meta name="color:ask text" content="#7c7b7b">
  41.  
  42. <meta name="color:tags" content="#aaaaaa">
  43. <meta name="color:tags hover" content="#777777">
  44.  
  45. <meta name="color:top bar background" content="#c3d5a9">
  46. <meta name="color:top bar border" content="#aab994">
  47. <meta name="color:top bar text" content="#fdfdfd">
  48. <meta name="color:top bar text hover" content="#928f8f">
  49. <meta name="color:top bar text hover bg" content="#d7ebbc">
  50.  
  51. <meta name="color:blog title" content="#888888">
  52. <meta name="color:blog title bar" content="#8cbea9">
  53.  
  54. <meta name="color:desc text" content="#8b8a8a">
  55. <meta name="color:desc first letter" content="#92a07e">
  56. <meta name="color:desc bold" content="#408a76">
  57. <meta name="color:desc italic" content="#a9b67c">
  58. <meta name="color:desc links" content="#dde285">
  59. <meta name="color:desc links hover" content="#747272">
  60.  
  61. <meta name="color:custom links background" content="#eff3db">
  62. <meta name="color:custom links text" content="#868585">
  63. <meta name="color:custom links border" content="#c3caa5">
  64. <meta name="color:custom links hover background" content="#ffffff">
  65. <meta name="color:custom links hover text" content="#b3afaf">
  66. <meta name="color:custom links hover border" content="#cdd3a6">
  67.  
  68. <meta name="color:perma bg" content="#dbe2bf">
  69. <meta name="color:perma text" content="#fffdfd">
  70.  
  71. <meta name="color:text highlight" content="#d0e2b6">
  72. <meta name="color:text highlight bg" content="#ffffff">
  73.  
  74. <meta name="image:background" content="">
  75. <meta name="image:sidebar" content="">
  76.  
  77. <meta name="if:big posts" content="1">
  78. <meta name="if:med posts" content="0">
  79. <meta name="if:show tags" content="1">
  80. <meta name="if:2 columns" content="0">
  81. <meta name="if:show captions" content="1">
  82. <meta name="if:music player" content="0">
  83. <meta name="if:photo fading" content="0">
  84. <meta name="if:monochrome posts" content="0">
  85. <meta name="if:speech bubble ask" content="1">
  86. <meta name="if:infinite scroll" content="0">
  87.  
  88. <meta name="text:billy music player code" content="">
  89. <meta name="text:link 1" content="">
  90. <meta name="text:link 2" content="">
  91. <meta name="text:link 3" content="">
  92. <meta name="text:link 4" content="">
  93. <meta name="text:link 5" content="">
  94. <meta name="text:link 6" content="">
  95. <meta name="text:link 7" content="">
  96. <meta name="text:link 8" content="">
  97. <meta name="text:link 1 URL" content="">
  98. <meta name="text:link 2 URL" content="">
  99. <meta name="text:link 3 URL" content="">
  100. <meta name="text:link 4 URL" content="">
  101. <meta name="text:link 5 URL" content="">
  102. <meta name="text:link 6 URL" content="">
  103. <meta name="text:link 7 URL" content="">
  104. <meta name="text:link 8 URL" content="">
  105.  
  106. <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
  107. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  108. <link rel="shortcut icon" href="{Favicon}" />
  109.  
  110. <link href='http://fonts.googleapis.com/css?family=Nova+Mono' rel='stylesheet' type='text/css'>
  111. <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
  112.  
  113. <style type="text/css">
  114.  
  115. .tmblr-iframe {
  116. z-index:999999999!important; margin-top: 13px;right:3px !important; position:fixed !important;
  117. }
  118.  
  119.  
  120. ::selection {
  121. background: {color:text highlight bg};
  122. color:{color:text highlight};
  123. }
  124.  
  125. ::-moz-selection {
  126. background: {color:text highlight bg};
  127. color:{color:text highlight};
  128. }
  129.  
  130. body {
  131. background-color: {color:background};
  132. background-image: url({image:background});
  133. background-attachment: fixed;
  134. margin: 0;
  135. word-wrap: break-word;
  136. }
  137. a { text-decoration:none; }
  138.  
  139. pre {
  140. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  141. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  142. {block:if2columns}width: 250px;{/block:if2columns}
  143. {block:permalinkpage}
  144. {block:if2columns}width: 500px;{/block:if2columns}
  145. {/block:permalinkpage}
  146. word-wrap: break-word;
  147. overflow: auto;
  148. }
  149.  
  150. #content {
  151. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  152. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  153. {block:if2columns}width: 564px;{/block:if2columns}
  154. {block:permalinkpage}
  155. {block:if2columns}width: 560px;{/block:if2columns}
  156. {/block:permalinkpage}
  157. margin-top: 60px;
  158. margin-left: auto;
  159. margin-right: auto;
  160. }
  161. .posts {
  162. margin: 20px 0;
  163. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  164. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  165. {block:if2columns}width: 250px;margin: 10px 5px;{/block:if2columns}
  166. {block:permalinkpage}
  167. {block:if2columns}width: 500px;{/block:if2columns}
  168. {/block:permalinkpage}
  169. background-color: {color:post background};
  170. padding: 10px;
  171. border: 1px solid {color:post border};
  172. -webkit-transition: all 0.4s ease-in-out;
  173. -moz-transition: all 0.4s ease-in-out;
  174. -o-transition: all 0.4s ease-in-out;
  175. -ms-transition: all 0.4s ease-in-out;
  176. transition: all 0.4s ease-in-out;
  177. }
  178.  
  179. .posts img {
  180. {block:ifbigposts}max-width: 500px;{/block:ifbigposts}
  181. {block:ifmedposts}max-width: 400px;{/block:ifmedposts}
  182. {block:if2columns}max-width: 250px;{/block:if2columns}
  183. {block:permalinkpage}
  184. {block:if2columns}max-width: 500px;{/block:if2columns}
  185. {/block:permalinkpage}
  186. border: 0;
  187. }
  188. .posts blockquote img {max-width: 100%;}
  189.  
  190. .postu {
  191. {block:indexpage}
  192. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  193. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  194. {block:if2columns}width: 250px;{/block:if2columns}
  195. {/block:indexpage}
  196. {block:permalinkpage}
  197. {block:if2columns}width: 500px;{/block:if2columns}
  198. {/block:permalinkpage}
  199. display: block;
  200. {block:ifphotofading}
  201. opacity: 0.8;
  202. {/block:ifphotofading}
  203. -webkit-transition: all 0.4s ease-in-out;
  204. -moz-transition: all 0.4s ease-in-out;
  205. -o-transition: all 0.4s ease-in-out;
  206. -ms-transition: all 0.4s ease-in-out;
  207. transition: all 0.4s ease-in-out;
  208. {block:IfMonochromePosts}
  209. 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+ */
  210. filter: gray; /* IE6-9 */
  211. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  212. -webkit-transition: all 0.7s linear;
  213. -moz-transition: all 0.7s linear;
  214. -o-transition: all 0.7s linear;
  215. {/block:IfMonochromePosts}
  216. }
  217. .posts:hover .postu {
  218. {block:IfMonochromePosts}
  219. filter: none;
  220. -webkit-filter: grayscale(0%);
  221. {/block:IfMonochromePosts}
  222. {block:ifphotofading}
  223. opacity: 1;
  224. {/block:ifphotofading}
  225. }
  226.  
  227. .titl {
  228. font-family: economica;
  229. font-size: 24px;
  230. {block:if2columns}font-size: 18px;{/block:if2columns}
  231. text-align: center;
  232. padding: 5px 10px;
  233. margin-bottom: 10px;
  234. width: auto;
  235. position: relative;
  236. z-index: 10;
  237. }
  238.  
  239. .titl a, .ltitl a {
  240. background-color: {color:post background};
  241. color: {color:post title};
  242. padding: 0 15px;
  243. -webkit-transition: all 0.4s ease-in-out;
  244. -moz-transition: all 0.4s ease-in-out;
  245. -o-transition: all 0.4s ease-in-out;
  246. -ms-transition: all 0.4s ease-in-out;
  247. transition: all 0.4s ease-in-out;
  248. }
  249.  
  250. .ti {
  251. background-color: {color:post title bar};
  252. {block:ifbigposts}height: 3px;width: 500px;margin-top: 20px;{/block:ifbigposts}
  253. {block:ifmedposts}height: 3px;width: 400px;margin-top: 20px;{/block:ifmedposts}
  254. {block:if2columns}height: 1px;width: 250px;margin-top: 15px;{/block:if2columns}
  255. {block:permalinkpage}
  256. {block:if2columns}height: 3px;width: 500px;{/block:if2columns}
  257. {/block:permalinkpage}
  258. position: absolute;
  259. z-index: 9;
  260. }
  261.  
  262. .ltitl {
  263. font-family: economica;
  264. font-size: 24px;
  265. {block:if2columns}font-size: 18px;{/block:if2columns}
  266. text-align: center;
  267. padding: 5px 10px;
  268. margin-bottom: 10px;
  269. width: auto;
  270. position: relative;
  271. z-index: 10;
  272. -webkit-transition: all 0.4s ease-in-out;
  273. -moz-transition: all 0.4s ease-in-out;
  274. -o-transition: all 0.4s ease-in-out;
  275. -ms-transition: all 0.4s ease-in-out;
  276. transition: all 0.4s ease-in-out;
  277. }
  278. .ltitl a:hover { color: {color:post title hover};}
  279.  
  280. blockquote {
  281. border-left: 3px solid {color:blockquote};
  282. padding-left: 10px;
  283. margin-left: 10px;
  284. }
  285. .text {
  286. font-family: calibri;
  287. font-size: 12px;
  288. text-align: justify;
  289. color: {color:body};
  290. }
  291. .text ul {list-style-type: square; list-style-color:blue;}
  292. .text a, .src a, .permalinkpg a {color: {color:body links};
  293. -webkit-transition: all 0.4s ease-in-out;
  294. -moz-transition: all 0.4s ease-in-out;
  295. -o-transition: all 0.4s ease-in-out;
  296. -ms-transition: all 0.4s ease-in-out;
  297. transition: all 0.4s ease-in-out;}
  298. .text a:hover, .src a:hover, .permalinkpg a:hover {color: {color:body links hover};}
  299.  
  300. .quote {
  301. font-family: economica;
  302. font-size: 20px;
  303. text-align: right;
  304. color: {color:post title};
  305. }
  306. .src {
  307. margin-top: -10px;
  308. font-family: calibri;
  309. font-size: 11px;
  310. color: {color:body};
  311. text-align: right;
  312. }
  313. .odd .line {background-color: {color:chat odd background};padding: 3px 5px;color:{color:chat odd text};}
  314. .even .line {background-color: {color:chat even background};padding: 3px 5px;color:{color:chat even text};}
  315. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  316. .even .name {color: {color:chat even name};padding: 3px 5px;}
  317.  
  318. #album {
  319. {block:ifnot2columns}
  320. width: 150px;height: 150px;
  321. {/block:ifnot2columns}
  322. {block:if2columns}
  323. width: 250px;height: 250px;
  324. {block:permalinkpage}
  325. width: 150px;height: 150px;
  326. {/block:permalinkpage}
  327. {/block:if2columns}
  328. background-color: #D6D6D6;
  329. overflow: hidden;
  330. }
  331. .noalbum {
  332. float: left;
  333. {block:ifnot2columns}
  334. width: 150px;height: 150px;
  335. {/block:ifnot2columns}
  336. {block:if2columns}
  337. width: 250px;height: 250px;
  338. {block:permalinkpage}
  339. width: 150px;height: 150px;
  340. {/block:permalinkpage}
  341. {/block:if2columns}
  342. background-color: #D6D6D6;
  343. z-index: 50;
  344. }
  345. .albumart {
  346. float: left;
  347. {block:ifnot2columns}
  348. width: 150px;height: 150px;
  349. {/block:ifnot2columns}
  350. {block:if2columns}
  351. width: 250px;height: 250px;
  352. {block:permalinkpage}
  353. width: 150px;height: 150px;
  354. {/block:permalinkpage}
  355. {/block:if2columns}
  356. z-index: 50;
  357. }
  358. .aud {
  359. width: 25px;
  360. height: 25px;
  361. opacity: 0.6;
  362. overflow: hidden;
  363. {block:ifnot2columns}
  364. margin: 60px 0 0 60px;
  365. {/block:ifnot2columns}
  366. {block:if2columns}
  367. margin: 110px 0 0 110px;
  368. {block:permalinkpage}
  369. margin: 60px 0 0 60px;
  370. {/block:permalinkpage}
  371. {/block:if2columns}
  372. position: absolute;
  373. -webkit-transition: all 0.4s ease-in-out;
  374. -moz-transition: all 0.4s ease-in-out;
  375. -o-transition: all 0.4s ease-in-out;
  376. -ms-transition: all 0.4s ease-in-out;
  377. transition: all 0.4s ease-in-out;
  378. }
  379. .aud:hover {opacity: 1;}
  380. .info {
  381. padding: 5px 5px 5px 15px;
  382. color: {color:body};
  383. text-transform: uppercase;
  384. font-family: consolas, source code pro;
  385. font-size: 10px;
  386. height: auto;
  387. border-bottom: 1px dashed {color:body italic};
  388. {block:ifbigposts}width: 320px;{/block:ifbigposts}
  389. {block:ifmedposts}width: 220px;{/block:ifmedposts}
  390. {block:ifnot2columns}position: relative;{/block:ifnot2columns}
  391. {block:if2columns}
  392. width: 230px;
  393. {block:permalinkpage}
  394. width: 320px;
  395. position: relative;
  396. {/block:permalinkpage}
  397. {/block:if2columns}
  398. }
  399. .info b,strong {color: {color:body bold};font-weight:100;}
  400. .information {
  401. {block:ifnot2columns}
  402. margin: 25px 0 0 150px;
  403. position:absolute;
  404. {/block:ifnot2columns}
  405. {block:if2columns}
  406. margin-top: 10px;
  407. {block:permalinkpage}
  408. margin: 25px 0 0 150px;
  409. position:absolute;
  410. {/block:permalinkpage}
  411. {/block:if2columns}
  412. border-top: 1px dashed {color:body italic};
  413. }
  414.  
  415. .question {
  416. font-family: calibri, arial;
  417. padding: 5px 10px;
  418. font-size: 12px;
  419. color: {color:ask text};
  420. background-color: {color:ask bg};
  421. text-align: left;
  422. }
  423. .asker {
  424. color: {color:body};
  425. font-family: economica;
  426. font-size: 16px;
  427. letter-spacing: 1px;
  428. padding-left: 10px;
  429. line-height: 16px;
  430. text-transform: uppercase;
  431. margin-top: 5px;
  432. {block:ifnotspeechbubbleask}
  433. border-bottom: 1px solid {color:post border};
  434. text-align: right;
  435. padding-bottom: 5px;
  436. {/block:ifnotspeechbubbleask}
  437. }
  438. .asker a {
  439. color: {color:body links};
  440. -webkit-transition: all 0.4s ease-in-out;
  441. -moz-transition: all 0.4s ease-in-out;
  442. -o-transition: all 0.4s ease-in-out;
  443. -ms-transition: all 0.4s ease-in-out;
  444. transition: all 0.4s ease-in-out;
  445. }
  446. .asker a:hover {color:{color:body links hover};}
  447. .askerpic {
  448. width: 16px;
  449. height: 16px;
  450. margin-left: 30px;
  451. }
  452. .tri {
  453. font-size: 30px;
  454. position: absolute;
  455. margin-top: -10px;
  456. color: {color:ask bg};
  457. float: left;
  458. }
  459.  
  460. #notecontainer {
  461. color: {color:body};
  462. padding: 10px;
  463. text-decoration: none;
  464. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  465. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  466. }
  467. #notecontainer ol.notes {
  468. list-style-type: none;
  469. letter-spacing: -1px;
  470. font-size: 11px;
  471. color: {color:body text};
  472. font-family: consolas;
  473. text-decoration: none;
  474. margin: 0;
  475. width: 500px;
  476. padding: 5px;
  477. text-align: left;
  478. }
  479. #notecontainer ol.notes a {color: {color:body links};}
  480. #notecontainer ol.notes a:hover {color: {color:body links hover};}
  481. #notecontainer img.avatar {
  482. margin-right: 5px;
  483. width: 10px;
  484. height: 10px;
  485. }
  486.  
  487. .permalinkpg {
  488. text-align: right;
  489. border-top: 1px dashed {color:body bold};
  490. border-bottom: 1px dashed {color:body bold};
  491. margin-top: 10px;
  492. font-family: courier new;
  493. font-size: 10px;
  494. padding: 10px;
  495. color: {color:body};
  496. }
  497. .permalinkpg a {color:{color:body links};}
  498. .permalinkpg a:hover {color:{color:body links hover};}
  499.  
  500. #cons {
  501. width: 200px;
  502. height: 100%;
  503. margin-left: auto;
  504. margin-right: auto;
  505. }
  506.  
  507. #topbar {
  508. z-index: 10000;
  509. top: 0;
  510. left: 0;
  511. width: 100%;
  512. height: 30px;
  513. line-height: 25px;
  514. text-align: center;
  515. background-color: {color:top bar background};
  516. position: fixed;
  517. border-bottom: 10px solid {color:top bar border};
  518. }
  519. #topbar a {
  520. font-family: 'Nova Mono', cursive;
  521. letter-spacing: 1px;
  522. text-transform: uppercase;
  523. font-size: 9px;
  524. color: {color:top bar text};
  525. margin: 0 5px;
  526. padding: 0 10px;
  527. -webkit-transition: all 0.4s ease-in-out;
  528. -moz-transition: all 0.4s ease-in-out;
  529. -o-transition: all 0.4s ease-in-out;
  530. -ms-transition: all 0.4s ease-in-out;
  531. transition: all 0.4s ease-in-out;
  532. }
  533. #topbar a:hover {
  534. background-color: {color:top bar text hover bg};
  535. padding: 9px 10px;
  536. color: {color:top bar text hover};
  537. }
  538.  
  539. #cons {margin-left:auto;margin-right: auto;}
  540.  
  541. #sidebar {
  542. position: fixed;
  543. top: 60px;
  544. {block:ifbigposts}margin-left: -410px;{/block:ifbigposts}
  545. {block:ifmedposts}margin-left: -360px;{/block:ifmedposts}
  546. {block:if2columns}margin-left: -442px;{/block:if2columns}
  547. {block:permalinkpage}
  548. {block:if2columns}margin-left: -430px;{/block:if2columns}
  549. {/block:permalinkpage}
  550. }
  551.  
  552. .bt {
  553. font-family: economica;
  554. font-size: 24px;
  555. text-align: center;
  556. padding: 5px 10px;
  557. margin-bottom: 10px;
  558. }
  559.  
  560. .bt a {
  561. background-color: {color:background};
  562. background-image: url({image:background});
  563. color: {color:blog title};
  564. padding: 0 10px;
  565. }
  566.  
  567. .tb {
  568. background-color: {color:blog title bar};
  569. width: 230px;
  570. height: 3px;
  571. position: absolute;
  572. margin-top: -30px;
  573. z-index: -1;
  574. }
  575.  
  576. .sbpic {width: 230px;display: block;}
  577.  
  578. .desc {
  579. width: 230px;
  580. color: {color:desc text};
  581. padding-top: 10px;
  582. font-family: calibri;
  583. font-size: 11px;
  584. text-align: justify;
  585. }
  586.  
  587. .desc:first-letter {
  588. color: {color:desc first letter};
  589. font-family: courier new;
  590. font-size: 40px;
  591. float: left;
  592. padding: 9px 5px 7px 5px;
  593. margin: 0 5px 0 0;
  594. }
  595. .desc a { color: {color:desc links};
  596. -webkit-transition: all 0.4s ease-in-out;
  597. -moz-transition: all 0.4s ease-in-out;
  598. -o-transition: all 0.4s ease-in-out;
  599. -ms-transition: all 0.4s ease-in-out;
  600. transition: all 0.4s ease-in-out;
  601. }
  602. .desc a:hover {
  603. color:{color:desc links hover};
  604. background-color:{color:desc links hover bg};
  605. }
  606. .desc b,strong { color: {color:desc bold};font-weight:100; }
  607. .desc i,em { color: {color:desc italic}; }
  608.  
  609. #custom {
  610. position: fixed;
  611. margin-top: 70px;
  612. {block:ifbigposts}margin-left: 390px;{/block:ifbigposts}
  613. {block:ifmedposts}margin-left: 340px;{/block:ifmedposts}
  614. {block:if2columns}margin-left: 400px;{/block:if2columns}
  615. {block:permalinkpage}
  616. {block:if2columns}margin-left: 390px;{/block:if2columns}
  617. {/block:permalinkpage}
  618. }
  619. .link {
  620. background-color: {color:custom links background};
  621. color: {color:custom links text};
  622. border: 1px solid {color:custom links border};
  623. font-family: consolas;
  624. font-size: 9px;
  625. text-transform: uppercase;
  626. width: 100px;
  627. padding: 3px 5px;
  628. margin: 3px 0;
  629. border-radius: 15px;
  630. -moz-border-radius: 15px;
  631. -webkit-border-radius: 15px;
  632. -o-border-radius: 15px;
  633. -webkit-transition: all 0.4s ease-in-out;
  634. -moz-transition: all 0.4s ease-in-out;
  635. -o-transition: all 0.4s ease-in-out;
  636. -ms-transition: all 0.4s ease-in-out;
  637. transition: all 0.4s ease-in-out;
  638. }
  639. .link:hover {
  640. margin: 3px 15px;
  641. background-color: {color:custom links hover background};
  642. border: 1px solid {color:custom links hover border};
  643. color: {color:custom links hover text};
  644. }
  645.  
  646. .prevpg {
  647. font-family: consolas;
  648. background-color: {color:custom links hover background};
  649. border: 1px solid {color:custom links hover border};
  650. color: {color:custom links hover text};
  651. text-align: center;
  652. width: 50px;
  653. float: left;
  654. border-radius: 15px;
  655. margin-right: 5px;
  656. -webkit-transition: all 0.4s ease-in-out;
  657. -moz-transition: all 0.4s ease-in-out;
  658. -o-transition: all 0.4s ease-in-out;
  659. -ms-transition: all 0.4s ease-in-out;
  660. transition: all 0.4s ease-in-out;
  661. }
  662. .nextpg {
  663. font-family: consolas;
  664. background-color: {color:custom links hover background};
  665. border: 1px solid {color:custom links hover border};
  666. color: {color:custom links hover text};
  667. text-align: center;
  668. width: 50px;
  669. border-radius: 15px;
  670. float: left;
  671. -webkit-transition: all 0.4s ease-in-out;
  672. -moz-transition: all 0.4s ease-in-out;
  673. -o-transition: all 0.4s ease-in-out;
  674. -ms-transition: all 0.4s ease-in-out;
  675. transition: all 0.4s ease-in-out;
  676. }
  677. .prevpg:hover, .nextpg:hover {
  678. background-color: {color:custom links background};
  679. color: {color:custom links text};
  680. border: 1px solid {color:custom links border};
  681. }
  682.  
  683. #permalink {
  684. display: block;
  685. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  686. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  687. {block:if2columns}width: 250px;{/block:if2columns}
  688. {block:permalinkpage}
  689. {block:ifmedposts}width: 500px;{/block:ifmedposts}
  690. {block:if2columns}width: 500px;{/block:if2columns}
  691. {/block:permalinkpage}
  692. position: absolute;
  693. margin-top: 5px;
  694. text-align: center;
  695. }
  696. .perma {
  697. font-family: consolas;
  698. font-size: 9px;
  699. padding: 0 3px;
  700. text-transform: uppercase;
  701. margin: 0 5px;
  702. text-align: center;
  703. }
  704. .perma a {
  705. color: {color:perma text};
  706. background-color: {color:perma bg};
  707. padding: 0 5px;
  708. -webkit-transition: all 0.4s ease-in-out;
  709. -moz-transition: all 0.4s ease-in-out;
  710. -o-transition: all 0.4s ease-in-out;
  711. -ms-transition: all 0.4s ease-in-out;
  712. transition: all 0.4s ease-in-out;
  713. }
  714. .perma a:hover {padding: 0 15px;}
  715.  
  716. .text b,strong {color:{color:body bold};}
  717. .text i,em {color:{color:body italic};}
  718.  
  719. #pta {
  720. font-family: consolas;
  721. font-size: 10px;
  722. margin-top: -10px;
  723. margin-bottom: 10px;
  724. }
  725. #pta a {
  726. color: {color:tags};
  727. -webkit-transition: all 0.4s ease-in-out;
  728. -moz-transition: all 0.4s ease-in-out;
  729. -o-transition: all 0.4s ease-in-out;
  730. -ms-transition: all 0.4s ease-in-out;
  731. transition: all 0.4s ease-in-out;
  732. }
  733.  
  734. #pta a:hover {
  735. color: {color:tags hover};
  736. }
  737.  
  738. #ongaku {
  739. width: 25px;
  740. height: 25px;
  741. overflow: hidden;
  742. position: absolute;
  743. background-color: {color:post background};
  744. border: 1px solid {color:post border};
  745. margin-left: -40px;
  746. }
  747. .musicgif {
  748. margin: 5px;
  749. -webkit-transition: all 0.4s ease-in-out;
  750. -moz-transition: all 0.4s ease-in-out;
  751. -o-transition: all 0.4s ease-in-out;
  752. -ms-transition: all 0.4s ease-in-out;
  753. transition: all 0.4s ease-in-out;
  754. }
  755. #ongaku:hover .musicgif {
  756. margin-top: -30px;
  757. }
  758.  
  759. #musicpl {
  760. width: 20px;
  761. overflow: hidden;
  762. height: 20px;
  763. padding: 2px 20px 10px 0;
  764. margin-left: -17px;
  765. background-color: {color:post background};
  766. }
  767.  
  768. #warning {
  769. position: fixed;
  770. width: 100%;
  771. height:100%;
  772. background-color: #fff;
  773. z-index:-1000000;
  774. top:0;
  775. left: 0;
  776. text-align: center;
  777. padding-top: 250px;
  778. font-family: economica;
  779. font-size: 26px;
  780. opacity: 0;
  781. {block:ifbigposts}
  782. {block:ifmedposts}opacity:1;z-index:1000000;{/block:ifmedposts}
  783. {block:if2columns}opacity:1;z-index:1000000;{/block:if2columns}
  784. {/block:ifbigposts}
  785. {block:ifmedposts}{block:if2columns}
  786. opacity:1;z-index:1000000;
  787. {/block:if2columns}{/block:ifmedposts}
  788. {block:ifnotbigposts}{block:ifnotmedposts}{block:ifnot2columns}
  789. opacity:1;z-index:1000000;
  790. {/block:ifnot2columns}{/block:ifnotmedposts}{/block:ifnotbigposts}
  791. }
  792.  
  793. .pagination {display: none;}
  794.  
  795. {CustomCSS}
  796. </style>
  797.  
  798. {block:indexpage}
  799. {block:if2columns}{block:ifinfinitescroll}
  800. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  801. <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  802.  
  803. <script>
  804. $(function(){
  805. var $container = $('#content');
  806. $container.imagesLoaded(function(){
  807. $container.masonry({
  808. itemSelector: '.posts',
  809. });
  810. });
  811. $container.infinitescroll({
  812. itemSelector : ".posts",
  813. navSelector : "div.pagination",
  814. nextSelector : ".pagination a#next",
  815. loadingImg : "",
  816. loadingText : "<em></em>",
  817. bufferPx : 10000,
  818. extraScrollPx: 12000,
  819. },
  820. // trigger Masonry as a callback
  821. function( newElements ) {
  822. var $newElems = $( newElements ).css({ opacity: 0 });
  823. // ensure that images load before adding to masonry layout
  824. $newElems.imagesLoaded(function(){
  825. $newElems.animate({ opacity: 1 });
  826. $container.masonry( 'appended', $newElems, true );
  827. });
  828. }
  829. );
  830. });
  831. </script>
  832. {/block:ifinfinitescroll}
  833.  
  834. {block:ifnotinfinitescroll}
  835. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  836.  
  837. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  838. <script type="text/javascript">
  839. $(window).load(function () {
  840. $('#content').masonry({
  841. itemSelector : ".posts",
  842. },
  843. function() { $('#content').masonry({ appendedContent: $(this) }); }
  844. );
  845. });
  846. </script>
  847. {/block:ifnotinfinitescroll}
  848.  
  849. {/block:if2columns}
  850.  
  851. {block:ifnot2columns}{block:ifinfinitescroll}
  852. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  853. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  854. <script type="text/javascript" charset="utf-8">
  855. var $j = jQuery.noConflict();
  856. $j(function() {
  857. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  858. $j("img").lazyload({
  859. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  860. effect: "fadeIn",
  861. });
  862. });
  863. </script>
  864. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  865. {/block:ifinfinitescroll}{/block:ifnot2columns}
  866.  
  867. {block:ifinfinitescroll}{block:ifnot2columns}
  868. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  869. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  870. <script type="text/javascript" charset="utf-8">
  871. var $j = jQuery.noConflict();
  872. $j(function() {
  873. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  874. $j("img").lazyload({
  875. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  876. effect: "fadeIn",
  877. });
  878. });
  879. </script>
  880. {/block:ifnot2columns}{/block:ifinfinitescroll}
  881. {/block:indexpage}
  882.  
  883. </head>
  884. <body>
  885.  
  886. <div id="topbar">
  887. <a href="/">index</a>
  888. <a href="/ask">message</a>
  889. <a href="/archive">archive</a>
  890. <a href="http://yukoki.tumblr.com">theme</a>
  891. </div><!--topbar-->
  892.  
  893. <div id="warning">Please pick 1 post size.</div>
  894.  
  895. <div id="cons">
  896.  
  897. <div id="sidebar">
  898.  
  899. <div class="bt"><a href="/">{title}</a></div>
  900. <div class="tb"></div>
  901.  
  902. {block:ifmusicplayer}
  903. <div id="ongaku">
  904. <div class="musicgif"><img src="http://media.tumblr.com/tumblr_m7vzhvERfC1r6o8v2.gif"/></div>
  905. <div id="musicpl">
  906. {text:billy music player code}
  907. </div>
  908. </div><!--ongaku-->
  909. {/block:ifmusicplayer}
  910.  
  911. <img class="sbpic" src="{image:sidebar}">
  912. <div class="desc">{description}</div>
  913.  
  914. </div><!--sidebar-->
  915.  
  916. <div id="custom">
  917.  
  918. {block:IfLink1}<a href="{text:Link 1 URL}"><div class="link">{text:Link 1}</div></a>{/block:IfLink1}
  919. {block:IfLink2}<a href="{text:Link 2 URL}"><div class="link">{text:Link 2}</div></a>{/block:IfLink2}
  920. {block:IfLink3}<a href="{text:Link 3 URL}"><div class="link">{text:Link 3}</div></a>{/block:IfLink3}
  921. {block:IfLink4}<a href="{text:Link 4 URL}"><div class="link">{text:Link 4}</div></a>{/block:IfLink4}
  922. {block:IfLink5}<a href="{text:Link 5 URL}"><div class="link">{text:Link 5}</div></a>{/block:IfLink5}
  923. {block:IfLink6}<a href="{text:Link 6 URL}"><div class="link">{text:Link 6}</div></a>{/block:IfLink6}
  924. {block:IfLink7}<a href="{text:Link 7 URL}"><div class="link">{text:Link 7}</div></a>{/block:IfLink7}
  925. {block:IfLink8}<a href="{text:Link 8 URL}"><div class="link">{text:Link 8}</div></a>{/block:IfLink8}
  926.  
  927. {block:pagination}{block:ifnotinfinitescroll}
  928. {block:PreviousPage}<a href="{PreviousPage}"><div class="prevpg">«</div></a>{block:PreviousPage}
  929. {block:NextPage}<a href="{NextPage}"><div class="nextpg">»</div></a>{/block:NextPage}
  930. {/block:ifnotinfinitescroll}{/block:pagination}
  931.  
  932. </div><!--custom-->
  933.  
  934. </div><!--cons-->
  935.  
  936.  
  937. <div id="content">
  938. {block:Posts}<div class="posts">
  939.  
  940. {block:Photo}
  941. {LinkOpenTag}<div class="postu">
  942. {block:indexpage}
  943. {block:ifbigposts}<center><img src="{PhotoURL-500}" /></center>{/block:ifbigposts}
  944. {block:ifmedposts}<center><img src="{PhotoURL-400}" /></center>{/block:ifmedposts}
  945. {block:if2columns}<center><img src="{PhotoURL-250}" /></center>{/block:if2columns}
  946. {/block:indexpage}
  947. {block:permalinkpage}
  948. {block:ifbigposts}<center><img src="{PhotoURL-500}" /></center>{/block:ifbigposts}
  949. {block:ifmedposts}<center><img src="{PhotoURL-400}" /></center>{/block:ifmedposts}
  950. {block:if2columns}<center><img src="{PhotoURL-500}" /></center>{/block:if2columns}
  951. {/block:permalinkpage}
  952. </div>
  953. {LinkCloseTag}
  954. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  955. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  956. <div class="text">{Caption}</div>
  957. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  958. {/block:Photo}
  959.  
  960. {block:Photoset}
  961. <div class="postu">
  962. {block:indexpage}
  963. {block:ifbigposts}{Photoset-500}{/block:ifbigposts}
  964. {block:ifmedposts}{Photoset-400}{/block:ifmedposts}
  965. {block:if2columns}{Photoset-250}{/block:if2columns}
  966. {/block:indexpage}
  967. {block:permalinkpage}
  968. {block:ifbigposts}{Photoset-500}{/block:ifbigposts}
  969. {block:ifmedposts}{Photoset-400}{/block:ifmedposts}
  970. {block:if2columns}{Photoset-500}{/block:if2columns}
  971. {/block:permalinkpage}
  972. </div>
  973. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  974. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  975. <div class="text">{Caption}</div>
  976. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  977. {/block:Photoset}
  978.  
  979. {block:Video}
  980. <div class="postu">
  981. {block:indexpage}
  982. {block:ifbigposts}{Video-500}{/block:ifbigposts}
  983. {block:ifmedposts}{Video-400}{/block:ifmedposts}
  984. {block:if2columns}{Video-250}{/block:if2columns}
  985. {/block:indexpage}
  986. {block:permalinkpage}
  987. {block:ifbigposts}{Video-500}{/block:ifbigposts}
  988. {block:ifmedposts}{Video-400}{/block:ifmedposts}
  989. {block:if2columns}{Video-500}{/block:if2columns}
  990. {/block:permalinkpage}
  991. </div>
  992. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  993. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  994. <div class="text">{Caption}</div>
  995. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  996. {/block:Video}
  997.  
  998. {block:Audio}
  999.  
  1000. {block:indexpage}{block:if2columns}
  1001. <div class="aud">{AudioPlayerWhite}</div>
  1002. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1003. {/block:if2columns}{/block:indexpage}
  1004. <div class="information">
  1005. <div class="info"><b>TRACK NAME:</b> {block:TrackName}{TrackName}{/block:TrackName}</div>
  1006. <div class="info"><b>ALBUM TITLE:</b> {block:Album}{Album}{/block:Album}</div>
  1007. <div class="info"><b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}</div>
  1008. <div class="info"><b>PLAY COUNT:</b> {PlayCount}</div>
  1009. </div>
  1010. {block:ifnot2columns}
  1011. <div class="aud">{AudioPlayerWhite}</div>
  1012. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1013. {/block:ifnot2columns}
  1014. {block:permalinkpage}{block:if2columns}
  1015. <div class="aud">{AudioPlayerWhite}</div>
  1016. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1017. {/block:if2columns}{/block:permalinkpage}
  1018.  
  1019. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1020. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1021. <div class="text">{Caption}</div>
  1022. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1023. {/block:Audio}
  1024.  
  1025. {block:Quote}
  1026. <div class="quote">“{Quote}”</div>
  1027. {block:Source}<br><div class="src">- {Source}</div>{/block:Source}
  1028. {/block:Quote}
  1029.  
  1030. {block:Text}
  1031. {block:Title}
  1032. <div class="ti"></div>
  1033. <div class="titl"><a href="{permalink}">{Title}</a></div>
  1034. {/block:Title}
  1035. <div class="text">{body}</div>
  1036. {/block:Text}
  1037.  
  1038. {block:Answer}
  1039. <div class="question">{Question}</div>
  1040. <div class="asker">
  1041. {block:ifspeechbubbleask}<span class="tri">◥</span>{/block:ifspeechbubbleask}<img class="askerpic" src="{AskerPortraitURL-16}">{Asker}</div>
  1042. <div class="text">{answer}</div>
  1043. {/block:Answer}
  1044.  
  1045. {block:Chat}
  1046. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1047. <div class="text">
  1048. {block:Lines}<div class="{Alt}">
  1049. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  1050. {/block:Lines}
  1051. </div>
  1052. {/block:Chat}
  1053.  
  1054. {block:Link}
  1055. <div class="ti"></div>
  1056. <div class="ltitl"><a href="{URL}">{Name} >></a></div>
  1057. {block:Description}<div class="text">{description}</div>{/block:Description}
  1058. {/block:Link}
  1059.  
  1060.  
  1061. {block:indexpage}
  1062. <center><div id="permalink">
  1063. <div class="perma"><a href="{permalink}">{block:date}{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear} // {12Hour}.{Minutes}{AmPm} // {NoteCountWithLabel}{/block:date}
  1064. </a></div><!--perma-->
  1065. </div><!--permalink--></center>
  1066. {/block:indexpage}
  1067.  
  1068.  
  1069. {block:permalinkpage}
  1070. {block:date}<div class="permalinkpg">
  1071. Posted at {12hour}.{minutes}{ampm}, on {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}{block:notecount}, with {notecountwithlabel}{/block:notecount}.<br>
  1072. {block:RebloggedFrom}Originally by <a href="{reblogrooturl}">{reblogrootname}</a>, reblogged via <a href="{reblogparenturl}">{reblogparentname}</a>.{/block:rebloggedfrom}<br>
  1073. {block:HasTags}
  1074. {block:tags}<a href="{tagurl}">#{tag} {/block:tags}
  1075. {/block:HasTags}
  1076. </div><!--permalinkpg-->{/block:date}
  1077.  
  1078. {block:PostNotes}
  1079. <div id="notecontainer">{PostNotes}</div>
  1080. {/block:PostNotes}
  1081.  
  1082. {/block:permalinkpage}
  1083.  
  1084. </div><!--posts-->
  1085.  
  1086. {block:indexpage}{block:ifshowtags}
  1087. <center><div id="pta">
  1088. {block:HasTags}
  1089. {block:tags}<a href="{tagurl}">#{tag}</a> {/block:tags}
  1090. {/block:HasTags}
  1091. </div></center>
  1092. {/block:ifshowtags}{/block:indexpage}
  1093.  
  1094. {/block:Posts}
  1095.  
  1096. {block:ContentSource}
  1097. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1098. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1099. {/block:SourceLogo}
  1100. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1101. {/block:ContentSource}
  1102.  
  1103. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1104.  
  1105. </div><!--content-->
  1106.  
  1107.  
  1108. <div class="pagination">
  1109. {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}
  1110. </div>
  1111.  
  1112. </body>
  1113. </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!