API tools faq
paste
Advertisement
lilacthemes

Theme 06a

lilacthemes
Sep 21st, 2014
2,258
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!--
  7. THEME MADE BY lilacthemes.tumblr.com PLEASE DON NOT CLAIM IT AS YOUR OWN -->
  8.  
  9. <head>
  10. <title>{Title}</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  13. <meta name="description" content="" />
  14. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  15.  
  16.  
  17.  
  18. <meta name="image:Sidebar" content=""/>
  19. <meta name="image:Background" content=""/>
  20. <meta name="color:Background" content="#555555"/>
  21. <meta name="color:Title" content="#000"/>
  22. <meta name="color:Sidebar" content="#000"/>
  23. <meta name="color:Sidebar Text" content="#b6b6b6"/>
  24. <meta name="color:Post bg" content="#000"/>
  25. <meta name="color:Text" content="#b6b6b6"/>
  26. <meta name="color:Link" content="#be004c"/>
  27. <meta name="color:Link Hover" content="#ea4c88"/>
  28. <meta name="color:Post Info" content="#b6b6b6"/>
  29. <meta name="color:Post Info Hover" content="#E6E6E6"/>
  30.  
  31. <meta name="text:Font" content="'Source Sans Pro', sans-serif"/>
  32. <meta name="text:FAQ" content=""/>
  33. <meta name="text:About Me" content=""/>
  34. <meta name="text:Link 1" content="Link 1" />
  35. <meta name="text:Link 1 Title" content="Link 1" />
  36. <meta name="text:Link 2" content="Link 2" />
  37. <meta name="text:Link 2 Title" content="Link 2" />
  38. <meta name="text:Link 3" content="Link 3" />
  39. <meta name="text:Link 3 Title" content="Link 3" />
  40. <meta name="text:Link 4" content="Link 4" />
  41. <meta name="text:Link 4 Title" content="Link 4" />
  42. <meta name="text:Link 5" content="Link 5" />
  43. <meta name="text:Link 5 Title" content="Link 5" />
  44. <meta name="text:Link 6" content="Link 6" />
  45. <meta name="text:Link 6 Title" content="Link 6" />
  46. <meta name="text:Link 7" content="Link 7" />
  47. <meta name="text:Link 7 Title" content="Link 7" />
  48. <meta name="text:Link 8" content="Link 8" />
  49. <meta name="text:Link 8 Title" content="Link 8" />
  50. <meta name="text:Link 9" content="Link 9" />
  51. <meta name="text:Link 9 Title" content="Link 9" />
  52. <meta name="text:Link 10" content="Link 10" />
  53. <meta name="text:Link 10 Title" content="Link 10" />
  54.  
  55. <meta name="if:Show Background Image" content="0"/>
  56. <meta name="if:400px Posts" content="0"/>
  57. <meta name="if:Show Title" content="1"/>
  58. <meta name="if:Show Sidebar Color" content="1"/>
  59. <meta name="if:Show About Me" content="1"/>
  60. <meta name="if:Show FAQ" content="1"/>
  61. <meta name="if:Show Blogroll" content="1"/>
  62. <meta name="if:Show Search Box" content="1"/>
  63. <meta name="if:Show Caption" content="1"/>
  64. <meta name="if:Lazy Load" content="0"/>
  65. <meta name="if:Show Link 1" content="1"/>
  66. <meta name="if:Show Link 2" content="1"/>
  67. <meta name="if:Show Link 3" content="1"/>
  68. <meta name="if:Show Link 4" content="1"/>
  69. <meta name="if:Show Link 5" content="1"/>
  70. <meta name="if:Show Link 6" content="1"/>
  71. <meta name="if:Show Link 7" content="1"/>
  72. <meta name="if:Show Link 8" content="1"/>
  73. <meta name="if:Show Link 9" content="1"/>
  74. <meta name="if:Show Link 10" content="1"/>
  75.  
  76.  
  77.  
  78. <!-- FONTS -->
  79. <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro'
  80. rel='stylesheet' type='text/css'>
  81.  
  82. <link href='http://fonts.googleapis.com/css?family=Arimo:700'
  83. rel='stylesheet' type='text/css'>
  84.  
  85. <link href='http://fonts.googleapis.com/css?family=Ubuntu:500'
  86. rel='stylesheet' type='text/css'>
  87.  
  88. <link href='http://fonts.googleapis.com/css?family=Hind'
  89. rel='stylesheet' type='text/css'>
  90.  
  91. <!-- S M T TOOLTIP -->
  92. <script
  93. src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
  94. </script>
  95. <script
  96. src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js">
  97. </script>
  98.  
  99. <script>
  100.  
  101. (function($){
  102. $(document).ready(function(){
  103. $("a[title],div[title],img[title]").style_my_tooltips({
  104. tip_follows_cursor:true,
  105. tip_delay_time:0,
  106. tip_fade_speed:50,
  107. attribute:"title"
  108. });
  109. });
  110.  
  111. })(jQuery);
  112. </script>
  113.  
  114. <!-- BACK TO TOP -->
  115.  
  116. <script
  117. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  118. </script>
  119. <script
  120. src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js">
  121. </script>
  122. <a href="javascript:;" id="scrollToTop" title="back to top">top</a>
  123.  
  124. <!-- NAVIGATION,POSTINFO -->
  125. <script
  126. src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  127. </script>
  128. <script>
  129. jQuery(document).ready(function(){
  130. $(".click-menu").click(function(){
  131. $(".closed-menu").toggleClass("open-menu");
  132. });
  133.  
  134.  
  135. $(".links-descr").hide();
  136. $(".click-links").click(function(){
  137. $(this).next(".links-descr").slideToggle();
  138. });
  139. });
  140. </script>
  141.  
  142.  
  143. <!-- LAZY LOAD -->
  144. {block:IfLazyLoad}
  145. <script type="text/javascript"
  146. src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js">
  147. </script>
  148. <script type="text/javascript"
  149. src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js">
  150. </script>
  151.  
  152. <script type="text/javascript" charset="utf-8">
  153. var $j = jQuery.noConflict();
  154. $j(function() {
  155. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  156. $j("img").lazyload({
  157. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  158. effect: "fadeIn",
  159. });
  160. });
  161. </script>
  162. {/block:IfLazyLoad}
  163.  
  164.  
  165. <style type="text/css">
  166.  
  167. /* SCROLLBAR */
  168. ::-webkit-scrollbar { width: 8px; height: 10px;}
  169. ::-webkit-scrollbar-track
  170. {
  171. background:transparent;
  172. }
  173. ::-webkit-scrollbar-thumb
  174. {
  175. background-color:{color:Link};
  176. }
  177.  
  178. ::selection
  179. {
  180. color:{color:Post bg};
  181. background:{color:Link};
  182. }
  183. ::-moz-selection
  184. {
  185. color:{color:Post bg};
  186. background:{color:Link};
  187. }
  188.  
  189. /* TOOLTIP */
  190. #s-m-t-tooltip
  191. {
  192. max-width:300px;
  193. background-color:{color:Link};
  194. font-size:8px;
  195. color:{color:Post bg};
  196. text-transform:uppercase;
  197. letter-spacing:1px;
  198. padding:3px 3px 2px 3px;
  199. margin:20px;
  200. z-index:9999999999999999999999;
  201. font-family: 'Ubuntu', sans-serif;
  202. }
  203.  
  204. #scrollToTop:link,#scrollToTop:visited
  205. {
  206. color: {color:Text};
  207. background-color:{color:Post bg};
  208. padding:0 3px 0 3px;
  209. font-weight:bold;
  210. display: none;
  211. position: fixed;
  212. right:70px;
  213. bottom:10px;
  214. }
  215. body
  216. {
  217. font-family: {text:Font};
  218. font-size: 12px;
  219. background: {color:Background} fixed;
  220. {block:IfShowBackgroundImage}
  221. background-image: url('{image:Background}');
  222. {/block:IfShowBackgroundImage}
  223. {block:IfNotShowBackgroundImage}
  224. background-image: url('http://static.tumblr.com/vdyrvd5/v9znf8yxc/m.png');
  225. {/block:IfNotShowBackgroundImage}
  226. }
  227. img{max-width: 100%;border: none;}
  228.  
  229. p {margin:5px 0 5px 0;}
  230. pre
  231. {
  232. background-color:rgba(192, 192, 192, 0.4);
  233. padding:1px 2px 2px 2px;
  234. font-size: 12px;
  235. }
  236. code {font-size: 12px;}
  237. small {font-size:10px;}
  238. small a {font-size:10px;}
  239. a
  240. {font-size: 12px;text-decoration:none;}
  241.  
  242. /* SIDEBAR */
  243. #sidebar
  244. {
  245. width: 350px;
  246. height:100%;
  247. position: fixed;
  248. left:0;
  249. right:0;
  250. bottom:0;
  251. -webkit-background-size: cover;
  252. -o-background-size: cover;
  253. background-size: cover;
  254. background:{color:Sidebar} url('{image:Sidebar}') no-repeat top left;
  255. {block:IfShowSidebarColor}
  256. -webkit-filter: grayscale(1);
  257. filter: grayscale(1);
  258. {/block:IfShowSidebarColor}
  259. }
  260. {block:IfShowSidebarColor}
  261. .sidecolor
  262. {
  263. width: 350px;
  264. height:100%;
  265. position: fixed;
  266. left:0;
  267. right:0;
  268. bottom:0;
  269. background-color:{color:Link};
  270. z-index:2;
  271. opacity:0.7;
  272. display:block;
  273. -webkit-filter: saturate(100%);
  274. filter: saturate(100%);
  275. }
  276. {/block:IfShowSidebarColor}
  277. /* TITLE */
  278. .title
  279. {
  280. position:fixed;
  281. width:350px;
  282. top:10px;
  283. left:9px;
  284. z-index:5;
  285. }
  286. .title a
  287. {
  288. color:{color:Title};
  289. font-size:22px;
  290. font-family: 'Hind', sans-serif;
  291. }
  292.  
  293.  
  294. /* NAV */
  295. #nav
  296. {
  297. position:fixed;
  298. height:100%;
  299. top:0px;
  300. width:22px;
  301. bottom:0px;
  302. left:350px;
  303. z-index:15;
  304. background-color:{color:Sidebar};
  305. }
  306. #nav img
  307. {
  308. display:block;
  309. height:18px;
  310. width:18px;
  311. overflow:hidden;
  312. margin:15px 2px 15px 2px;
  313. }
  314. #nav img:hover
  315. {
  316. transform:scale(1.3);
  317. -webkit-transform:scale(1.3);
  318. -moz-transition: all 0.5s ease-in-out;
  319. -o-transition: all 0.5s ease-in-out;
  320. -webkit-transition: all 0.5s ease-in-out;
  321. -ms-transition:all 0.5s ease-in-out;
  322. transition: all 0.5s ease-in-out;
  323. }
  324. #nav a
  325. {
  326. position:relative;
  327. top:250px;
  328. cursor:pointer;
  329. }
  330. #nav span
  331. {
  332. {block:IfShowSidebarColor}
  333. color:{color:Link};
  334. {/block:IfShowSidebarColor}
  335. {block:IfNotShowSidebarColor}
  336. color:{color:Sidebar Text};
  337. {/block:IfNotShowSidebarColor}
  338. background-color:{color:Sidebar};
  339. position:relative;
  340. top:-30px;
  341. left:50px;
  342. opacity:0.0;
  343. padding:1px 4px 1px 4px;
  344. -moz-transition: all 0.5s ease-in-out;
  345. -o-transition: all 0.5s ease-in-out;
  346. -webkit-transition: all 0.5s ease-in-out;
  347. -ms-transition:all 0.5s ease-in-out;
  348. transition: all 0.5s ease-in-out;
  349. }
  350. #nav a:hover span
  351. {
  352. left:30px;
  353. opacity:1.0;
  354. }
  355.  
  356. /* MENU */
  357. .menu
  358. {
  359. height:100%;
  360. position:fixed;
  361. top:0px;
  362. left:0px;
  363. bottom:0px;
  364. width:350px;
  365. z-index:10;
  366. background-color:{color:Sidebar};
  367. display:block;
  368. }
  369. .closed-menu
  370. {
  371. margin-left:-360px;
  372. overflow:hidden;
  373. -moz-transition: all 0.5s ease-in-out;
  374. -o-transition: all 0.5s ease-in-out;
  375. -webkit-transition: all 0.5s ease-in-out;
  376. -ms-transition:all 0.5s ease-in-out;
  377. transition: all 0.5s ease-in-out;
  378. }
  379. .open-menu
  380. {
  381. margin-left:0px;
  382. overflow:visible;
  383. -moz-transition: all 0.5s ease-in-out;
  384. -o-transition: all 0.5s ease-in-out;
  385. -webkit-transition: all 0.5s ease-in-out;
  386. -ms-transition:all 0.5s ease-in-out;
  387. transition: all 0.5s ease-in-out;
  388. }
  389. .click-menu
  390. {
  391. display:block;
  392. }
  393.  
  394. .menu-links
  395. {
  396. display:block;
  397. text-align:center;
  398. position:fixed;
  399. top:50px;
  400. background-color:{color:Sidebar};
  401. }
  402.  
  403. .menu-links > span
  404. {
  405. display:block;
  406. color:{color:Sidebar Text};
  407. margin:40px 0 40px -5px ;
  408. text-decoration:none;
  409. font-size:15px;
  410. cursor:pointer;
  411. -moz-transition: all 0.5s ease-in-out;
  412. -o-transition: all 0.5s ease-in-out;
  413. -webkit-transition: all 0.5s ease-in-out;
  414. -ms-transition:all 0.5s ease-in-out;
  415. transition: all 0.5s ease-in-out;
  416. }
  417. .menu-links > span:hover
  418. {
  419. letter-spacing:2px;
  420. }
  421. /* SUB LINKS*/
  422. .links-descr
  423. {
  424. height:250px;
  425. width:100%;
  426. overflow:scroll;
  427. display:block;
  428. color:{color:Sidebar Text};
  429. }
  430. .links-descr::-webkit-scrollbar { width: 4px; height: 0px;}
  431. .links-descr::-webkit-scrollbar-track
  432. {
  433. background:transparent;
  434. }
  435. .links-descr::-webkit-scrollbar-thumb
  436. {
  437. background-color:{color:Link};
  438. }
  439. .linka a
  440. {
  441. color:{color:Link};
  442. }
  443. .linka a:hover
  444. {
  445. color:{color:Link Hover};
  446. }
  447. /* ASKBOX */
  448. .askbox
  449. {
  450. width:99%;
  451. position:relative;
  452. display:block;
  453. overflow:hidden;
  454. }
  455. .askbox iframe
  456. {
  457. width:100%;
  458. background:transparent;
  459. overflow:hidden;
  460. }
  461. /* LINKS*/
  462. .links
  463. {
  464. width:100%;
  465. display:block;
  466. position:relative;
  467. }
  468. .links a
  469. {
  470. display:inline-block;
  471. position:relative;
  472. background-color:{color:Link};
  473. padding:5px;
  474. color:{color:Sidebar};
  475. margin:5px;
  476. width:100px;
  477. -moz-transition: all 0.5s ease-in-out;
  478. -o-transition: all 0.5s ease-in-out;
  479. -webkit-transition: all 0.5s ease-in-out;
  480. -ms-transition:all 0.5s ease-in-out;
  481. transition: all 0.5s ease-in-out;
  482. }
  483. .links a:hover
  484. {
  485. background-color:{color:Link Hover};
  486. }
  487. /* BLOGROLL*/
  488. .blogroll
  489. {
  490. width:92%;
  491. padding:4%;
  492. display:block;
  493. position:relative;
  494. }
  495. .blogroll img
  496. {
  497. display:inline-block;
  498. margin:4px;
  499. border:4px solid {color:Link};
  500. -moz-transition: all 0.5s ease-in-out;
  501. -o-transition: all 0.5s ease-in-out;
  502. -webkit-transition: all 0.5s ease-in-out;
  503. -ms-transition:all 0.5s ease-in-out;
  504. transition: all 0.5s ease-in-out;
  505. }
  506. .blogroll img:hover
  507. {
  508. border:4px solid {color:Link Hover};
  509. }
  510. /* SEARCH*/
  511.  
  512. #searchtext
  513. {
  514. background:
  515. url('http://static.tumblr.com/vdyrvd5/5S2nbovsm/search_gray_.png')
  516. {color:Sidebar Text} left center no-repeat;
  517. background-size: 12px 12px;
  518. letter-spacing:1px;
  519. font-size:12px;
  520. border: 0px;
  521. margin-top: 0px;
  522. width:150px;
  523. color: {color:Sidebar};
  524. padding:4px 4px 4px 17px;
  525. }
  526. /* DESCRIPTION*/
  527. .descript
  528. {
  529. width:200px;
  530. max-height:150px;
  531. overflow:hidden;
  532. padding:15px;
  533. color:{color:Sidebar Text};
  534. position:fixed;
  535. top:60%;
  536. left:70px;
  537. opacity:0.7;
  538. text-align:center;
  539. background-color:{color:Sidebar};
  540. z-index:5;
  541. -moz-transition: all 0.3s ease-in-out;
  542. -o-transition: all 0.3s ease-in-out;
  543. -webkit-transition: all 0.3s ease-in-out;
  544. -ms-transition:all 0.3s ease-in-out;
  545. transition: all 0.3s ease-in-out;
  546. }
  547. .descript:hover
  548. {
  549. opacity:1.0;
  550. }
  551. .descript a
  552. {
  553. color:{color:Link};
  554. }
  555. .descript a:hover
  556. {
  557. color:{color:Link Hover};
  558. }
  559. /* PAGINATION */
  560. .pages
  561. {
  562. width:18px;
  563. position:fixed;
  564. display:block;
  565. left:350px;
  566. bottom:45px;
  567. font-size:14px;
  568. color:{color:Text};
  569. z-index:20;
  570. }
  571. .pages a
  572. {
  573. padding:0 2px 0 2px;
  574. font-size:14px;
  575. display:block;
  576. font-weight:bold;
  577. text-align:center;
  578. text-decoration:none;
  579. color:{color:Link};
  580. }
  581. .pages a:hover { color:{color:Link Hover};}
  582.  
  583. /* POSTS */
  584.  
  585. #postcol
  586. {
  587. width:540px;
  588. position:absolute;
  589. top:100px;
  590. {block:If400pxPosts}left:640px;{block:If400pxPosts}
  591. {block:IfNot400pxPosts}left:580px;{block:IfNot400pxPosts}
  592. z-index:20;
  593. }
  594. .posts
  595. {
  596. padding:20px;
  597. {block:IfNot400pxPosts}width: 500px;{/block:IfNot400pxPosts}
  598. {block:If400pxPosts}width: 400px;{/block:If400pxPosts}
  599. margin-bottom:80px;
  600. background-color:{color:Post bg};
  601. text-align: justify;
  602. position:relative;
  603. color:{color:Text};
  604. word-wrap:break-word;
  605. }
  606.  
  607.  
  608.  
  609. .topic
  610. {
  611. font-size:16px;
  612. text-align:center;
  613. color:{color:Text};
  614. line-height:99%;
  615. font-family: 'Ubuntu', sans-serif;
  616. width: 90%;
  617. text-align:center;
  618. color:{color:Text};
  619. margin:0 auto 10px auto;
  620. padding:10px;
  621. border:1px solid rgba(192, 192, 192, 0.4);
  622. }
  623. .topic a:hover
  624. {
  625. color:{color:Link Hover};
  626. }
  627. .topic a
  628. {
  629. text-transform: uppercase;
  630. text-align: center;
  631. display: block;
  632. font-size:16px;
  633. color:{color:Link};
  634. }
  635.  
  636. .posts img {display:block; height: auto;}
  637.  
  638. .posts ul
  639. {
  640. list-style: disc;
  641. font-size:12px;
  642. }
  643. .posts ol
  644. {
  645. list-style: decimal;
  646. font-size:12px;
  647. }
  648.  
  649. .posts blockquote
  650. {
  651. background: transparent;
  652. margin:2px 0px 0px 5px;
  653. padding: 0px 2px 0px 6px;
  654. border-left:2px solid rgba(192,192,192,0.3);
  655. }
  656. .posts h1,h2,h3,h4,h5,h6
  657. {
  658. width:99%;
  659. border:1px solid rgba(192, 192, 192, 0.4);
  660. padding:3px;
  661. text-align:center;
  662. }
  663. .posts .capt
  664. {
  665. margin:0;
  666. display: block;
  667. {block:IfNotShowCaption}display:none;{/block:IfNotShowCaption}
  668. }
  669. .posts .capt a
  670. {
  671. color:{color:Link};
  672. }
  673. .posts .capt a:hover
  674. {
  675. color:{color:Link Hover};
  676. }
  677.  
  678. /* ANSWERS */
  679.  
  680. .asker
  681. {
  682. color: {color:Text};
  683. font-size:12px;
  684. font-weight:bold;
  685. text-transform:lowercase;
  686. position:relative;
  687. margin:0 auto;
  688.  
  689. }
  690. .asker a
  691. {
  692. color: {color:Text};
  693. font-size:12px;
  694. }
  695.  
  696. .question
  697. {
  698. width: 90%;
  699. text-align:center;
  700. color:{color:Text};
  701. margin:0 auto 10px auto;
  702. padding:10px;
  703. border:1px solid rgba(192, 192, 192, 0.4);
  704. font-size:13px;
  705. }
  706. /*QUOTE */
  707.  
  708. .quote {width: 90%; margin: auto; font-family: 'Ubuntu', sans-serif;}
  709.  
  710. .quotetext_short {font-size: 18px;}
  711. .quotetext_medium {font-size: 14px;}
  712. .quotetext_long {font-size: 11px;}
  713.  
  714. .source {text-align: right; margin-top:5px;}
  715. .source a {color:{color:Link};}
  716. .source a:hover{color:{color:Link Hover};}
  717.  
  718. /* CHAT */
  719.  
  720. .convo li
  721. {
  722. list-style: none;
  723. width:105%;
  724. font-size:12px;
  725. border-bottom:solid 2px rgba(192, 192, 192, 0.4);
  726. margin:5px 0 5px -30px ;
  727. }
  728. .convo .label
  729. {
  730. color:{color:Text};
  731. font-weight:bold;
  732. }
  733.  
  734. /* AUDIO */
  735.  
  736. #audio
  737. {
  738. background:{color:Post bg};
  739. width:100%;
  740. {block:IfNot400pxPosts}height:75px;{/block:IfNot400pxPosts}
  741. {block:If400pxPosts}height:62px;{/block:If400pxPosts}
  742. margin-bottom:10px;
  743. position:relative;
  744. border:1px solid rgba(192, 192, 192, 0.4);
  745. }
  746.  
  747. .playbutton
  748. {
  749. width: 27px;
  750. height: 32px;
  751. overflow: hidden;
  752. position: absolute;
  753. {block:If400pxPosts}margin:28% 0 0 28%;{/block:If400pxPosts}
  754. {block:IfNot400pxPosts}margin:33% 0 0 33%;{/block:IfNot400pxPosts}
  755. z-index: 100;
  756. opacity:0.5;
  757. }
  758. .posts:hover .playbutton
  759. {
  760. opacity:1.0;
  761. }
  762. .playbox:hover {opacity:1.0;}
  763. .audiocover
  764. {
  765. width:15%;
  766. position:relative;
  767. }
  768. .cover
  769. {
  770. padding:10%;
  771. width:80%;
  772. height:80%;
  773. position:absolute;
  774. }
  775. .musicinfo
  776. {
  777. width:85%;
  778. margin-left:15%;
  779. color:{color:Text};
  780. font-size:12px;
  781. text-align:center;
  782. word-wrap:break-word;
  783. }
  784.  
  785. /* POSTINFO */
  786.  
  787. .postinfo
  788. {
  789. font-size: 10px;
  790. position: absolute;
  791. left:102%;
  792. top:3px;
  793. text-align:center;
  794. background:transparent;
  795. width: 18px;
  796. height:18px;
  797. overflow:hidden;
  798. z-index:2;
  799. color:{color:Post Info};
  800. -moz-transition: all 0.5s ease-in-out;
  801. -o-transition: all 0.5s ease-in-out;
  802. -webkit-transition: all 0.5s ease-in-out;
  803. -ms-transition:all 0.5s ease-in-out;
  804. transition: all 0.5s ease-in-out;
  805. }
  806.  
  807. .postinfo a
  808. {
  809. display: inline-block;
  810. text-align: center;
  811. margin: 1px;
  812. opacity:0.0;
  813. color:transparent;
  814. text-decoration:none;
  815. -moz-transition: all 0.5s ease-in-out;
  816. -o-transition: all 0.5s ease-in-out;
  817. -webkit-transition: all 0.5s ease-in-out;
  818. -ms-transition:all 0.5s ease-in-out;
  819. transition: all 0.5s ease-in-out;
  820. }
  821. .postinfo:hover
  822. {
  823. width: 52px;
  824. height:70px;
  825. background-color:{color:Post bg};
  826. }
  827.  
  828. .postinfo img
  829. {
  830. width: 14px;
  831. height: 14px;
  832. padding:2px;
  833. background-color:{color:Post bg};
  834. -moz-transition: all 0.5s ease-in-out;
  835. -o-transition: all 0.5s ease-in-out;
  836. -webkit-transition: all 0.5s ease-in-out;
  837. -ms-transition:all 0.5s ease-in-out;
  838. transition: all 0.5s ease-in-out;
  839. }
  840.  
  841. .postinfo:hover a
  842. {
  843. position:relative;
  844. color:{color:Post Info};
  845. opacity:1.0;
  846. }
  847. .postinfo:hover a:hover
  848. {
  849. color:{color:Post Info Hover};
  850. }
  851. /* TAGS */
  852. .tagbox
  853. {
  854. position: absolute;
  855. left:102%;
  856. top:27px;
  857. display: block;
  858. width: 18px;
  859. height: 18px;
  860. cursor:pointer;
  861. z-index:1;
  862. }
  863. .tagbox img
  864. {
  865. width: 14px;
  866. height: 14px;
  867. padding:2px;
  868. background-color:{color:Post bg};
  869. transform:rotateY(180deg);
  870. -webkit-transform:rotateY(180deg);
  871. -moz-transition: all 0.5s ease-in-out;
  872. -o-transition: all 0.5s ease-in-out;
  873. -webkit-transition: all 0.5s ease-in-out;
  874. -ms-transition:all 0.5s ease-in-out;
  875. transition: all 0.5s ease-in-out;
  876. }
  877. .tagbox img:hover
  878. {
  879. transform:scale(1.4) rotateY(180deg);
  880. -webkit-transform::scale(1.4) rotateY(180deg);
  881. opacity:0.0;
  882. }
  883. .tagline
  884. {
  885. position:relative;
  886. width:18px;
  887. height:18px;
  888. top:-18px;
  889. padding:7px;
  890. background-color:{color:Post bg};
  891. text-align:left;
  892. opacity:0.0;
  893. overflow:scroll;
  894. -moz-transition: all 0.5s ease-in-out;
  895. -o-transition: all 0.5s ease-in-out;
  896. -webkit-transition: all 0.5s ease-in-out;
  897. -ms-transition:all 0.5s ease-in-out;
  898. transition: all 0.5s ease-in-out;
  899. }
  900. .tags
  901. {
  902. position:relative;
  903. width:100%;
  904. padding:2px;
  905. display:inline;
  906. }
  907. .tags a
  908. {
  909. color:{color:Post Info};
  910. font-size:10px;
  911. display:inline;
  912. text-transform:lowercase;
  913. }
  914. .tags a:hover
  915. {
  916. color:{color:Post Info Hover};
  917. }
  918. .tagbox:hover .tagline
  919. {
  920. opacity:1.0;
  921. width:100px;
  922. height:100px;
  923. }
  924. .tagline::-webkit-scrollbar { width: 4px; height: 0px;}
  925. .tagline::-webkit-scrollbar-track
  926. {
  927. background:transparent;
  928. }
  929. .tagline::-webkit-scrollbar-thumb
  930. {
  931. background-color:{color:Link};
  932. }
  933. /* HIGH RESOLUTION */
  934. .posts .highres
  935. {
  936. position: absolute;
  937. top: 25px;
  938. left: 25px;
  939. display: none;
  940. }
  941. .posts .highres img
  942. {
  943. height:20px;
  944. width:20px;
  945. }
  946. .posts:hover a.highres
  947. {
  948. display: block;
  949. background-color:{color:Link};
  950. }
  951. /*POST PAGINATION */
  952. .postpages
  953. {
  954. position:absolute;
  955. width:100%;
  956. top:102%;
  957. left:0;
  958. }
  959. .postpages a
  960. {
  961. display:inline-block;
  962. color:{color:Text};
  963. padding:0 2% 0 2%;
  964. background-color:{color:Post bg};
  965. }
  966. .postpages a:hover
  967. {
  968. color:{color:Link};
  969. }
  970. /* NOTES */
  971. #notes
  972. {
  973. background-color:{color:Post bg};
  974. position:absolute;
  975. top:110%;
  976. left:0;
  977. padding:6%;
  978. width:88%;
  979. font-size:9px;
  980. color:{color:Text};
  981. margin-bottom:10px;
  982. word-wrap:break-word;
  983. text-align:left;
  984. }
  985. #notes a
  986. {
  987. color:{color:Link};
  988. font-size:12px;
  989. }
  990. #notes a:hover
  991. {
  992. color:{color:Link Hover};
  993. }
  994. #notes img
  995. {
  996. width:12px;
  997. position:relative;
  998. }
  999. #notes img:hover
  1000. {
  1001. opacity:0.6;
  1002. }
  1003. ol.notes li
  1004. {
  1005. list-style:none;
  1006. width:100%;
  1007. display:inline-block;
  1008. margin:7px 0 7px -30px;
  1009. font-size:12px;
  1010. }
  1011. ol.notes li img
  1012. {
  1013. list-style:none;
  1014. display:inline-block;
  1015. padding:0 3px 0 0;
  1016. }
  1017. #notes::-webkit-scrollbar { width: 4px; height: 0px;}
  1018. #notes::-webkit-scrollbar-track
  1019. {
  1020. background:transparent;
  1021. }
  1022. #notes::-webkit-scrollbar-thumb
  1023. {
  1024. background-color:{color:Link};
  1025. }
  1026.  
  1027. </style>
  1028. </head>
  1029.  
  1030. <body>
  1031.  
  1032. <div id="sidebar"></div>
  1033. <div class="sidecolor"></div>
  1034. {block:IfShowTitle}
  1035. <div class="title"><a href="/">{Title}</a></div>
  1036. {/block:IfShowTitle}
  1037. {block:Description}
  1038. <div class="descript">{Description}</div>
  1039. {/block:Description}
  1040.  
  1041. <div id="nav">
  1042. <a href="/">
  1043. <img src="http://static.tumblr.com/vdyrvd5/mxinbna0p/home_gray_.png">
  1044. <span>HOME</span>
  1045. </a>
  1046. <a href="javascript:;">
  1047. <img src="http://static.tumblr.com/vdyrvd5/sVHnbna2l/menu-2_gray_.png"
  1048. class="click-menu"><span>MENU</span></a>
  1049. <a href="http://lilacthemes.tumblr.com/" target="_blank">
  1050. <img src="http://static.tumblr.com/vdyrvd5/dOQnbna3q/cross_gray_.png">
  1051. <span>THEME</span>
  1052. </a>
  1053. </div>
  1054. <!-- PAGINATION-->
  1055. <div class="pages">
  1056. {block:Pagination}
  1057. {block:PreviousPage}
  1058. <a href="{PreviousPage}" title="previous page"><<</a>
  1059. {/block:PreviousPage}
  1060. {block:NextPage}
  1061. <a href="{NextPage}" title="next page">>></a>
  1062. {/block:NextPage}
  1063. {/block:Pagination}
  1064. </div>
  1065.  
  1066.  
  1067.  
  1068. <!-- SIDE MENU BAR-->
  1069. <div class="closed-menu menu"></div>
  1070. <div class="menu-links menu closed-menu">
  1071.  
  1072. {block:IfShowAboutMe}
  1073. <span class="click-links">ABOUT ME</span>
  1074. <div class="links-descr linka">{text:About Me}</div>
  1075. {/block:IfShowAboutMe}
  1076.  
  1077. {block:IfShowFAQ}
  1078. <span class="click-links">FAQ</span>
  1079. <div class="links-descr linka">{text:FAQ}</div>
  1080. {/block:IfShowFAQ}
  1081.  
  1082. <span class="click-links">ASK</span>
  1083. <iframe class="links-descr askbox" frameborder="0"
  1084. src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" id="ask_form">
  1085. </iframe>
  1086.  
  1087. <span class="click-links">LINKS</span>
  1088. <div class="links-descr links">
  1089. {block:IfShowLink1}
  1090. <a href="{text:Link 1}">{text:Link 1 Title}</a>
  1091. {/block:IfShowLink1}
  1092. {block:IfNotShowLink1}{/block:IfNotShowLink1}
  1093.  
  1094. {block:IfShowLink2}
  1095. <a href="{text:Link 2}">{text:Link 2 Title}</a>
  1096. {/block:IfShowLink2}
  1097. {block:IfNotShowLink2}{/block:IfNotShowLink2}
  1098.  
  1099. {block:IfShowLink3}
  1100. <a href="{text:Link 3}">{text:Link 3 Title}</a>
  1101. {/block:IfShowLink3}
  1102. {block:IfNotShowLink3}{/block:IfNotShowLink3}
  1103.  
  1104. {block:IfShowLink4}
  1105. <a href="{text:Link 4}">{text:Link 4 Title}</a>
  1106. {/block:IfShowLink4}
  1107. {block:IfNotShowLink4}{/block:IfNotShowLink4}
  1108.  
  1109. {block:IfShowLink5}
  1110. <a href="{text:Link 5}">{text:Link 5 Title}</a>
  1111. {/block:IfShowLink5}
  1112. {block:IfNotShowLink5}{/block:IfNotShowLink5}
  1113.  
  1114. {block:IfShowLink6}
  1115. <a href="{text:Link 6}">{text:Link 6 Title}</a>
  1116. {/block:IfShowLink6}
  1117. {block:IfNotShowLink6}{/block:IfNotShowLink6}
  1118.  
  1119. {block:IfShowLink7}
  1120. <a href="{text:Link 7}">{text:Link 7 Title}</a>
  1121. {/block:IfShowLink7}
  1122. {block:IfNotShowLink7}{/block:IfNotShowLink7}
  1123.  
  1124. {block:IfShowLink8}
  1125. <a href="{text:Link 8}">{text:Link 8 Title}</a>
  1126. {/block:IfShowLink8}
  1127. {block:IfNotShowLink8}{/block:IfNotShowLink8}
  1128.  
  1129. {block:IfShowLink9}
  1130. <a href="{text:Link 9}">{text:Link 9 Title}</a>
  1131. {/block:IfShowLink9}
  1132. {block:IfNotShowLink9}{/block:IfNotShowLink9}
  1133.  
  1134. {block:IfShowLink10}
  1135. <a href="{text:Link 10}">{text:Link 10 Title}</a>
  1136. {/block:IfShowLink10}
  1137. {block:IfNotShowLink10}{/block:IfNotShowLink10}
  1138. </div>
  1139.  
  1140. {block:IfShowBlogroll}
  1141. <span class="click-links">BLOGROLL</span>
  1142. <div class="links-descr blogroll">
  1143. {block:Following}{block:Followed}
  1144. <a href="{FollowedURL}" target="_blank"
  1145. title="{FollowedName}"><img src="{FollowedPortraitURL-40}"/>
  1146. </a>
  1147. {/block:Followed}{/block:Following}
  1148. </div>
  1149. {/block:IfShowBlogroll}
  1150.  
  1151. {block:IfShowSearchBox}
  1152. <form action="/search" method="get">
  1153. <input type="text" name="q" value="{SearchQuery}" id="searchtext"/>
  1154. </form>
  1155. {/block:IfShowSearchBox}
  1156. </div>
  1157.  
  1158. <!-- POSTS -->
  1159.  
  1160. <div id="postcol">
  1161.  
  1162. {block:Posts}
  1163. <div class="posts">
  1164.  
  1165. {block:ContentSource}
  1166. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1167. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1168. {/block:SourceLogo}
  1169. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1170. {/block:ContentSource}
  1171.  
  1172.  
  1173. {block:Text}
  1174. <div class="postinfo">
  1175. <img
  1176. src="http://static.tumblr.com/vdyrvd5/Uvjnbn5k1/compose-4_gray2_.png"/>
  1177. </div>
  1178. {block:Title}<div class="topic">{Title}</div>{/block:Title}
  1179. <div class="capt">{Body}</div>
  1180. {/block:Text}
  1181.  
  1182.  
  1183. {block:Answer}
  1184. <div class="postinfo">
  1185. <img src="http://static.tumblr.com/vdyrvd5/Fa7nbnftr/envelope_gray_.png"/>
  1186. </div>
  1187. <div class="question">
  1188. <span class="asker">{Asker}:</span><br>
  1189. {Question}
  1190. </div>
  1191. <div class="capt">{Answer}</div>
  1192. {/block:Answer}
  1193.  
  1194.  
  1195. {block:Quote}
  1196. <div class="postinfo">
  1197. <img src="http://static.tumblr.com/vdyrvd5/quMnbng67/quill-2_gray_.png"/>
  1198. </div>
  1199. <div class="quote">
  1200. <div class="quotetext_{Length}">❝{Quote}❞</div>
  1201. {block:Source}
  1202. <div class="source">&#8212;{Source}</div>
  1203. {/block:Source}
  1204. </div>
  1205. {/block:Quote}
  1206.  
  1207.  
  1208. {block:Link}
  1209. <div class="postinfo">
  1210. <img src="http://static.tumblr.com/vdyrvd5/krmnbnc5m/link_gray_.png"/>
  1211. </div>
  1212. <div class="topic"><a href="{URL}">{Name}</a></div>
  1213. {block:Description}<div class="capt">{Description}</div>{/block:Description}
  1214. {/block:Link}
  1215.  
  1216.  
  1217. {block:Chat}
  1218. <div class="postinfo">
  1219. <img src="http://static.tumblr.com/vdyrvd5/4kWnbnfz7/speech_gray_.png"/>
  1220. </div>
  1221. {block:Title}<div class="topic">{Title}</div>{/block:Title}
  1222. <ul class="convo">
  1223. {block:Lines}
  1224. <li class="line_{Alt}">
  1225. {block:Label}<span class="label">{Label}</span>{/block:Label}
  1226. {Line}</li>{/block:Lines}</ul>
  1227. {/block:Chat}
  1228.  
  1229.  
  1230. {block:Photo}
  1231. <div class="postinfo">
  1232. <img src="http://static.tumblr.com/vdyrvd5/7uPnbnfle/camera_gray_.png"/>
  1233. </div>
  1234. {LinkOpenTag}
  1235. {block:IfNot400pxPosts}
  1236. <img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>
  1237. {/block:IfNot400pxPosts}
  1238. {block:If400pxPosts}
  1239. <img src="{PhotoURL-400}" alt="{PhotoAlt}" border="0"/>
  1240. {/block:If400pxPosts}
  1241. {LinkCloseTag}
  1242. {block:HighRes}
  1243. <a href="{PhotoURL-HighRes}"
  1244. class="highres" target="_blank" title="View in High Resolution">
  1245. <img src="http://static.tumblr.com/vdyrvd5/cTwn94ekm/plus1.png">
  1246. </a>
  1247. {/block:HighRes}
  1248. {block:Caption}<div class="capt">{Caption}</div>{/block:Caption}
  1249. {/block:Photo}
  1250.  
  1251.  
  1252. {block:Photoset}
  1253. <div class="postinfo">
  1254. <img src="http://static.tumblr.com/vdyrvd5/rqlnbngcb/camera-2_gray_.png"/>
  1255. </div>
  1256. {block:IfNot400pxPosts}
  1257. {Photoset-500}
  1258. {/block:IfNot400pxPosts}
  1259. {block:If400pxPosts}
  1260. {Photoset-400}
  1261. {/block:If400pxPosts}
  1262. {block:Caption}<div class="capt">{Caption}</div>{/block:Caption}
  1263. {/block:Photoset}
  1264.  
  1265.  
  1266. {block:Audio}
  1267. <div class="postinfo">
  1268. <img
  1269. src="http://static.tumblr.com/vdyrvd5/E9qnbnfn6/audio-high_gray_.png"/>
  1270. </div>
  1271. <div id="audio">
  1272. <div class="audiocover">
  1273. <div class="playbutton">
  1274. {block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}
  1275. </div>
  1276. <div class="cover">
  1277. <img src="http://static.tumblr.com/vdyrvd5/KDmn7qhum/download.jpg"/>
  1278. </div>
  1279. {block:AlbumArt}
  1280. <div class="cover">
  1281. <img src="{AlbumArtURL}">
  1282. </div>
  1283. {/block:AlbumArt}
  1284. </div>
  1285. <div class="musicinfo">
  1286. {block:TrackName} <span style="font-size:13px">{TrackName}</span>
  1287. {/block:TrackName}
  1288. {block:Artist}by
  1289. <span style="font-size:13px">{Artist}</span>
  1290. {/block:Artist}<br>
  1291. {block:Album}
  1292. <span style="font-size:11px">{Album}</span>
  1293. {/block:Album}<br>
  1294. {block:PlayCount}
  1295. <span style="font-size:11px">Played {FormattedPlayCount} times</span>
  1296. {/block:PlayCount}
  1297. </div></div>
  1298. {block:Caption}<div class="capt">{Caption}</div>{/block:Caption}
  1299. {/block:Audio}
  1300.  
  1301.  
  1302. {block:Video}
  1303. <div class="postinfo">
  1304. <img src="http://static.tumblr.com/vdyrvd5/izYnbng8q/video_gray_.png">
  1305. </div>
  1306. <div class="video">
  1307. {block:IfNot400pxPosts}
  1308. {Video-500}
  1309. {/block:IfNot400pxPosts}
  1310. {block:If400pxPosts}
  1311. {Video-400}
  1312. {/block:If400pxPosts}
  1313. </div>
  1314. {block:Caption}<div class="capt">{Caption}</div>{/block:Caption}
  1315. {/block:Video}
  1316.  
  1317. <!-- POSTINFO -->
  1318. <div class="postinfo">
  1319. <span style="position:relative;">
  1320. {block:Notecount}
  1321. <a href="{Permalink}" title="notes">{NoteCount}</a>
  1322. {/block:NoteCount}
  1323.  
  1324. {block:Date}
  1325. <a href="{Permalink}"
  1326. title="{TimeAgo}">{DayOfMonth} {ShortMonth} {ShortYear}</a>
  1327. {/block:Date}
  1328.  
  1329. {block:RebloggedFrom}
  1330. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1331. <a href="{ReblogRootURL}" title="{ReblogRootName}">src</a>
  1332. {/block:RebloggedFrom}
  1333.  
  1334. <a href="{ReblogURL}" target="_blank" title="reblog">reblog</a>
  1335. </span>
  1336. </div>
  1337.  
  1338.  
  1339.  
  1340.  
  1341. <!-- TAGS -->
  1342. <div class="tagbox">
  1343. <img src="http://static.tumblr.com/vdyrvd5/tehnbn5p3/tag_gray_.png"/>
  1344. <div class="tagline">
  1345. {block:Tags}
  1346. <div class="tags"><a href="{TagURL}">#{Tag}</a></div>
  1347. {/block:Tags}
  1348. </div></div>
  1349.  
  1350. {block:PostNotes}
  1351. <div id="notes">{PostNotes}</div>
  1352. {/block:PostNotes}
  1353.  
  1354. <div class="postpages">
  1355. {block:PermalinkPagination}
  1356. {block:PreviousPost}
  1357. <a href="{PreviousPost}"><< Previous Post</a>
  1358. {/block:PreviousPost}
  1359.  
  1360. {block:NextPost}
  1361. <a href="{NextPost}" style="position:absolute; right:0;">Next Post >></a>
  1362. {/block:NextPost}
  1363. {/block:PermalinkPagination}
  1364. </div>
  1365. </div>
  1366.  
  1367. {/block:Posts}
  1368. </div>
  1369.  
  1370. </div>
  1371.  
  1372. </body>
  1373. </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!