API tools faq
paste
spirkism

Theme #24: Bits & Pieces

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