API tools faq
paste
Advertisement
mogimochi

Theme [15] Decipher

mogimochi
Dec 16th, 2012
35,215
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. :: CODE PACK #09 EPISKEY ::
  8.  
  9. Theme 15 Decipher
  10. by yukoki/s-ekki
  11.  
  12. 1. Light/Heavy CSS editting is allowed.
  13. 2. Do not use as base code.
  14. 3. Do not remove credit.
  15. 4. Do not claim theme as your own.
  16. 5. Do not redistribute.
  17.  
  18. ++ [YUKOKI 2012 THEMES' REVAMPS] ++ [YUKOKI REVAMP PACK #09] ++
  19. 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 'Cloud'.
  20.  
  21. --------------------------------------------------- UPDATE VER 070216 -->
  22.  
  23.  
  24. <meta name="color:scrollbar" content="#69cbdc">
  25. <meta name="color:scrollbar bg" content="#ffffff">
  26. <meta name="color:text selection" content="#F5B3B3">
  27.  
  28. <meta name="color:background" content="#ffffff">
  29. <meta name="color:custom link 1" content="#A5D8E8">
  30. <meta name="color:custom link 2" content="#B5D1DD">
  31. <meta name="color:custom link 3" content="#C5C9D3">
  32. <meta name="color:custom link 4" content="#D5C2C8">
  33. <meta name="color:custom link 5" content="#E5BABE">
  34. <meta name="color:custom link 6" content="#F5B3B3">
  35. <meta name="color:custom link title" content="#a4a4a4">
  36. <meta name="color:desc" content="#c5c5c5">
  37. <meta name="color:desc bold" content="#e5babe">
  38. <meta name="color:desc italic" content="#c5c9d3">
  39. <meta name="color:desc links" content="#a5d8e8">
  40. <meta name="color:desc links hover" content="#a9a9a9">
  41. <meta name="color:blog title" content="#6a6a6a">
  42. <meta name="color:decorative square 1" content="#A5D8E8">
  43. <meta name="color:decorative square 2" content="#C5C9D3">
  44. <meta name="color:decorative square 3" content="#E5BABE">
  45. <meta name="color:basic nav icon" content="#ffffff">
  46. <meta name="color:basic nav link 1" content="#A5D8E8">
  47. <meta name="color:basic nav link 2" content="#C5C9D3">
  48. <meta name="color:basic nav link 3" content="#E5BABE">
  49.  
  50. <meta name="color:post background" content="#ffffff">
  51. <meta name="color:body text" content="#848484">
  52. <meta name="color:body links" content="#a5d8e8">
  53. <meta name="color:body links hover" content="#cfcfcf">
  54. <meta name="color:body bold" content="#e5babe">
  55. <meta name="color:body italic" content="#c5c9d3">
  56. <meta name="color:text post title" content="#7a7a7a">
  57. <meta name="color:link post title" content="#aaaaaa">
  58. <meta name="color:quote post" content="#9f9f9f">
  59. <meta name="color:quote post source" content="#b3b3b3">
  60. <meta name="color:ask background" content="#f6f6f6">
  61. <meta name="color:ask text" content="#000000">
  62. <meta name="color:chat odd text" content="#aaaaaa">
  63. <meta name="color:chat even text" content="#8c8c8c">
  64. <meta name="color:chat post alt bg" content="#f5f5f5">
  65. <meta name="color:permalink colour 1" content="#A5D8E8">
  66. <meta name="color:permalink colour 2" content="#C5C9D3">
  67. <meta name="color:permalink colour 3" content="#E5BABE">
  68. <meta name="color:permalink text" content="#838383">
  69. <meta name="color:tags" content="#cecece">
  70. <meta name="color:tags background" content="#ffffff">
  71. <meta name="color:tags icon" content="#ffffff">
  72.  
  73. <meta name="color:pagination divider" content="#000000">
  74. <meta name="color:pagination links" content="#7a7a7a">
  75. <meta name="color:pagination links hover" content="#000000">
  76.  
  77. <meta name="image:background" content="">
  78. <meta name="image:content background" content="">
  79. <meta name="image:sidebar" content="">
  80.  
  81. <meta name="if:infinite scroll" content="0">
  82. <meta name="if:lazy load" content="1">
  83. <meta name="if:400px posts" content="0">
  84. <meta name="if:500px posts" content="1">
  85. <meta name="if:show captions" content="1">
  86. <meta name="if:sidebar on left" content="0">
  87. <meta name="if:monochrome posts" content="0">
  88. <meta name="text:link 1" content="">
  89. <meta name="text:link 1 url" content="">
  90. <meta name="text:link 2" content="">
  91. <meta name="text:link 2 url" content="">
  92. <meta name="text:link 3" content="">
  93. <meta name="text:link 3 url" content="">
  94. <meta name="text:link 4" content="">
  95. <meta name="text:link 4 url" content="">
  96. <meta name="text:link 5" content="">
  97. <meta name="text:link 5 url" content="">
  98. <meta name="text:link 6" content="">
  99. <meta name="text:link 6 url" content="">
  100.  
  101. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  102. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  103. <link rel="shortcut icon" href="{Favicon}" />
  104.  
  105. {block:indexpage}
  106. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  107. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  108. {block:iflazyload}
  109. <script type="text/javascript" charset="utf-8">
  110. var $j = jQuery.noConflict();
  111. $j(function() {
  112. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  113. $j("img").lazyload({
  114. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  115. effect: "fadeIn",
  116. });
  117. });
  118. </script>
  119. {/block:iflazyload}
  120. {block:ifinfinitescroll}
  121. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  122. {/block:ifinfinitescroll}
  123. {/block:indexpage}
  124.  
  125. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  126.  
  127. <style type="text/css">
  128.  
  129. ::-webkit-scrollbar { width: 7px; }
  130. ::-webkit-scrollbar-track-piece { background-color:{color:scrollbar bg}; }
  131. ::-webkit-scrollbar-thumb:vertical {
  132. width: 10px;
  133. background-color: {color:scrollbar};
  134. border: 3px solid {color:scrollbar bg};
  135. margin-left: 10px;
  136. }
  137.  
  138. ::selection {color: #fff;background-color: {color:text selection};}
  139. ::-moz-selection {color: #fff;background-color: {color:text selection};}
  140. ::-webkit-selection {color: #fff;background-color: {color:text selection};}
  141.  
  142. iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:0.9; }
  143.  
  144. body {
  145. background-color: {color:background};
  146. background-image: url({image:background});
  147. background-attachment: fixed;
  148. margin: 0;
  149. word-wrap: break-word;
  150. }
  151. a { text-decoration:none; }
  152.  
  153. #sidebar {
  154. position: fixed;
  155. z-index: 3;
  156. width: 180px;
  157. top: 80px;
  158. left: 740px;
  159. padding: 20px;
  160. {block:ifsidebaronleft}
  161. left: 80px;
  162. {/block:ifsidebaronleft}
  163. }
  164.  
  165. .sbimg {
  166. width: 180px;
  167. display: block;
  168. position: relative;
  169. z-index: 2;
  170. }
  171.  
  172. #hidelinks {
  173. position: absolute;
  174. margin: 30px -40px;
  175. width: 120px;
  176. z-index: 1;
  177. }
  178.  
  179. .linkm {
  180. margin-bottom: 30px;
  181. }
  182.  
  183. .linkline {
  184. height: 1px;
  185. transition: 0.6s;
  186. -o-transition: 0.6s;
  187. -moz-transition: 0.6s;
  188. -webkit-transition: 0.6s;
  189. }
  190.  
  191. #ll1 {width: 280px;background-color:{color:custom link 1};}
  192. #ll2 {width: 250px;background-color:{color:custom link 2};}
  193. #ll3 {width: 290px;background-color:{color:custom link 3};}
  194. #ll4 {width: 260px;background-color:{color:custom link 4};}
  195. #ll5 {width: 240px;background-color:{color:custom link 5};}
  196. #ll6 {width: 270px;background-color:{color:custom link 6};}
  197.  
  198. .linkdeco {
  199. width: 5px;
  200. height: 5px;
  201. position: absolute;
  202. transition: 0.6s;
  203. -o-transition: 0.6s;
  204. -moz-transition: 0.6s;
  205. -webkit-transition: 0.6s;
  206. }
  207.  
  208. #ld1 {margin: -4px 280px;border: 1px solid {color:custom link 1};}
  209. #ld2 {margin: -4px 250px;border: 1px solid {color:custom link 2};}
  210. #ld3 {margin: -4px 290px;border: 1px solid {color:custom link 3};}
  211. #ld4 {margin: -4px 260px;border: 1px solid {color:custom link 4};}
  212. #ld5 {margin: -4px 240px;border: 1px solid {color:custom link 5};}
  213. #ld6 {margin: -4px 270px;border: 1px solid {color:custom link 6};}
  214.  
  215. .linktitle {
  216. font-family: courier new;
  217. font-size: 10px;
  218. text-transform: uppercase;
  219. letter-spacing: 2px;
  220. color: {color:custom link title};
  221. position: absolute;
  222. margin: -5px 260px;
  223. width: 100px;
  224. transition: 0.6s;
  225. -o-transition: 0.6s;
  226. -moz-transition: 0.6s;
  227. -webkit-transition: 0.6s;
  228. }
  229.  
  230. #lt1 {margin: -5px 306px;}
  231. #lt2 {margin: -5px 276px;}
  232. #lt3 {margin: -5px 316px;}
  233. #lt4 {margin: -5px 286px;}
  234. #lt5 {margin: -5px 266px;}
  235. #lt6 {margin: -5px 296px;}
  236.  
  237. .linkm:hover #ll1 {width: 310px;}
  238. .linkm:hover #ll2 {width: 280px;}
  239. .linkm:hover #ll3 {width: 320px;}
  240. .linkm:hover #ll4 {width: 290px;}
  241. .linkm:hover #ll5 {width: 270px;}
  242. .linkm:hover #ll6 {width: 300px;}
  243. .linkm:hover #ld1 {margin: -4px 310px;}
  244. .linkm:hover #ld2 {margin: -4px 280px;}
  245. .linkm:hover #ld3 {margin: -4px 320px;}
  246. .linkm:hover #ld4 {margin: -4px 290px;}
  247. .linkm:hover #ld5 {margin: -4px 270px;}
  248. .linkm:hover #ld6 {margin: -4px 300px;}
  249. .linkm:hover #lt1 {margin: -5px 336px;}
  250. .linkm:hover #lt2 {margin: -5px 306px;}
  251. .linkm:hover #lt3 {margin: -5px 346px;}
  252. .linkm:hover #lt4 {margin: -5px 316px;}
  253. .linkm:hover #lt5 {margin: -5px 296px;}
  254. .linkm:hover #lt6 {margin: -5px 326px;}
  255.  
  256. .desc {
  257. font-family: courier new;
  258. font-size: 11px;
  259. color: #a9a9a9;
  260. width: 300px;
  261. line-height: 20px;
  262. }
  263.  
  264. .desc b,strong {
  265. color: {color:desc bold};
  266. }
  267.  
  268. .desc i,em {
  269. color: {color:desc italic};
  270. }
  271.  
  272. .desc a {
  273. color: {color:desc links};
  274. text-decoration: underline;
  275. }
  276.  
  277. .desc a:hover {
  278. color: {color:desc links hover};
  279. }
  280.  
  281. .blogt {
  282. margin-top: 30px;
  283. margin-bottom: 10px;
  284. width: 300px;
  285. letter-spacing: 4px;
  286. color: {color:blog title};
  287. font-family: georgia;
  288. }
  289.  
  290. .sq1, .sq2, .sq3 {
  291. width: 5px;
  292. height: 5px;
  293. float: left;
  294. margin: 6px 5px;
  295. }
  296. .sq1 {border: 1px solid {color:decorative square 1};margin-left:10px;}
  297. .sq2 {border: 1px solid {color:decorative square 2};}
  298. .sq3 {border: 1px solid {color:decorative square 3};margin-right:15px;}
  299.  
  300. .basicnav {
  301. width: 400px;
  302. margin-top: 14px;
  303. }
  304.  
  305. .bn1, .bn2, .bn3 {
  306. float: left;
  307. font-family: courier new;
  308. font-size: 10px;
  309. text-transform: uppercase;
  310. color: {color:basic nav icon};
  311. text-align: center;
  312. width: 15px;
  313. height: 16px;
  314. line-height: 16px;
  315. }
  316.  
  317. .bn1 {background-color:{color:basic nav link 1};}
  318. .bn2 {background-color:{color:basic nav link 2};}
  319. .bn3 {background-color:{color:basic nav link 3};}
  320.  
  321. .bt1, .bt2, .bt3 {
  322. float: left;
  323. margin-right: 10px;
  324. font-family: courier new;
  325. font-size: 8px;
  326. text-transform: uppercase;
  327. letter-spacing: 2px;
  328. padding: 3px 5px 3px 5px;
  329. }
  330.  
  331. .bt1 {border: 1px solid {color:basic nav link 1};color: {color:basic nav link 1};}
  332. .bt2 {border: 1px solid {color:basic nav link 2};color: {color:basic nav link 2};}
  333. .bt3 {border: 1px solid {color:basic nav link 3};color: {color:basic nav link 3};}
  334.  
  335. #content {
  336. height: 100%;
  337. position: relative;
  338. z-index: 2;
  339. {block:ifnotsidebaronleft}background-image: url({image:content background});{/block:ifnotsidebaronleft}
  340. background-attachment: fixed;
  341. {block:if500pxposts}width: 540px;padding: 90px;{/block:if500pxposts}
  342. {block:if400pxposts}width: 440px;padding: 90px 140px;{/block:if400pxposts}
  343. {block:ifsidebaronleft}
  344. left: 440px;
  345. padding: 50px 90px;
  346. {/block:ifsidebaronleft}
  347. }
  348.  
  349. .post {
  350. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  351. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  352. padding: 20px;
  353. background-color: {color:post background};
  354. {block:indexpage}margin-bottom: 90px;{/block:indexpage}
  355. {block:permalinkpage}margin-bottom: 20px;{/block:permalinkpage}
  356. transition: 0.7s;
  357. -moz-transition: 0.7s;
  358. -webkit-transition: 0.7s;
  359. -o-transition: 0.7s;
  360. }
  361.  
  362. .photo {
  363. {block:if500pxposts}max-width: 500px;{/block:if500pxposts}
  364. {block:if400pxposts}max-width: 400px;{/block:if400pxposts}
  365. display: block;
  366. background-color: {color:post background};
  367. {block:ifmonochromeposts}
  368. 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+ */
  369. filter: gray; /* IE6-9 */
  370. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  371. {/block:ifmonochromeposts}
  372. transition: 0.8s;
  373. -moz-transition: 0.8s;
  374. -webkit-transition: 0.8s;
  375. -o-transition: 0.8s;
  376. }
  377.  
  378. .post:hover .photo {
  379. {block:indexpage}opacity: 0.1;{/block:indexpage}
  380. {block:ifmonochromeposts}
  381. filter: none;
  382. -webkit-filter: grayscale(0%);
  383. {/block:ifmonochromeposts}
  384. }
  385.  
  386. #photosperma {
  387. position: absolute;
  388. z-index: 3;
  389. margin: 30px -20px;
  390. }
  391.  
  392. .ppm {
  393. margin-bottom: 16px;
  394. opacity: 0;
  395. transition: 0.7s;
  396. -moz-transition: 0.7s;
  397. -webkit-transition: 0.7s;
  398. -o-transition: 0.7s;
  399. }
  400.  
  401. .post:hover .ppm { opacity: 1; }
  402.  
  403. .ppml1, .ppml2, .ppml3 {
  404. height: 2px;
  405. transition: 0.7s;
  406. -moz-transition: 0.7s;
  407. -webkit-transition: 0.7s;
  408. -o-transition: 0.7s;
  409. }
  410.  
  411. .ppml1 {width: 40px;background-color: {color:permalink colour 1};}
  412. .ppml2 {width: 60px;background-color: {color:permalink colour 2};}
  413. .ppml3 {width: 20px;background-color: {color:permalink colour 3};}
  414. .post:hover .ppml1 {width: 60px;}
  415. .post:hover .ppml2 {width: 80px;}
  416. .post:hover .ppml3 {width: 40px;}
  417.  
  418. .ppmd1, .ppmd2, .ppmd3 {
  419. width: 4px;
  420. height: 4px;
  421. position: absolute;
  422. margin-top: -5px;
  423. transition: 0.7s;
  424. -moz-transition: 0.7s;
  425. -webkit-transition: 0.7s;
  426. -o-transition: 0.7s;
  427. }
  428.  
  429. .ppmd1 {border: 2px solid {color:permalink colour 1};margin-left:40px;}
  430. .ppmd2 {border: 2px solid {color:permalink colour 2};margin-left:60px;}
  431. .ppmd3 {border: 2px solid {color:permalink colour 3};margin-left:20px;}
  432. .post:hover .ppmd1 {margin-left:60px;}
  433. .post:hover .ppmd2 {margin-left:80px;}
  434. .post:hover .ppmd3 {margin-left:40px;}
  435.  
  436. .ppt1, .ppt2, .ppt3 {
  437. position: absolute;
  438. font-family: courier new;
  439. font-size: 10px;
  440. text-transform: uppercase;
  441. letter-spacing: 1px;
  442. margin-top: -7px;
  443. width: 200px;
  444. color: {color:permalink text};
  445. text-shadow: 1px 1px 0 #fff;
  446. transition: 0.7s;
  447. -moz-transition: 0.7s;
  448. -webkit-transition: 0.7s;
  449. -o-transition: 0.7s;
  450. }
  451.  
  452. .ppt1 {margin-left: 60px;}
  453. .ppt2 {margin-left: 80px;}
  454. .ppt3 {margin-left: 40px;}
  455. .post:hover .ppt1 {margin-left: 80px;}
  456. .post:hover .ppt2 {margin-left: 100px;}
  457. .post:hover .ppt3 {margin-left: 60px;}
  458. .ppm:hover .ppml1 {width:90px;}
  459. .ppm:hover .ppml2 {width:110px;}
  460. .ppm:hover .ppml3 {width:70px;}
  461. .ppm:hover .ppmd1 {margin-left:90px;}
  462. .ppm:hover .ppmd2 {margin-left:110px;}
  463. .ppm:hover .ppmd3 {margin-left:70px;}
  464. .ppm:hover .ppt1 {margin-left: 110px;}
  465. .ppm:hover .ppt2 {margin-left: 130px;}
  466. .ppm:hover .ppt3 {margin-left: 90px;}
  467.  
  468. .ppmta {
  469. position: absolute;
  470. font-family: courier new;
  471. font-size: 8px;
  472. letter-spacing: 1px;
  473. text-transform: uppercase;
  474. line-height: 24px;
  475. word-wrap: normal;
  476. {block:if500pxposts}width: 460px;{/block:if500pxposts}
  477. {block:if400pxposts}width: 360px;{/block:if400pxposts}
  478. padding-left: 20px;
  479. margin-top: 30px;
  480. opacity: 0;
  481. transition: 0.7s;
  482. -moz-transition: 0.7s;
  483. -webkit-transition: 0.7s;
  484. -o-transition: 0.7s;
  485. }
  486.  
  487. .post:hover .ppmta {
  488. opacity: 1;
  489. }
  490. .post:hover {
  491. {block:indexpage}margin-bottom: 120px;{/block:indexpage}
  492. }
  493.  
  494. .post img {
  495. {block:if400pxposts}
  496. max-width: 400px;height:auto;
  497. {/block:if400pxposts}
  498. {block:if500pxposts}
  499. max-width: 500px;height:auto;
  500. {/block:if500pxposts}
  501. }
  502. .post blockquote img {max-width: 100%;}
  503.  
  504. .ppmta a {
  505. background-color: {color:tags background};
  506. color: {color:tags};
  507. border: 1px solid {color:tags};
  508. padding: 4px 4px 4px 5px;
  509. margin-right: 30px;
  510. margin-top: 14px;
  511. transition: 0.7s;
  512. -moz-transition: 0.7s;
  513. -webkit-transition: 0.7s;
  514. -o-transition: 0.7s;
  515. }
  516.  
  517. .ppmtaic {
  518. background-color: {color:tags};
  519. color: {color:tags icon};
  520. font-size: 12px;
  521. padding: 1px 4px 2px 5px;
  522. margin: 3px -23px;
  523. position: absolute;
  524. height: 15px;
  525. line-height: 16px;
  526. }
  527.  
  528. .pps {
  529. width: 200px;
  530. height: 64px;
  531. position: absolute;
  532. z-index: 4;
  533. margin: 28px 380px;
  534. opacity: 0;
  535. {block:if500pxposts}margin: 28px 380px;{/block:if500pxposts}
  536. {block:if400pxposts}margin: 28px 280px;{/block:if400pxposts}
  537. transition: 0.7s;
  538. -moz-transition: 0.7s;
  539. -webkit-transition: 0.7s;
  540. -o-transition: 0.7s;
  541. }
  542.  
  543. .post:hover .pps {
  544. opacity: 1;
  545. {block:if500pxposts}margin: 28px 360px;{/block:if500pxposts}
  546. {block:if400pxposts}margin: 28px 260px;{/block:if400pxposts}
  547. }
  548.  
  549. .ppsicon {
  550. width: 50px;
  551. height: 50px;
  552. display: block;
  553. float: left;
  554. margin-right: 14px;
  555. }
  556.  
  557. .ppst, .ppsto {
  558. position: absolute;
  559. margin-top: 35px;
  560. margin-left: 5px;
  561. background-color: {color:post background};
  562. font-family: courier new;
  563. font-size: 10px;
  564. text-transform: uppercase;
  565. letter-spacing: 2px;
  566. color: {color:body text};
  567. }
  568.  
  569. .ppsto {
  570. margin-left: 69px;
  571. }
  572.  
  573. .ptitle, .ltitle {
  574. font-family: georgia;
  575. font-size: 15px;
  576. letter-spacing: 2px;
  577. line-height: 17px;
  578. color: {color:text post title};
  579. transition: 0.6s;
  580. -moz-transition: 0.6s;
  581. -webkit-transition: 0.6s;
  582. -o-transition: 0.6s;
  583. }
  584.  
  585. .ltitle {
  586. color: {color:link post title};
  587. }
  588.  
  589. .text {
  590. font-family: courier new;
  591. font-size: 11px;
  592. color: {color:body text};
  593. }
  594.  
  595. blockquote {
  596. border-left: 1px solid {color:blockquote};
  597. padding: 0 15px;
  598. margin: 10px;
  599. }
  600.  
  601. .text b,strong, #postinfo b,strong {
  602. color: {color:body bold};
  603. }
  604.  
  605. .text i,em, #postinfo i,em {
  606. color: {color:body italic};
  607. }
  608.  
  609. .text a, .qsrc a, #postinfo a, .notes a, .asker {
  610. color: {color:body links};
  611. text-decoration: underline;
  612. transition: 0.7s;
  613. -moz-transition: 0.7s;
  614. -webkit-transition: 0.7s;
  615. -o-transition: 0.7s;
  616. }
  617.  
  618. .text a:hover, .qsrc a:hover, #postinfo a:hover, .notes a:hover, .asker:hover {color: {color:body links hover};}
  619.  
  620. #txtpostperma {
  621. text-transform: uppercase;
  622. position: absolute;
  623. font-family: courier new;
  624. font-size: 10px;
  625. letter-spacing: 1px;
  626. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  627. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  628. text-align: right;
  629. margin-left: 20px;
  630. margin-top: -44px;
  631. opacity: 0;
  632. transition: 0.7s;
  633. -moz-transition: 0.7s;
  634. -webkit-transition: 0.7s;
  635. -o-transition: 0.7s;
  636. }
  637.  
  638. .tpt1, .tpt2, .tpt3 {
  639. background-color: {color:post background};
  640. padding: 1px 4px;
  641. }
  642.  
  643. .post:hover #txtpostperma {
  644. opacity: 1;
  645. margin-left: 0;
  646. }
  647.  
  648. .tpt1 {border: 1px solid {color:permalink colour 1}; color: {color:permalink colour 1};}
  649. .tpt2 {border: 1px solid {color:permalink colour 2}; color: {color:permalink colour 2};}
  650. .tpt3 {border: 1px solid {color:permalink colour 3}; color: {color:permalink colour 3};}
  651.  
  652. .quote {
  653. font-family: georgia;
  654. font-size: 17px;
  655. color: {color:quote post};
  656. letter-spacing: 2px;
  657. }
  658.  
  659. .qsrc {
  660. text-align: right;
  661. font-family: courier new;
  662. font-size: 10px;
  663. text-transform: uppercase;
  664. color: {color:quote post source};
  665. letter-spacing: 1px;
  666. }
  667.  
  668. .line {
  669. font-family: courier new;
  670. font-size: 10px;
  671. text-transform: uppercase;
  672. letter-spacing: 1px;
  673. color: {color:body text};
  674. text-align: left;
  675. padding: 4px 0;
  676. }
  677.  
  678. .odd .line {color:{color:chat odd text};}
  679. .even .line {
  680. color:{color:chat even text};
  681. background-color: {color:chat post alt bg};
  682. }
  683.  
  684. .odd .name {
  685. min-width: 60px;
  686. float: left;
  687. text-align: right;
  688. padding-right: 10px;
  689. }
  690.  
  691. .even .name {
  692. min-width: 60px;
  693. float: left;
  694. text-align: right;
  695. padding-right: 10px;
  696. }
  697.  
  698. .askerportrait {
  699. max-width: 64px;
  700. max-height: 64px;
  701. position: absolute;
  702. }
  703.  
  704. .a {
  705. margin-left: 50px;
  706. padding: 13px 10px;
  707. background-color: {color:ask background};
  708. font-family: courier new;
  709. font-size: 11px;
  710. letter-spacing: 1px;
  711. min-height: 14px;
  712. color: {color:ask text};
  713. }
  714.  
  715. .askerm {
  716. font-style: italic;
  717. padding-right: 3px;
  718. }
  719.  
  720. .asker { padding-left:3px; }
  721.  
  722. .q {margin-top: 10px;}
  723.  
  724. .asktri {
  725. color: {color:ask background};
  726. font-size: 24px;
  727. position: absolute;
  728. margin: 2px 34px;
  729. }
  730.  
  731. #postinfo {
  732. font-family: consolas;
  733. font-size: 10px;
  734. color: {color:body};
  735. padding: 20px;
  736. background-color: {color:post background};
  737. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  738. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  739. }
  740.  
  741. #applepie {
  742. {block:if400pxposts}width: 440px;{/block:if400pxposts}
  743. {block:if500pxposts}width: 540px;{/block:if500pxposts}
  744. margin-top: -15px;
  745. font-family: consolas;
  746. font-size: 10px;
  747. color: {color:body};
  748. margin-left: -20px;
  749. }
  750.  
  751. .notes li {
  752. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  753. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  754. font-family: consolas;
  755. font-size: 10px;
  756. padding: 10px 20px;
  757. margin-bottom: 5px;
  758. background-color: {color:post background};
  759. }
  760.  
  761. .notes img {
  762. margin-right: 10px;
  763. float: left;
  764. width: 13px;
  765. height: 13px;
  766. }
  767.  
  768. ol.notes {
  769. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  770. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  771. list-style-type: none;
  772. padding: 10px 20px;
  773. line-height: 15px;
  774. position: absolute;
  775. }
  776.  
  777. #fixedcbg {
  778. width: 540px;
  779. height: 100%;
  780. padding: 90px;
  781. position: fixed;
  782. z-index: -2;
  783. background-image: url({image:content background});
  784. background-attachment: fixed;
  785. {block:ifsidebaronleft}
  786. padding: 0;
  787. width: 70px;
  788. top: 0;
  789. left: 0;
  790. z-index: 100;
  791. {/block:ifsidebaronleft}
  792. }
  793.  
  794. #pagin {
  795. text-align: center;
  796. font-family: courier new;
  797. letter-spacing: 1px;
  798. font-size: 14px;
  799. color: {color:pagination divider};
  800. letter-spacing: 1px;
  801. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  802. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  803. }
  804.  
  805. #pagin a {
  806. text-decoration: underline;
  807. color: {color:pagination links};
  808. }
  809.  
  810. #pagin a:hover {
  811. color: {color:pagination links hover};
  812. }
  813.  
  814. {CustomCSS}
  815. </style>
  816. </head>
  817. <body>
  818.  
  819. <div id="fixedcbg"></div>
  820.  
  821. <div id="sidebar">
  822.  
  823. <div id="hidelinks">
  824.  
  825. <div class="linkm">
  826. {block:iflink1}<a href="{text:link 1 url}"><div class="linktitle" id="lt1">{text:link 1}</div><div class="linkline" id="ll1"></div><div class="linkdeco" id="ld1"></div></a>{/block:iflink1}
  827. </div><!--linkm-->
  828.  
  829. <div class="linkm">
  830. {block:iflink2}<a href="{text:link 2 url}"><div class="linktitle" id="lt2">{text:link 2}</div><div class="linkline" id="ll2"></div><div class="linkdeco" id="ld2"></div></a>{/block:iflink2}
  831. </div><!--linkm-->
  832.  
  833. <div class="linkm">
  834. {block:iflink3}<a href="{text:link 3 url}"><div class="linktitle" id="lt3">{text:link 3}</div><div class="linkline" id="ll3"></div><div class="linkdeco" id="ld3"></div></a>{/block:iflink3}
  835. </div><!--linkm-->
  836.  
  837. <div class="linkm">
  838. {block:iflink4}<a href="{text:link 4 url}"><div class="linktitle" id="lt4">{text:link 4}</div><div class="linkline" id="ll4"></div><div class="linkdeco" id="ld4"></div></a>{/block:iflink4}
  839. </div><!--linkm-->
  840.  
  841. <div class="linkm">
  842. {block:iflink5}<a href="{text:link 5 url}"><div class="linktitle" id="lt5">{text:link 5}</div><div class="linkline" id="ll5"></div><div class="linkdeco" id="ld5"></div></a>{/block:iflink5}
  843. </div><!--linkm-->
  844.  
  845. <div class="linkm">
  846. {block:iflink6}<a href="{text:link 6 url}"><div class="linktitle" id="lt6">{text:link 6}</div><div class="linkline" id="ll6"></div><div class="linkdeco" id="ld6"></div></a>{/block:iflink6}
  847. </div><!--linkm-->
  848.  
  849. </div><!--hidelinks-->
  850.  
  851. <img class="sbimg" src="{image:sidebar}" />
  852.  
  853. <div class="blogt"><div class="sq1"></div><div class="sq2"></div><div class="sq3"></div>{Title}</div>
  854.  
  855. <div class="desc">
  856. <span class="descl">{description}</span>
  857. </div><!--desc-->
  858.  
  859. <div class="basicnav">
  860. <a href="/"><div class="bn1"><span class="fa fa-file-o"></span></div><span class="bt1">refresh</span></a>
  861. <a href="/ask"><div class="bn2"><span class="fa fa-envelope-o"></span></div><span class="bt2">whisper</span></a>
  862. <a href="/archive"><div class="bn3"><span class="fa fa-folder-open-o"></span></div><span class="bt3">history</span></a>
  863. </div>
  864.  
  865. </div><!--sidebar-->
  866.  
  867. <div id="content">
  868. <div class="autopagerize_page_element">
  869. {Block:Posts}
  870.  
  871. <div class="post">
  872.  
  873. {block:photo}
  874. {block:indexpage}
  875. {block:RebloggedFrom}
  876. <div class="pps">
  877. <a href="{ReblogParentURL}"><div class="ppst">via</div><img class="ppsicon" src="{ReblogParentPortraitURL-64}" /></a>
  878. <a href="{ReblogRootURL}"><div class="ppsto">org</div><img class="ppsicon" src="{ReblogRootPortraitURL-64}" /></a>
  879. </div>
  880. {/block:RebloggedFrom}
  881. <div id="photosperma">{block:date}
  882. <a href="{Permalink}"><!--THE NOTE COUNT-->
  883. <div class="ppm">
  884. <div class="ppml1"></div><div class="ppmd1"></div>
  885. <div class="ppt1">{NoteCountWithLabel}</div>
  886. </div><!--ppm-->
  887. </a>
  888. <a href="{Permalink}"><!--TIME AGO POSTED-->
  889. <div class="ppm">
  890. <div class="ppml2"></div><div class="ppmd2"></div>
  891. <div class="ppt2">{TimeAgo}</div>
  892. </div><!--ppm-->
  893. </a>
  894. <a href="{ReblogURL}"><!--REBLOG-->
  895. <div class="ppm">
  896. <div class="ppml3"></div><div class="ppmd3"></div>
  897. <div class="ppt3">reblog</div>
  898. </div><!--ppm-->
  899. </a>
  900. {/block:date}</div><!--photosperma-->
  901. {/block:indexpage}
  902. {linkopentag}<center><img class="photo" src="{PhotoURL-HighRes}"></center>{linkclosetag}
  903. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  904. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  905. {/block:photo}
  906.  
  907. {block:Photoset}
  908. {block:indexpage}
  909. {block:RebloggedFrom}
  910. <div class="pps">
  911. <a href="{ReblogParentURL}"><div class="ppst">via</div><img class="ppsicon" src="{ReblogParentPortraitURL-64}" /></a>
  912. <a href="{ReblogRootURL}"><div class="ppsto">org</div><img class="ppsicon" src="{ReblogRootPortraitURL-64}" /></a>
  913. </div>
  914. {/block:RebloggedFrom}
  915. <div id="photosperma">{block:date}
  916. <a href="{Permalink}"><!--THE NOTE COUNT-->
  917. <div class="ppm">
  918. <div class="ppml1"></div><div class="ppmd1"></div>
  919. <div class="ppt1">{NoteCountWithLabel}</div>
  920. </div><!--ppm-->
  921. </a>
  922. <a href="{Permalink}"><!--TIME AGO POSTED-->
  923. <div class="ppm">
  924. <div class="ppml2"></div><div class="ppmd2"></div>
  925. <div class="ppt2">{TimeAgo}</div>
  926. </div><!--ppm-->
  927. </a>
  928. <a href="{ReblogURL}"><!--REBLOG-->
  929. <div class="ppm">
  930. <div class="ppml3"></div><div class="ppmd3"></div>
  931. <div class="ppt3">reblog</div>
  932. </div><!--ppm-->
  933. </a>
  934. {/block:date}</div><!--photosperma-->
  935. {/block:indexpage}
  936. <div class="photo">{Photoset}</div>
  937. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  938. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  939. {/block:Photoset}
  940.  
  941. {block:Text}
  942. {block:indexpage}
  943. {Block:date}
  944. <div id="txtpostperma">
  945. <a href="{Permalink}"><span class="tpt1">{NoteCountWithLabel}</span></a> <a href="{Permalink}"><span class="tpt2">{TimeAgo}</span></a> <a href="{ReblogURL}"><span class="tpt3">Reblog</span></a>
  946. </div><!--txtpostperma-->
  947. {/Block:date}
  948. {/block:indexpage}
  949. {block:title}<div class="ptitle"><div class="sq1"></div><div class="sq2"></div><div class="sq3"></div>{Title}</div>{/block:title}
  950. <div class="text">{Body}</div>
  951. {/block:Text}
  952.  
  953. {block:Quote}
  954. {block:indexpage}
  955. {Block:date}
  956. <div id="txtpostperma">
  957. <a href="{Permalink}"><span class="tpt1">{NoteCountWithLabel}</span></a> <a href="{Permalink}"><span class="tpt2">{TimeAgo}</span></a> <a href="{ReblogURL}"><span class="tpt3">Reblog</span></a>
  958. </div><!--txtpostperma-->
  959. {/Block:date}
  960. {/block:indexpage}
  961. <div class="quote">{Quote}</div> <div class="qsrc">-- {Source}</div>
  962. {/block:Quote}
  963.  
  964. {block:Link}
  965. {block:indexpage}
  966. {Block:date}
  967. <div id="txtpostperma">
  968. <a href="{Permalink}"><span class="tpt1">{NoteCountWithLabel}</span></a> <a href="{Permalink}"><span class="tpt2">{TimeAgo}</span></a> <a href="{ReblogURL}"><span class="tpt3">Reblog</span></a>
  969. </div><!--txtpostperma-->
  970. {/Block:date}
  971. {/block:indexpage}
  972. <a href="{URL}"><div class="ltitle"><div class="sq1"></div><div class="sq2"></div><div class="sq3"></div>{Name} <span class="fa fa-link"></span></div></a>
  973. {block:Description}<div class="text">{Description}</div>{block:Description}
  974. {/block:Link}
  975.  
  976. {block:chat}
  977. {block:indexpage}
  978. {Block:date}
  979. <div id="txtpostperma">
  980. <a href="{Permalink}"><span class="tpt1">{NoteCountWithLabel}</span></a> <a href="{Permalink}"><span class="tpt2">{TimeAgo}</span></a> <a href="{ReblogURL}"><span class="tpt3">Reblog</span></a>
  981. </div><!--txtpostperma-->
  982. {/Block:date}
  983. {/block:indexpage}
  984. {block:title}<div class="ptitle"><div class="sq1"></div><div class="sq2"></div><div class="sq3"></div>{title}</div>{/block:title}
  985. {block:Lines}<div class="{Alt}">
  986. <div class="line">{block:Label}<div class="name">{Label}</div>{/block:Label} {Line}<br /></div></div>
  987. {/block:Lines}
  988. {/block:chat}
  989.  
  990. {block:audio}
  991. {block:indexpage}
  992. {Block:date}
  993. <div id="txtpostperma">
  994. <a href="{Permalink}"><span class="tpt1">{NoteCountWithLabel}</span></a> <a href="{Permalink}"><span class="tpt2">{TimeAgo}</span></a> <a href="{ReblogURL}"><span class="tpt3">Reblog</span></a>
  995. </div><!--txtpostperma-->
  996. {/Block:date}
  997. {/block:indexpage}
  998. <div class="audioembed">
  999. {block:if400pxposts}{audioembed-400}{/block:if400pxposts}
  1000. {block:if500pxposts}{audioembed-500}{/block:if500pxposts}
  1001. </div>
  1002. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  1003. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  1004. {/block:audio}
  1005.  
  1006. {block:video}
  1007. {block:indexpage}
  1008. {Block:date}
  1009. <div id="txtpostperma">
  1010. <a href="{Permalink}"><span class="tpt1">{NoteCountWithLabel}</span></a> <a href="{Permalink}"><span class="tpt2">{TimeAgo}</span></a> <a href="{ReblogURL}"><span class="tpt3">Reblog</span></a>
  1011. </div><!--txtpostperma-->
  1012. {/Block:date}
  1013. {/block:indexpage}
  1014. {block:if500pxposts}{video-500}{/block:if500pxposts}
  1015. {block:if400pxposts}{video-400}{/block:if400pxposts}
  1016. {block:ifshowcaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:ifshowcaptions}
  1017. {block:ifnotshowcaptions}{block:permalinkpage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:permalinkpage}{/block:ifnotshowcaptions}
  1018. {/block:video}
  1019.  
  1020. {block:Answer}
  1021. {block:indexpage}
  1022. {Block:date}
  1023. <div id="txtpostperma">
  1024. <a href="{Permalink}"><span class="tpt1">{NoteCountWithLabel}</span></a> <a href="{Permalink}"><span class="tpt2">{TimeAgo}</span></a> <a href="{ReblogURL}"><span class="tpt3">Reblog</span></a>
  1025. </div><!--txtpostperma-->
  1026. {/Block:date}
  1027. {/block:indexpage}
  1028. <img class="askerportrait" src="{AskerPortraitURL-40}">
  1029. <div class="asktri">◀</div>
  1030. <div class="a">
  1031. <span class="askerm"><span class="fa fa-quote-left"></span> {Asker} sent -</span>
  1032. <span class="q">{Question}</span>
  1033. </div>
  1034. <div class="text">{Answer}</div>
  1035. {/block:Answer}
  1036.  
  1037. {block:indexpage}
  1038. <div class="ptag">
  1039. {block:HasTags}<div class="ppmta">{block:Tags}
  1040. <a href="{TagURL}"><span class="ppmtaic"><span class="fa fa-tag"></span></span>{Tag} </a>
  1041. {/block:Tags}</div>{/block:HasTags}
  1042. </div><!--ptag-->
  1043. {/block:indexpage}
  1044.  
  1045. </div><!--post-->
  1046.  
  1047. {block:permalinkpage}{block:date}
  1048. <div id="postinfo">
  1049. post made on {DayOfMonthWithZero} {Month} {Year}, {DayOfWeek} at {12HourWithZero}.{Minutes}{CapitalAmPm}<br>with {NoteCountWithLabel}
  1050. {Block:HasTags}
  1051. <div class="napkin">{block:Tags}
  1052. <a href="{TagURL}">#{Tag}</a>
  1053. {/block:Tags}</div><!--napkin-->
  1054. {/Block:HasTags}
  1055. </div>
  1056. {/block:date}{/block:permalinkpage}
  1057.  
  1058. {block:PostNotes}
  1059. <div id="applepie">{PostNotes-16}</div><!--applepie note container-->
  1060. {/block:PostNotes}
  1061.  
  1062. {/Block:Posts}
  1063.  
  1064. {block:ifnotinfinitescroll}
  1065. {block:pagination}
  1066. <div id="pagin">
  1067. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} /
  1068. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  1069. </div><!--pagin-->
  1070. {/block:pagination}
  1071. {/block:ifnotinfinitescroll}
  1072.  
  1073. </div><!--autopagerise-->
  1074.  
  1075. </div><!--content-->
  1076.  
  1077. {block:ContentSource}
  1078. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1079. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1080. {/block:SourceLogo}
  1081. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1082. {/block:ContentSource}
  1083.  
  1084. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}-->
  1085.  
  1086. <a href="http://yukoki.tumblr.com"><div style="background-color:#fff;color: #8f8f8f;font-family:courier new;font-size:10px;text-transform:uppercase;letter-spacing:1px;position:fixed;bottom:10px;right:10px;padding:3px 5px;z-index:100000;"><span class="fa fa-code"></span> yukoki themes</div></a>
  1087.  
  1088. </body>
  1089. </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!