spirkism

Theme #2: john kennex

Mar 1st, 2014
1,332
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.71 KB | None | 0 0
  1. <!--
  2.  
  3. ----------------------------THEME #2: JOHN KENNEX----------------------------
  4. ------------------------by Phi (spirkthemes/spirkism)------------------------
  5.  
  6. --Version 2.1
  7.  
  8. --REVAMPED 2017/07/30:
  9. - completely remade the theme from scratch but kept the general layout!
  10.  
  11. -----------------------------------RULES:------------------------------------
  12. - do not steal/redistribute
  13. - don't (re)move the credit
  14. - don't use as a base code, there are plenty of those out there & don't take snippets
  15. - you are allowed to edit as much as you like for your own personal use
  16. - don't hesitate to contact me if you find a bug or need otherwise help
  17. ------------------------------------------------------------------------------
  18.  
  19. -->
  20.  
  21. <!DOCTYPE html>
  22. <head>
  23.  
  24. <title>{Title}</title>
  25.  
  26. <!-- /* LINKS */ -->
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  30. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/h5czl1a/aTqnk4mjj/tooltipstuff.css"/>
  31.  
  32.  
  33.  
  34.  
  35. <!-- /* META TAGS */ -->
  36. <meta name="color:background" content="#f7f7f7" />
  37. <meta name="color:primary" content="#ffffff" />
  38. <meta name="color:accent" content="#5593c5" />
  39. <meta name="color:text" content="#8c8c8c" />
  40. <meta name="color:links" content="#5593c5" />
  41. <meta name="color:links hover" content="#8acbff" />
  42. <meta name="color:border" content="#cacaca" />
  43.  
  44.  
  45. <meta name="text:link 1 url" content="/" />
  46. <meta name="text:link 1 text" content="home" />
  47. <meta name="text:link 2 url" content="/ask" />
  48. <meta name="text:link 2 text" content="message" />
  49. <meta name="text:link 3 url" content="/archive" />
  50. <meta name="text:link 3 text" content="archive" />
  51. <meta name="text:link 4 url" content="/" />
  52. <meta name="text:link 4 text" content="link 4" />
  53. <meta name="text:link 5 url" content="/" />
  54. <meta name="text:link 5 text" content="link 5" />
  55. <meta name="text:link 6 url" content="/" />
  56. <meta name="text:link 6 text" content="link 6" />
  57.  
  58. <meta name="image:background" content="" />
  59. <meta name="image:sidebar" content="" />
  60. <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
  61. <meta name="font:Special" content="Arial, Helvetica, sans-serif"/>
  62.  
  63. <meta name="if:double border" content="1" />
  64. <meta name="if:searchbar" content="1" />
  65. <meta name="if:scroll to top" content="1" />
  66. <meta name="if:infinite scroll" content="0" />
  67.  
  68.  
  69. <meta name="select:post size" content="500px" title="500px">
  70. <meta name="select:post size" content="400px" title="400px">
  71. <meta name="select:post size" content="250px" title="250px">
  72.  
  73.  
  74. <meta name="select:Index tags" content="fixed-tags" title="visible tags" />
  75. <meta name="select:Index tags" content="hover-tags" title="tags on hover" />
  76. <meta name="select:Index tags" content="no-tags" title="no tags" />
  77.  
  78. <meta name="select:Perma tags" content="fixed-tags" title="visible tags" />
  79. <meta name="select:Perma tags" content="no-tags" title="no tags" />
  80. <meta name="select:Perma tags" content="hover-tags" title="tags on hover" />
  81.  
  82.  
  83.  
  84. <style type="text/css">
  85.  
  86.  
  87. /* ----------- GENERAL ---------- */
  88.  
  89. ::-webkit-scrollbar-thumb {
  90. background-color: RGBA({RGBcolor:accent},0.5);
  91. height:auto;
  92. width: 5px;
  93. z-index: 9999999999999999999999999999999999999;
  94. }
  95.  
  96. ::-webkit-scrollbar {
  97. height:auto;
  98. width:5px;
  99. background-color:{color:primary};
  100. z-index: 999999999999999999999999999999999999;
  101. }
  102.  
  103.  
  104. div#qTip {
  105. font-size: 11px;
  106. font: 0.8em {font:body};
  107. line-height: 11px;
  108. display: none;
  109. text-align: center;
  110. position: absolute;
  111. z-index: 999999999999999999999999999999999999999999999999999999;
  112. background-color: {color:accent};
  113. padding: 3px 7px;
  114. color: {color:primary};
  115. max-width: 200px;
  116. height: auto;
  117. border: 1px solid {color:background};
  118. -webkit-transition: all 0.1s ease-out;
  119. -moz-transition: all 0.1s ease-out;
  120. -o-transition: all 0.1s ease-out;
  121. }
  122.  
  123. body {
  124. word-wrap:break-word;
  125. margin: 0;
  126. background-image: url('{image:background}');
  127. background-attachment: fixed;
  128. background-size: 100% auto;
  129. background-color: {color:background};
  130. font: 11px {font:body};
  131. color: {color:text};
  132. }
  133.  
  134. img {
  135. max-width: 100%;
  136. }
  137.  
  138. a {
  139. text-decoration: none;
  140. color: {color:links};
  141. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  142. -o-transition: 0.5s ease;
  143. -moz-transition: 0.5s ease;
  144. }
  145.  
  146. a:hover {
  147. text-decoration: none;
  148. color: {color:links hover};
  149. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  150. -o-transition: 0.5s ease;
  151. -moz-transition: 0.5s ease;
  152. }
  153.  
  154. blockquote {
  155. border-left: solid 2px {color:background};
  156. padding-left: 10px;
  157. max-width: 100%;
  158. }
  159.  
  160.  
  161. /* ---------------------HEADER--------------------- */
  162.  
  163.  
  164.  
  165.  
  166.  
  167. /* ---------------------SIDEBAR--------------------- */
  168.  
  169. #sidebar {
  170. position: fixed;
  171. top: 180px;
  172. left: 100px;
  173. }
  174.  
  175. #title {
  176. position: relative;
  177. font: 1.3em {font:special};
  178. margin-bottom: 5px;
  179. max-width: 220px;
  180. text-align: left;
  181. }
  182.  
  183. #sb-inside {
  184. position: relative;
  185. height: 120px;
  186. }
  187.  
  188. #desc {
  189. position: absolute;
  190. width: 124px;
  191. height: 99px;
  192. overflow-y: auto;
  193. {block:IfDoubleBorder}
  194. border: 3px double {color:border};
  195. {/block:IfDoubleBorder}
  196. {block:IfNotDoubleBorder}
  197. border: 3px solid {color:border};
  198. {/block:IfNotDoubleBorder}
  199. padding: 8px;
  200. display: inline-block;
  201. font-size: 0.9em;
  202. }
  203.  
  204.  
  205. #sb-block {
  206. position: absolute;
  207. display: inline-block;
  208. margin-left: 150px;
  209. }
  210.  
  211.  
  212. #sb-links-1 {
  213. position: absolute;
  214. margin-left: 5px;
  215. }
  216.  
  217. #sb-links-2 {
  218. position: absolute;
  219. margin-left: 145px;
  220. margin-top: 80px;
  221. }
  222.  
  223.  
  224. .sb-link {
  225. width: 10px;
  226. height: 10px;
  227. background-color: {color:accent};
  228. margin-bottom: 5px;
  229. }
  230.  
  231. #sb-img {
  232. height: 100px;
  233. width: 100px;
  234. position: absolute;
  235. margin-left: 20px;
  236. margin-top: 10px;
  237. overflow:hidden;
  238. }
  239.  
  240.  
  241. .borders {
  242. position: absolute;
  243. width: 100px;
  244. margin-left: 10px;
  245. }
  246.  
  247. .borders:before {
  248. display: block;
  249. content: "";
  250. width: 50px;
  251. height: 50px;
  252. position: absolute;
  253. left: 10px;
  254. {block:IfDoubleBorder}
  255. border-top: 3px double {color:border};
  256. {/block:IfDoubleBorder}
  257. {block:IfNotDoubleBorder}
  258. border-top: 3px solid {color:border};
  259. {/block:IfNotDoubleBorder}
  260. {block:IfDoubleBorder}
  261. border-left: 3px double {color:border};
  262. {/block:IfDoubleBorder}
  263. {block:IfNotDoubleBorder}
  264. border-left: 3px solid {color:border};
  265. {/block:IfNotDoubleBorder}
  266. }
  267.  
  268.  
  269.  
  270. .borders span:after {
  271. display: block;
  272. content: "";
  273. width: 50px;
  274. height: 50px;
  275. position: absolute;
  276. margin-top: 68px;
  277. margin-left: 77px;
  278. {block:IfDoubleBorder}
  279. border-bottom: 3px double {color:border};
  280. {/block:IfDoubleBorder}
  281. {block:IfNotDoubleBorder}
  282. border-bottom: 3px solid {color:border};
  283. {/block:IfNotDoubleBorder}
  284. {block:IfDoubleBorder}
  285. border-right: 3px double {color:border};
  286. {/block:IfDoubleBorder}
  287. {block:IfNotDoubleBorder}
  288. border-right: 3px solid {color:border};
  289. {/block:IfNotDoubleBorder}
  290. }
  291.  
  292.  
  293. #pagination {
  294. position: relative;
  295. margin-top: 5px;
  296. {block:IfSearchbar}
  297. margin-left: 40px;
  298. {/block:IfSearchbar}
  299. {block:IfNotSearchbar}
  300. margin-left: 190px;
  301. {/block:IfNotSearchbar}
  302. width: 100px;
  303. text-align: right;
  304. font: 1em {font:body};
  305. display: inline-block;
  306. }
  307.  
  308.  
  309. /* ------- SEARCHBAR -------- */
  310.  
  311. #searchbar {
  312. position: relative;
  313. display: inline-block;
  314. margin-top: 10px;
  315. opacity: 0.7;
  316. }
  317.  
  318. #searchform input {
  319. border: 0px;
  320. padding: 5px;
  321. text-transform: uppercase;
  322. margin-top: 0px;
  323. letter-spacing: 1px;
  324. font-size: 0.8em;
  325. color: #A2A2A2;
  326. border-radius: 3px;
  327. }
  328.  
  329. #searchinput {
  330. background-color: {color:primary};
  331. border-radius: 3px;
  332. display: inline-block;
  333. width: 110px;
  334. }
  335.  
  336. #searchbutton {
  337. vertical-align: bottom;
  338. height: 10px;
  339. background-color: {color:primary};
  340. border-radius: 3px;
  341. display: inline-block;
  342. }
  343.  
  344.  
  345. #searchform input:focus {
  346. outline: none;
  347. }
  348.  
  349.  
  350.  
  351.  
  352. /* ---------------- TUMBLR CONTROLS ----------------- */
  353.  
  354. .tmblr-iframe {
  355. position: fixed;
  356. margin-top: 0px;
  357. -webkit-filter: invert(100%);
  358. filter: invert(100%);
  359. border: none;
  360. opacity: 0.2;
  361. z-index: 999;
  362. }
  363.  
  364.  
  365.  
  366. /* ---------------- LIGHTBOX ----------------- */
  367.  
  368.  
  369. .tmblr-lightbox {
  370. background-color: RGBA({RGBcolor:primary}, 0.7) !important;
  371. }
  372.  
  373.  
  374. .tmblr-lightbox .vignette {
  375. opacity:0; !important;
  376. }
  377.  
  378.  
  379. .tmblr-lightbox .lightbox-image {
  380. box-shadow: none !important;
  381. border-radius: 0px !important;
  382. overflow:hidden !important;
  383. border:15px solid RGBA({RGBcolor:accent}, 0.3) !important;
  384. }
  385.  
  386. .tmblr-lightbox .lightbox-image img {
  387. border-radius: 0px !important;
  388. overflow:hidden !important;
  389. }
  390.  
  391. .tmblr-lightbox .lightbox-image-container {
  392.  
  393. }
  394.  
  395. .tmblr-lightbox .lightbox-caption {
  396. display: none;
  397. }
  398.  
  399.  
  400.  
  401.  
  402. /* ---------------------------------------- */
  403. /* ------------ POSTS & CONTENT ----------- */
  404. /* ---------------------------------------- */
  405.  
  406.  
  407.  
  408. #content {
  409. position: relative;
  410. width: {select:post size};
  411. margin-left: 500px;
  412. }
  413.  
  414.  
  415. #posts {
  416. margin-top: 70px;
  417. }
  418.  
  419. #post {
  420. background-color: {color:primary};
  421. width: {select:post size};
  422. padding: 10px;
  423. {block:IfDoubleBorder}
  424. border: 3px double {color:border};
  425. {/block:IfDoubleBorder}
  426. {block:IfNotDoubleBorder}
  427. border: 3px solid {color:border};
  428. {/block:IfNotDoubleBorder}
  429. }
  430.  
  431. .posty {
  432. width: {select:post size};
  433. margin-bottom: 70px;
  434. }
  435.  
  436.  
  437.  
  438.  
  439. .caption blockquote {
  440. margin-left: 5px;
  441. margin-right: 0px;
  442. max-width: 100%;
  443. }
  444.  
  445. .caption img {
  446. height: 100%;
  447. width: auto;
  448. }
  449.  
  450.  
  451. .caption {
  452. padding: 15px;
  453. }
  454.  
  455. .caption:empty {
  456. display: none;
  457. }
  458.  
  459.  
  460. .tumblr_blog {
  461. font: 1em {font:special};
  462. }
  463.  
  464. /*------------------------TEXT POST----------------------- */
  465.  
  466.  
  467.  
  468. .textpost {
  469.  
  470. }
  471.  
  472. .textpost-title {
  473. text-align: center;
  474. font: 1.2em {font:special};
  475. padding: 5px;
  476. {block:IfDoubleBorder}
  477. border-bottom: 2px double {color:border};
  478. {/block:IfDoubleBorder}
  479. {block:IfNotDoubleBorder}
  480. border-bottom: 2px solid {color:border};
  481. {/block:IfNotDoubleBorder}
  482. }
  483.  
  484. .textpost-t {
  485. margin-bottom: 10px;
  486. text-align: center;
  487. font: 1.2em {font:special};
  488. padding: 5px;
  489. {block:IfDoubleBorder}
  490. border-bottom: 2px double {color:border};
  491. {/block:IfDoubleBorder}
  492. {block:IfNotDoubleBorder}
  493. border-bottom: 2px solid {color:border};
  494. {/block:IfNotDoubleBorder}
  495. }
  496.  
  497. .textpost-content {
  498. padding: 7px 5px;
  499. {block:IfDoubleBorder}
  500. border-bottom: 2px double {color:border};
  501. {/block:IfDoubleBorder}
  502. {block:IfNotDoubleBorder}
  503. border-bottom: 2px solid {color:border};
  504. {/block:IfNotDoubleBorder}
  505. }
  506.  
  507. .textpost-content:last-of-type {
  508. border-bottom: none;
  509. padding-bottom: 0px;
  510. }
  511.  
  512. .textpost-user {
  513. font: 1em {font:special};
  514. }
  515.  
  516. .textpost-text {
  517.  
  518. }
  519.  
  520. .textpost-text blockquote {
  521. border-left: solid 2px {color:border};
  522. padding-left: 10px;
  523. max-width: 100%;
  524. }
  525.  
  526.  
  527. .textpost blockquote {
  528. margin-left: 5px;
  529. margin-right: 0px;
  530. max-width: 100%;
  531. }
  532.  
  533. .textpost img {
  534. height: 100%;
  535. width: auto;
  536. }
  537.  
  538. .textpost-text-page {
  539.  
  540. }
  541.  
  542. .textpost-text-page-no {
  543. display: none;
  544. }
  545.  
  546.  
  547.  
  548.  
  549. /*------------------------PHOTO POST----------------------- */
  550.  
  551. .photopost .caption {
  552. padding: 0px;
  553. }
  554.  
  555. .panoramapost .caption {
  556. padding: 0px;
  557. }
  558.  
  559. .photosetpost .caption {
  560. padding: 0px;
  561. }
  562.  
  563.  
  564. /*------------------------QUOTE POST----------------------- */
  565.  
  566. .quotepost {
  567. padding: 5px;
  568. }
  569.  
  570. .quotepost-quote {
  571. font:1em {font:special};
  572. }
  573.  
  574. .quotepost-source {
  575. {block:IfDoubleBorder}
  576. border-top: 2px double {color:border};
  577. {/block:IfDoubleBorder}
  578. {block:IfNotDoubleBorder}
  579. border-top: 2px solid {color:border};
  580. {/block:IfNotDoubleBorder}
  581. padding-top: 5px;
  582. margin-top: 15px;
  583. text-align: right;
  584. font-size: 0.9em;
  585. }
  586.  
  587. /*------------------------LINK POST----------------------- */
  588.  
  589. .linkpost {
  590.  
  591. }
  592.  
  593. .linkpost blockquote {
  594.  
  595. }
  596.  
  597. .linkpost-title {
  598. text-align: center;
  599. font: 1.2em {font:special};
  600. padding: 5px;
  601. {block:IfDoubleBorder}
  602. border-bottom: 2px double {color:border};
  603. {/block:IfDoubleBorder}
  604. {block:IfNotDoubleBorder}
  605. border-bottom: 2px solid {color:border};
  606. {/block:IfNotDoubleBorder}
  607. color: {color:link};
  608. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  609. -o-transition: 0.5s ease;
  610. -moz-transition: 0.5s ease;
  611. }
  612.  
  613. .linkpost-title:hover{
  614. background-color: {color:background};
  615. color: {color:link};
  616. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  617. -o-transition: 0.5s ease;
  618. -moz-transition: 0.5s ease;
  619. }
  620.  
  621.  
  622. .linkpost .caption {
  623. padding: 0px 5px;
  624. }
  625.  
  626. .linkpost-img {
  627.  
  628. }
  629.  
  630.  
  631. /*------------------------CHAT POST----------------------- */
  632.  
  633. .chatpost {
  634.  
  635. }
  636.  
  637. .chatpost-title {
  638. text-align: center;
  639. font: 1.2em {font:special};
  640. padding: 5px;
  641. {block:IfDoubleBorder}
  642. border-bottom: 2px double {color:border};
  643. {/block:IfDoubleBorder}
  644. {block:IfNotDoubleBorder}
  645. border-bottom: 2px solid {color:border};
  646. {/block:IfNotDoubleBorder}
  647. }
  648.  
  649. .chatpost ul {
  650. list-style-type:none;
  651. }
  652.  
  653. .chatpost ul li {
  654. padding: 0px 10px 0px 0px;
  655. margin-left: -30px;
  656. margin-bottom: 3px;
  657. }
  658.  
  659. .chatpost ul li:last-child {
  660.  
  661. }
  662.  
  663. .chatpost ul .odd {
  664.  
  665. }
  666.  
  667. .chatpost ul .even {
  668.  
  669. }
  670.  
  671. /*------------------------AUDIO POST----------------------- */
  672.  
  673. .audiopost {
  674. padding: 5px;
  675. }
  676.  
  677. .audiopost-button {
  678. position: absolute;
  679. width: 43px;
  680. height: 43px;
  681. background-color: RGBA({RGBcolor:primary}, 0.7);
  682. z-index: 3;
  683. margin-top: 20px;
  684. margin-left: 20px;
  685. }
  686.  
  687. .audiopost-player {
  688. position: absolute;
  689. z-index: 4;
  690. height: 30px;
  691. width: 30px;
  692. overflow:hidden;
  693. opacity: 0.2;
  694. margin-top: 5px;
  695. margin-left: 5px;
  696. }
  697.  
  698.  
  699. .audiopost-img {
  700. position: absolute;
  701. width: 80px;
  702. height: 80px;
  703. {block:IfDoubleBorder}
  704. border: 2px double {color:border};
  705. {/block:IfDoubleBorder}
  706. {block:IfNotDoubleBorder}
  707. border: 2px solid {color:border};
  708. {/block:IfNotDoubleBorder}
  709. z-index: 2;
  710. }
  711.  
  712.  
  713.  
  714. .audiopost-fallbackimg {
  715. position: absolute;
  716. width: 80px;
  717. height: 80px;
  718. {block:IfDoubleBorder}
  719. border: 2px double {color:border};
  720. {/block:IfDoubleBorder}
  721. {block:IfNotDoubleBorder}
  722. border: 2px solid {color:border};
  723. {/block:IfNotDoubleBorder}
  724. z-index: 1;
  725. }
  726.  
  727.  
  728.  
  729.  
  730. .audiopost ul {
  731. list-style-type: none;
  732. background-color: {color:background};
  733. padding: 10px;
  734. width: calc({select:post size} - 120px);
  735. margin-left: 90px;
  736. {block:IfDoubleBorder}
  737. border-bottom: 2px double {color:border};
  738. {/block:IfDoubleBorder}
  739. {block:IfNotDoubleBorder}
  740. border-bottom: 2px solid {color:border};
  741. {/block:IfNotDoubleBorder}
  742. margin-top: 0px;
  743. min-height: 63px;
  744. }
  745.  
  746. .audiopost ul li {
  747. border-bottom: 0.5px solid {color:border};
  748. margin-bottom: 3px;
  749. padding-bottom: 3px;
  750. }
  751.  
  752. .audiopost .caption {
  753. padding: 0px;
  754. }
  755.  
  756.  
  757. /*------------------------VIDEO POST----------------------- */
  758.  
  759. .videopost {
  760.  
  761. }
  762.  
  763. .videopost .caption {
  764. padding: 0px;
  765. }
  766.  
  767. .videopost-video {
  768.  
  769. }
  770.  
  771.  
  772. .main-250px .select-400px {
  773. display: none;
  774. }
  775.  
  776. .main-250px .select-500px {
  777. display: none;
  778. }
  779.  
  780. .main-400px .select-500px {
  781. display: none;
  782. }
  783.  
  784. .main-400px .select-250px {
  785. display: none;
  786. }
  787.  
  788. .main-500px .select-250px {
  789. display: none;
  790. }
  791.  
  792. .main-500px .select-400px {
  793. display: none;
  794. }
  795.  
  796. /*------------------------ASK POST----------------------- */
  797.  
  798. .answerpost {
  799. padding: 5px;
  800. }
  801.  
  802. .answerpost .caption {
  803. padding: 0px;
  804. }
  805.  
  806. .answerpost img {
  807. width: 100%;
  808. height: auto;
  809. }
  810.  
  811. .answerpost-asker {
  812.  
  813. }
  814.  
  815.  
  816. .answerpost-askerimg {
  817. width: 50px;
  818. height: 50px;
  819. display: inline-block;
  820. margin-right: 5px;
  821. {block:IfDoubleBorder}
  822. border: 2px double {color:border};
  823. {/block:IfDoubleBorder}
  824. {block:IfNotDoubleBorder}
  825. border: 2px solid {color:border};
  826. {/block:IfNotDoubleBorder}
  827. margin-bottom: 10px;
  828. }
  829.  
  830. .answerpost-askerimg img {
  831.  
  832. }
  833.  
  834.  
  835. .answerpost-question {
  836. display: inline-block;
  837. width: calc({select:post size} - 83px);
  838. vertical-align: top;
  839. background-color: RGBA({RGBcolor:background}, 1);
  840. padding: 5px;
  841. {block:IfDoubleBorder}
  842. border-bottom: 2px double {color:border};
  843. {/block:IfDoubleBorder}
  844. {block:IfNotDoubleBorder}
  845. border-bottom: 2px solid {color:border};
  846. {/block:IfNotDoubleBorder}
  847. margin-bottom: 10px;
  848. }
  849.  
  850.  
  851.  
  852. .answerpost-answererimg {
  853.  
  854. }
  855.  
  856. .answerpost-answerer {
  857. padding-bottom: 5px;
  858. border-bottom: 0.5px solid {color:border};
  859. }
  860.  
  861. .answerpost-answer {
  862. display: inline;
  863. }
  864.  
  865.  
  866. .answerpost-answer-reblog {
  867. background-color: RGBA({RGBcolor:background}, 1);
  868. padding: 5px;
  869. /*
  870. {block:IfDoubleBorder}
  871. border: 2px double {color:border};
  872. {/block:IfDoubleBorder}
  873. {block:IfNotDoubleBorder}
  874. border: 2px solid {color:border};
  875. {/block:IfNotDoubleBorder}
  876. */
  877. }
  878.  
  879.  
  880. /*------------------------PERM----------------------- */
  881.  
  882. #permbox1 {
  883. background-color: {color:primary};
  884. padding: 10px;
  885. {block:IfDoubleBorder}
  886. border: 3px double {color:border};
  887. {/block:IfDoubleBorder}
  888. {block:IfNotDoubleBorder}
  889. border: 3px solid {color:border};
  890. {/block:IfNotDoubleBorder}
  891. {block:IfShadows}
  892. box-shadow: 2px 2px 2px #EAEAEA;
  893. {/block:IfShadows}
  894. margin-top: 5px;
  895. width: {select:post size};
  896. }
  897.  
  898. #permbox1 .permbox-box {
  899.  
  900. }
  901.  
  902.  
  903. #parent-portrait {
  904. display: inline-block;
  905. font-size: 0.9em;
  906. }
  907.  
  908. #root-portrait {
  909. display: inline-block;
  910. font-size: 0.9em;
  911. }
  912.  
  913.  
  914. #reblogbutton:before {
  915. font-family: FontAwesome;
  916. font-size: 1.1em;
  917. content: "\f079";
  918. color: {color:text};
  919. }
  920.  
  921. #timeago-box {
  922. font-size: 0.9em;
  923. }
  924.  
  925.  
  926. #notecount-box {
  927. font-size: 0.9em;
  928. }
  929.  
  930. #reblogbutton {
  931. position: relative;
  932. display: inline-block;
  933. float: right;
  934. margin-top: -13px;
  935. }
  936.  
  937. #like-heart {
  938. position:relative;
  939. display:inline-block;
  940. float:right;
  941. margin-top: -13px;
  942. }
  943.  
  944. #like-heart svg {
  945. width:11px;
  946. height:auto;
  947. display:block;
  948. fill: {color:text};
  949. }
  950.  
  951.  
  952. #like-heart .liked + svg {
  953. opacity:1;
  954. }
  955.  
  956. #like-heart .liked + svg path {
  957. fill:{color:accent};
  958. }
  959.  
  960.  
  961. #like-heart .like_button iframe {
  962. position:absolute;
  963. top:0;
  964. left:0;
  965. bottom:0;
  966. right:0;
  967. z-index:2;
  968. opacity:0;
  969. }
  970.  
  971.  
  972.  
  973.  
  974. /*------------------------TAGS----------------------- */
  975.  
  976.  
  977. .no-tags {
  978. display: none;
  979. }
  980.  
  981. .no-tags .comma:last-child {
  982. display: none;
  983. }
  984.  
  985. .hover-tags {
  986. opacity: 0;
  987. padding: 0px;
  988. height: 0px;
  989. font-size: 0.9em;
  990. text-align: center;
  991. line-height: 0em;
  992. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  993. -o-transition: 0.5s ease;
  994. -moz-transition: 0.5s ease;
  995. }
  996.  
  997. .hover-tags .comma:last-child {
  998.  
  999. }
  1000.  
  1001. .posty:hover .hover-tags {
  1002. opacity: 1;
  1003. line-height: 1em;
  1004. border-top: 1px solid {color:border};
  1005. height: auto;
  1006. margin-top: 5px;
  1007. padding-top: 5px;
  1008. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  1009. -o-transition: 0.5s ease;
  1010. -moz-transition: 0.5s ease;
  1011. }
  1012.  
  1013. .fixed-tags {
  1014. font-size: 0.9em;
  1015. border-top: 1px solid {color:border};
  1016. margin-top: 5px;
  1017. padding-top: 5px;
  1018. text-align: center;
  1019. }
  1020.  
  1021. .fixed-tags .comma:last-child {
  1022. display: none;
  1023. }
  1024.  
  1025.  
  1026. /*------------------------NOTES----------------------- */
  1027.  
  1028. #notes {
  1029. width:calc({select:post size});
  1030. background-color: {color:primary};
  1031. {block:IfDoubleBorder}
  1032. border: 3px double {color:border};
  1033. {/block:IfDoubleBorder}
  1034. {block:IfNotDoubleBorder}
  1035. border: 3px solid {color:border};
  1036. {/block:IfNotDoubleBorder}
  1037. margin-bottom: 50px;
  1038. margin-top: -20px;
  1039. padding: 10px;
  1040. font-size: 0.9em;
  1041. max-height: 500px;
  1042. overflow-y: auto;
  1043. }
  1044.  
  1045. #notes ol {
  1046. list-style-type: none;
  1047. padding: 0px;
  1048. margin-left: -30px;
  1049. }
  1050.  
  1051. #notes ol li {
  1052. margin-bottom: 5px;
  1053. }
  1054.  
  1055. #notes img {
  1056.  
  1057. }
  1058.  
  1059. #notes .avatar {
  1060. width: 20px;
  1061. height: 20px;
  1062. margin-right: 5px;
  1063. vertical-align: middle;
  1064. }
  1065.  
  1066. #notes .action {
  1067.  
  1068. }
  1069.  
  1070. /*------------------------SCROLL TO TOP----------------------- */
  1071.  
  1072. #scroll-button {
  1073. background-color: {color:primary};
  1074. position: fixed;
  1075. right: 5px;
  1076. bottom: 35px;
  1077. width: 25px;
  1078. height: 25px;
  1079. line-height: 25px;
  1080. color:{color:accent};
  1081. text-align: center;
  1082. display: block;
  1083. cursor: help;
  1084. z-index: 99999999999999999999999999999999999999999999999;
  1085. }
  1086.  
  1087. #scroll-button:before {
  1088. content: "\f062";
  1089. font-family: FontAwesome;
  1090. font-size:1.2em;
  1091. }
  1092.  
  1093.  
  1094. /*------------------------CREDIT----------------------- */
  1095.  
  1096. /* -- DO NOT EDIT ANYTHING HERE WITHOUT ASKING ME FIRST -- */
  1097.  
  1098. #credit {
  1099. position: fixed;
  1100. right: 5px;
  1101. bottom: 5px;
  1102. width: 25px;
  1103. height: 25px;
  1104. line-height: 25px;
  1105. background-color: {color:accent};
  1106. color:{color:primary};
  1107. text-align: center;
  1108. z-index: 99999999999999999999999999999999999999999999999;
  1109. }
  1110.  
  1111.  
  1112.  
  1113. #credit:before {
  1114. content: "\f259";
  1115. font-family: FontAwesome;
  1116. font-size:1.2em;
  1117. }
  1118.  
  1119.  
  1120.  
  1121. </style>
  1122. </head>
  1123.  
  1124. <body>
  1125.  
  1126. <!-- /* SIDEBAR, HEADER, ETC. */ -->
  1127.  
  1128. <!-- /* SIDEBAR */ -->
  1129.  
  1130. <div id="sidebar">
  1131.  
  1132. <div id="title"><a href="/">{Title}</a></div>
  1133.  
  1134. <div id="sb-inside">
  1135. <div id="desc">{Description}</div>
  1136.  
  1137. <div id="sb-block">
  1138. <div id="sb-links-1">
  1139. {block:IfLink1Text}<a href="{text:link 1 url}" title="{text:link 1 text}"><div class="sb-link" id="sb-link1"></div></a>{/block:IfLink1Text}
  1140. {block:IfLink2Text}<a href="{text:link 2 url}" title="{text:link 2 text}"><div class="sb-link" id="sb-link2"></div></a>{/block:IfLink2Text}
  1141. {block:IfLink3Text}<a href="{text:link 3 url}" title="{text:link 3 text}"><div class="sb-link" id="sb-link3"></div></a>{/block:IfLink3Text}
  1142. </div>
  1143.  
  1144. <div class="borders">
  1145. <span>
  1146. <div id="sb-img"><img src="{image:sidebar}"></div>
  1147. </span>
  1148. </div>
  1149.  
  1150. <div id="sb-links-2">
  1151. {block:IfLink4Text}<a href="{text:link 4 url}" title="{text:link 4 text}"><div class="sb-link" id="sb-link4"></div></a>{/block:IfLink4Text}
  1152. {block:IfLink5Text}<a href="{text:link 5 url}" title="{text:link 5 text}"><div class="sb-link" id="sb-link5"></div></a>{/block:IfLink5Text}
  1153. {block:IfLink6Text}<a href="{text:link 6 url}" title="{text:link 6 text}"><div class="sb-link" id="sb-link6"></div></a>{/block:IfLink6Text}
  1154. </div>
  1155.  
  1156. </div> <!--sb-block-->
  1157. </div> <!--sb-inside-->
  1158.  
  1159. {block:IfSearchbar}
  1160. <div id="searchbar">
  1161. <form action="/search" method="get" id=searchform>
  1162. <input type="text" name="q" value="{SearchQuery}" id="searchinput"/>
  1163. <input type="image" value="search" src="http://static.tumblr.com/h5czl1a/b6qom9fvn/search-icon-png-21.png" id="searchbutton"/>
  1164. </form></div>
  1165. {/block:IfSearchbar}
  1166.  
  1167.  
  1168. {block:IfNotInfiniteScroll}
  1169. {block:Pagination}
  1170. <div id="pagination">
  1171. {block:PreviousPage}
  1172. <a href="{PreviousPage}">&#8612;</a>
  1173. {/block:PreviousPage}
  1174.  
  1175. {block:JumpPagination length="5"}
  1176. {block:CurrentPage}
  1177. <span class="current_page"><u>{PageNumber}</u></span>
  1178. {/block:CurrentPage}
  1179.  
  1180. {block:JumpPage}
  1181. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1182. {/block:JumpPage}
  1183. {/block:JumpPagination}
  1184.  
  1185. {block:NextPage}
  1186. <a href="{NextPage}">&#8614;</a>
  1187. {/block:NextPage}
  1188. </div>
  1189. {/block:Pagination}
  1190. {/block:IfNotInfiniteScroll}
  1191.  
  1192. </div> <!--sidebar-->
  1193.  
  1194.  
  1195.  
  1196. <!-- /* POSTS */ DON'T CHANGE ANYTHING HERE PLEASE (or you might heck it) -->
  1197.  
  1198. <div id="content">
  1199. <div id="posts">
  1200. {block:Posts}
  1201. <div class="posty">
  1202.  
  1203. <div id="post" class="{select:post size}">
  1204.  
  1205. <!-- {block:NoRebloggedFrom}
  1206. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1207. {/block:NoRebloggedFrom} -->
  1208.  
  1209. {block:ContentSource}<!-- {SourceURL}
  1210. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1211. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1212. {/block:ContentSource}
  1213.  
  1214.  
  1215.  
  1216. <!-- /* TEXT POST */ -->
  1217. {block:Text}<div class="textpost">
  1218. {block:Title}<div class="textpost-t{block:Date}itle{/block:Date}">{Title}</div>{/block:Title}
  1219. <div class="textpost-text-page{block:Date}-no{/block:Date}">
  1220. {Body}
  1221. </div>
  1222. {block:Date}
  1223. {block:NotReblog}
  1224. <div class="textpost-content">
  1225. {Body}
  1226. </div>
  1227. {/block:NotReblog}
  1228. {block:Reblogs}
  1229. <div class="textpost-content">
  1230. <div class="textpost-user">
  1231. <a href="{Permalink}">{Username}</a>:
  1232. </div>
  1233. <div class="textpost-text">
  1234. <blockquote>{Body}</blockquote>
  1235. </div>
  1236. </div>
  1237. {/block:Reblogs}
  1238. {/block:Date}
  1239. </div>
  1240. {/block:Text}
  1241.  
  1242. <!-- /* PHOTO POST */ -->
  1243. {block:Photo}<div class="photopost">
  1244. {LinkOpenTag}
  1245. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1246. {LinkCloseTag}
  1247. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1248. </div>
  1249. {/block:Photo}
  1250.  
  1251. <!-- /* PANORAMA POST */ -->
  1252. {block:Panorama}<div class="panoramapost">
  1253. {LinkOpenTag}
  1254. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  1255. {LinkCloseTag}
  1256. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1257. </div>
  1258. {/block:Panorama}
  1259.  
  1260. <!-- /* PHOTOSET POST */ -->
  1261. {block:Photoset}<div class="photosetpost">
  1262. {Photoset}
  1263. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1264. </div>
  1265. {/block:Photoset}
  1266.  
  1267. <!-- /* QUOTE POST */ -->
  1268. {block:Quote}<div class="quotepost">
  1269. <div class="quotepost-quote">{Quote}</div>
  1270. {block:Source}<div class="quotepost-source">{Source}</div>{/block:Source}
  1271. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1272. </div>
  1273. {/block:Quote}
  1274.  
  1275. <!-- /* LINK POST */ -->
  1276. {block:Link}<div class="linkpost">
  1277. <a href="{URL}"><div class="linkpost-title">{Name}</div></a>
  1278. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  1279. </div>
  1280. {/block:Link}
  1281.  
  1282.  
  1283. <!-- /* CHAT POST */ -->
  1284. {block:Chat}<div class="chatpost">
  1285. {block:Title}<div class="chatpost-title">{Title}</div>{/block:Title}
  1286. <ul>
  1287. {block:Lines}
  1288. <li class="{Alt}">{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>
  1289. {/block:Lines}
  1290. </ul>
  1291. </div>
  1292. {/block:Chat}
  1293.  
  1294.  
  1295. <!-- /* AUDIO POST */ -->
  1296. {block:Audio}<div class="audiopost">
  1297. {block:AlbumArt}
  1298. <div class="audiopost-img"><img src="{AlbumArtURL}"></div>
  1299. {/block:AlbumArt}
  1300. <div class="audiopost-fallbackimg"><img src="{image:sidebar}"></div>
  1301. {block:AudioPlayer}
  1302. <div class="audiopost-button">
  1303. <div class="audiopost-player">{AudioPlayer}</div>
  1304. </div>
  1305. {/block:AudioPlayer}
  1306. <ul>
  1307. {block:TrackName}<li><strong>Track:</strong> {TrackName}</li>{/block:TrackName}
  1308. {block:Artist}<li><strong>Artist:</strong> {Artist}</li>{/block:Artist}
  1309. {block:Album}<li><strong>Album:</strong> {Album}</li>{/block:Album}
  1310. </ul>
  1311. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1312. </div>
  1313. {/block:Audio}
  1314.  
  1315.  
  1316. <!-- /* VIDEO POST */ -->
  1317. {block:Video}<div class="videopost"><div class="main-{select:post size}">
  1318. <div class="select-500px">{Video-500}</div>
  1319. <div class="select-400px">{Video-400}</div>
  1320. <div class="select-250px">{Video-250}</div>
  1321. </div>
  1322. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1323. </div>
  1324. {/block:Video}
  1325.  
  1326. <!-- /* ASK POST */ -->
  1327.  
  1328. {block:Answer}
  1329. <div class="answerpost">
  1330. <div class="answerpost-askerimg"><img src="{AskerPortraitURL-64}"></div>
  1331. <div class="answerpost-question">
  1332. <div class="answerpost-asker"><strong>{Asker}</strong> asked:</div>
  1333. {Question}</div>
  1334. {block:Answerer}
  1335. <div class="answerpost-answer-reblog"><div class="answerpost-answerer"><strong>{Answerer}</strong> answered: </div>{Answer}</div>
  1336. {/block:Answerer}
  1337. {block:NotReblog}
  1338. <div class="answerpost-answer">{Replies}</div>
  1339. {/block:NotReblog}
  1340. {block:RebloggedFrom}<div class="caption">{Replies}</div>
  1341. {/block:RebloggedFrom}
  1342. </div>
  1343. {/block:Answer}
  1344.  
  1345.  
  1346.  
  1347.  
  1348. </div> <!--post -->
  1349.  
  1350. <!-- /* PERM */ -->
  1351. {block:Date}
  1352. <div id="permbox1">
  1353.  
  1354. <div id="timeago-box" class="permbox-box"><a href="{Permalink}" id="time-link">{TimeAgo}{block:NoteCount} with {NoteCount} notes{/block:NoteCount}</a></div>
  1355. {block:RebloggedFrom}
  1356. <div id="parent-portrait" class="permbox-box"><a href="{ReblogParentURL}">via: {ReblogParentName}</a> | </div>
  1357. <div id="root-portrait" class="permbox-box"><a href="{ReblogRootURL}">
  1358. source: {ReblogRootName}</a></div>
  1359. {/block:RebloggedFrom}
  1360. {block:NotReblog}
  1361. <div id="root-portrait" class="permbox-box"><a href="{PermaLink}">source: {Name}</a></div>
  1362. {/block:NotReblog}
  1363. <a href="{ReblogUrl}" target="_blank"><div id="reblogbutton" class="permbox-box"></div></a>
  1364. {block:IfNotInfiniteScroll}
  1365. <div id="likebutton" class="permbox-box">
  1366. <div id="like-heart">{LikeButton}
  1367. <svg viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path></svg>
  1368. </div>
  1369. </div>
  1370. {/block:IfNotInfiniteScroll}
  1371.  
  1372.  
  1373.  
  1374. <!--
  1375. {block:RebloggedFrom}<div id="reblogged-box" class="permbox-box"><a href="{ReblogParentURL}">VIA</a></div>{/block:RebloggedFrom} -->
  1376.  
  1377. <!--<a href="{ReblogURL}" title="reblog" target="_blank"><div id="reblog" class="permbox-box">REBLOG</div></a>-->
  1378.  
  1379. <!-- /* TAGS */ -->
  1380. {block:IndexPage}
  1381. {block:HasTags}<div class="{select:index tags}">
  1382. {block:Tags}
  1383. <a href="{TagURL}" class="tag">{Tag}</a><span class="comma">, </span>
  1384. {/block:Tags}
  1385. </div>
  1386. {/block:HasTags}
  1387. {/block:IndexPage}
  1388.  
  1389. {block:PermalinkPage}
  1390. {block:HasTags}<div class="{select:perma tags}">
  1391. {block:Tags}
  1392. <a href="{TagURL}" class="tag">{Tag}</a><span class="comma">, </span>
  1393. {/block:Tags}
  1394. </div>
  1395. {/block:HasTags}
  1396. {/block:PermalinkPage}
  1397.  
  1398. </div> <!--id="permbox1"-->
  1399. {/block:Date}
  1400.  
  1401.  
  1402.  
  1403. </div> <!-- posty div -->
  1404.  
  1405.  
  1406.  
  1407. {/block:Posts}
  1408.  
  1409.  
  1410.  
  1411.  
  1412.  
  1413. <!-- /* POST NOTES */ -->
  1414. {block:PostNotes}
  1415. <div id="notes">
  1416. <ul>
  1417. {PostNotes-64}
  1418. </ul>
  1419. </div>
  1420. {/block:PostNotes}
  1421. </div> <!-- posts div -->
  1422. </div> <!-- content div -->
  1423.  
  1424. <!-- scroll to top button -->
  1425.  
  1426. {block:IfScrollToTop}
  1427. <div id="scroll-button"></div>
  1428. {/block:IfScrollToTop}
  1429.  
  1430.  
  1431. <!-- /* CREDIT: DO NOT REMOVE !!! */ -->
  1432.  
  1433. <a href="http://spirkthemes.tumblr.com"><div id="credit" data-tipped-options="position: 'left'"></div></a>
  1434.  
  1435.  
  1436. <!-- /* SCRIPTS */ -->
  1437.  
  1438. <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  1439. <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  1440. <script src="http://static.tumblr.com/h5czl1a/ACynk4kjd/tipped.js"></script>
  1441.  
  1442. <script type="text/javascript">
  1443.  
  1444.  
  1445. {block:IfScrollToTop}
  1446. $(document).ready(function(){
  1447. var scrollButton = $("#scroll-button");
  1448. scrollButton.click(function(){
  1449. $("html, body").animate({scrollTop:0},1000)});
  1450. $(window).scroll(function(){
  1451. if($(window).scrollTop()<=0){
  1452. scrollButton.fadeOut(100)
  1453. }
  1454. else{scrollButton.fadeIn(100)
  1455. }
  1456. });
  1457. });
  1458. {/block:IfScrollToTop}
  1459.  
  1460. </script>
  1461.  
  1462.  
  1463. {block:IfInfiniteScroll}
  1464. <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>
  1465. {block:IfInfiniteScroll}
  1466.  
  1467.  
  1468. <script type='text/javascript'>
  1469. $(document).ready(function() {
  1470. Tipped.create('#credit','theme credit');
  1471. });
  1472. </script>
  1473.  
  1474. <script>
  1475. (function($){
  1476. $(document).ready(function(){
  1477. $("[title]").style_my_tooltips({
  1478. tip_follows_cursor:true,
  1479. tip_delay_time:200,
  1480. tip_fade_speed:300
  1481. }
  1482. );
  1483. });
  1484. })(jQuery);
  1485. </script>
  1486.  
  1487. </body>
  1488. </html>
Advertisement
Add Comment
Please, Sign In to add comment