API tools faq
paste
Advertisement
mogimochi

Theme [02] Secret Base

mogimochi
Jul 7th, 2012
12,779
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. Theme 02 Secret Base
  8. by yukoki/yokoris
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14. 5. Do not redistribute.
  15.  
  16. ++ [YUKOKI 2012 THEMES' REVAMPS] ++ [YUKOKI REVAMP PACK #01] ++
  17. This theme is unlikely to be further edited or updated, & its preview will also be moved to a static page. It's similar to being labeled as an 'old theme'.
  18.  
  19. --------------------------------------------------- UPDATE VER 041215 -->
  20.  
  21. <meta name="color:sidebar background" content="#ffffff">
  22. <meta name="color:blog title" content="#9e9e9e">
  23. <meta name="color:blog title underline" content="#d5bf98">
  24.  
  25. <meta name="color:subtitle" content="#bebdbd">
  26. <meta name="color:desc text" content="#a8a8a8">
  27. <meta name="color:desc bold" content="#ffc577">
  28. <meta name="color:desc italic" content="#ff6900">
  29. <meta name="color:desc links" content="#d3ab84">
  30. <meta name="color:desc links hover" content="#2c2c2c">
  31.  
  32. <meta name="color:custom links border" content="#beab8d">
  33. <meta name="color:custom links bg" content="#dacbb5">
  34. <meta name="color:custom links text" content="#ffffff">
  35. <meta name="color:custom links hover border" content="#fcd3a4">
  36. <meta name="color:custom links hover bg" content="#ffffff">
  37. <meta name="color:custom links hover text" content="#b9b8b8">
  38.  
  39. <meta name="color:navigation bg" content="#bdac98">
  40. <meta name="color:navigation links text" content="#ffffff">
  41. <meta name="color:navigation links bg" content="#ac937f">
  42. <meta name="color:navigation links bg hover" content="#fdfcfc">
  43. <meta name="color:navigation links text hover" content="#ff8700">
  44. <meta name="color:sidebar divider" content="#ffd7a2">
  45.  
  46. <meta name="color:background" content="#fcf3e2">
  47. <meta name="color:post background" content="#ffffff">
  48. <meta name="color:post border" content="#dfbc99">
  49. <meta name="color:body text" content="#929292">
  50. <meta name="color:body bold" content="#a89a80">
  51. <meta name="color:body italic" content="#ffd079">
  52. <meta name="color:body links" content="#c98d3f">
  53. <meta name="color:body links hover" content="#fffdfd">
  54. <meta name="color:body links hover bg" content="#fad099">
  55. <meta name="color:blockquote" content="#e9e9e9">
  56.  
  57. <meta name="color:post title bg" content="#ffd8a3">
  58. <meta name="color:post title text" content="#a2a0a0">
  59. <meta name="color:post link text hover" content="#000000">
  60. <meta name="color:post link bg hover" content="#f1f0f0">
  61.  
  62. <meta name="color:ask background" content="#a79879">
  63. <meta name="color:ask text" content="#f3f3f3">
  64. <meta name="color:asker text" content="#000000">
  65. <meta name="color:asker link" content="#ffb87e">
  66. <meta name="color:asker link hover" content="#dfdddd">
  67.  
  68. <meta name="color:permalink background" content="#dfbc99">
  69. <meta name="color:permalink text" content="#fdfdfd">
  70. <meta name="color:permalink links" content="#19191a">
  71. <meta name="color:permalink links hover" content="#ff7d00">
  72.  
  73. <meta name="color:tags" content="#858585">
  74. <meta name="color:tags hover" content="#ffb000">
  75. <meta name="color:perma page text" content="#979797">
  76.  
  77. <meta name="color:pagination bg" content="#be9d7e" />
  78. <meta name="color:pagination text" content="#ffffff" />
  79. <meta name="color:pagination bg hover" content="#ffffff" />
  80. <meta name="color:pagination text hover" content="#be9d7e" />
  81.  
  82. <meta name="color:chat even name" content="#ff7d00" />
  83. <meta name="color:chat even background" content="#ffffff" />
  84. <meta name="color:chat even text" content="#b8b8b8" />
  85. <meta name="color:chat odd name" content="#a07566" />
  86. <meta name="color:chat odd background" content="#f1f0f0" />
  87. <meta name="color:chat odd text" content="#919191" />
  88.  
  89. <meta name="image:background" content="">
  90. <meta name="image:sidebar" content="">
  91.  
  92. <meta name="if:big posts" content="1">
  93. <meta name="if:med posts" content="0">
  94. <meta name="if:2 columns" content="0">
  95. <meta name="if:white audio player" content="1">
  96. <meta name="if:infinite scroll" content="0">
  97. <meta name="if:photo fading" content="0">
  98. <meta name="if:monochrome posts" content="0">
  99. <meta name="if:show captions" content="1">
  100.  
  101. <meta name="text:subtitle" content="">
  102. <meta name="text:link 1" content="">
  103. <meta name="text:link 2" content="">
  104. <meta name="text:link 3" content="">
  105. <meta name="text:link 4" content="">
  106. <meta name="text:link 5" content="">
  107. <meta name="text:link 6" content="">
  108. <meta name="text:link 1 URL" content="">
  109. <meta name="text:link 2 URL" content="">
  110. <meta name="text:link 3 URL" content="">
  111. <meta name="text:link 4 URL" content="">
  112. <meta name="text:link 5 URL" content="">
  113. <meta name="text:link 6 URL" content="">
  114.  
  115. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  116. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  117. <link rel="shortcut icon" href="{Favicon}" />
  118.  
  119. <style type="text/css">
  120.  
  121. .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop { z-index:999999999!important; }
  122.  
  123. body {
  124. background-color: {color:background};
  125. background-image: url({image:background});
  126. background-attachment: fixed;
  127. margin: 0;
  128. word-wrap: break-word;
  129. }
  130. a { text-decoration:none; }
  131.  
  132. #sidebar {
  133. width: 250px;
  134. padding: 10px;
  135. height: 100%;
  136. position: fixed;
  137. background-color: {color:sidebar background};
  138. right: 100px;
  139. }
  140.  
  141. .sbpic {width: 250px;display:block;}
  142.  
  143. .blogt {
  144. font-family: courier new;
  145. text-transform: uppercase;
  146. font-size: 14px;
  147. text-align: center;
  148. border-bottom: 1px solid {color:blog title underline};
  149. color: {color:blog title};
  150. font-style: italic;
  151. }
  152.  
  153. .subt {
  154. color: {color:subtitle};
  155. font-family: consolas;
  156. letter-spacing: 1px;
  157. font-size: 8px;
  158. text-transform: uppercase;
  159. text-align: center;
  160. margin-bottom: 10px;
  161. }
  162.  
  163. .desc {
  164. font-family: calibri;
  165. font-size: 11px;
  166. color: {color:desc text};
  167. padding: 10px;
  168. margin-top: 10px;
  169. text-align: justify;
  170. }
  171. .desc b,strong {color:{color:desc bold};}
  172. .desc i,em {color:{color:desc italic};}
  173. .desc a {color:{color:desc links};
  174. -webkit-transition: all 0.4s ease-in-out;
  175. -moz-transition: all 0.4s ease-in-out;
  176. -o-transition: all 0.4s ease-in-out;
  177. -ms-transition: all 0.4s ease-in-out;
  178. transition: all 0.4s ease-in-out;}
  179. .desc a:hover {color:{color:desc links hover};}
  180.  
  181. #customlinks {
  182. width: 250px;
  183. }
  184.  
  185. .link {
  186. font-family: consolas;
  187. font-size: 10px;
  188. border-left: 10px solid {color:custom links border};
  189. margin: 2px 0;
  190. color: {color:custom links text};
  191. background-color: {color:custom links bg};
  192. padding-left: 10px;
  193. -webkit-transition: all 0.4s ease-in-out;
  194. -moz-transition: all 0.4s ease-in-out;
  195. -o-transition: all 0.4s ease-in-out;
  196. -ms-transition: all 0.4s ease-in-out;
  197. transition: all 0.4s ease-in-out;
  198. }
  199.  
  200. .link:hover {
  201. font-style: italic;
  202. border-left: 30px solid {color:custom links hover border};
  203. color: {color:custom links hover text};
  204. background-color: {color:custom links hover bg};
  205. }
  206.  
  207. #nav {
  208. position: fixed;
  209. margin-left: 260px;
  210. padding: 0 10px;
  211. top: 0;
  212. height: 100%;
  213. background-color: {color:navigation bg};
  214. border-left: 20px solid {color:sidebar divider};
  215. }
  216.  
  217. .navis {margin-top: 130px;}
  218.  
  219. .navc {
  220. width: 60px;
  221. height: 60px;
  222. background-color: {color:navigation links bg};
  223. color: {color:navigation links text};
  224. font-family: consolas;
  225. font-size: 9px;
  226. text-transform: uppercase;
  227. text-align: center;
  228. line-height: 60px;
  229. margin: 10px 0;
  230. border-radius: 1000px;
  231. -moz-border-radius: 1000px;
  232. -webkit-border-radius: 1000px;
  233. -o-border-radius: 1000px;
  234. -webkit-transition: all 0.4s ease-in-out;
  235. -moz-transition: all 0.4s ease-in-out;
  236. -o-transition: all 0.4s ease-in-out;
  237. -ms-transition: all 0.4s ease-in-out;
  238. transition: all 0.4s ease-in-out;
  239. }
  240.  
  241. .navic {
  242. width: 60px;
  243. height: 60px;
  244. display: block;
  245. border-radius: 1000px;
  246. -webkit-transition: all 0.4s ease-in-out;
  247. -moz-transition: all 0.4s ease-in-out;
  248. -o-transition: all 0.4s ease-in-out;
  249. -ms-transition: all 0.4s ease-in-out;
  250. transition: all 0.4s ease-in-out;
  251. }
  252.  
  253. .navc:hover, .navic:hover {
  254. background-color: {color:navigation links bg hover};
  255. color: {color:navigation links text hover};
  256. transform: rotate(360deg);
  257. }
  258.  
  259. #content {
  260. width: 660px;
  261. margin: 0 10px;
  262. padding: 5px 10px;
  263. float: right;
  264. {block:ifbigposts}margin-right: 250px;{/block:ifbigposts}
  265. {block:ifmedposts}margin-right: 250px;{/block:ifmedposts}
  266. {block:if2columns}margin-right: 280px;{/block:if2columns}
  267. }
  268.  
  269. .posts {
  270. background-color: {color:post background};
  271. margin: 10px 0;
  272. border: 1px solid {color:post background};
  273. padding: 10px;
  274. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  275. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  276. {block:if2columns}width: 250px;margin: 5px;{/block:if2columns}
  277. {block:permalinkpage}
  278. {block:ifmedposts}width: 500px;{/block:ifmedposts}
  279. {block:if2columns}width: 500px;{/block:if2columns}
  280. {/block:permalinkpage}
  281. -webkit-transition: all 0.4s ease-in-out;
  282. -moz-transition: all 0.4s ease-in-out;
  283. -o-transition: all 0.4s ease-in-out;
  284. -ms-transition: all 0.4s ease-in-out;
  285. transition: all 0.4s ease-in-out;
  286. }
  287.  
  288. .posts:hover { border: 1px solid {color:post border}; }
  289.  
  290. .photo {
  291. {block:ifbigposts}width: 500px;{/block:ifbigposts}
  292. {block:ifmedposts}width: 400px;{/block:ifmedposts}
  293. {block:if2columns}width: 250px;{/block:if2columns}
  294. {block:permalinkpage}
  295. {block:ifmedposts}width: 500px;{/block:ifmedposts}
  296. {block:if2columns}width: 500px;{/block:if2columns}
  297. {/block:permalinkpage}
  298. display:block;
  299. {block:ifphotofading}
  300. opacity: 0.8;
  301. {/block:ifphotofading}
  302. -webkit-transition: all 0.4s ease-in-out;
  303. -moz-transition: all 0.4s ease-in-out;
  304. -o-transition: all 0.4s ease-in-out;
  305. -ms-transition: all 0.4s ease-in-out;
  306. transition: all 0.4s ease-in-out;
  307. {block:IfMonochromePosts}
  308. 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+ */
  309. filter: gray; /* IE6-9 */
  310. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  311. -webkit-transition: all 0.7s linear;
  312. -moz-transition: all 0.7s linear;
  313. -o-transition: all 0.7s linear;
  314. {/block:IfMonochromePosts}
  315. }
  316. .posts:hover .photo {
  317. {block:IfMonochromePosts}
  318. filter: none;
  319. -webkit-filter: grayscale(0%);
  320. {/block:IfMonochromePosts}
  321. {block:ifphotofading}
  322. opacity: 1;
  323. {/block:ifphotofading}
  324. }
  325.  
  326. .text {
  327. font-family: calibri;
  328. color: {color:body text};
  329. font-size: 12px;
  330. text-align: justify;
  331. }
  332.  
  333. .text b,strong {color:{color:body bold};}
  334. .text i,em {color:{color:body italic};}
  335.  
  336. .text a, .src a {
  337. color: {color:body links};
  338. }
  339.  
  340. .text a:hover, .src a:hover {
  341. padding: 0 5.5px;
  342. color: {color:body links hover};
  343. background-color: {color:body links hover bg};
  344. font-style: italic;
  345. }
  346.  
  347. .text ul { list-style-type: square; }
  348.  
  349. .posts blockquote {
  350. margin: 5px 10px;
  351. border-left: 3px solid {color:blockquote};
  352. padding: 0 10px;
  353. }
  354.  
  355. .posts img {
  356. {block:ifbigposts}max-width: 500px;{/block:ifbigposts}
  357. {block:ifmedposts}max-width: 400px;{/block:ifmedposts}
  358. {block:if2columns}max-width: 250px;{/block:if2columns}
  359. {block:permalinkpage}
  360. {block:ifmedposts}max-width: 500px;{/block:ifmedposts}
  361. {block:if2columns}max-width: 500px;{/block:if2columns}
  362. {/block:permalinkpage}
  363. }
  364. .posts blockquote img {max-width: 100%;}
  365.  
  366. .quote {
  367. font-family: courier new;
  368. font-size: 14px;
  369. text-align: right;
  370. }
  371.  
  372. .src {
  373. font-family: consolas;
  374. font-size: 10px;
  375. text-align: right;
  376. text-transform: uppercase;
  377. }
  378.  
  379. .ltitle, .ptitle {
  380. font-family: courier new;
  381. text-align: center;
  382. font-size: 14px;
  383. padding: 5px;
  384. background-color: {color:post title bg};
  385. color: {color:post title text};
  386. -webkit-transition: all 0.4s ease-in-out;
  387. -moz-transition: all 0.4s ease-in-out;
  388. -o-transition: all 0.4s ease-in-out;
  389. -ms-transition: all 0.4s ease-in-out;
  390. transition: all 0.4s ease-in-out;
  391. }
  392.  
  393. .ltitle:hover {
  394. background-color: {color:post link bg hover};
  395. color: {color:post link text hover};
  396. }
  397.  
  398. .odd .line {background-color: {color:chat odd background};padding: 3px 5px;margin-bottom:3px;color:{color:chat odd text};}
  399. .even .line {background-color: {color:chat even background};padding: 3px 5px;margin-bottom:3px;color:{color:chat even text};}
  400. .odd .name {color: {color:chat odd name};padding: 3px 5px;}
  401. .even .name {color: {color:chat even name};padding: 3px 5px;}
  402.  
  403. #album {
  404. width: 150px;
  405. height: 150px;
  406. background-color: #888;
  407. overflow: hidden;
  408. {block:ifnot2columns}position:absolute;{/block:ifnot2columns}
  409. {block:if2columns}width:250px;height:250px;{/block:if2columns}
  410.  
  411. {block:permalinkpage}{block:if2columns}
  412. position:absolute;
  413. width: 150px;
  414. height: 150px;
  415. {/block:if2columns}{/block:permalinkpage}
  416. }
  417. .noalbum {
  418. width: 150px;
  419. height: 150px;
  420. background-color: #888;
  421. z-index: 50;
  422. {block:if2columns}width:250px;height:250px;{/block:if2columns}
  423.  
  424. {block:permalinkpage}{block:if2columns}
  425. width: 150px;
  426. height: 150px;
  427. {/block:if2columns}{/block:permalinkpage}
  428. }
  429. .albumart {
  430. width: 150px;
  431. height: 150px;
  432. z-index: 50;
  433. {block:if2columns}width:250px;height:250px;{/block:if2columns}
  434.  
  435. {block:permalinkpage}{block:if2columns}
  436. width: 150px;
  437. height: 150px;
  438. {/block:if2columns}{/block:permalinkpage}
  439. }
  440.  
  441. #audinfo {
  442. width: 340px;
  443. margin-left: 160px;
  444. min-height: 150px;
  445. {block:if2columns}
  446. position: absolute;
  447. z-index: 10;
  448. width:250px;
  449. margin-left: 0;
  450. margin-top: -200px;
  451. {/block:if2columns}
  452.  
  453. {block:permalinkpage}{block:if2columns}
  454. position: static;
  455. width: 340px;
  456. margin-left: 160px;
  457. margin-top: 0;
  458. min-height: 150px;
  459. {/block:if2columns}{/block:permalinkpage}
  460. }
  461.  
  462. .aud {
  463. {block:ifbigposts}width: 340px;{/block:ifbigposts}
  464. {block:ifmedposts}width: 240px;{/block:ifmedposts}
  465. height: 27px;
  466. {block:ifwhiteaudioplayer}
  467. background-color: #fff;
  468. {/block:ifwhiteaudioplayer}
  469. {block:ifnotwhiteaudioplayer}
  470. background-color: #000;
  471. {/block:ifnotwhiteaudioplayer}
  472. margin-bottom: 5px;
  473. {block:if2columns}opacity: 0.1;{/block:if2columns}
  474.  
  475. {block:permalinkpage}
  476. {block:if2columns}width: 340px;opacity: 1;{/block:if2columns}
  477. {block:ifmedposts}width: 340px;{/block:ifmedposts}
  478. {/block:permalinkpage}
  479. -webkit-transition: all 0.4s ease-in-out;
  480. -moz-transition: all 0.4s ease-in-out;
  481. -o-transition: all 0.4s ease-in-out;
  482. -ms-transition: all 0.4s ease-in-out;
  483. transition: all 0.4s ease-in-out;
  484. }
  485.  
  486. .audline {
  487. {block:ifbigposts}width: 320px;{/block:ifbigposts}
  488. {block:ifmedposts}width: 220px;{/block:ifmedposts}
  489. {block:if2columns}opacity: 0.1;{/block:if2columns}
  490.  
  491. {block:permalinkpage}
  492. {block:if2columns}width: 320px;opacity: 1;{/block:if2columns}
  493. {block:ifmedposts}width: 320px;{/block:ifmedposts}
  494. {/block:permalinkpage}
  495. height: 26px;
  496. margin-bottom: 5px;
  497. background-color: #fff;
  498. padding: 0 10px;
  499. line-height: 27px;
  500. font-family: 'Titillium Web', sans-serif;
  501. font-size: 10px;
  502. text-transform: uppercase;
  503. -webkit-transition: all 0.4s ease-in-out;
  504. -moz-transition: all 0.4s ease-in-out;
  505. -o-transition: all 0.4s ease-in-out;
  506. -ms-transition: all 0.4s ease-in-out;
  507. transition: all 0.4s ease-in-out;
  508. }
  509.  
  510. .audline:hover, .aud:hover { opacity: 1; }
  511.  
  512. .askerportrait {
  513. position: absolute;
  514. border: 10px solid {color:ask background};
  515. }
  516. .a {
  517. margin-left: 100px;
  518. background-color: {color:ask background};
  519. min-height: 64px;
  520. padding: 10px;
  521. font-family: calibri,geneva;
  522. font-size: 13px;
  523. color: {color:ask text};
  524. }
  525. .asker {
  526. color: {color:asker text};
  527. font-family: titillium web, sans-serif;
  528. font-size: 10px;
  529. text-transform: uppercase;
  530. }
  531. .asker a {color: {color:asker link};border-bottom: 1px dashed {color:asker link};}
  532. .q {margin-top: 10px;}
  533. .tri {
  534. position: absolute;
  535. font-size: 30px;
  536. margin: 20px 0 0 85px;
  537. color: {color:ask background};
  538. }
  539.  
  540.  
  541.  
  542. .tags {
  543. font-size: 10px;
  544. letter-spacing:1px;}
  545. .tags a, #permapg a {color:{color:tags};
  546. -webkit-transition: all 0.4s ease-in-out;
  547. -moz-transition: all 0.4s ease-in-out;
  548. -o-transition: all 0.4s ease-in-out;
  549. -ms-transition: all 0.4s ease-in-out;
  550. transition: all 0.4s ease-in-out;
  551. }
  552. .tags a:hover, #permapg a:hover {color:{color:tags hover};background-color:{color:tags hover bg};}
  553.  
  554. #permapg {
  555. margin-top: 10px;
  556. font-family: consolas;
  557. text-align: center;
  558. color: {color:perma page text};
  559. font-size: 10px;
  560. letter-spacing: 1px;
  561. text-transform: uppercase;
  562. }
  563.  
  564. #notecontainer {
  565. padding: 10px;
  566. text-decoration: none;
  567. width: 500px;
  568. }
  569. ol.notes {
  570. list-style-type: none;
  571. letter-spacing: -1px;
  572. font-size: 11px;
  573. color: {color:body};
  574. font-family: consolas;
  575. text-decoration: none;
  576. margin: 0;
  577. width: 500px;
  578. padding: 5px;
  579. text-align: left;
  580. }
  581. ol.notes a {color: {color:body links};
  582. -webkit-transition: all 0.4s ease-in-out;
  583. -moz-transition: all 0.4s ease-in-out;
  584. -o-transition: all 0.4s ease-in-out;
  585. -ms-transition: all 0.4s ease-in-out;
  586. transition: all 0.4s ease-in-out;}
  587. ol.notes a:hover {color: {color:body links hover};}
  588. img.avatar {
  589. margin-right: 5px;
  590. width: 10px;
  591. height: 10px;
  592. float: left;
  593. }
  594.  
  595. #permalink {
  596. margin-left: -10px;
  597. position: absolute;
  598. background-color: {color:permalink background};
  599. text-align: center;
  600. {block:ifbigposts}width: 520px;{/block:ifbigposts}
  601. {block:ifmedposts}width: 420px;{/block:ifmedposts}
  602. {block:if2columns}width: 270px;{/block:if2columns}
  603. padding: 3px 0;
  604. margin-top: 0;
  605. font-family: consolas;
  606. font-size: 10px;
  607. text-transform: uppercase;
  608. color: {color:permalink text};
  609. opacity: 0;
  610. z-index: 150;
  611. -webkit-transition: all 0.4s ease-in-out;
  612. -moz-transition: all 0.4s ease-in-out;
  613. -o-transition: all 0.4s ease-in-out;
  614. -ms-transition: all 0.4s ease-in-out;
  615. transition: all 0.4s ease-in-out;
  616. }
  617.  
  618. .posts:hover #permalink { opacity: 0.6;margin-top: 10px; }
  619. .posts:hover #permalink:hover {opacity: 1;}
  620.  
  621. #permalink a {
  622. color: {color:permalink links};
  623. -webkit-transition: all 0.4s ease-in-out;
  624. -moz-transition: all 0.4s ease-in-out;
  625. -o-transition: all 0.4s ease-in-out;
  626. -ms-transition: all 0.4s ease-in-out;
  627. transition: all 0.4s ease-in-out;
  628. }
  629.  
  630. #permalink a:hover {color: {color:permalink links hover};}
  631.  
  632. #pagination {
  633. position: fixed;
  634. font-family: consolas;
  635. font-size: 16px;
  636. bottom: 10px;
  637. {block:ifbigposts}right: 960px;{/block:ifbigposts}
  638. {block:ifmedposts}right: 860px;{/block:ifmedposts}
  639. {block:if2columns}right: 970px;{/block:if2columns}
  640. width: 30px;
  641. }
  642. #pagination a {
  643. background-color: {color:pagination bg};
  644. color: {color:pagination text};
  645. padding: 0 15px;
  646. line-height: 24px;
  647. -webkit-transition: all 0.4s ease-in-out;
  648. -moz-transition: all 0.4s ease-in-out;
  649. -o-transition: all 0.4s ease-in-out;
  650. -ms-transition: all 0.4s ease-in-out;
  651. transition: all 0.4s ease-in-out;
  652. }
  653. #pagination a:hover {
  654. background-color: {color:pagination bg hover};
  655. color: {color:pagination text hover};
  656. }
  657.  
  658. #warning {
  659. position: fixed;
  660. width: 100%;
  661. height:100%;
  662. background-color: #fff;
  663. z-index:-1000000;
  664. top:0;
  665. left: 0;
  666. text-align: center;
  667. padding-top: 250px;
  668. font-family: consolas;
  669. font-size: 20px;
  670. opacity: 0;
  671. {block:ifbigposts}
  672. {block:ifmedposts}opacity:1;z-index:1000000;{/block:ifmedposts}
  673. {block:if2columns}opacity:1;z-index:1000000;{/block:if2columns}
  674. {/block:ifbigposts}
  675. {block:ifnotbigposts}{block:ifnotmedposts}{block:ifnot2columns}
  676. opacity:1;z-index:1000000;
  677. {/block:ifnot2columns}{/block:ifnotmedposts}{/block:ifnotbigposts}
  678. }
  679.  
  680. {CustomCSS}
  681.  
  682. </style>
  683.  
  684. {block:indexpage}
  685. {block:if2columns}
  686. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  687.  
  688. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  689. <script type="text/javascript">
  690. $(window).load(function () {
  691. $('#content').masonry({
  692. itemSelector : ".posts",
  693. },
  694. function() { $('#content').masonry({ appendedContent: $(this) }); }
  695. );
  696. });
  697. </script>
  698. {/block:if2columns}
  699.  
  700. {block:ifnot2columns}
  701. {block:IfInfiniteScroll}
  702. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  703. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j("img").lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script>
  704. {/block:IfInfiniteScroll}
  705. {/block:ifnot2columns}
  706.  
  707. {/block:indexpage}
  708.  
  709. </head>
  710. <body>
  711.  
  712. <div id="warning">Please pick 1 post size.</div>
  713.  
  714. <div id="sidebar">
  715. <div id="nav"><div class="navis">
  716. <img class="navic" src="{PortraitURL-64}">
  717. <a href="/"><div class="navc">index</div></a>
  718. <a href="/ask"><div class="navc">ask</div></a>
  719. <a href="/archive"><div class="navc">memories</div></a>
  720. <a href="http://yukoki.tumblr.com"><div class="navc">theme</div></a>
  721. </div><!--navis--></div><!--nav-->
  722. <div class="blogt">{Title}</div>
  723. <div class="subt">{text:subtitle}</div>
  724. <img class="sbpic" src="{image:sidebar}">
  725. <div class="desc">{Description}</div>
  726. <div id="customlinks">
  727. {block:IfLink1}<a href="{text:Link 1 URL}"><div class="link">{text:Link 1}</div></a>{/block:IfLink1}
  728. {block:IfLink2}<a href="{text:Link 2 URL}"><div class="link">{text:Link 2}</div></a>{/block:IfLink2}
  729. {block:IfLink3}<a href="{text:Link 3 URL}"><div class="link">{text:Link 3}</div></a>{/block:IfLink3}
  730. {block:IfLink4}<a href="{text:Link 4 URL}"><div class="link">{text:Link 4}</div></a>{/block:IfLink4}
  731. {block:IfLink5}<a href="{text:Link 5 URL}"><div class="link">{text:Link 5}</div></a>{/block:IfLink5}
  732. {block:IfLink6}<a href="{text:Link 6 URL}"><div class="link">{text:Link 6}</div></a>{/block:IfLink6}
  733. </div><!--customlinks-->
  734.  
  735. </div><!--sidebar-->
  736.  
  737. <div id="content">{block:posts}
  738. <div class="posts">
  739.  
  740. {block:indexpage}{block:date}
  741. <div id="permalink">
  742. <a href="{permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}</a> - <a href="{permalink}">{12Hour}.{Minutes}{AmPm}</a> - <a href="{ReblogURL}">reblog</a>
  743. </div><!--permalink-->
  744. {/block:date}{/block:indexpage}
  745.  
  746. {block:Quote}
  747. <div class="quote">"{Quote}"</div>
  748. <div class="src">- {Source}</div>
  749. {/block:Quote}
  750.  
  751. {block:Photo}
  752. {LinkOpenTag}
  753. <div class="photo"><img src="{PhotoURL-500}"></div>
  754. {LinkCloseTag}
  755. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  756. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  757. <div class="text">{Caption}</div>
  758. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  759. {/block:Photo}
  760.  
  761. {block:Photoset}
  762. <div class="photo">
  763. {block:ifbigposts}{Photoset-500}{/block:ifbigposts}
  764. {block:ifmedposts}{Photoset-400}{/block:ifmedposts}
  765. {block:if2columns}{Photoset-250}{/block:if2columns}
  766. </div>
  767. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  768. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  769. <div class="text">{Caption}</div>
  770. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  771. {/block:Photoset}
  772.  
  773. {block:Link}
  774. <a href="{URL}"><div class="ltitle">{Name} →</div></a>
  775. {block:Description}
  776. <div class="text">{description}</div>
  777. {/block:Description}
  778. {/block:Link}
  779.  
  780. {block:Chat}
  781. {block:title}<div class="ptitle">{title}</div>{/block:title}
  782. <div class="text">
  783. {block:Lines}<div class="{Alt}">
  784. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  785. {/block:Lines}
  786. </div>
  787. {/block:Chat}
  788.  
  789. {block:Audio}
  790. <div id="album"><div class="noart"></div>{block:AlbumArt}<img class="albumart" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  791.  
  792. <div id="audinfo">
  793. <div class="aud">{block:ifwhiteaudioplayer}{AudioPlayerWhite}{/block:ifwhiteaudioplayer}{block:ifnotwhiteaudioplayer}{AudioPlayerBlack}{/block:ifnotwhiteaudioplayer}</div>
  794. {block:TrackName}<div class="audline">Track: {TrackName}</div>{/block:TrackName}
  795. {block:Album}<div class="audline">Album: {Album}</div>{/block:Album}
  796. {block:Artist}<div class="audline">Artist: {Artist}</div>{/block:Artist}
  797. <div class="audline">{PlayCountWithLabel}</div>
  798. </div><!--audinfo-->
  799. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  800. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  801. <div class="text">{Caption}</div>
  802. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  803. {/block:Audio}
  804.  
  805. {block:Text}
  806. {block:title}<div class="ptitle">{title}</div>{/block:title}
  807. <div class="text">{body}</div>
  808. {/block:Text}
  809.  
  810. {block:Answer}
  811. <img class="askerportrait" src="{AskerPortraitURL-64}">
  812. <div class="tri">◀</div>
  813. <div class="a">
  814. <span class="asker">{Asker}:</span>
  815. <div class="q">{Question}</div>
  816. </div>
  817. <div class="text">{Answer}</div>
  818. {/block:Answer}
  819.  
  820. {block:Video}
  821. {block:ifbigposts}{Video-500}{/block:ifbigposts}
  822. {block:ifmedposts}{Video-400}{/block:ifmedposts}
  823. {block:if2columns}{Video-250}{/block:if2columns}
  824. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  825. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  826. <div class="text">{Caption}</div>
  827. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  828. {/block:Video}
  829.  
  830. {block:permalinkpage}{block:date}
  831.  
  832. <div id="permapg">
  833. Posted on {DayOfMonthWithZero} {Month} {Year}, at {12Hour}.{Minutes}{AmPm} with {NoteCountWithLabel}<br>
  834. {block:RebloggedFrom}reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}
  835. {block:HasTags}<div class="tags">
  836. filed under: {block:tags}<a href="{tagurl}">#{tag}</a> {/block:tags}
  837. </div>{/block:HasTags}
  838. </div><!--permapg-->
  839.  
  840. {block:PostNotes}
  841. <div id="notecontainer">{PostNotes}</div>
  842. {/block:PostNotes}
  843.  
  844. {/block:date}{/block:permalinkpage}
  845.  
  846. </div><!--posts-->{/block:posts}
  847.  
  848. {block:ContentSource}
  849. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  850. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  851. {/block:SourceLogo}
  852. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  853. {/block:ContentSource}
  854.  
  855. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  856.  
  857. </div><!--content-->
  858.  
  859. {block:ifnotinfinitescroll}
  860. <div id="pagination">
  861. {block:pagination}
  862. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  863. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  864. {/block:pagination}
  865. </div><!--pagination-->
  866. {/block:ifnotinfinitescroll}
  867.  
  868. {block:if2columns}
  869. <div id="pagination">
  870. {block:pagination}
  871. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  872. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  873. {/block:pagination}
  874. </div><!--pagination-->
  875. {/block:if2columns}
  876.  
  877. </body>
  878. </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!