API tools faq
paste
Advertisement
lilacthemes

Theme 07

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