API tools faq
paste
spirkism

theme #29: babygirl

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