API tools faq
paste
spirkism

Theme #27: Space

spirkism
Feb 26th, 2016
507
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.52 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. THEME: SPACE
  3. by Zeke (spirkism/spirkthemes)
  4.  
  5. Rules:
  6. - please do not steal/redistribute, I spent quite a bit of time coding this
  7. - also don't (re)move the credit please, that would make me very sad :(
  8. - don't use as a base code, there are plenty of those out there
  9. - you are allowed to edit as much as you like though, have fun playing around with code, that's how you learn! :)
  10. - tell me if there are any bugs or if you have any questions, need help with the theme or want a detail differently - I'll see what I can do for you ;)
  11. And now: enjoy! :)
  12.  
  13.  
  14.  
  15. To change the icon of a link in the header go to this site:
  16. http://fortawesome.github.io/Font-Awesome/icons/
  17. All the icons are listed here, just click one to select it and copy the code (the number+letter combo) and paste it into the corresponding field in your theme editing mode!
  18.  
  19.  
  20. -->
  21.  
  22. <!DOCTYPE html>
  23. <head>
  24.  
  25. <title>{Title}</title>
  26.  
  27. <!-- /* LINKS */ -->
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  31. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/h5czl1a/aTqnk4mjj/tooltipstuff.css"/>
  32. <link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light|Pacifico|Covered+By+Your+Grace|Amatic+SC:400,700|Rock+Salt|Lobster|Righteous|Lobster+Two:400,700italic|Playball|Special+Elite|Audiowide|Limelight' rel='stylesheet' type='text/css'>
  33.  
  34. <!-- /* SCRIPTS */ -->
  35.  
  36. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
  37. <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  38. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  39. <script src="http://static.tumblr.com/h5czl1a/ACynk4kjd/tipped.js"></script>
  40.  
  41. <!--
  42. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  43. -->
  44.  
  45.  
  46. <script type='text/javascript'>
  47. $(document).ready(function() {
  48. Tipped.create('#credit','theme credit');
  49. });
  50. </script>
  51.  
  52. <script>
  53. (function($){
  54. $(document).ready(function(){
  55. $("[title]").style_my_tooltips({
  56. tip_follows_cursor:true,
  57. tip_delay_time:200,
  58. tip_fade_speed:300
  59. }
  60. );
  61. });
  62. })(jQuery);
  63. </script>
  64.  
  65.  
  66. <!-- /* META TAGS */ -->
  67. <meta name="color:background" content="#232961" />
  68. <meta name="color:text" content="#f2f2f2" />
  69. <meta name="color:post background" content="#141414" />
  70. <meta name="color:link color" content="#2889f7" />
  71. <meta name="color:link hover color" content="#0436c9" />
  72. <meta name="color:title" content="#ffffff" />
  73. <meta name="color:header" content="#000000" />
  74. <meta name="color:accent" content="#021a39" />
  75. <meta name="color:desc" content="#ffffff" />
  76.  
  77.  
  78. <meta name="text:opacity" content="0.8" />
  79. <meta name="text:link 1 url" content="/" />
  80. <meta name="text:link 1 symbol" content="f015" />
  81. <meta name="text:link 1 text" content="link" />
  82. <meta name="text:link 2 url" content="/" />
  83. <meta name="text:link 2 symbol" content="f0e0" />
  84. <meta name="text:link 2 text" content="link" />
  85. <meta name="text:link 3 url" content="/" />
  86. <meta name="text:link 3 symbol" content="f121" />
  87. <meta name="text:link 3 text" content="link" />
  88. <meta name="text:link 4 url" content="/" />
  89. <meta name="text:link 4 symbol" content="f0b1" />
  90. <meta name="text:link 4 text" content="link" />
  91. <meta name="text:link 5 url" content="/" />
  92. <meta name="text:link 5 symbol" content="f15c" />
  93. <meta name="text:link 5 text" content="link" />
  94. <meta name="text:link 6 url" content="/" />
  95. <meta name="text:link 6 symbol" content="f02c" />
  96. <meta name="text:link 6 text" content="link" />
  97. <meta name="text:link 7 url" content="/" />
  98. <meta name="text:link 7 symbol" content="f00a" />
  99. <meta name="text:link 7 text" content="" />
  100. <meta name="text:link 8 url" content="/" />
  101. <meta name="text:link 8 symbol" content="f1c9" />
  102. <meta name="text:link 8 text" content="" />
  103. <meta name="text:link 9 url" content="/" />
  104. <meta name="text:link 9 symbol" content="f099" />
  105. <meta name="text:link 9 text" content="" />
  106. <meta name="text:link 10 url" content="/" />
  107. <meta name="text:link 10 symbol" content="f004" />
  108. <meta name="text:link 10 text" content="" />
  109.  
  110. <meta name="image:background" content="" />
  111. <meta name="image:fallback albumart" content="http://i.imgur.com/k3XhJXS.png" />
  112.  
  113. <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
  114. <meta name="font:Specialfont" content="Arial, Helvetica, sans-serif"/>
  115.  
  116. <meta name="if:Searchbar" content="1" />
  117. <meta name="if:500px posts" content="1" />
  118.  
  119. <meta name="select:Description" content="descleft" title="left" />
  120. <meta name="select:Description" content="descright" title="right" />
  121. <meta name="select:Description" content="descnone" title="none" />
  122.  
  123. <meta name="select:Index tags" content="hover-tags" title="tags on hover" />
  124. <meta name="select:Index tags" content="no-tags" title="no tags" />
  125. <meta name="select:Index tags" content="fixed-tags" title="visible tags" />
  126.  
  127. <meta name="select:Perma tags" content="fixed-tags" title="visible tags" />
  128. <meta name="select:Perma tags" content="no-tags" title="no tags" />
  129. <meta name="select:Perma tags" content="hover-tags" title="tags on hover" />
  130.  
  131.  
  132.  
  133. <style type="text/css">
  134.  
  135. /* GENERAL */
  136.  
  137. ::-webkit-scrollbar-thumb {
  138. background-color: {color:desc};
  139. height:auto;
  140. width: 10px;
  141. z-index: 9999999999999999999999999999999999999;
  142. }
  143.  
  144. ::-webkit-scrollbar {
  145. height:auto;
  146. width:10px;
  147. background-color:{color:post background};
  148. z-index: 999999999999999999999999999999999999;
  149. }
  150.  
  151.  
  152. div#qTip {
  153. font: 12px {font:Body};
  154. line-height: 12px;
  155. display: none;
  156. text-align: center;
  157. position: absolute;
  158. z-index: 999999999999;
  159. background-color: {color:header};
  160. padding: 3px 7px;
  161. color: {color:title};
  162. max-width: 200px;
  163. height: auto;
  164. border: 1px solid {color:link color};
  165. -webkit-transition: all 0.1s ease-out;
  166. -moz-transition: all 0.1s ease-out;
  167. -o-transition: all 0.1s ease-out;
  168. }
  169.  
  170. body {
  171. word-wrap:break-word;
  172. margin: 0;
  173. background-image: url('{image:background}');
  174. background-attachment: fixed;
  175. background-size: 100% auto;
  176. background-color: {color:background};
  177. font: 12px {font:Body};
  178. color: {color:text};
  179. }
  180.  
  181. img {
  182. max-width: 100%;
  183. }
  184.  
  185. a {
  186. text-decoration: none;
  187. color: {color:link color};
  188. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  189. -o-transition: 0.5s ease;
  190. -moz-transition: 0.5s ease;
  191. }
  192.  
  193. a:hover {
  194. text-decoration: none;
  195. color: {color:link hover color};
  196. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  197. -o-transition: 0.5s ease;
  198. -moz-transition: 0.5s ease;
  199. }
  200.  
  201. blockquote {
  202. border-left: solid 2px #818181;
  203. padding-left: 10px;
  204. max-width: 100%;
  205. }
  206.  
  207.  
  208.  
  209. /* SIDEBAR */
  210.  
  211. #header {
  212. position: fixed;
  213. top: 0;
  214. width: 100%;
  215. height: 50px;
  216. background-color: RGBA({RGBcolor:header},{text:opacity});
  217. z-index: 9;
  218. }
  219.  
  220.  
  221. #title {
  222. position: relative;
  223. left: 10px;
  224. font: 1.5em {font:Specialfont};
  225. color: {color:title};
  226. display: inline-block;
  227. }
  228.  
  229.  
  230.  
  231. #descleft {
  232. position: fixed;
  233. margin-top: 20px;
  234. width: 180px;
  235. margin-left: 10px;
  236. color: {color:desc};
  237. background-color: RGBA({RGBcolor:header}, 0.3);
  238. padding: 10px;
  239. font-size: 0.85em;
  240. text-align:center;
  241. display: block;
  242. }
  243.  
  244. #descright {
  245. position: fixed;
  246. margin-top: 20px;
  247. width: 180px;
  248. right: 10px;
  249. color: {color:desc};
  250. background-color: RGBA({RGBcolor:header}, 0.3);
  251. padding: 10px;
  252. font-size: 0.85em;
  253. text-align:center;
  254. display: block;
  255. }
  256.  
  257.  
  258. #descnone {
  259. position: fixed;
  260. margin-top: 20px;
  261. width: 180px;
  262. margin-left: 10px;
  263. color: {color:desc};
  264. background-color: RGBA({RGBcolor:header}, 0.3);
  265. padding: 10px;
  266. font-size: 0.85em;
  267. text-align:center;
  268. display: none;
  269. }
  270.  
  271.  
  272. #sblinks {
  273. position: relative;
  274. display: inline-block;
  275. margin-top: 15px;
  276. margin-left: 40px;
  277. }
  278.  
  279. .sblink {
  280. position: relative;
  281. display: inline-block;
  282. margin-right: 15px;
  283. }
  284.  
  285.  
  286. #link1:before {
  287. content: "\{text:link 1 symbol}";
  288. font-family: FontAwesome;
  289. text-align:left;
  290. font-size:22px;
  291. }
  292.  
  293. #link2:before {
  294. content: "\{text:link 2 symbol}";
  295. font-family: FontAwesome;
  296. text-align:left;
  297. font-size:22px;
  298. }
  299.  
  300. #link3:before {
  301. content: "\{text:link 3 symbol}";
  302. font-family: FontAwesome;
  303. text-align:left;
  304. font-size:22px;
  305. }
  306.  
  307. #link4:before {
  308. content: "\{text:link 4 symbol}";
  309. font-family: FontAwesome;
  310. text-align:left;
  311. font-size:22px;
  312. }
  313.  
  314. #link5:before {
  315. content: "\{text:link 5 symbol}";
  316. font-family: FontAwesome;
  317. text-align:left;
  318. font-size:22px;
  319. }
  320.  
  321. #link6:before {
  322. content: "\{text:link 6 symbol}";
  323. font-family: FontAwesome;
  324. text-align:left;
  325. font-size:22px;
  326. }
  327.  
  328. #link7:before {
  329. content: "\{text:link 7 symbol}";
  330. font-family: FontAwesome;
  331. text-align:left;
  332. font-size:22px;
  333. }
  334.  
  335. #link8:before {
  336. content: "\{text:link 8 symbol}";
  337. font-family: FontAwesome;
  338. text-align:left;
  339. font-size:22px;
  340. }
  341.  
  342. #link9:before {
  343. content: "\{text:link 9 symbol}";
  344. font-family: FontAwesome;
  345. text-align:left;
  346. font-size:22px;
  347. }
  348.  
  349. #link10:before {
  350. content: "\{text:link 10 symbol}";
  351. font-family: FontAwesome;
  352. text-align:left;
  353. font-size:22px;
  354. }
  355.  
  356. #searchbar {
  357. position: absolute;
  358. right: 0px;
  359. bottom: 0px;
  360. opacity: 0.7;
  361. }
  362.  
  363. #searchform input {
  364. border: 0px;
  365. padding: 5px;
  366. text-transform: uppercase;
  367. margin-top: 0px;
  368. letter-spacing: 1px;
  369. font-size: 0.8em;
  370. color: #575757;
  371. }
  372.  
  373. #searchinput {
  374. width: 200px;
  375. }
  376.  
  377. #searchbutton {
  378. margin-left: -3px;
  379. }
  380.  
  381.  
  382. #next {
  383. position: absolute;
  384. right: 280px;
  385. bottom: 13px;
  386. }
  387.  
  388. #next:before {
  389. content: "\f0a9";
  390. font-family: FontAwesome;
  391. text-align:left;
  392. font-size:22px;
  393. }
  394.  
  395.  
  396. #prev {
  397. position: absolute;
  398. right: 310px;
  399. bottom: 13px;
  400. }
  401.  
  402. #prev:before {
  403. content: "\f0a8";
  404. font-family: FontAwesome;
  405. text-align:left;
  406. font-size:22px;
  407. }
  408.  
  409.  
  410.  
  411.  
  412. /* POSTS & CONTENT */
  413.  
  414.  
  415.  
  416. #content {
  417. position: relative;
  418. {block:If500pxPosts}
  419. width: 542px;
  420. {/block:If500pxPosts}
  421. {block:IfNot500pxPosts}
  422. width: 442px;
  423. {/block:IfNot500pxPosts}
  424. top: 100px;
  425. margin: 0 auto;
  426. }
  427.  
  428. #posts {
  429. position: relative;
  430. {block:If500pxPosts}
  431. width: 542px;
  432. {/block:If500pxPosts}
  433. {block:IfNot500pxPosts}
  434. width: 442px;
  435. {/block:IfNot500pxPosts}
  436. }
  437.  
  438. #post {
  439. position: relative;
  440. {block:If500pxPosts}
  441. width: 500px;
  442. {/block:If500pxPosts}
  443. {block:IfNot500pxPosts}
  444. width: 400px;
  445. {/block:IfNot500pxPosts}
  446. padding: 20px;
  447. margin-bottom: 50px;
  448. background-color: RGBA({RGBcolor:post background},{text:opacity});
  449. }
  450.  
  451. .caption {
  452. padding: 10px;
  453. background-color: RGBA({RGBcolor:accent},0.2);
  454. {block:If500pxPosts}
  455. width: 480px;
  456. {/block:If500pxPosts}
  457. {block:IfNot500pxPosts}
  458. width: 380px;
  459. {/block:IfNot500pxPosts}
  460. }
  461.  
  462. .textpost img {
  463. width: 100%;
  464. height: 100%;
  465. }
  466.  
  467. .textpost-title {
  468. font: 1.1em {font:Specialfont};
  469. background-color: {color:post background};
  470. padding: 10px;
  471. {block:If500pxPosts}
  472. width: 480px;
  473. {/block:If500pxPosts}
  474. {block:IfNot500pxPosts}
  475. width: 380px;
  476. {/block:IfNot500pxPosts}
  477. text-align: center;
  478. }
  479.  
  480. .textpost-text {
  481.  
  482. }
  483.  
  484. .photopost {
  485.  
  486. }
  487.  
  488. .panorama-post {
  489.  
  490. }
  491.  
  492. .photosetpost {
  493.  
  494. }
  495.  
  496. .quotepost {
  497.  
  498. }
  499.  
  500. .quotepost-quote {
  501. font: 1.2em {font:Specialfont};
  502. }
  503.  
  504. .quotepost-source {
  505. margin-top: 10px;
  506. font-size: 0.85em;
  507. text-align: right;
  508. }
  509.  
  510. .linkpost {
  511.  
  512. }
  513.  
  514. .linkpost-title {
  515. padding: 20px 50px;
  516. font: 1.2em {font:Specialfont};
  517. text-align: center;
  518. {block:If500pxPosts}
  519.  
  520. {/block:If500pxPosts}
  521. {block:IfNot500pxPosts}
  522.  
  523. {/block:IfNot500pxPosts}
  524. background-color: RGBA({RGBcolor:desc},0.1);
  525. border:10px solid RGBA({RGBcolor:desc},0.7);
  526. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  527. -o-transition: 0.5s ease;
  528. -moz-transition: 0.5s ease;
  529. }
  530.  
  531. .linkpost-title:hover{
  532. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  533. background-color: RGBA({RGBcolor:desc},0.5);
  534. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  535. -o-transition: 0.5s ease;
  536. -moz-transition: 0.5s ease;
  537. }
  538.  
  539. #linkpost-titly img {
  540. width: 60px;
  541. position: absolute;
  542. z-index: 9;
  543. right: -10px;
  544. top: -10px;
  545. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  546. }
  547.  
  548. .linkpost .caption {
  549.  
  550. }
  551.  
  552. .linkpost-img {
  553.  
  554. }
  555.  
  556. .chatpost {
  557.  
  558. }
  559.  
  560. .chatpost-title {
  561. font: 1.1em {font:Specialfont};
  562. background-color: {color:post background};
  563. padding: 10px;
  564. {block:If500pxPosts}
  565. width: 480px;
  566. {/block:If500pxPosts}
  567. {block:IfNot500pxPosts}
  568. width: 380px;
  569. {/block:IfNot500pxPosts}
  570. text-align: center;
  571. }
  572.  
  573. .chatpost ul {
  574. list-style-type: none;
  575. padding: 5px;
  576. font-size: 0.9em;
  577. }
  578.  
  579. .chatpost ul .odd {
  580. background-color: RGBA({RGBcolor:accent},0.4);
  581. padding: 5px;
  582. margin-bottom: 2px;
  583. }
  584.  
  585. .chatpost ul .even {
  586. background-color: RGBA({RGBcolor:desc},0.2);
  587. padding: 5px;
  588. margin-bottom: 2px;
  589. }
  590.  
  591. .audiopost {
  592. min-height: 100px;
  593. }
  594.  
  595. .audiopost-player {
  596. width: 27px;
  597. height: 30px;
  598. position: absolute;
  599. z-index: 999;
  600. overflow: hidden;
  601. top: 57px;
  602. left: 57px;
  603. opacity: 0.7;
  604. }
  605.  
  606.  
  607. .audiopost-img {
  608. width: 80px;
  609. position: absolute;
  610. top: 20px;
  611. left: 20px;
  612. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  613. height: 80px;
  614. z-index: 99;
  615. }
  616.  
  617. #audiopost-fallbackimg {
  618. position: absolute;
  619. top: 20px;
  620. left: 20px;
  621. width: 80px;
  622. height: 80px;
  623. z-index: 9;
  624. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  625. }
  626.  
  627.  
  628.  
  629. .audiopost ul {
  630. list-style: none;
  631. position: absolute;
  632. left: 90px;
  633. background-color: RGBA({RGBcolor:desc},0.4);
  634. padding: 20px;
  635. height: 60px;
  636. top: 8px;
  637. left: 120px;
  638. {block:If500pxPosts}
  639. width: 360px;
  640. {/block:If500pxPosts}
  641. {block:IfNot500pxPosts}
  642. width: 260px;
  643. {/block:IfNot500pxPosts}
  644. }
  645.  
  646. .audiopost .caption {
  647. margin-top: 100px;
  648. }
  649.  
  650. .videopost {
  651.  
  652. }
  653.  
  654. .videopost-video {
  655.  
  656. }
  657.  
  658. .answerpost {
  659.  
  660. }
  661.  
  662. .answerpost .caption {
  663. padding: 0px;
  664. background-color: transparent;
  665. }
  666.  
  667. .answerpost .caption img {
  668. width: 100%;
  669. height: 100%;
  670. }
  671.  
  672. .answerpost-1 {
  673.  
  674. }
  675.  
  676. .answerpost-asker {
  677. font: 1.2em {font:Specialfont};
  678. top: 10px;
  679. margin-bottom: 7px;
  680. }
  681.  
  682.  
  683. .answerpost-askerimg {
  684. width: 60px;
  685. position: absolute;
  686. z-index: 9;
  687. right: -10px;
  688. top: -10px;
  689. border:10px solid RGBA({RGBcolor:post background},{text:opacity});
  690. }
  691.  
  692. .answerpost-arrow {
  693. width: 0;
  694. height: 0;
  695. border-top: 15px solid transparent;
  696. border-bottom: 15px solid transparent;
  697. border-right: 20px solid RGBA({RGBcolor:accent},0.4);
  698. }
  699.  
  700. .answerpost-question {
  701. position: relative;
  702. margin-top: -10px;
  703. background-color: RGBA({RGBcolor:desc}, 0.4);
  704. padding: 20px;
  705. top: 10px;
  706. clear: right;
  707. margin-bottom: 20px;
  708. {block:If500pxPosts}
  709. width: 460px;
  710. {/block:If500pxPosts}
  711. {block:IfNot500pxPosts}
  712. width: 360px;
  713. {/block:IfNot500pxPosts}
  714.  
  715. }
  716.  
  717. .answerpost-2 {
  718.  
  719. }
  720.  
  721. .answerpost-answererimg {
  722.  
  723. }
  724.  
  725. .answerpost-answerer {
  726. font: 1.2em {font:Specialfont};
  727. top: 10px;
  728. }
  729.  
  730. .answerpost-answer {
  731. background-color: RGBA({RGBcolor:desc}, 0.2);
  732. padding: 20px;
  733. }
  734.  
  735. .answerpost-answer img {
  736. height: 100%;
  737. width: 100%;
  738. }
  739.  
  740. #permbox {
  741. position: absolute;
  742. margin-top: -65px;
  743. width: auto;
  744. left: 0px;
  745. z-index: 2;
  746. }
  747.  
  748. .permbox-box {
  749. height: 16px;
  750. line-height: 16px;
  751. background-color: {color:accent};
  752. padding: 5px 10px;
  753. display: inline-block;
  754. font-size: 0.85em;
  755. margin-right: -4px;
  756. border: 1px solid {color:header};
  757. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  758. -o-transition: 0.5s ease;
  759. -moz-transition: 0.5s ease;
  760. }
  761.  
  762. .permbox-box:hover {
  763. background-color: {color:header};
  764. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  765. -o-transition: 0.5s ease;
  766. -moz-transition: 0.5s ease;
  767. }
  768.  
  769. #timeago-box {
  770.  
  771. }
  772.  
  773.  
  774. .no-tags {
  775. display: none;
  776. }
  777.  
  778. .no-tags .comma:last-child {
  779. display: none;
  780. }
  781.  
  782. .hover-tags {
  783. opacity: 0;
  784. background-color: RGBA({RGBcolor:post background},0.9);
  785. {block:If500pxPosts}
  786. width: 500px;
  787. {/block:If500pxPosts}
  788. {block:IfNot500pxPosts}
  789. width: 400px;
  790. {/block:IfNot500pxPosts}
  791. padding: 20px;
  792. font-size:0.85em;
  793. margin-top: -100px;
  794. position: absolute
  795. z-index: 1;
  796. margin-bottom: 50px;
  797. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  798. -o-transition: 0.5s ease;
  799. -moz-transition: 0.5s ease;
  800. }
  801.  
  802. .hover-tags .comma:last-child {
  803. display: none;
  804. }
  805.  
  806. #posty:hover .hover-tags {
  807. margin-top: -50px;
  808. opacity: 1;
  809. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  810. -o-transition: 0.5s ease;
  811. -moz-transition: 0.5s ease;
  812. }
  813.  
  814. .fixed-tags {
  815. background-color: RGBA({RGBcolor:post background},0.9);
  816. {block:If500pxPosts}
  817. width: 500px;
  818. {/block:If500pxPosts}
  819. {block:IfNot500pxPosts}
  820. width: 400px;
  821. {/block:IfNot500pxPosts}
  822. padding: 20px;
  823. font-size:0.85em;
  824. margin-top: -50px;
  825. position: absolute
  826. z-index: 1;
  827. margin-bottom: 50px;
  828. }
  829.  
  830. .fixed-tags .comma:last-child {
  831. display: none;
  832. }
  833.  
  834. #notes {
  835. font-size: 0.8em;
  836. }
  837.  
  838. #notes ol {
  839. list-style-type: none;
  840. }
  841.  
  842. #notes img {
  843. display: none;
  844. }
  845.  
  846. #likebutton {
  847. position: relative;
  848. top: 1px;
  849. }
  850.  
  851. #reblogbutton {
  852. position: relative;
  853. top: 1px;
  854. }
  855.  
  856. /* -- DO NOT EDIT ANYTHING HERE WITHOUT ASKING ME FIRST -- */
  857.  
  858. #credit {
  859. position: fixed;
  860. right: 5px;
  861. bottom: 5px;
  862. width: 13px;
  863. height: 13px;
  864. background-color: {color:post background};
  865. padding: 5px 7px 7px 5px;
  866. z-index: 99999999999999999999999999999999999999999999999;
  867. }
  868.  
  869. #credit:before {
  870. content: "\f259";
  871. font-family: FontAwesome;
  872. text-align:left;
  873. font-size:1.2em;
  874. }
  875.  
  876.  
  877.  
  878.  
  879. </style>
  880. </head>
  881.  
  882. <body>
  883.  
  884.  
  885. <!-- /* SIDEBAR, HEADER, ETC. */ -->
  886.  
  887. <!-- /* SIDEBAR */ -->
  888.  
  889. <div id="header">
  890.  
  891.  
  892. <div id="title">{Title}</div>
  893.  
  894. <div id="{select:Description}">{Description}</div>
  895.  
  896. <div id="sblinks">
  897. {block:IfLink1Text}<a href="{text:link 1 url}" title="{text:link 1 text}"><div class="sblink" id="link1"></div></a>{/block:IfLink1Text}
  898. {block:IfLink2Text}<a href="{text:link 2 url}" title="{text:link 2 text}"><div class="sblink" id="link2"></div></a>{/block:IfLink2Text}
  899. {block:IfLink3Text}<a href="{text:link 3 url}" title="{text:link 3 text}"><div class="sblink" id="link3"></div></a>{/block:IfLink3Text}
  900. {block:IfLink4Text}<a href="{text:link 4 url}" title="{text:link 4 text}"><div class="sblink" id="link4"></div></a>{/block:IfLink4Text}
  901. {block:IfLink5Text}<a href="{text:link 5 url}" title="{text:link 5 text}"><div class="sblink" id="link5"></div></a>{/block:IfLink5Text}
  902. {block:IfLink6Text}<a href="{text:link 6 url}" title="{text:link 6 text}"><div class="sblink" id="link6"></div></a>{/block:IfLink6Text}
  903. {block:IfLink7Text}<a href="{text:link 7 url}" title="{text:link 7 text}"><div class="sblink" id="link7"></div></a>{/block:IfLink7Text}
  904. {block:IfLink8Text}<a href="{text:link 8 url}" title="{text:link 8 text}"><div class="sblink" id="link8"></div></a>{/block:IfLink8Text}
  905. {block:IfLink9Text}<a href="{text:link 9 url}" title="{text:link 9 text}"><div class="sblink" id="link9"></div></a>{/block:IfLink9Text}
  906. {block:IfLink10Text}<a href="{text:link 10 url}" title="{text:link 10 text}"><div class="sblink" id="link10"></div></a>{/block:IfLink10Text}
  907.  
  908. </div>
  909.  
  910.  
  911. {block:PreviousPage}
  912. <a href="{PreviousPage}"><div id="prev"></div></a>
  913. {/block:PreviousPage}
  914. {block:NextPage}
  915. <a href="{NextPage}"><div id="next"></div></a>
  916. {/block:NextPage}
  917.  
  918.  
  919. {block:IfSearchbar}
  920. <div id="searchbar">
  921. <form action="/search" method="get" id=searchform>
  922. <input type="text" name="q" value="{SearchQuery}" id="searchinput"/>
  923. <input type="submit" value="search" id="searchbutton"/>
  924. </div>
  925. </form>
  926. {/block:IfSearchbar}
  927.  
  928.  
  929.  
  930.  
  931.  
  932. </div>
  933.  
  934.  
  935.  
  936.  
  937.  
  938. <!-- /* POSTS */ DON'T CHANGE ANYTHING HERE PLEASE -->
  939.  
  940. <div id="content">
  941. <div id="posts">
  942. <div class="autopagerize_page_element">
  943. {block:Posts}
  944. <div id="posty">
  945. <div id="post">
  946.  
  947. {block:ContentSource}
  948. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  949. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  950. {/block:SourceLogo}
  951. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  952. {/block:ContentSource}
  953.  
  954. <!-- /* TEXT POST */ -->
  955. {block:Text}<div class="textpost {TagsAsClasses}">
  956. {block:Title}<div class="textpost-title">{Title}</div>{/block:Title}
  957. <div class="textpost-text">
  958. {Body}
  959. </div>
  960. </div>
  961. {/block:Text}
  962.  
  963. <!-- /* PHOTO POST */ -->
  964. {block:Photo}<div class="photopost {TagsAsClasses}">
  965. {LinkOpenTag}
  966. {block:If500pxPosts}
  967. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  968. {/block:If500pxPosts}
  969. {block:IfNot500pxPosts}
  970. <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  971. {/block:IfNot500pxPosts}
  972. {LinkCloseTag}
  973. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  974. </div>
  975. {/block:Photo}
  976.  
  977. <!-- /* PANORAMA POST */ -->
  978. {block:Panorama}<div class="panoramapost {TagsAsClasses}">
  979. {LinkOpenTag}
  980. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  981. {LinkCloseTag}
  982. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  983. </div>
  984. {/block:Panorama}
  985.  
  986. <!-- /* PHOTOSET POST */ -->
  987. {block:Photoset}<div class="photosetpost {TagsAsClasses}">
  988. {Photoset}
  989. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  990. </div>
  991. {/block:Photoset}
  992.  
  993. <!-- /* QUOTE POST */ -->
  994. {block:Quote}<div class="quotepost {TagsAsClasses}">
  995. <div class="quotepost-quote">{Quote}</div>
  996. {block:Source}<div class="quotepost-source">&middot;&middot;&middot;&nbsp;{Source}&nbsp;&middot;&middot;&middot;</div>{/block:Source}
  997. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  998. </div>
  999. {/block:Quote}
  1000.  
  1001. <!-- /* LINK POST */ -->
  1002. {block:Link}<div class="linkpost {TagsAsClasses}">
  1003. <a href="{URL}"><div id="linkpost-titly"><div class="linkpost-title">{Name}</div>{block:Thumbnail}<img src="{Thumbnail}" class="linkpost-img">{/block:Thumbnail}</div></a>
  1004. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  1005. </div>
  1006. {/block:Link}
  1007.  
  1008. <!-- /* CHAT POST */ -->
  1009. {block:Chat}<div class="chatpost {TagsAsClasses}">
  1010. {block:Title}<div class="chatpost-title">{Title}</div>{/block:Title}
  1011. <ul>
  1012. {block:Lines}
  1013. <li class="{Alt}">{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>
  1014. {/block:Lines}
  1015. </ul>
  1016. </div>
  1017. {/block:Chat}
  1018.  
  1019. <!-- /* AUDIO POST */ -->
  1020. {block:Audio}<div class="audiopost {TagsAsClasses}">
  1021. {block:AudioPlayer}<div class="audiopost-player">{AudioPlayer}</div>{/block:AudioPlayer}
  1022. {block:AlbumArt}<div class="audiopost-img"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div id="audiopost-fallbackimg"><img src="{image:fallback albumart}"></div>
  1023. <ul>
  1024. {block:Artist}<li><strong>Artist:</strong> {Artist}</li>{/block:Artist}
  1025. {block:Album}<li><strong>Album:</strong> {Album}</li>{/block:Album}
  1026. {block:TrackName}<li><strong>Track:</strong> {TrackName}</li>{/block:TrackName}
  1027. </ul>
  1028. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1029. </div>
  1030. {/block:Audio}
  1031.  
  1032. <!-- /* VIDEO POST */ -->
  1033. {block:Video}<div class="videopost {TagsAsClasses}"><div class="videopost-video">
  1034. {block:If500pxPosts}
  1035. {Video-500}
  1036. {/block:If500pxPosts}
  1037. {block:IfNot500pxPosts}
  1038. {Video-400}
  1039. {/block:IfNot500pxPosts}
  1040. </div>
  1041. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1042. </div>
  1043. {/block:Video}
  1044.  
  1045. <!-- /* ANSWER POST */ -->
  1046.  
  1047. {block:Answer}
  1048. <div class="answerpost {TagsAsClasses}">
  1049. <div class="answerpost-1">
  1050. <img class="answerpost-askerimg" src="{AskerPortraitURL-96}" alt=""><div class="answerpost-question"><div class="answerpost-asker">{Asker}:</div>{Question}</div>
  1051. <div class="answerpost-2">
  1052. {block:Answerer}
  1053. <div class="answerpost-answer"><div class="answerpost-answerer">{Answerer}:</div>{Answer}</div>
  1054. {/block:Answerer}
  1055. <div class="caption">
  1056. {Replies}
  1057. </div>
  1058. </div>
  1059. </div>
  1060. </div>
  1061. {/block:Answer}
  1062.  
  1063.  
  1064. </div> <!-- post div -->
  1065. <!-- /* PERM */ -->
  1066. <div id="permbox">
  1067. <div id="timeago-box" class="permbox-box"><a href="{Permalink}">{TimeAgo}</a></div>
  1068. {block:NoteCount}<div id="notecount-box" class="permbox-box"><a href="{Permalink}">{NoteCount} NOTES</a></div>{/block:NoteCount}
  1069. {block:RebloggedFrom}<div id="reblogged-box" class="permbox-box"><a href="{ReblogParentURL}">VIA</a></div>{/block:RebloggedFrom}
  1070. {block:ContentSource}<div id="source-box" class="permbox-box"><a href="{SourceURL}">&#169;</a></div>{/block:ContentSource}
  1071.  
  1072. <div id="reblogbutton" class="permbox-box">{ReblogButton color="white" size="13"}</div>
  1073. <div id="likebutton" class="permbox-box">{LikeButton color="white" size="13"}</div>
  1074.  
  1075.  
  1076. </div>
  1077.  
  1078. <!-- /* TAGS */ -->
  1079. {block:IndexPage}
  1080. {block:HasTags}<div id="tags" class="{select:Index tags}">
  1081. {block:Tags}
  1082. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;|&nbsp; </span>
  1083. {/block:Tags}
  1084. </div>
  1085. {/block:HasTags}
  1086. {/block:IndexPage}
  1087.  
  1088. {block:PermalinkPage}
  1089. {block:HasTags}<div id="tags" class="{select:Perma tags}">
  1090. {block:Tags}
  1091. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;|&nbsp; </span>
  1092. {/block:Tags}
  1093. </div>
  1094. {/block:HasTags}
  1095. {/block:PermalinkPage}
  1096. </div>
  1097. {/block:Posts}
  1098. </div>
  1099.  
  1100. <!-- /* POST NOTES */ -->
  1101. {block:PostNotes}
  1102. <div id="notes">
  1103. <ul>
  1104. {PostNotes}
  1105. </ul>
  1106. </div>
  1107. {/block:PostNotes}
  1108. </div> <!-- posts div -->
  1109. </div> <!-- content div -->
  1110.  
  1111. <!-- /* CREDIT: DO NOT REMOVE !!! */ -->
  1112. <a href="http://spirkthemes.tumblr.com"><div id="credit" data-tipped-options="position: 'left'"></div></a>
  1113.  
  1114.  
  1115.  
  1116. </body>
  1117. </html>
Advertisement
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!