API tools faq
paste
Advertisement
okesan

junhooeee old theme

okesan
Jun 1st, 2015
219
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. :: CODE PACK #08 IRRETRIEVABLE ::
  8.  
  9. Theme 14 Seasons
  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.  
  17. ++ [YUKOKI 2012 THEMES' REVAMPS] ++
  18. This is an early yukoki theme, revamped and renamed as "Seasons". This theme's first title was "Heroine".
  19.  
  20. ---------------------------------------------------------- VER 060315 -->
  21.  
  22. <meta name="color:background" content="#ffffff">
  23. <meta name="color:scrollbar" content="#98dac6">
  24. <meta name="color:text selection" content="#b6eadc">
  25. <meta name="color:custom tumblr controls" content="#b5b5b5">
  26. <meta name="color:custom tumblr controls hover" content="#ffffff">
  27.  
  28. <meta name="color:header background" content="#000000">
  29. <meta name="color:blog title" content="#ffffff">
  30. <meta name="color:desc" content="#000000">
  31. <meta name="color:desc bold" content="#8ac3ae">
  32. <meta name="color:desc italic" content="#a8a8a8">
  33. <meta name="color:desc links" content="#707070">
  34. <meta name="color:desc links hover" content="#000000">
  35.  
  36. <meta name="color:nav background" content="#f3f3f3">
  37. <meta name="color:nav bottom border" content="#e3e3e3">
  38. <meta name="color:nav icon" content="#888888">
  39. <meta name="color:nav text" content="#777777">
  40.  
  41. <meta name="color:searchbox input background" content="#ffffff">
  42. <meta name="color:searchbox input text" content="#777777">
  43. <meta name="color:searchbox border" content="#ecfef5">
  44.  
  45. <meta name="color:custom links" content="#858585">
  46. <meta name="color:custom links background" content="#ffffff">
  47.  
  48. <meta name="color:post background" content="#f6f6f6">
  49.  
  50. <meta name="color:body text" content="#aaaaaa">
  51. <meta name="color:body bold" content="#8ac3ae">
  52. <meta name="color:body italic" content="#c8c8c8">
  53. <meta name="color:body links" content="#aaaaaa">
  54. <meta name="color:body links highlight" content="#f0f0f0">
  55. <meta name="color:body links hover" content="#7a7a7a">
  56. <meta name="color:body links highlight hover" content="#f0f0f0">
  57.  
  58. <meta name="color:post title" content="#bbbbbb">
  59. <meta name="color:post title underline" content="#e9e9e9">
  60.  
  61. <meta name="color:quote post" content="#898989">
  62. <meta name="color:quote post quotation marks" content="#c5eddc">
  63. <meta name="color:quote post source" content="#b1b1b1">
  64.  
  65. <meta name="color:chat even name" content="#97dac5">
  66. <meta name="color:chat even text" content="#b8b8b8">
  67. <meta name="color:chat odd name" content="#9bc3a0">
  68. <meta name="color:chat odd text" content="#777777">
  69.  
  70. <meta name="color:audio info background" content="#ffffff">
  71. <meta name="color:audio info text" content="#929292">
  72.  
  73. <meta name="color:ask background" content="#f2f2f2">
  74. <meta name="color:ask text" content="#9b9b9b">
  75. <meta name="color:asker text" content="#5e5e5e">
  76. <meta name="color:asker link" content="#d4d4d4">
  77.  
  78. <meta name="color:permalink text" content="#777777">
  79. <meta name="color:permalink notes" content="#aaaaaa">
  80. <meta name="color:permalink notes background" content="#e5e5e5">
  81. <meta name="color:hover permalink notes" content="#adadad">
  82. <meta name="color:hover permalink notes background" content="#ffffff">
  83. <meta name="color:permalink divider" content="#eaeaea">
  84.  
  85. <meta name="color:tags" content="#999999">
  86. <meta name="color:tags background" content="#eaeaea">
  87. <meta name="color:hover tags" content="#aaaaaa">
  88. <meta name="color:hover tags background" content="#ffffff">
  89.  
  90. <meta name="if:infinite scroll" content="0">
  91. <meta name="if:250px posts" content="0">
  92. <meta name="if:400px posts" content="0">
  93. <meta name="if:500px posts" content="1">
  94. <meta name="if:monochrome posts" content="0">
  95. <meta name="if:photo fading" content="0">
  96. <meta name="if:show captions" content="1">
  97. <meta name="if:show tags" content="1">
  98. <meta name="if:permalink sources" content="1">
  99. <meta name="if:custom tumblr controls" content="0">
  100.  
  101. <meta name="image:background" content="">
  102. <meta name="image:sidebar" content="">
  103. <meta name="image:right icon 1" content="">
  104. <meta name="image:right icon 2" content="">
  105. <meta name="image:right icon 3" content="">
  106.  
  107. <meta name="text:your url" content="if your url is yukoki just type yukoki">
  108. <meta name="text:link 1" content="">
  109. <meta name="text:link 1 url" content="">
  110. <meta name="text:link 2" content="">
  111. <meta name="text:link 2 url" content="">
  112. <meta name="text:link 3" content="">
  113. <meta name="text:link 3 url" content="">
  114.  
  115. <link href='//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  116.  
  117. <link href="style-my-tooltips.css" rel="stylesheet" type="text/css" />
  118. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);</script>
  119.  
  120.  
  121. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  122. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  123. <link rel="shortcut icon" href="{Favicon}" />
  124.  
  125. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  126.  
  127. <script language="javascript">
  128. $(document).ready(function() {
  129. $('a#clickbutton').click(function() {
  130. $('.t',this).toggle();
  131. });
  132.  
  133. $(".relocat").css({"height": "0"})
  134. $("#clickbutton").toggle(
  135. function () {
  136. $(".relocat").animate({"height": "50px"}, "slow");
  137. },
  138. function () {
  139. $(".relocat").animate({"height": "0"}, "slow");
  140. });
  141. });
  142. </script>
  143.  
  144. {block:indexpage}
  145. {block:ifinfinitescroll}
  146. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  147. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  148. <script type="text/javascript" charset="utf-8">
  149. var $j = jQuery.noConflict();
  150. $j(function() {
  151. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  152. $j("img").lazyload({
  153. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  154. effect: "fadeIn",
  155. });
  156. });
  157. </script>
  158. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  159. {/block:ifinfinitescroll}
  160. {/block:indexpage}
  161.  
  162. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  163.  
  164.  
  165. <style type="text/css">
  166.  
  167. #tumblr_lightbox {background-color:rgba(255,255,255,0.9)!important;}
  168. #tumblr_lightbox img { opacity:0;padding: 10px;
  169. border: 0px solid #ddd; }
  170. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {
  171. opacity: 1!important;
  172. box-shadow: 0 0 0 transparent!important;
  173. border-radius: 0!important;
  174. -moz-border-radius: 0!important;
  175. -webkit-border-radius: 0!important;
  176. -o-border-radius: 0!important;
  177. padding: 10px!important;
  178. border: 0px solid #ddd!important;
  179. background-color: #fff!important;
  180. }
  181.  
  182. #tumblr_lightbox_caption {
  183. color: #aaa!important;
  184. font-family: calibri!important;
  185. font-size: 12px!important;
  186. margin-top: 30px!important;
  187. text-shadow: 0 0 0 transparent!important;
  188. font-weight: 400!important;
  189. }
  190.  
  191. ::-webkit-scrollbar { width: 5px; }
  192. ::-webkit-scrollbar-track-piece { background-color: rgba(255,255,255,0.5); }
  193. ::-webkit-scrollbar-thumb:vertical {
  194. width: 5px;
  195. background-color: {color:scrollbar};
  196. padding: 1px;
  197. }
  198.  
  199. ::selection {background-color: {color:text selection}; color: #fff;}
  200. ::-moz-selection {background-color: {color:text selection}; color: #fff;}
  201. ::-webkit-selection {background-color: {color:text selection}; color: #fff;}
  202.  
  203. {block:ifcustomtumblrcontrols}{block:indexpage}
  204. iframe#tumblr_controls {white-space:nowrap;display:none;}
  205. {/block:indexpage}{/block:ifcustomtumblrcontrols}
  206.  
  207. .pagination {display: none;}
  208.  
  209. /*IMAGE OPACITY*/
  210.  
  211.  
  212. img {
  213. opacity: .9;
  214. -webkit-transition: all 0.6s ease-out;
  215. -moz-transition: all 0.6s ease-out;
  216. transition: all 0.6s ease-out;
  217. -webkit-filter:grayscale(0%);
  218. -moz-filter:grayscale(0%);
  219. -ms-filter:grayscale(0%);
  220. -o-filter:grayscale(0%);
  221. filter:grayscale(0%);}
  222.  
  223. img:hover {
  224. opacity: 1;
  225. -webkit-transition: all 0.6s ease-out;
  226. -moz-transition: all 0.6s ease-out;
  227. transition: all 0.6s ease-out;}
  228.  
  229. iframe.photoset {
  230. opacity: .9;
  231. -webkit-transition: all 0.6s ease-out;
  232. -moz-transition: all 0.6s ease-out;
  233. transition: all 0.6s ease-out;
  234. -webkit-filter:grayscale(0%);
  235. -moz-filter:grayscale(0%);
  236. -ms-filter:grayscale(0%);
  237. -o-filter:grayscale(0%);
  238. filter:grayscale(0%);}
  239. }
  240. iframe.photoset:hover {
  241. opacity:1;
  242. -webkit-transition: all 0.6s ease-out;
  243. -moz-transition: all 0.6s ease-out;
  244. transition: all 0.6s ease-out;
  245. }
  246.  
  247. .posteu img:hover, .posteu a img:hover, .photoset:hover {
  248. opacity:1;
  249. -webkit-transition: all 0.4s ease-out;
  250. -moz-transition: all 0.4s ease-out;
  251. transition: all 0.4s ease-out;
  252. }
  253.  
  254.  
  255. #s-m-t-tooltip {
  256. display:block;
  257. background:#fff;
  258. font-size:8px;
  259. font-family:calibri;
  260. letter-spacing:1px;
  261. line-height:18px;
  262. color:{color:text};
  263. border:1px solid #fff;
  264. border-radius:5px;
  265. text-align:center;
  266. margin-left:18px;
  267. padding:4px;
  268. min-width:40px;
  269. max-width:180px;
  270. z-index:99999;
  271. }
  272.  
  273.  
  274. body {
  275. background-color: {color:background};
  276. background-image: url({image:background});
  277. background-attachment: fixed;
  278. margin: 0;
  279. word-wrap: break-word;
  280. }
  281. a { text-decoration:none; }
  282.  
  283. #totalhe {
  284. width: 200px;
  285. position: fixed;
  286. top: 100px;
  287. {block:if500pxposts}left: 130px;{/block:if500pxposts}
  288. {block:if400pxposts}left: 170px;{/block:if400pxposts}
  289. {block:if250pxposts}left: 300px;{/block:if250pxposts}
  290. }
  291.  
  292. .totalheimg {
  293. margin-left:40px;
  294. width: 100px;
  295. display: block;
  296. opacity:0.8;
  297. margin-bottom:-25px;
  298. padding-bottom:10px;
  299. padding-left:10px;
  300. padding-right:10px;
  301.  
  302.  
  303.  
  304. }
  305.  
  306. .totl {
  307. position: absolute;
  308. margin: 0 -210px;
  309. }
  310.  
  311. .desc {
  312. font-family: lato;
  313. font-size: 9.5px;
  314. padding: 20px 0;
  315. margin-bottom:-10px;
  316. text-align: justify;
  317. letter-spacing:1px;
  318. line-height:15px;
  319. width: 200px;
  320. color: {color:desc};
  321. }
  322.  
  323. .desc b,strong {
  324. color: {color:desc bold};
  325. }
  326.  
  327. .desc i,em {
  328. color: {color:desc italic};
  329. }
  330.  
  331. .desc a {
  332. color: {color:desc links};
  333. text-decoration: underline;
  334. }
  335.  
  336. .desc a:hover {
  337. color: {color:desc links hover};
  338. }
  339.  
  340. #topp {
  341. background-color: {color:header background};
  342. color: {color:blog title};
  343. font-family: courier new;
  344. text-transform: uppercase;
  345. font-size: 9px;
  346. padding: 14px 30px;
  347. letter-spacing: 2px;
  348. width: 100%;
  349. position: fixed;
  350. z-index: 1000;
  351. }
  352.  
  353. .newctrl {
  354. text-transform: uppercase;
  355. color: {color:custom tumblr controls};
  356. position: fixed;
  357. top: 0;
  358. right: 0;
  359. padding: 14px 30px;
  360. }
  361.  
  362. .newctrl a {
  363. margin-left: 12px;
  364. color: {color:custom tumblr controls};
  365. }
  366.  
  367. .newctrl a:hover {
  368. color: {color:custom tumblr controls hover};
  369. text-decoration: line-through;
  370. }
  371.  
  372. .backline {
  373. background-color: {color:nav background};
  374. width: 200px;
  375. height: 22px;
  376. position: absolute;
  377. z-index: -1;
  378. border-bottom: 1px solid {color:nav bottom border};
  379. }
  380.  
  381. #navmain {
  382.  
  383. width: 22px;
  384. height: 22px;
  385. background-color: {color:nav background};
  386. float: right;
  387. transition: 0.8s;
  388. color: {color:nav icon};
  389. }
  390.  
  391. .navicon {
  392. text-align: center;
  393. line-height: 22px;
  394. font-size: 11px;
  395. float: left;
  396. padding-left: 6px;
  397. }
  398.  
  399. .navicon a { color: {color:nav icon}; }
  400.  
  401. .navitxt {
  402. position: absolute;
  403. margin: 0 22px;
  404. font-family: lato;
  405. font-size: 8px;
  406. text-transform: uppercase;
  407. letter-spacing: 4px;
  408. line-height: 22px;
  409. color: {color:nav text};
  410. width: 0;
  411. height: 22px;
  412. overflow: hidden;
  413. transition: 0.8s;
  414. background-color: {color:nav background};
  415. text-align: center;
  416. }
  417.  
  418. #navmain:hover { width: 110px; }
  419. #navmain:hover .navitxt { padding: 0 5px; width: 80px; }
  420.  
  421. #customs {
  422. position: fixed;
  423. top: 160px;
  424. width: 100px;
  425. {block:if500pxposts}left: 1000px;{/block:if500pxposts}
  426. {block:if400pxposts}left: 960px;{/block:if400pxposts}
  427. {block:if250pxposts}left: 930px;{/block:if250pxposts}
  428. {block:permalinkpage}
  429. {block:if500pxposts}left: 1000px;{/block:if500pxposts}
  430. {block:if400pxposts}left: 1000px;{/block:if400pxposts}
  431. {block:if250pxposts}left: 1000px;{/block:if250pxposts}
  432. {/block:permalinkpage}
  433. }
  434.  
  435. .custi {
  436. width: 100px;
  437. height: 100px;
  438. display: block;
  439. margin-bottom: 30px;
  440. }
  441.  
  442. .custxt {
  443. font-family: lato;
  444. font-size: 8px;
  445. text-transform: uppercase;
  446. letter-spacing: 2px;
  447. width: 80px;
  448. height: 80px;
  449. position: absolute;
  450. margin: 10px;
  451. text-align: center;
  452. line-height: 80px;
  453. background-color: {color:custom links background};
  454. opacity: 0;
  455. color: {color:custom links};
  456. transition: 0.6s;
  457. }
  458.  
  459. .custxt:hover { opacity: 0.9; }
  460.  
  461. .relocat {
  462. margin-top: 30px;
  463. background-color: {color:searchbox border};
  464. height: 0;
  465. overflow: hidden;
  466. }
  467.  
  468. #sbox input {
  469. width: 160px;
  470. border-radius: 0;
  471. border: 0;
  472. border: 15px solid {color:searchbox border};
  473. }
  474.  
  475. .stext {
  476. background-color: {color:searchbox input background};
  477. color: {color:searchbox input text};
  478. font-family: consolas;
  479. padding: 4px 5px;
  480. font-size: 10px;\
  481. }
  482.  
  483. #content {
  484. width: 1000px;
  485. float: left;
  486. margin-top: 80px;
  487. {block:if500pxposts}width: 600px;margin-left: 400px;{/block:if500pxposts}
  488. {block:if400pxposts}width: 500px;margin-left: 450px;{/block:if400pxposts}
  489. {block:if250pxposts}width: 350px;margin-left: 575px;{/block:if250pxposts}
  490. {block:permalinkpage}
  491. {block:if500pxposts}width: 600px;margin-left: 430px;{/block:if500pxposts}
  492. {block:if400pxposts}width: 600px;margin-left: 430px;{/block:if400pxposts}
  493. {block:if250pxposts}width: 600px;margin-left: 430px;{/block:if250pxposts}
  494. {/block:permalinkpage}
  495. }
  496.  
  497. .post {
  498. transition: 0.6s;
  499. width: 250px;
  500. padding: 20px;
  501. background-color:transparent;
  502. margin-bottom: 90px;
  503. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  504. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  505. {block:if250pxposts}width: 250px;{/block:if250pxposts}
  506. {block:permalinkpage}
  507. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  508. {block:if400pxposts}width: 500px;{/block:if400pxposts}
  509. {block:if250pxposts}width: 500px;{/block:if250pxposts}
  510. {/block:permalinkpage}
  511.  
  512.  
  513. }
  514.  
  515. .photo {
  516. border-radius: 5px;
  517. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  518. {block:if400pxposts}width: 400px;{/block:if400pxposts}
  519. {block:if250pxposts}width: 250px;{/block:if250pxposts}
  520. {block:permalinkpage}
  521. {block:if500pxposts}width: 500px;{/block:if500pxposts}
  522. {block:if400pxposts}width: 500px;{/block:if400pxposts}
  523. {block:if250pxposts}width: 500px;{/block:if250pxposts}
  524. {/block:permalinkpage}
  525. display: block;
  526. {block:ifphotofading}opacity: 0.6;{/block:ifphotofading}
  527. {block:ifmonochromeposts}
  528. 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+ */
  529. filter: gray; /* IE6-9 */
  530. -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  531. {/block:ifmonochromeposts}
  532. transition: 0.8s;
  533. -moz-transition: 0.8s;
  534. webkit-transition: 0.8s;
  535. -o-transition: 0.8s;
  536. }
  537.  
  538. .post:hover .photo {
  539. opacity: 1;
  540. {block:ifmonochromeposts}
  541. filter: none;
  542. -webkit-filter: grayscale(0%);
  543. {/block:ifmonochromeposts}
  544. }
  545.  
  546. .post img {
  547. {block:if500pxposts}max-width: 500px;{/block:if500pxposts}
  548. {block:if400pxposts}max-width: 400px;{/block:if400pxposts}
  549. {block:if250pxposts}max-width: 250px;{/block:if250pxposts}
  550. {block:permalinkpage}
  551. {block:if500pxposts}max-width: 500px;{/block:if500pxposts}
  552. {block:if400pxposts}max-width: 500px;{/block:if400pxposts}
  553. {block:if250pxposts}max-width: 500px;{/block:if250pxposts}
  554. {/block:permalinkpage}
  555. }
  556. .post blockquote img {max-width: 100%;}
  557.  
  558. .text {
  559. font-family: lato;
  560. font-size: 10px;
  561. letter-spacing:1px;
  562. word-spacing:1px;
  563. line-height:15px;
  564. color: {color:body text};
  565. }
  566.  
  567. .text b,strong, .permainfo b,strong {
  568. font-weight: 400;
  569. color: {color:body bold};
  570. }
  571.  
  572. .text i,em, .permainfo a {
  573. color: {color:body italic};
  574. }
  575.  
  576. .text a, .ptags a, .psrc a {
  577. background-color: {color:body links highlight};
  578. color: {color:body links};
  579. text-decoration: underline;
  580. }
  581.  
  582. .text a:hover, .ptags a:hover, .permainfo a:hover, .psrc a:hover {
  583. background-color: {color:body links highlight hover};
  584. color: {color:body links hover};
  585. }
  586.  
  587. .ptitle, .ltitle {
  588. font-family: lato;
  589. font-size: 12px;
  590. border-bottom: 1px solid {color:post title underline};
  591. padding: 14px 5px;
  592. text-transform: uppercase;
  593. letter-spacing: 1px;
  594. text-align: center;
  595. color: {color:post title};
  596. }
  597.  
  598. .quom, .quomr {
  599. font-family: georgia;
  600. font-size: 100px;
  601. margin: -15px 0;
  602. position: absolute;
  603. color: {color:quote post quotation marks};
  604. z-index: 1;
  605. }
  606. .quomr {
  607. {block:if500pxposts}margin: -15px 460px;{/block:if500pxposts}
  608. {block:if400pxposts}margin: -15px 360px;{/block:if400pxposts}
  609. {block:if250pxposts}margin: -15px 210px;{/block:if250pxposts}
  610. }
  611.  
  612. .pquote {
  613. font-family: courier new;
  614. font-size: 14px;
  615. text-align: center;
  616. position: relative;
  617. z-index: 2;
  618. color: {color:quote post};
  619. }
  620.  
  621. .psrc {
  622. font-family: consolas;
  623. font-size: 8px;
  624. letter-spacing: 1px;
  625. text-transform: uppercase;
  626. text-align: center;
  627. margin-top: 10px;
  628. margin-bottom: 10px;
  629. color: {color:quote post source};
  630. }
  631.  
  632. .tumblr_audio_player {height: 40px; width: 210px;}
  633. .audiopost { height: 150px; }
  634. .albumno {
  635. width: 150px;
  636. height: 150px;
  637. background-color: {color:no album art};
  638. position: absolute;
  639. z-index: 1;
  640. {block:indexpage}{block:if250pxposts}
  641. width: 250px;
  642. height: 250px;
  643. {/block:if250pxposts}{/block:indexpage}
  644. }
  645.  
  646. .albumartp {
  647. z-index: 10;
  648. width: 150px;
  649. height: 150px;
  650. position: relative;
  651. z-index: 2;
  652. display: block;
  653. {block:indexpage}{block:if250pxposts}
  654. width: 250px;
  655. height: 250px;
  656. {/block:if250pxposts}{/block:indexpage}
  657. }
  658.  
  659. .albumart {
  660. width: 150px;
  661. height: 150px;
  662. display: block;
  663. position: relative;
  664. {block:indexpage}{block:if250pxposts}
  665. width: 250px;
  666. height: 250px;
  667. {/block:if250pxposts}{/block:indexpage}
  668. }
  669.  
  670. .audioplayer {
  671. position: absolute;
  672. z-index: 11;
  673. margin-top: -90px;
  674. margin-left: 65px;
  675. width: 25px;
  676. height: 25px;
  677. overflow: hidden;
  678. opacity: 0.5;
  679. {block:indexpage}{block:if250pxposts}
  680. margin-top: -140px;
  681. margin-left: 115px;
  682. {/block:if250pxposts}{/block:indexpage}
  683. transition: 0.6s;
  684. -moz-transition: 0.6s;
  685. -webkit-transition: 0.6s;
  686. -o-transition: 0.6s;
  687. }
  688. .audioplayer:hover {opacity: 1;}
  689.  
  690. .audioinfo {
  691. position: absolute;
  692. margin-left: 155px;
  693. height: 150px;
  694. }
  695.  
  696. .aline {
  697. {block:if500pxposts}width: 325px;{/block:if500pxposts}
  698. {block:if400pxposts}width: 225px;{/block:if400pxposts}
  699. {block:indexpage}{block:if250pxposts}margin-top: 5px;{/block:if250pxposts}{/block:indexpage}
  700. {block:permalinkpage}width: 325px;{/block:permalinkpage}
  701. font-family: consolas;
  702. font-size: 10px;
  703. padding: 11px 10px;
  704. margin-bottom: 5px;
  705. text-transform: uppercase;
  706. background-color: {color:audio info background};
  707. color: {color:audio info text};
  708. }
  709. .aline b,strong {
  710. font-weight: 400;
  711. color: {color:audio info list headings};
  712. }
  713.  
  714. .askerportrait {
  715. max-width: 64px;
  716. max-height: 64px;
  717. position: absolute;
  718. border: 10px solid {color:ask background};
  719. }
  720. .a {
  721. margin-left: 100px;
  722. background-color: {color:ask background};
  723. min-height: 64px;
  724. padding: 10px;
  725. font-family: calibri;
  726. font-size: 11px;
  727. color: {color:ask text};
  728. }
  729. .asker {
  730. color: {color:asker text};
  731. font-family: calibri;
  732. font-size: 11px;
  733. text-transform: uppercase;
  734. }
  735. .asker a {color: {color:asker link};border-bottom: 1px solid {color:asker link};}
  736. .q {margin-top: 10px;}
  737. .tri {
  738. position: absolute;
  739. font-size: 30px;
  740. margin: 20px 0 0 85px;
  741. color: {color:ask background};
  742. }
  743.  
  744. .line {
  745. font-family: lato;
  746. font-size: 9px;
  747. letter-spacing: 1px;
  748. text-transform: normal;
  749. }
  750.  
  751. .odd .line {
  752. padding: 10px 5px;
  753. color:{color:chat odd text};
  754. background-color: {color:post background};
  755. }
  756. .even .line {
  757. padding: 10px 5px;
  758. color:{color:chat even text};
  759. background-color: {color:post background};
  760. }
  761. .odd .name {
  762. color: {color:chat odd name};
  763. padding: 3px 5px;
  764. }
  765. .even .name {
  766. color: {color:chat even name};
  767. padding: 3px 5px;
  768. }
  769.  
  770. #content blockquote {
  771. margin: 5px;
  772. padding: 0 10px;
  773. border-left: 1px solid {color:blockquote};
  774. }
  775.  
  776. .perma {
  777. font-family: courier new;
  778. {block:ifnot250pxposts}
  779. margin-top: 20px;
  780. {block:ifpermalinksources}padding-bottom: 12px;{/block:ifpermalinksources}
  781. {block:ifshowtags}padding-bottom: 12px;{/block:ifshowtags}
  782. {/block:ifnot250pxposts}
  783. {block:if250pxposts}
  784. margin-top: 10px;
  785. {/block:if250pxposts}
  786. font-size: 8px;
  787. text-transform: uppercase;
  788. letter-spacing: 1px;
  789. color: {color:body};
  790. }
  791.  
  792. .perma a {
  793. color: {color:body links};
  794. }
  795.  
  796. .perma a:hover {
  797. color: {color:body links hover};
  798. }
  799.  
  800. .permano {
  801. padding: 3px 5px;
  802. background-color: {color:permalink notes background};
  803. color: {color:permalink notes};
  804. text-decoration: none;
  805. }
  806.  
  807. .permano:hover {
  808. background-color: {color:hover permalink notes background};
  809. color: {color:hover permalink notes};
  810. text-decoration: none;
  811. }
  812.  
  813. .permatags {
  814. text-align: right;
  815. margin-top: -1px;
  816. padding-top: 2px;
  817. line-height: 16px;
  818. border-top: 1px solid {color:permalink divider};
  819. }
  820.  
  821. .permatags a {
  822. font-family: lato;
  823. font-size: 8px;
  824. padding: 3px;
  825. background-color: {color:tags background};
  826. color: {color:tags};
  827. text-transform: normal;
  828. letter-spacing: 1px;
  829. }
  830.  
  831. .permatags a:hover {
  832. background-color: {color:hover tags background};
  833. color: {color:hover tags};
  834. }
  835.  
  836. .permaactions {
  837. border-top: 1px solid {color:permalink divider};
  838. {block:ifpermalinksources}{block:ifnotshowtags}
  839. text-align: right;
  840. {/block:ifnotshowtags}{/block:ifpermalinksources}
  841. }
  842.  
  843. .permaactions a {
  844. font-family: courier new;
  845. font-size: 8px;
  846. padding: 3px;
  847. background-color: {color:hover tags background};
  848. color: {color:hover tags};
  849. margin-left: 5px;
  850. margin-top: 6px;
  851. {block:ifpermalinksources}{block:ifshowtags}
  852. float: right;
  853. {/block:ifshowtags}{/block:ifpermalinksources}
  854. text-transform: uppercase;
  855. letter-spacing: 1px;
  856. }
  857.  
  858. .permaactions a:hover {
  859. background-color: {color:tags background};
  860. color: {color:tags};
  861. }
  862.  
  863. .permainfo {
  864. margin-top: 10px;
  865. width: 480px;
  866. padding: 30px 30px;
  867. font-family: calibri;
  868. font-size: 11px;
  869. text-align: center;
  870. background-color: {color:post background};
  871. color: {color:body text};
  872. }
  873.  
  874. #notecontainer {
  875. padding: 10px;
  876. text-decoration: none;
  877. width: 500px;
  878. background-color: {color:post background};
  879. padding: 20px;
  880. margin-top: 20px;
  881. }
  882.  
  883. ol.notes {
  884. list-style-type: none;
  885. letter-spacing: -1px;
  886. font-size: 11px;
  887. color: {color:body text};
  888. font-family: consolas;
  889. text-decoration: none;
  890. margin: 0;
  891. width: 500px;
  892. padding: 5px;
  893. text-align: left;
  894. }
  895. ol.notes a {
  896. color: {color:body links};
  897. -webkit-transition: all 0.4s ease-in-out;
  898. -moz-transition: all 0.4s ease-in-out;
  899. -o-transition: all 0.4s ease-in-out;
  900. -ms-transition: all 0.4s ease-in-out;
  901. transition: all 0.4s ease-in-out;}
  902.  
  903. ol.notes a:hover {color:{color:body links};}
  904.  
  905. img.avatar {
  906. margin-right: 5px;
  907. width: 10px;
  908. height: 10px;
  909. float: left;
  910. }
  911.  
  912. #image img {
  913. height: 300px;
  914. position: fixed;
  915. right: 0px;
  916. bottom: -40px;
  917. z-index:999;
  918. opacity:0.8;
  919. }
  920.  
  921. .pagi {
  922. margin-top: 5px;
  923. font-family: calibri;
  924. font-size: 10px;
  925. color: {color:desc};
  926. text-align: center;
  927. }
  928.  
  929. .pagi a {
  930. color: {color:desc links};
  931. }
  932. .pagi a:hover {
  933. color: {color:desc links hover};
  934. }
  935.  
  936. {CustomCSS}
  937.  
  938. </style>
  939. </head>
  940. <body>
  941.  
  942. <script language=JavaScript>
  943. <!--
  944.  
  945. //Disable right click script III- By Renigade (renigade@mediaone.net)
  946. //For full source code, visit http://www.dynamicdrive.com
  947.  
  948. var message="";
  949. ///////////////////////////////////
  950. function clickIE() {if (document.all) {(message);return false;}}
  951. function clickNS(e) {if
  952. (document.layers||(document.getElementById&&!document.all)) {
  953. if (e.which==2||e.which==3) {(message);return false;}}}
  954. if (document.layers)
  955. {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
  956. else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
  957.  
  958. document.oncontextmenu=new Function("return false")
  959. // -->
  960. </script>
  961.  
  962. <BODY onselectstart=”return false;” ondragstart=”return false;”>
  963. </div>
  964.  
  965.  
  966.  
  967.  
  968.  
  969. <a href="http://zitaos.org"><img style="position: fixed; z-index: 1000; left: 337px; top: 235px; height:25px; opacity:0.5 ;" title="my baby angel"src="http://media.tumblr.com/d46d78c74e50af298837d98fe499d939/tumblr_inline_ni8emaBl7M1reem51.png"></a>
  970.  
  971.  
  972. <img style="position: fixed; z-index: 1000; left: 165px; top: 297px; opacity:0.3 ;"src="http://i1245.photobucket.com/albums/gg597/okesan/cuteicondivider2plz_zps091a3e68.gif"></a>
  973.  
  974.  
  975. <div id="image"><img src=""/></div>
  976.  
  977.  
  978.  
  979.  
  980. <div id="customs">
  981.  
  982. <a href="{text:link 1 url}">
  983. <div class="custxt">{text:link 1}</div>
  984. <img class="custi" src="{image:right icon 1}">
  985. </a>
  986.  
  987. <a href="{text:link 2 url}">
  988. <div class="custxt">{text:link 2}</div>
  989. <img class="custi" src="{image:right icon 2}">
  990. </a>
  991.  
  992. <a href="{text:link 3 url}">
  993. <div class="custxt">{text:link 3}</div>
  994. <img class="custi" src="{image:right icon 3}">
  995. </a>
  996.  
  997. </div><!--customs-->
  998.  
  999.  
  1000. <div id="topp">
  1001. <span class="topptitle">The june club!</span>
  1002. {block:ifcustomtumblrcontrols}{block:indexpage}
  1003. <div class="newctrl"><a href="http://tumblr.com/follow/{text:your url}">+follow</a> <a href="http://tumblr.com/dashboard">+dashboard</a></div>
  1004. {/block:indexpage}{/block:ifcustomtumblrcontrols}
  1005. </div><!--topp-->
  1006.  
  1007. <div id="totalhe">
  1008. <img class="totalheimg" src="{image:sidebar}">
  1009. <div class="desc">{description}</div>
  1010.  
  1011.  
  1012. <div id="basicnav">
  1013.  
  1014. <div class="backline"></div>
  1015.  
  1016. <a href="/mixgorl"><div id="navmain">
  1017. <span class="navitxt">profile</span>
  1018. <span class="navicon"><i class="fa fa-pagelines"></i></span>
  1019. </div><!--navmain--></a>
  1020.  
  1021. <a id="clickbutton" class="t" style="cursor:pointer;"><div id="navmain">
  1022. <span class="navitxt">search?</span>
  1023. <span class="navicon"><i class="fa fa-search"></i></span>
  1024. </div><!--navmain--></a>
  1025.  
  1026. <a title="personal blog"href="http://mixgorl.tumblr.com"><div id="navmain">
  1027. <span class="navitxt">personal</span>
  1028. <span class="navicon"><i class="fa fa-folder-open-o"></i></span>
  1029. </div><!--navmain--></a>
  1030.  
  1031. <a href="/ask"><div id="navmain">
  1032. <span class="navitxt">message</span>
  1033. <span class="navicon"><i class="fa fa-envelope-o"></i></span>
  1034. </div><!--navmain--></a>
  1035.  
  1036. <a href="/"><div id="navmain">
  1037. <span class="navitxt">restart</span>
  1038. <span class="navicon"><i class="fa fa-home"></i></span>
  1039. </div><!--navmain--></a>
  1040.  
  1041. </div><!--basicnav-->
  1042.  
  1043. <div class="relocat">
  1044. <form action="/search" method="get" id="sbox">
  1045. <input type="text" name="q" value="S E A R C H" class="stext"/>
  1046. </form>
  1047. </div>
  1048.  
  1049.  
  1050. <!--relocat-->
  1051.  
  1052. {block:ifnotinfinitescroll}
  1053. <div class="pagi">
  1054. {block:Pagination}
  1055. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage} / {block:NextPage}<a href="{NextPage}" id="next">forwards</a>{/block:NextPage}{/block:Pagination}
  1056. </div><!--pagi-->
  1057. {/block:ifnotinfinitescroll}
  1058.  
  1059. </div>
  1060.  
  1061. <div id="content">
  1062.  
  1063. {block:Posts}
  1064. <div class="post">
  1065.  
  1066. {block:quote}
  1067. <div class="quom">“</div><div class="quomr">”</div>
  1068. <div class="pquote">{quote}</div><br>
  1069. <div class="psrc">- {Source} -</div>
  1070. {/block:quote}
  1071.  
  1072. {block:Photo}
  1073. {linkopentag}<center><img class="photo" src="{PhotoURL-500}"></center>{linkclosetag}
  1074. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1075. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1076. <div class="text">{Caption}</div>
  1077. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1078. {/block:Photo}
  1079.  
  1080. {block:Photoset}
  1081. <div class="photo">
  1082. {block:indexpage}
  1083. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  1084. {block:if400pxposts}{Photoset-400}{/block:if400pxposts}
  1085. {block:if250pxposts}{Photoset-250}{/block:if250pxposts}
  1086. {/block:indexpage}
  1087. {block:permalinkpage}
  1088. {block:if500pxposts}{Photoset-500}{/block:if500pxposts}
  1089. {block:if400pxposts}{Photoset-500}{/block:if400pxposts}
  1090. {block:if250pxposts}{Photoset-500}{/block:if250pxposts}
  1091. {/block:permalinkpage}
  1092. </div>
  1093. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1094. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1095. <div class="text">{Caption}</div>
  1096. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1097. {/block:Photoset}
  1098.  
  1099. {block:text}
  1100. {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
  1101. <div class="text">{body}</div>
  1102. {/block:text}
  1103.  
  1104. {block:Audio}
  1105.  
  1106. {block:indexpage}{block:ifnot250pxposts}
  1107. <div class="audiopost">
  1108. <div class="audioinfo">
  1109. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  1110. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  1111. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  1112. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  1113. </div><!--audioinfo-->
  1114. {/block:ifnot250pxposts}{/block:indexpage}
  1115.  
  1116. {block:permalinkpage}
  1117. <div class="audioinfo">
  1118. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  1119. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  1120. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  1121. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  1122. </div><!--audioinfo-->
  1123. {/block:permalinkpage}
  1124.  
  1125. <div class="albumart"><div class="albumno"></div>{block:AlbumArt}<img class="albumartp" src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1126. <div class="audioplayer">{AudioPlayer}</div>
  1127.  
  1128. {block:ifnot250pxposts}{block:indexpage}</div><!--audiopost-->{/block:indexpage}{/block:ifnot250pxposts}
  1129.  
  1130. {block:indexpage}{block:if250pxposts}
  1131. {block:trackname}<div class="aline"><b>track name:</b> {trackname}</div>{/block:trackname}
  1132. {block:artist}<div class="aline"><b>artist:</b> {artist}</div>{/block:artist}
  1133. {block:album}<div class="aline"><b>album:</b> {album}</div>{/block:album}
  1134. {block:playcount}<div class="aline"><b>play count:</b> {playcount}</div>{/block:playcount}
  1135. {/block:if250pxposts}{/block:indexpage}
  1136. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1137. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1138. <div class="text">{Caption}</div>
  1139. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1140. {/block:Audio}
  1141.  
  1142. {block:Video}
  1143. {block:indexpage}
  1144. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  1145. {block:if400pxposts}{Video-400}{/block:if400pxposts}
  1146. {block:if250pxposts}{Video-250}{/block:if250pxposts}
  1147. {/block:indexpage}
  1148. {block:permalinkpage}
  1149. {block:if500pxposts}{Video-500}{/block:if500pxposts}
  1150. {block:if400pxposts}{Video-500}{/block:if400pxposts}
  1151. {block:if250pxposts}{Video-500}{/block:if250pxposts}
  1152. {/block:permalinkpage}
  1153. {block:IfShowCaptions}{block:Caption}<div class="text">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1154. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  1155. <div class="text">{Caption}</div>
  1156. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  1157. {/block:Video}
  1158.  
  1159. {block:Answer}
  1160. <img class="askerportrait" src="{AskerPortraitURL-64}">
  1161. <div class="tri">◀</div>
  1162. <div class="a">
  1163. <span class="asker">{Asker} whispered:</span>
  1164. <span class="q">{Question}</span>
  1165. </div>
  1166. <div class="text">{Answer}</div>
  1167. {/block:Answer}
  1168.  
  1169. {block:Chat}
  1170. {block:Title}<div class="ptitle">{Title}</div>{/block:Title}
  1171. <div class="text">
  1172. {block:Lines}<div class="{Alt}">
  1173. <div class="line">{block:Label}<span class="name">{Label}</span>{/block:Label} {Line}<br /></div></div>
  1174. {/block:Lines}
  1175. </div>
  1176. {/block:Chat}
  1177.  
  1178. {block:link}
  1179. <a href="{URL}"><div class="ltitle">{Name} ▷</div></a>
  1180. {block:Description}<div class="text">{Description}</div>{/block:Description}
  1181. {/block:link}
  1182.  
  1183. {block:indexpage}{block:date}
  1184. <div class="perma">
  1185. {block:if250pxposts}
  1186. <a href="{Permalink}"><span class="permano">{NoteCountWithLabel}<span class="permarblg"></a> // {TimeAgo}
  1187. {/block:if250pxposts}
  1188. {block:ifnot250pxposts}
  1189. <a href="{Permalink}"><span class="permano">{NoteCountWithLabel}<span class="permarblg"></a> // posted on {DayOfMonth} {ShortMonth} @ {12Hour}.{Minutes}{AmPm} [<a href="{ReblogURL}"> reblog? </a>]
  1190. {/block:ifnot250pxposts}
  1191. </div>
  1192. {block:ifnot250pxposts}
  1193. {block:ifpermalinksources}<div class="permaactions">
  1194. {block:RebloggedFrom}
  1195. <a title="{ReblogParentName}" href="{ReblogParentURL}">via</a> <a href="{ReblogRootURL}" title="{ReblogRootName}">org</a>
  1196. {/block:RebloggedFrom}
  1197. {block:if250pxposts}<a title="reblog this post" href="{ReblogURL}">rbg</a>{/block:if250pxposts}
  1198. </div><!--permalinksources-->{/block:ifpermalinksources}
  1199. {block:ifshowtags}
  1200. {block:HasTags}<div class="permatags">{block:Tags}
  1201. <a href="{TagURL}">#{Tag}</a>
  1202. {/block:Tags}</div>{/block:HasTags}
  1203. {/block:ifshowtags}
  1204. {/block:ifnot250pxposts}
  1205.  
  1206. {/block:date}{/block:indexpage}
  1207.  
  1208. </div><!--posts-->
  1209.  
  1210. {block:permalinkpage}{block:date}
  1211. <div class="permainfo">
  1212. Posted on <b>{DayOfMonth} {Month} {Year}</b>, at <b>{12Hour}.{Minutes}{AmPm}</b>, with <b>{NoteCountWithLabel}</b><br>
  1213. {block:RebloggedFrom}
  1214. Reblogged via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally by <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
  1215. {/block:RebloggedFrom}
  1216. {block:HasTags}<div class="ptags">{block:Tags}
  1217. <a href="{TagURL}">#{Tag} </a>
  1218. {/block:Tags}</div>{/block:HasTags}
  1219. </div><!--permainfo-->
  1220. {block:PostNotes}
  1221. <div id="notecontainer">{PostNotes}</div>
  1222. {/block:PostNotes}
  1223. {/block:date}{/block:permalinkpage}
  1224.  
  1225. {/block:Posts}
  1226.  
  1227. {block:ContentSource}
  1228. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1229. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1230. {/block:SourceLogo}
  1231. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1232. {/block:ContentSource}
  1233.  
  1234. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom}-->
  1235.  
  1236. </div><!--content-->
  1237.  
  1238. <div class="pagination">
  1239. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  1240. </div>
  1241.  
  1242. </body>
  1243. </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!