API tools faq
paste
booksinvolved

theme #13 snow, glass, apples

booksinvolved
Dec 25th, 2015
95
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.51 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4.  
  5. <head>
  6.  
  7. <!--- theme by jasnahdavar
  8. ----- DO NOT steal/redistribute/remove credit
  9. ----- ASK ME if you want to use this as a base code i promise i'm nice
  10. ----- try to keep the title short and the description to 4-5 lines
  11. ----- feel free to experiment with colours but i'd recommend greys and pastels
  12. ----- colours:
  13. ------------- title hover: colour of title on hover, post info, link on hover ------------- and pagination
  14. ----- that's it? idk what else to put here but have fun! hope you like it :)
  15.  
  16. --->
  17.  
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  22.  
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
  24. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js" type="text/javascript"></script>
  25. <script type="text/javascript">// <![CDATA[
  26. (function($){
  27.  
  28. $(document).ready(function(){
  29.  
  30. $("a[title]").style_my_tooltips({
  31.  
  32. tip_follows_cursor:true,
  33.  
  34. tip_delay_time:30,
  35.  
  36. tip_fade_speed:300,
  37.  
  38. attribute:"title"
  39.  
  40. });
  41.  
  42. });
  43.  
  44. })(jQuery);
  45. // ]]></script>
  46.  
  47.  
  48.  
  49. <meta name="image:sidebar" content="">
  50.  
  51. <meta name="if:show navlink 1" content="1">
  52. <meta name="if:show navlink 2" content="1">
  53. <meta name="if:show navlink 3" content="1">
  54. <meta name="if:show navlink 4" content="1">
  55. <meta name="if:show navlink 5" content="1">
  56. <meta name="if:show navlink 6" content="1">
  57. <meta name="if:show navlink 7" content="1">
  58. <meta name="if:show navlink 8" content="1">
  59.  
  60.  
  61. <meta name="text:link 1" content="link">
  62. <meta name="text:link 1 url" content="url">
  63. <meta name="text:link 2" content="link">
  64. <meta name="text:link 2 url" content="url">
  65. <meta name="text:link 3" content="link">
  66. <meta name="text:link 3 url" content="url">
  67. <meta name="text:link 4" content="link">
  68. <meta name="text:link 4 url" content="url">
  69. <meta name="text:link 5" content="link">
  70. <meta name="text:link 5 url" content="url">
  71. <meta name="text:link 6" content="link">
  72. <meta name="text:link 6 url" content="url">
  73. <meta name="text:link 7" content="link">
  74. <meta name="text:link 7 url" content="url">
  75. <meta name="text:link 8" content="link">
  76. <meta name="text:link 8 url" content="url">
  77.  
  78. <meta name="color:background" content="#fff">
  79. <meta name="color:text" content="#6e6e6e">
  80. <meta name="color:text on hover" content="#000">
  81. <meta name="color:description bg" content="#6e6e6e">
  82. <meta name="color:navlink bg 1" content="#38a0c7">
  83. <meta name="color:navlink bg 2" content="#9c8ecc">
  84. <meta name="color:navlink bg 3" content="#f197bb">
  85. <meta name="color:link" content="#b42f68">
  86. <meta name="color:title hover" content="#ea6d59">
  87. <meta name="color:post bg" content="#eee">
  88. <meta name="color:chat bg 1" content="#cfcfcf">
  89. <meta name="color:chat bg 2" content="#999">
  90. <meta name="color:ask bg" content="#fff0b6">
  91.  
  92.  
  93.  
  94. <style type="text/css">
  95. ::-webkit-scrollbar-thumb:vertical { height:12px; border:2px solid {color:background}; background-color:#cfcfcf; }
  96. ::-webkit-scrollbar-thumb:horizontal { background-color:{color:background}; }
  97. ::-webkit-scrollbar { width:11px; height:7px; border:5px solid {color:background}; background-color:#cfcfcf; }
  98.  
  99. .notes {
  100. transition:0.6s;
  101. -webkit-transition:0.6s;
  102. -moz-transition:0.6s;
  103. -os-transition:0.6s;
  104.  
  105. }
  106.  
  107. .notes:hover {
  108. background:{color:post bg};
  109. }
  110.  
  111. #credit {
  112. position:fixed;
  113. right:10px;
  114. bottom:10px;
  115. z-index:10;
  116. }
  117.  
  118. #credit a {
  119. font-weight:bold;
  120. text-align:center;
  121. padding:5px;
  122. background:#fff;
  123. display:block;
  124. font-size:11px;
  125. font-family:cambria;
  126. color:#000;
  127. }
  128.  
  129. #credit a:hover {
  130. color:#eee;
  131. background:#000;
  132. text-decoration:none;
  133. }
  134.  
  135.  
  136.  
  137.  
  138. ol.notes {
  139. padding: 5px;
  140. margin: 25px 0px;
  141. list-style-type: none;
  142. border-bottom: solid 1px #ccc;
  143. text-align:center;
  144. text-transform:uppercase;
  145. font-size:9px;
  146. }
  147.  
  148. ol.notes li.note {
  149. padding: 5px;
  150. font-weight: normal;
  151. text-align:center;
  152.  
  153.  
  154. }
  155.  
  156. ol.notes li.note img.avatar {
  157. vertical-align: -4px;
  158. margin-right: 10px;
  159. width: 16px;
  160. height: 16px;
  161. }
  162.  
  163. ol.notes li.note span.action {
  164. font-weight: normal;
  165. text-align:center;
  166.  
  167. }
  168.  
  169. ol.notes li.note .answer_content {
  170. font-weight: normal;
  171. text-align:left;
  172. text-transform:none;
  173.  
  174. }
  175.  
  176. ol.notes li.note blockquote {
  177. border-color: #eee;
  178. padding: 4px 5px;
  179. margin: 10px 0px 0px 15px;
  180. }
  181.  
  182. ol.notes li.note blockquote a {
  183. text-decoration: none;
  184. }
  185.  
  186. blockquote {
  187. padding:5px;
  188. border-left:2px solid {color:text};
  189.  
  190. }
  191.  
  192. blockquote blockquote {
  193. padding:5px;
  194. border-left:2px solid {color:text};
  195.  
  196. }
  197.  
  198.  
  199.  
  200.  
  201. /*----------------- TOOLTIP -----------------*/
  202. #s-m-t-tooltip{
  203. font-size:10px;
  204. position:absolute;
  205. margin-top: 15px;
  206. margin-left:15px;
  207. z-index:9999;
  208. text-align:Center;
  209. background:transparent;
  210. color:{color:text on hover};
  211. padding:2px 3px 2px 3px;
  212. -webkit-transition:all 0.3s;
  213. -moz-transition:all 0.3s;
  214. -ms-transition:all 0.3s;
  215. -o-transition:all 0.3s;
  216. transition:all 0.3s;
  217. }
  218.  
  219.  
  220.  
  221.  
  222.  
  223. body {
  224. background:{color:background};
  225. margin:0px;
  226. color:{color:text on hover};
  227. font-family:cambria;
  228. font-size:11px;
  229. line-height:115%;
  230. font-style: none;
  231. overflow-x:hidden;
  232. }
  233.  
  234.  
  235. img {
  236. max-width:100%;
  237. }
  238.  
  239. a:link, a:visited, a:active {
  240. text-decoration: none;
  241. color:{color:link};
  242. font-weight: normal;
  243. -webkit-transition: .6s;
  244. -moz-transition: .6s;
  245. transition: .6s;
  246. }
  247.  
  248. .post:hover a {
  249. color:{color:title hover};
  250. }
  251.  
  252. a:hover {
  253. text-decoration: underline;
  254. font-weight: normal;
  255. -webkit-transition: .6s;
  256. -moz-transition: .6s;
  257. transition: .6s;
  258. }
  259.  
  260.  
  261.  
  262. /* ---- SIDEBAR ------ */
  263.  
  264. #sidebar {
  265. position:fixed;
  266. left:25px;
  267. width:200px;
  268. top:50%;
  269. margin-top:-100px;
  270. transition:0.6s;
  271. -webkit-transition:0.6s;
  272. -moz-transition:0.6s;
  273. -os-transition:0.6s;
  274.  
  275. }
  276.  
  277. .sbimg {
  278. text-align:Center;
  279. }
  280.  
  281. .sbimg img {
  282. width:200px;
  283. }
  284.  
  285. .desc {
  286. background:{color:description bg};
  287. padding:10px;
  288. margin-top:-2px;
  289. transition:0.6s;
  290. -webkit-transition:0.6s;
  291. -moz-transition:0.6s;
  292. -os-transition:0.6s;
  293.  
  294.  
  295. }
  296.  
  297. #sidebar:hover .desc {
  298. background:{color:post bg};
  299. }
  300.  
  301. .navl {
  302. background:{color:post bg};
  303. padding:10px;
  304. transition:0.6s;
  305. -webkit-transition:0.6s;
  306. -moz-transition:0.6s;
  307. -os-transition:0.6s;
  308. margin-top:-20px;
  309. opacity:0;
  310.  
  311. }
  312.  
  313. #sidebar:hover .navl {
  314. margin-top:10px;
  315. opacity:1;
  316. }
  317.  
  318. .navl a {
  319. padding:5px;
  320. font-size:10px;
  321. display:inline-block;
  322. color:{color:text};
  323. margin:2px;
  324. }
  325.  
  326. .navl a:hover {
  327. color:{color:text on hover};
  328. text-decoration:none;
  329. }
  330.  
  331. .navl a:hover:nth-of-type(3n) {
  332. background:{color:navlink bg 1};
  333. }
  334. .navl a:hover:nth-of-type(3n+1) {
  335. background:{color:navlink bg 2};
  336. }
  337. .navl a:hover:nth-of-type(3n+2) {
  338. background:{color:navlink bg 3};
  339. }
  340.  
  341.  
  342. /* title */
  343. @font-face { font-family: "lobster"; src: url('http://themes.googleusercontent.com/static/fonts/lobster/v3/MWVf-Rwh4GLQVBEwbyI61Q.woff'); }
  344.  
  345. #title {
  346. position:fixed;
  347. width:100%;
  348. padding-bottom:20px;
  349. padding-top:10px;
  350. font-size:40px;
  351. letter-spacing:1px;
  352. font-family:"lobster";
  353. text-align:center;
  354. bottom:0px;
  355. background:{color:background};
  356. z-index:2;
  357. }
  358.  
  359. #title a {
  360. color:{color:text};
  361. transition:0.6s;
  362. -webkit-transition:0.6s;
  363. -moz-transition:0.6s;
  364. -os-transition:0.6s;
  365. }
  366.  
  367. #title a:hover {
  368. color:{color:title hover};
  369. text-decoration:none;
  370. }
  371.  
  372.  
  373. /* PAGINATION */
  374.  
  375. #pagination {
  376. position:fixed;
  377. left:850px;
  378. top:50%;
  379. margin-top:-6px;
  380. width:100px;
  381. margin-left:20px;
  382. }
  383.  
  384. .nextp a {
  385. border-bottom:1px solid {color:text};
  386. color:{color:text};
  387. font-style:italic;
  388. text-align:right;
  389. width:100px;
  390. padding:1px;
  391. display:block;
  392.  
  393. }
  394.  
  395. .prevp a {
  396. border-top:1px solid {color:text};
  397. text-align:left;
  398. padding:1px;
  399. color:{color:text};
  400. font-style:italic;
  401. width:100px;
  402. display:block;
  403.  
  404. }
  405.  
  406. .nextp a:hover, .prevp a:hover {
  407. color:{color:title hover};
  408. text-decoration:none;
  409. }
  410.  
  411. /* ------ ENTRIES --------------------*/
  412.  
  413.  
  414. #entries {
  415. position:absolute;
  416. left:300px;
  417. top:50px;
  418. padding:10px;
  419. width:520px;
  420. padding-bottom:60px;
  421. }
  422.  
  423. .post {
  424. padding:20px;
  425. margin:20px 0px;
  426. width:500px;
  427. color:{color:text};
  428. transition:0.6s;
  429. -webkit-transition:0.6s;
  430. -moz-transition:0.6s;
  431. -os-transition:0.6s;
  432.  
  433. }
  434.  
  435. .post:hover {
  436. background:{color:post bg};
  437. color:{color:text on hover};
  438. }
  439.  
  440. /* TEXT */
  441.  
  442. h1 {
  443. color:{color:text};
  444. font-family:arial;
  445. font-weight:bold;
  446. text-align:left;
  447. font-size:16px;
  448. transition:0.6s;
  449. -webkit-transition:0.6s;
  450. -moz-transition:0.6s;
  451. -os-transition:0.6s;
  452. }
  453.  
  454. .post:hover h1 {
  455. color:{color:text on hover};
  456. }
  457.  
  458. .tbody {
  459. margin-lefT:10px;
  460. }
  461.  
  462. /* QUOTE */
  463.  
  464. h2 {
  465. font-family:cambria;
  466. font-size:10px;
  467. text-transform:uppercase;
  468. font-weight:normal;
  469. text-align:center;
  470. color:{color:text};
  471. letter-spacing:1px;
  472. transition:0.6s;
  473. -webkit-transition:0.6s;
  474. -moz-transition:0.6s;
  475. -os-transition:0.6s;
  476.  
  477. }
  478.  
  479. .post:hover h2 {
  480. color:{color:text on hover};
  481. }
  482.  
  483. .source {
  484. text-align:right;
  485. }
  486. /* audio */
  487.  
  488. .albumart {
  489. width:70px;
  490. height:70px;
  491. margin-left:215px;
  492. }
  493.  
  494. .player {
  495. width:30px;
  496. height:30px;
  497. overflow:hidden;
  498. position:absolute;
  499. margin-top:20px;
  500. margin-bottom:20px;
  501. margin-left:20px;
  502. opacity:0.7;
  503.  
  504. }
  505.  
  506. .ainfo {
  507. margin-top:10px;
  508. font-size:10px;
  509. text-align:center;
  510. font-family:cambria;
  511. text-transform:uppercase;
  512. }
  513.  
  514.  
  515.  
  516. /* chat */
  517.  
  518. .chat {
  519.  
  520. }
  521.  
  522. .chat ul {
  523. list-style: none;
  524. margin: 0;
  525. padding: 0;
  526. }
  527.  
  528. .chat li {
  529. margin: 5px;
  530. padding:2%;
  531. }
  532.  
  533. .chat .odd {
  534. transition:0.6s;
  535. -webkit-transition:0.6s;
  536. -moz-transition:0.6s;
  537. -os-transition:0.6s;
  538. background:{color:chat bg 1};
  539. }
  540.  
  541. .chat .even {
  542. background:{color:chat bg 2};
  543. transition:0.6s;
  544. -webkit-transition:0.6s;
  545. -moz-transition:0.6s;
  546. -os-transition:0.6s;
  547. }
  548.  
  549. .post:hover .chat .odd, .post:hover .chat .even {
  550. background:{color:post bg};
  551. }
  552.  
  553. .label {
  554. text-transform:uppercase;
  555. font-weight:bold;
  556. color:#666;
  557. }
  558.  
  559. /* ask */
  560.  
  561.  
  562. .ask {
  563. text-align:center;
  564.  
  565. }
  566.  
  567.  
  568.  
  569. .askimg img {
  570. width:40px;
  571. height:40px;
  572. margin-bottom:5px;
  573. }
  574.  
  575. .asker {
  576. text-transform:uppercase;
  577. font-size:10px;
  578. margin-bottom:5px;
  579. }
  580.  
  581. .question {
  582. width:480px;
  583. padding:10px;
  584. background:{color:post bg};
  585. transition:0.6s;
  586. -webkit-transition:0.6s;
  587. -moz-transition:0.6s;
  588. -os-transition:0.6s;
  589. }
  590.  
  591. .answer {
  592. width:400px;
  593. margin-left:50px;
  594. border:1px solid {color:post bg};
  595. margin-top:-1px;
  596. transition:0.6s;
  597. -webkit-transition:0.6s;
  598. -moz-transition:0.6s;
  599. -os-transition:0.6s;
  600.  
  601. }
  602.  
  603. .post:hover .question {
  604. background:{color:ask bg};
  605. }
  606.  
  607. .post:hover .answer {
  608. border:1px solid {color:ask bg};
  609. }
  610.  
  611. /* --- POST INFO --- */
  612.  
  613. #info {
  614. text-align:center;
  615. margin-top:10px;
  616. color:{color:text};
  617. font-size:10px;
  618.  
  619. }
  620.  
  621.  
  622. .date a {
  623. display:inline-block;
  624. padding:4px;
  625. text-align:Center;
  626. color:{color:text};
  627. }
  628.  
  629. .post:hover .date a {
  630. background:{color:title hover};
  631. color:{color:text on hover};
  632. }
  633.  
  634. .post:hover .date a:hover {
  635. background:{color:post bg};
  636. color:{color:title hover};
  637.  
  638. }
  639.  
  640. .reblog {
  641. color:{color:text};
  642. }
  643.  
  644. .post:hover .reblog {
  645. color:#00cc00;
  646. }
  647.  
  648.  
  649. .viasrc {
  650. margin-top:5px;
  651. }
  652.  
  653. .viasrc a {
  654. color:{color:text};
  655. }
  656.  
  657. .post:hover .viasrc a {
  658. color:{color:title hover};
  659. }
  660.  
  661. .tags {
  662. margin-top:10px;
  663. text-align:center;
  664. }
  665.  
  666. .tags a {
  667. padding:5px;
  668. color:{color:text};
  669. font-style:italic;
  670. }
  671.  
  672. .post:hover .tags a {
  673. color:{color:link};
  674. }
  675. {CustomCSS}</style>
  676.  
  677.  
  678. </head><body>
  679.  
  680. <div id="title">
  681. <a href="/">{Title} </a>
  682. </div>
  683. <div id="sidebar">
  684. <div class="sbimg"><img src="{image:sidebar}"></div>
  685. <div class="desc">{Description}</div>
  686.  
  687. <div class="navl">
  688.  
  689. {block:ifshownavlink1}<a href="{text:link 1 url}">{text:link 1}</a>{/block:ifshownavlink1}
  690. {block:ifshownavlink2}<a href="{text:link 2 url}">{text:link 2}</a>{/block:ifshownavlink2}
  691. {block:ifshownavlink3} <a href="{text:link 3 url}">{text:link 3}</a>{/block:ifshownavlink3}
  692. {block:ifshownavlink4} <a href="{text:link 4 url}">{text:link 4}</a>{/block:ifshownavlink4}
  693. {block:ifshownavlink5}<a href="{text:link 5 url}">{text:link 5}</a>{/block:ifshownavlink5}
  694. {block:ifshownavlink6}<a href="{text:link 6 url}">{text:link 6}</a>{/block:ifshownavlink6}
  695. {block:ifshownavlink7} <a href="{text:link 7 url}">{text:link 7}</a>{/block:ifshownavlink7}
  696. {block:ifshownavlink8} <a href="{text:link 8 url}">{text:link 8}</a>{/block:ifshownavlink8}
  697. </div>
  698. </div>
  699.  
  700. {block:Pagination}
  701. <div id="pagination">
  702. {block:NextPage}
  703. <div class="nextp">
  704. <a href="{NextPage}">next</a>
  705. </div>
  706. {/block:NextPage}
  707. {block:PreviousPage}
  708. <div class="prevp">
  709. <a href="{PreviousPage}">prev</a>
  710. </div>
  711. {/block:PreviousPage}
  712. </div>
  713. {/block:Pagination}
  714.  
  715.  
  716. <div id="entries">
  717.  
  718. {block:Posts}
  719. <div class="post">
  720.  
  721. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>
  722. <div class="tbody">{block:Description}{Description}{/block:Description}</div>
  723. {/block:Link}
  724.  
  725.  
  726. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  727.  
  728. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  729.  
  730. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  731. {block:Text}
  732.  
  733. {block:Title}<h1>{Title}</h1>{/block:Title}
  734. <div class="tbody">{Body}</div>
  735.  
  736. {/block:Text}
  737.  
  738.  
  739. {block:Quote}
  740.  
  741. <h2>{Quote}</h2>
  742. {block:Source}
  743. <div class="source">—{Source}</div>{/block:Source}
  744. {/block:Quote}
  745.  
  746. {block:Chat}
  747. <div class="chat">
  748. {block:Title}<h1>{Title}</h1>{/block:Title}
  749. <ul>{block:Lines}
  750. <li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>
  751. {/block:Lines}</ul>
  752. </div>
  753. {/block:Chat}
  754.  
  755. {block:Audio}
  756. <div class="albumart">
  757.  
  758. <div class= "player">{AudioPlayerWhite}</div>
  759.  
  760. {block:AlbumArt}
  761. <img src="{AlbumArtURL}" width="75">
  762. {/block:AlbumArt}
  763. </div>
  764.  
  765.  
  766. <div class="ainfo">
  767. {block:TrackName}
  768. {TrackName}{/block:TrackName}<br>
  769. {block:Artist}{Artist}{/block:Artist}<br>
  770. {PlayCount} plays
  771. </div>
  772.  
  773.  
  774.  
  775. {block:Caption}{Caption}{/block:Caption}
  776. {/block:Audio}
  777. {block:Answer}
  778.  
  779. <div class="ask">
  780.  
  781. <div class="askimg">
  782. <img src="{AskerPortraitURL-40}">
  783. </div>
  784.  
  785. <div class="asker">
  786. {Asker}
  787. </div>
  788.  
  789. <div class="question">
  790.  
  791. {Question}
  792.  
  793. </div>
  794.  
  795. <div class="answer">
  796.  
  797. {Answer}
  798.  
  799. </div>
  800. </div>
  801.  
  802. {/block:Answer}
  803.  
  804. <div id="info">
  805. <span class="date">
  806. <a href="{Permalink}">
  807. {TimeAgo}
  808. </a>
  809. </span>
  810.  
  811. + {NoteCount}
  812. — <a href="{ReblogURL}" target="_blank" class="reblog">reblog</a>
  813.  
  814.  
  815. <div class="viasrc">
  816. {block:RebloggedFrom}via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} — {block:ContentSource}src <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
  817. </div>
  818. {block:HasTags}
  819. <div class="tags">
  820. {block:Tags}
  821. <a href="{TagURL}">#{Tag}</a>
  822. {/block:Tags}
  823.  
  824. </div>
  825. {/block:HasTags}
  826. </div>
  827. </div>
  828. <div class="notes">{block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  829. {/block:Posts}
  830. </div>
  831. <div id="credit">
  832. <a target="_blank" href="http://jasnahdavar.tumblr.com">JD.</a>
  833. </div>
  834. </body>
  835. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!