API tools faq
paste
spirkism

Theme #28: Fire & Ice

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