API tools faq
paste
Advertisement
mogimochi

Theme [23] Eternal

mogimochi
Apr 27th, 2013
36,152
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 23 Eternal
  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. --------------------------------------------------- UPDATE VER 070216 -->
  17.  
  18. <meta name="color:background" content="#f5f5f5" />
  19. <meta name="color:post background" content="#424242" />
  20.  
  21. <meta name="color:post title" content="#c2c2c2" />
  22. <meta name="color:link post title" content="#222222" />
  23. <meta name="color:link post title hover" content="#ffffff" />
  24. <meta name="color:post title background" content="#4e6b70" />
  25. <meta name="color:link title background" content="#5b5f57" />
  26.  
  27. <meta name="color:sidebar background" content="#e6e4e4" />
  28. <meta name="color:desc text" content="#a09e9e" />
  29. <meta name="color:desc links" content="#9be2e9" />
  30. <meta name="color:desc links hover" content="#fffff" />
  31. <meta name="color:desc bold" content="#6d8da7" />
  32. <meta name="color:desc italic" content="#61aa9c" />
  33. <meta name="color:title first letter" content="#bd5a5a" />
  34. <meta name="color:title text" content="#292828" />
  35.  
  36. <meta name="color:body" content="#9b9a9a" />
  37. <meta name="color:body links" content="#3b8d76" />
  38. <meta name="color:body links hover" content="#f5f6f7" />
  39. <meta name="color:bold text" content="#617286" />
  40. <meta name="color:italic text" content="#e9e7e7" />
  41. <meta name="color:blockquote" content="#59787e" />
  42.  
  43. <meta name="color:pagination" content="#8a8989" />
  44. <meta name="color:pagination links" content="#546175" />
  45. <meta name="color:pagination links hover" content="#fffdfd" />
  46.  
  47. <meta name="color:custom links bg" content="#59767b" />
  48. <meta name="color:custom links text" content="#ffffff" />
  49.  
  50. <meta name="color:top bar background" content="#5a5959" />
  51. <meta name="color:main borders" content="#5a5959" />
  52. <meta name="color:navigation text" content="#302f2f" />
  53. <meta name="color:right sidebar background" content="#413f3f" />
  54.  
  55. <meta name="color:audio info bg" content="#353535" />
  56. <meta name="color:audio info text" content="#888888" />
  57. <meta name="color:ask background" content="#484d52" />
  58. <meta name="color:asker link" content="#88a1b9" />
  59. <meta name="color:asker link hover" content="#353535" />
  60. <meta name="color:asker text" content="#000000" />
  61. <meta name="color:ask text" content="#ffffff" />
  62. <meta name="color:perma bg" content="#e6e6e6" />
  63. <meta name="color:perma text" content="#5a5a5a" />
  64. <meta name="color:perma links" content="#8d8f8d" />
  65. <meta name="color:perma links hover" content="#1d1d1d" />
  66.  
  67. <meta name="color:chat even name" content="#aac9db" />
  68. <meta name="color:chat even background" content="#5d5e5f" />
  69. <meta name="color:chat even text" content="#c4c2c2" />
  70. <meta name="color:chat odd name" content="#cddbdf" />
  71. <meta name="color:chat odd background" content="#535353" />
  72. <meta name="color:chat odd text" content="#9ea0a0" />
  73.  
  74. <meta name="image:background" content="">
  75. <meta name="image:top bar background" content="">
  76. <meta name="image:right sidebar bg" content="">
  77. <meta name="image:left pic" content="">
  78. <meta name="image:right pic" content="">
  79.  
  80. <meta name="text:billy music player code" content="">
  81. <meta name="text:link 1" content="">
  82. <meta name="text:link 2" content="">
  83. <meta name="text:link 3" content="">
  84. <meta name="text:link 4" content="">
  85. <meta name="text:link 5" content="">
  86. <meta name="text:link 6" content="">
  87. <meta name="text:link 1 URL" content="">
  88. <meta name="text:link 2 URL" content="">
  89. <meta name="text:link 3 URL" content="">
  90. <meta name="text:link 4 URL" content="">
  91. <meta name="text:link 5 URL" content="">
  92. <meta name="text:link 6 URL" content="">
  93. <meta name="text:title 1" content="">
  94. <meta name="text:title 2" content="">
  95.  
  96. <meta name="if:music player" content="1">
  97. <meta name="if:show captions" content="1">
  98. <meta name="if:monochrome posts" content="0">
  99. <meta name="if:infinite scroll" content="0">
  100. <meta name="if:permalink 2" content="1">
  101. <meta name="if:show tags" content="1">
  102. <meta name="if:grey audio player" content="1">
  103. <meta name="if:big posts" content="1">
  104. <meta name="if:med posts" content="0">
  105. <meta name="if:photo fading" content="0">
  106.  
  107. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  108. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  109. <link rel="shortcut icon" href="{Favicon}" />
  110.  
  111. <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  112. <link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
  113.  
  114. <style type="text/css">
  115.  
  116. .tmblr-iframe {
  117. z-index:999999999!important; margin-top: 13px;right:3px !important; position:fixed !important;
  118. -webkit-transition: all 0.4s ease-in-out;
  119. -moz-transition: all 0.4s ease-in-out;
  120. -o-transition: all 0.4s ease-in-out;
  121. -ms-transition: all 0.4s ease-in-out;
  122. transition: all 0.4s ease-in-out;
  123. }
  124.  
  125. body {
  126. background-color: {color:background};
  127. background-image: url({image:background});
  128. background-attachment: fixed;
  129. margin: 0;
  130. word-wrap: break-word;
  131. }
  132. a { text-decoration:none;
  133. -webkit-transition: all 0.4s ease-in-out;
  134. -moz-transition: all 0.4s ease-in-out;
  135. -o-transition: all 0.4s ease-in-out;
  136. -ms-transition: all 0.4s ease-in-out;
  137. transition: all 0.4s ease-in-out;}
  138. pre {
  139. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  140. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  141. word-wrap: break-word;
  142. overflow: auto;
  143. }
  144.  
  145. #content {
  146. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  147. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  148. {block:ifbigposts}margin: 105px 0 60px 350px;{/block:ifbigposts}
  149. {block:ifmedposts}margin: 105px 0 60px 450px;{/block:ifmedposts}
  150. }
  151. .posts {
  152. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  153. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  154. padding: 10px;
  155. background-color: {color:post background};
  156. margin: 10px 0;
  157. }
  158.  
  159. .posts img {
  160. {block:ifbigposts}max-width: 500px;{/block:ifbigposts}
  161. {block:ifmediumposts}max-width: 400px;{/block:ifmediumposts}
  162. }
  163. .posts blockquote img {max-width: 100%;}
  164.  
  165. .postu {
  166. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  167. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  168. {block:ifphotofading}opacity: 0.8;{/block:ifphotofading}
  169. {block:Ifmonochromeposts}
  170. 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+ */
  171. filter: gray; /* IE6-9 */
  172. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  173. -webkit-transition: all 0.7s linear;
  174. -moz-transition: all 0.7s linear;
  175. -o-transition: all 0.7s linear;
  176. {/block:ifmonochromeposts}
  177. display: block;
  178. -webkit-transition: all 0.4s ease-in-out;
  179. -moz-transition: all 0.4s ease-in-out;
  180. -o-transition: all 0.4s ease-in-out;
  181. -ms-transition: all 0.4s ease-in-out;
  182. transition: all 0.4s ease-in-out;
  183. }
  184. .posts:hover .postu {opacity:1;filter:none;-webkit-filter: grayscale(0%);}
  185.  
  186. .title {
  187. font-family: 'Economica', sans-serif;
  188. text-transform: uppercase;
  189. background-color: {color:post title background};
  190. font-size: 16px;
  191. letter-spacing: 5px;
  192. padding: 5px 0 5px 30px;
  193. color: {color:post title};
  194. }
  195. .ltitle {
  196. font-family: 'Economica', sans-serif;
  197. text-transform: uppercase;
  198. background-color: {color:link title background};
  199. font-size: 16px;
  200. letter-spacing: 5px;
  201. padding: 5px 0 5px 30px;
  202. color: {color:link post title};
  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. }
  209. .ltitle:hover { color: {color:link post title hover};}
  210.  
  211. blockquote {
  212. border-left: 3px solid {color:blockquote};
  213. padding-left: 10px;
  214. margin-left: 10px;
  215. }
  216. .text {
  217. font-family: calibri;
  218. font-size: 12px;
  219. color: {color:body};
  220. }
  221.  
  222. .quote {
  223. font-family: 'Economica', sans-serif;
  224. text-transform: uppercase;
  225. font-size: 16px;
  226. margin-left: -10px;
  227. padding: 10px 10px 0 10px;
  228. text-align: right;
  229. border-bottom: 1px dashed {color: bold text};
  230. color: {color:post title};
  231. }
  232. .src {
  233. margin-top: -20px;
  234. font-family: source code pro;
  235. text-transform: uppercase;
  236. font-size: 10px;
  237. color: {color:body};
  238. padding: 0 5px 10px 0;
  239. text-align: right;
  240. }
  241. .odd .line {background-color: {color:chat odd background};padding: 3px 5px;color:{color:chat odd text};}
  242. .even .line {background-color: {color:chat even background};padding: 3px 5px;color:{color:chat even text};}
  243. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  244. .even .name {color: {color:chat even name};padding: 3px 5px;}
  245.  
  246. #album {
  247. width: 80px;
  248. height: 80px;
  249. background-color: #888;
  250. overflow: hidden;
  251. }
  252. .noalbum {
  253. width: 80px;
  254. height: 80px;
  255. background-color: #888;
  256. z-index: 50;
  257. }
  258. .albumart {
  259. width: 80px;
  260. height: 80px;
  261. z-index: 50;
  262. }
  263. .aud {
  264. width: 35px;
  265. height: 35px;
  266. {block:ifnotgreyaudioplayer}background-color:#fff;{/block:ifnotgreyaudioplayer}
  267. {block:ifgreyaudioplayer}background-color: #e4e4e4;{/block:ifgreyaudioplayer}
  268. padding-top: 10px;
  269. padding-left: 10px;
  270. margin: 17px;
  271. opacity: 0.1;
  272. overflow: hidden;
  273. position: absolute;
  274. -webkit-transition: all 0.8s ease-in-out;
  275. -moz-transition: all 0.8s ease-in-out;
  276. -o-transition: all 0.8s ease-in-out;
  277. -ms-transition: all 0.8s ease-in-out;
  278. transition: all 0.8s ease-in-out;
  279. }
  280. .aud:hover {
  281. opacity: 1;
  282. width: 450px;
  283. -webkit-transition: all 0.4s ease-in-out;
  284. -moz-transition: all 0.4s ease-in-out;
  285. -o-transition: all 0.4s ease-in-out;
  286. -ms-transition: all 0.4s ease-in-out;
  287. transition: all 0.4s ease-in-out;
  288. }
  289. .info {
  290. background-color: {color:audio info bg};
  291. color: {color:audio info text};
  292. text-transform: uppercase;
  293. padding: 0 10px;
  294. font-family: consolas, source code pro;
  295. {block:ifbigposts}width: 400px;{/block:ifbigposts}
  296. {block:ifmedposts}width: 300px;{/block:ifmedposts}
  297. font-size: 10px;
  298. line-height:20px;
  299. -webkit-transition: all 0.4s ease-in-out;
  300. -moz-transition: all 0.4s ease-in-out;
  301. -o-transition: all 0.4s ease-in-out;
  302. -ms-transition: all 0.4s ease-in-out;
  303. transition: all 0.4s ease-in-out;
  304. }
  305. .info b,strong {color: {color:bold text};}
  306. .information {
  307. position: absolute;
  308. margin: 0 80px;
  309. }
  310.  
  311. #ask {
  312. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  313. {block:ifmediumposts}width: 400px;{/block:ifmediumposts}
  314. background-color: {color:ask background};
  315. }
  316. .askerportrait {position:absolute;}
  317. .a {
  318. margin-left: 65px;
  319. background-color: {color:ask background};
  320. min-height: 50px;
  321. padding: 5px 10px 10px 10px;
  322. font-family: calibri,geneva;
  323. font-size: 13px;
  324. color: {color:ask text};
  325. }
  326. .asker {
  327. color: {color:asker text};
  328. font-family: source code pro;
  329. font-size: 10px;
  330. text-transform: uppercase;
  331. }
  332. .asker a {color: {color:asker link};border-bottom: 1px dashed {color:asker link};}
  333. -webkit-transition: all 0.4s ease-in-out;
  334. -moz-transition: all 0.4s ease-in-out;
  335. -o-transition: all 0.4s ease-in-out;
  336. -ms-transition: all 0.4s ease-in-out;
  337. transition: all 0.4s ease-in-out;}\.asker a:hover { color:{color:asker link hover};}
  338. .q {margin-top: 10px;}
  339. .tri {
  340. position: absolute;
  341. font-size: 30px;
  342. margin: 0 0 0 85px;
  343. color: {color:ask background};
  344. }
  345.  
  346. #notecontainer {
  347. padding: 10px;
  348. text-decoration: none;
  349. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  350. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  351. }
  352. #notecontainer ol.notes {
  353. list-style-type: none;
  354. letter-spacing: -1px;
  355. font-size: 11px;
  356. color: {color:body};
  357. font-family: consolas, source code pro;
  358. text-decoration: none;
  359. margin: 0;
  360. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  361. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  362. width: 500px;
  363. padding: 5px;
  364. text-align: left;
  365. }
  366. #notecontainer ol.notes a {color: {color:body links};}
  367. #notecontainer ol.notes a:hover {color: {color:hover body links};}
  368. #notecontainer img.avatar {
  369. margin-right: 5px;
  370. float: left;
  371. width: 10px;
  372. height: 10px;
  373. }
  374.  
  375. .permalinkpg {
  376. text-align: right;
  377. border-top: 1px dashed {color:bold text};
  378. border-bottom: 1px dashed {color:bold text};
  379. margin-top: 10px;
  380. font-family: source code pro;
  381. font-size: 10px;
  382. padding: 10px;
  383. color: {color:body};
  384. }
  385. .permalinkpg a {color:{color:body links};}
  386. .permalinkpg a:hover {color:{color:hover body links};}
  387.  
  388. #permalink {
  389. font-family: consolas, source code pro;
  390. font-size: 9px;
  391. text-transform: uppercase;
  392. text-align: center;
  393. background-color: {color:perma bg};
  394. color: {color:perma text};
  395. padding: 3px 10px 3px 10px;
  396. {block:ifbigposts}width:480px;{/block:ifbigposts}
  397. {block:ifmedposts}width:380px;{/block:ifmedposts}
  398. -webkit-transition: all 0.4s ease-in-out;
  399. -moz-transition: all 0.4s ease-in-out;
  400. -o-transition: all 0.4s ease-in-out;
  401. -ms-transition: all 0.4s ease-in-out;
  402. transition: all 0.4s ease-in-out;
  403. }
  404. #permalink a { color: {color:perma links};}
  405. #permalink a:hover { color: {color:perma links hover}; }
  406.  
  407. .taggu {
  408. text-align:center;
  409. color: {color:tags};
  410. -webkit-transition: all 0.4s ease-in-out;
  411. -moz-transition: all 0.4s ease-in-out;
  412. -o-transition: all 0.4s ease-in-out;
  413. -ms-transition: all 0.4s ease-in-out;
  414. transition: all 0.4s ease-in-out;
  415. }
  416.  
  417. .taggu a {
  418. font-family: consolas, source code pro;
  419. font-size: 9px;
  420. letter-spacing: 1px;
  421. color: {color:tags};
  422. -webkit-transition: all 0.4s ease-in-out;
  423. -moz-transition: all 0.4s ease-in-out;
  424. -o-transition: all 0.4s ease-in-out;
  425. -ms-transition: all 0.4s ease-in-out;
  426. transition: all 0.4s ease-in-out;
  427. }
  428. .taggu a:hover {color: {color:tags hover};}
  429.  
  430. #topbar {
  431. width: 10000px;
  432. position: fixed;
  433. padding-left: 300px;
  434. top: 0;
  435. left: 0;
  436. z-index: 1000;
  437. height: 75px;
  438. background-color: {color:top bar background};
  439. background-image: url({image:top bar background});
  440. border-bottom: 10px solid {color:main borders};
  441. border-top: 10px solid {color:main borders};
  442. }
  443.  
  444. #left {
  445. width: 150px;
  446. top: 105px;
  447. position: fixed;
  448. {block:ifbigposts}left: 180px;{/block:ifbigposts}
  449. {block:ifmedposts}left: 280px;{/block:ifmedposts}
  450. }
  451. #sbpic {width: 150px;}
  452. .link {
  453. font-family: consolas;
  454. padding-left: 10px;
  455. font-size: 10px;
  456. text-transform: uppercase;
  457. letter-spacing: 1px;
  458. margin-bottom: 3px;
  459. color: {color:custom links text};
  460. background-color: {color:custom links bg};
  461. width: 140px;
  462. text-align: center;
  463. opacity: 0.6;
  464. -webkit-transition: all 0.4s ease-in-out;
  465. -moz-transition: all 0.4s ease-in-out;
  466. -o-transition: all 0.4s ease-in-out;
  467. -ms-transition: all 0.4s ease-in-out;
  468. transition: all 0.4s ease-in-out;
  469. }
  470. .link:hover {opacity:1;}
  471. #custom {
  472. {block:ifbigposts}left: 200px;{/block:ifbigposts}
  473. {block:ifmedposts}left: 300px;{/block:ifmedposts}
  474. z-index: 100000;
  475. -webkit-transition: all 0.4s ease-in-out;
  476. -moz-transition: all 0.4s ease-in-out;
  477. -o-transition: all 0.4s ease-in-out;
  478. -ms-transition: all 0.4s ease-in-out;
  479. transition: all 0.4s ease-in-out;
  480. }
  481.  
  482. #basicnav {
  483. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  484. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  485. margin-top:3px;
  486. position: fixed;
  487. z-index:10000;
  488. {block:ifbigposts}margin-left:185px;{/block:ifbigposts}
  489. {block:ifmedposts}margin-left:235px;{/block:ifmedposts}
  490. }
  491.  
  492. #nav {
  493. width: auto;
  494. padding: 0 15px;
  495. margin: 2px 10px;
  496. height: 10px;
  497. line-height: 10px;
  498. text-align: center;
  499. font-family: consolas;
  500. font-size: 9px;
  501. color: {color:navigation text};
  502. background-color: {color:top bar background};
  503. background-image: url({image:top bar background});
  504. float: left;
  505. -webkit-transition: all 0.4s ease-in-out;
  506. -moz-transition: all 0.4s ease-in-out;
  507. -o-transition: all 0.4s ease-in-out;
  508. -ms-transition: all 0.4s ease-in-out;
  509. transition: all 0.4s ease-in-out;
  510. }
  511. #nav:hover { height: 20px; line-height:20px;}
  512.  
  513. .btitle {
  514. {block:ifbigposts}margin-left: 50px;width:520px;{/block:ifbigposts}
  515. {block:ifmedposts}margin-left: 150px;width:420px;{/block:ifmedposts}
  516. padding:10px 0 5px 0;
  517. }
  518. .btitlea {
  519. {block:ifbigposts}width:520px;{/block:ifbigposts}
  520. {block:ifmedposts}width:420px;{/block:ifmedposts}
  521. color: {color:title text};
  522. text-align:center;
  523. font-size: 20px;
  524. letter-spacing: 5px;
  525. font-family: economica;
  526. line-height: 50px;
  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. .btitleb {
  534. {block:ifbigposts}width:520px;{/block:ifbigposts}
  535. {block:ifmedposts}width:420px;{/block:ifmedposts}
  536. margin-top: -37px;
  537. position: absolute;
  538. font-size: 20px;
  539. letter-spacing: 5px;
  540. font-family: economica;
  541. color: {color:title text};
  542. opacity: 0;
  543. text-align:center;
  544. -webkit-transition: all 0.4s ease-in-out;
  545. -moz-transition: all 0.4s ease-in-out;
  546. -o-transition: all 0.4s ease-in-out;
  547. -ms-transition: all 0.4s ease-in-out;
  548. transition: all 0.4s ease-in-out;
  549. }
  550. .btitlea:first-letter, .btitleb:first-letter { color: {color:title first letter};}
  551. #topbar:hover .btitlea { opacity: 0; }
  552. #topbar:hover .btitleb { opacity: 1; }
  553.  
  554. .desc {
  555. width: 160px;
  556. text-align: justify;
  557. padding: 10px 20px;
  558. font-family: calibri;
  559. font-size: 11px;
  560. color: {color:desc text};
  561. }
  562. .desc a {color:{color:desc links};}
  563. .desc a:hover {color:{color:desc links hover};}
  564. .desc b,strong {color:{color:desc bold};}
  565. .desc i,em {color:{color:desc italic};}
  566.  
  567. #sidebar {
  568. position: fixed;
  569. top: 0;
  570. width: 200px;
  571. height: 100000px;
  572. background-color: {color:right sidebar background};
  573. background-image: url({image:right sidebar bg});
  574. left: 890px;
  575. border-left: 10px solid {color:main borders};
  576. border-right: 10px solid {color:main borders};
  577. }
  578. .rightpic {width: 200px;margin-top: 95px;display:block;}
  579.  
  580. #thcredit {
  581. background-color: #fff;
  582. border-top: 1px solid {color:main borders};
  583. border-left: 1px solid {color:main borders};
  584. padding: 5px;
  585. position: fixed;
  586. bottom: 0;
  587. right: -55px;
  588. font-family: economica;
  589. font-size: 16px;
  590. color: #888;
  591. letter-spacing: 2px;
  592. border-radius: 20px 0 0 0;
  593. z-index: 10000;
  594. opacity: 0.6;
  595. -webkit-transition: all 0.4s ease-in-out;
  596. -moz-transition: all 0.4s ease-in-out;
  597. -o-transition: all 0.4s ease-in-out;
  598. -ms-transition: all 0.4s ease-in-out;
  599. transition: all 0.4s ease-in-out;
  600. }
  601. #thcredit:hover {
  602. right: 0;
  603. opacity: 1;
  604. }
  605.  
  606. .pagination {
  607. width: 200px;
  608. text-align: center;
  609. font-family: courier new;
  610. font-size: 12px;
  611. color: {color:pagination};
  612. }
  613. .pagination a {color: {color:pagination links};}
  614. .pagination a:hover {color:{color:pagination links hover};}
  615.  
  616. #music {
  617. width: 25px;
  618. height: 25px;
  619. overflow: hidden;
  620. position: fixed;
  621. background-color: {color:post background};
  622. top: 110px;
  623. left: 140px;
  624. }
  625. .musicgif {
  626. margin: 5px;
  627. -webkit-transition: all 0.4s ease-in-out;
  628. -moz-transition: all 0.4s ease-in-out;
  629. -o-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;
  630. transition: all 0.4s ease-in-out;
  631. }
  632. #music:hover .musicgif {
  633. margin-top: -30px;
  634. }
  635.  
  636. #musicpl {
  637. width: 20px;
  638. overflow: hidden;
  639. height: 20px;
  640. padding: 2px 20px 10px 0;
  641. margin-left: -17px;
  642. background-color: {color:post background};
  643. }
  644.  
  645. .text b,strong {color:{color:bold text};}
  646. .text i,em {color:{color:italic text};}
  647. .text ul {list-style-type: square;}
  648. .text a, .src a, .permalinkpg a {color: {color:body links};
  649. -webkit-transition: all 0.4s ease-in-out;
  650. -moz-transition: all 0.4s ease-in-out;
  651. -o-transition: all 0.4s ease-in-out;
  652. -ms-transition: all 0.4s ease-in-out;
  653. transition: all 0.4s ease-in-out;}
  654. .text a:hover, .src a:hover, .permalinkpg a:hover {color: {color:body links hover};}
  655.  
  656.  
  657. {CustomCSS}
  658.  
  659. </style>
  660. {block:IfInfiniteScroll}
  661. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  662. {/block:IfInfiniteScroll}
  663. </head>
  664. <body>
  665.  
  666. <a href="http://yukoki.tumblr.com"><div id="thcredit">✎ YUKOKI</div></a>
  667.  
  668. <div id="topbar">
  669. <div id="left">
  670.  
  671. {block:ifmusicplayer}
  672. <div id="music">
  673. <div class="musicgif"><img src="http://media.tumblr.com/tumblr_m7vzhvERfC1r6o8v2.gif"/></div>
  674. <div id="musicpl">{text:billy music player code}</div>
  675. </div>
  676. {/block:ifmusicplayer}
  677.  
  678. <img id="sbpic" src="{image:left pic}">
  679. <div id="custom">
  680. {block:IfLink1}<a href="{text:Link 1 URL}"><div class="link">{text:Link 1}</div></a>{/block:IfLink1}
  681. {block:IfLink2}<a href="{text:Link 2 URL}"><div class="link">{text:Link 2}</div></a>{/block:IfLink2}
  682. {block:IfLink3}<a href="{text:Link 3 URL}"><div class="link">{text:Link 3}</div></a>{/block:IfLink3}
  683. {block:IfLink4}<a href="{text:Link 4 URL}"><div class="link">{text:Link 4}</div></a>{/block:IfLink4}
  684. {block:IfLink5}<a href="{text:Link 5 URL}"><div class="link">{text:Link 5}</div></a>{/block:IfLink5}
  685. {block:IfLink6}<a href="{text:Link 6 URL}"><div class="link">{text:Link 6}</div></a>{/block:IfLink6}
  686. </div><!--custom-->
  687. </div><!--left-->
  688.  
  689. <div class="btitle"><div class="btitlea">{text:title 1}<span style="color:{color:title first letter}">;</span></div>
  690. <div class="btitleb">{text:title 2}<span style="color:{color:title first letter}">;</span></div></div>
  691.  
  692. <div id="basicnav">
  693. <a href="/"><div id="nav">index</div></a>
  694. <a href="/ask"><div id="nav">message</div></a>
  695. <a href="/archive"><div id="nav">archive</div></a>
  696. </div><!--basicnav-->
  697.  
  698. </div><!--topbar-->
  699.  
  700. <div id="sidebar">
  701.  
  702. <img class="rightpic" src="{image:right pic}">
  703.  
  704. <div class="desc">{description}</div>
  705.  
  706. {block:ifnotinfinitescroll}
  707. {block:Pagination}<div class="pagination">
  708. {block:PreviousPage}
  709. <a href="{PreviousPage}" class="jump_page">←</a>
  710. {/block:PreviousPage}
  711.  
  712. {block:JumpPagination length="5"}
  713. {block:CurrentPage}
  714. <span class="current_page">{currentpage}</span>
  715. {/block:CurrentPage}
  716.  
  717. {block:JumpPage}
  718. <a class="jump_page" href="{URL}">{PageNumber}</a>
  719. {/block:JumpPage}
  720. {/block:JumpPagination}
  721.  
  722. {block:NextPage}
  723. <a href="{NextPage}" class="jump_page">→</a>
  724. {/block:NextPage}
  725. </div><!--pagination-->{/block:Pagination}
  726. {/block:ifnotinfinitescroll}
  727.  
  728. </div><!--sidebar-->
  729.  
  730. <!--content-->
  731.  
  732. <div id="content">
  733. {block:Posts}<div class="posts">
  734.  
  735. {block:Photo}
  736. {LinkOpenTag}<div class="postu">
  737. {block:ifbigposts}<center><img src="{PhotoURL-500}" /></center>{/block:ifbigposts}
  738. {block:ifmedposts}<center><img src="{PhotoURL-400}" /></center>{/block:ifmedposts}
  739. </div>
  740. {LinkCloseTag}
  741. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  742. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  743. <div class="text">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  744. {/block:Photo}
  745.  
  746. {block:Photoset}
  747. <div class="postu">
  748. {block:ifbigposts}{Photoset-500}{/block:ifbigposts}
  749. {block:ifmedposts}{Photoset-400}{/block:ifmedposts}
  750. </div>
  751. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  752. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  753. <div class="text">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  754. {/block:Photoset}
  755.  
  756. {block:Video}
  757. <div class="postu">
  758. {block:ifbigposts}{Video-500}{/block:ifbigposts}
  759. {block:ifmedposts}{Video-400}{/block:ifmedposts}
  760. </div>
  761. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}{block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  762. {/block:Video}
  763.  
  764. {block:Audio}
  765. <div class="information">
  766. <div class="info"><b>TRACK NAME:</b> {block:TrackName}{TrackName}{/block:TrackName}</div>
  767. <div class="info"><b>ALBUM TITLE:</b> {block:Album}{Album}{/block:Album}</div>
  768. <div class="info"><b>ARTIST:</b> {block:Artist}{Artist}{/block:Artist}</div>
  769. <div class="info"><b>TIMES PLAYED:</b> {PlayCountWithLabel}</div>
  770. </div>
  771. <div class="aud">{block:ifnotgreyaudioplayer}{AudioPlayerWhite}{/block:ifnotgreyaudioplayer}{block:ifgreyaudioplayer}{AudioPlayerGrey}{/block:ifgreyaudioplayer}</div>
  772. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  773. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  774. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  775. <div class="text">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  776. {/block:Audio}
  777.  
  778. {block:Quote}
  779. <div class="quote">“{Quote}”</div>
  780. {block:Source}<br><div class="src">- {Source}</div>{/block:Source}
  781. {/block:Quote}
  782.  
  783. {block:Text}
  784. {block:Title}<div class="title">{Title}</div>{/block:Title}
  785. <div class="text">{body}</div>
  786. {/block:Text}
  787.  
  788. {block:Answer}
  789. <div id="ask">
  790. <img class="askerportrait" src="{AskerPortraitURL-64}">
  791. <div class="a">
  792. <div class="asker">{Asker} whispered:</div>
  793. <div class="q">{Question}</div>
  794. </div>
  795. </div>
  796. <div id="textpost"><div class="text">{Answer}</div></div>
  797. {/block:Answer}
  798.  
  799. {block:Chat}
  800. {block:Title}<div class="title">{Title}</div>{/block:Title}
  801. <div class="text">
  802. {block:Lines}<div class="{Alt}">
  803. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  804. {/block:Lines}
  805. </div>
  806. {/block:Chat}
  807.  
  808. {block:Link}
  809. <a href="{URL}"><div class="ltitle">{Name} ▷</div></a>
  810. {block:Description}<div class="text">{description}</div>{/block:Description}
  811. {/block:Link}
  812.  
  813. {block:indexpage}
  814.  
  815. {block:ifnotpermalink2}
  816. <div id="permalink">
  817. Posted {block:date}<a href="{permalink}">{timeago}</a>{/block:date} with <a href="{permalink}">{NoteCountWithLabel}</a>
  818. {block:ifshowtags}{block:HasTags}<div class="taggu">{block:Tags}
  819. <a href="{TagURL}"> #{Tag}</a>
  820. {/block:Tags}</div>{/block:HasTags}{/block:ifshowtags}
  821. </div><!--permalink-->
  822. {/block:ifnotpermalink2}
  823.  
  824. {block:ifpermalink2}
  825. <div id="permalink">
  826. {block:date}<a href="{permalink}">{timeago}</a>{/block:date} - <a href="{permalink}">{NoteCountWithLabel}</a> - <a href="{reblogurl}">reblog</a>
  827. {block:ifshowtags}{block:HasTags}<div class="taggu">{block:Tags}
  828. <a href="{TagURL}"> #{Tag}</a>
  829. {/block:Tags}</div>{/block:HasTags}{/block:ifshowtags}
  830. </div>
  831. {/block:ifpermalink2}
  832.  
  833. {/block:indexpage}
  834.  
  835. {block:permalinkpage}
  836.  
  837. <div class="permalinkpg">
  838. Posted at {block:date}{12hour}.{minutes}{ampm}, on {DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}{/block:date}{block:notecount}, with {notecountwithlabel}{/block:notecount}.<br>
  839. {block:RebloggedFrom}Originally by <a href="{reblogrooturl}">{reblogrootname}</a>, reblogged via <a href="{reblogparenturl}">{reblogparentname}</a>.{/block:rebloggedfrom}<br>
  840. {block:HasTags}
  841. {block:tags}<a href="{tagurl}">#{tag} {/block:tags}
  842. {/block:HasTags}
  843. </div><!--permalinkpg-->
  844.  
  845. {block:PostNotes}
  846. <div id="notecontainer">{PostNotes}</div>
  847. {/block:PostNotes}
  848.  
  849. {/block:permalinkpage}
  850.  
  851. </div><!--posts-->{/block:Posts}
  852.  
  853. {block:ContentSource}
  854. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  855. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  856. {/block:SourceLogo}
  857. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  858. {/block:ContentSource}
  859.  
  860. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  861.  
  862. </div><!--content-->
  863.  
  864. </body>
  865. </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!