API tools faq
paste
Advertisement
watercolorwitch

soulift blog 5 26 2019

watercolorwitch
May 26th, 2019
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-- ✧ THEME #10 BY SKYOFRP - SUNSETS ✧
  6.  
  7. theme made using neonbikethemes' base code. inspired by pirateskinned's lovely theme "morning breeze." fonts hosted by ganseycnfire. icons hosted by themehive. gradient tutorial by css-tricks.com. muse page icons by alydae. imessage code by animalities. audio player code by padyluppet (& modified by me).
  8.  
  9. edit as much as you'd like for personal use, and use it to learn html if you wish, but do not use as a base code and do not directly lift code from this theme and redistribute it as your own. do not touch the credit.
  10.  
  11. enjoy and let me know if you have any questions or problems! if you run into a bug or an issue, drop me an ask and i'll try to help! and finally, thank you for using my theme, it means the world.-->
  12.  
  13. {block:Description}
  14. <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16. <meta charset="utf-8">
  17. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  18. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. <meta name="image:sidebar" content="">
  23. <meta name="image:abouttab" content="">
  24.  
  25. <meta name="color:background" content="#eeeeee" />
  26. <meta name="color:posts" content="#ffffff" />
  27. <meta name="color:sidebar" content="#f6f6f6" />
  28. <meta name="color:links" content="#000000" />
  29. <meta name="color:links hover" content="#a0a0a0" />
  30. <meta name="color:text" content="#000000" />
  31. <meta name="color:borders" content="#cccccc" />
  32. <meta name="color:gradient one" content="#b0b7ea" />
  33. <meta name="color:gradient two" content="#f7c282" />
  34.  
  35. <meta name="text:title" content=""/>
  36. <meta name="text:tab 3 title" content="tab 3 title" />
  37. <meta name="text:tab 4 title" content="tab 4 title" />
  38. <meta name="text:link 1" content="/" />
  39. <meta name="text:link 1 title" content="link" />
  40. <meta name="text:link 2" content="/" />
  41. <meta name="text:link 2 title" content="link" />
  42. <meta name="text:link 3" content="/" />
  43. <meta name="text:link 3 title" content="link" />
  44. <meta name="text:link 4" content="/" />
  45. <meta name="text:link 4 title" content="link" />
  46. <meta name="text:url for askbox" content="" />
  47. <meta name="text:one line" content="" />
  48. <meta name="text:about description" content="" />
  49. <meta name="text:stats" content=""/>
  50.  
  51. <meta name="select:grayscale" title="0%" content="0%" />
  52. <meta name="select:grayscale" title="60%" content="60%" />
  53. <meta name="select:grayscale" title="70%" content="70%" />
  54. <meta name="select:grayscale" title="80%" content="80%" />
  55. <meta name="select:grayscale" title="90%" content="90%" />
  56. <meta name="select:grayscale" title="100%" content="100%" />
  57.  
  58. <meta name="if:contained" content="1"/>
  59.  
  60.  
  61.  
  62. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  63.  
  64. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  65.  
  66. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  67.  
  68. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  69.  
  70. <!-- TOOLTIP SCRIPT (REMOVE ONLY IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  71.  
  72. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  73. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  74. <script>
  75. (function($){
  76. $(document).ready(function(){
  77. $("a[title]").style_my_tooltips({
  78. tip_follows_cursor:true,
  79. tip_delay_time:90,
  80. tip_fade_speed:600,
  81. attribute:"title"
  82. });
  83. });
  84. })(jQuery);
  85. </script>
  86.  
  87. <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  88.  
  89. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  90.  
  91. <style type="text/css">
  92.  
  93. /*----------------------------- FONTS ------------------------------- */
  94.  
  95. @font-face { font-family: "tamoro script"; src: url('https://dl.dropboxusercontent.com/s/6cjwbj582ho61kv/TamoroScript_PersonalUseOnly.ttf?dl=0'); format("opentype");}
  96. @font-face { font-family: "frontage outline"; src: url('https://dl.dropboxusercontent.com/s/452n0o323kateo7/Frontage-Outline.otf?dl=0'); format("opentype");}
  97.  
  98. /* ---------------------------- GENERAL ----------------------------- */
  99.  
  100. /* -------- SELECTION TOOL ------- */
  101.  
  102. ::-moz-selection {
  103. background: {color:text};
  104. color: {color:background};
  105. }
  106.  
  107. ::selection {
  108. background: {color:text};
  109. color: {color:background};
  110. }
  111.  
  112. /* -------- SCROLLBAR ------- */
  113.  
  114. ::-webkit-scrollbar {
  115. width: 0px;
  116. }
  117.  
  118. /* Track */
  119. ::-webkit-scrollbar-track {
  120. background:{color:background};
  121. }
  122.  
  123. /* Handle */
  124. ::-webkit-scrollbar-thumb {
  125. background:{color:text};
  126. }
  127. ::-webkit-scrollbar-thumb:window-inactive {
  128. background: transparent;
  129. }
  130.  
  131. /* ------- TOOLTIPS ------ */
  132.  
  133. #s-m-t-tooltip {
  134. max-width:300px;
  135. margin:10px 0px 0px 10px;
  136. background-color:{color:bakground};
  137. font-family:'work sans';
  138. font-size:10px;
  139. color:{color:links};
  140. font-weight:bold;
  141. z-index:999999999999999999999999999999999999;
  142. background-image: linear-gradient(to right, {color:gradient one}, {color:gradient two});
  143. padding:10px;
  144. border-radius:10px;
  145. text-transform:uppercase;
  146. letter-spacing:2px;
  147. }
  148.  
  149. /* -------- BASICS ------- */
  150.  
  151. body {
  152. background: url('https://66.media.tumblr.com/f1ddd994c9be7e59248d653c4ac562cf/tumblr_przkliYlbw1yocu7lo1_1280.jpg') no-repeat top left;
  153. background-position:top left;
  154. background-attachment:fixed;
  155. background-size:cover;
  156. -webkit-background-size: cover;
  157. -moz-background-size: cover;
  158. -o background-size: cover;
  159. background-color:#393a3e;
  160. color: {color:text};
  161. font-family:'work sans';
  162. font-size: 11px;
  163. margin: 0;
  164. padding: 0;
  165. word-wrap: break-word;
  166. line-height:150%;
  167. }
  168.  
  169. a {
  170. color: {color:links};
  171. text-decoration: none;
  172. -webkit-transition: all .3s;
  173. -moz-transition: all .3s;
  174. -o-transition: all .3s;
  175. -ms-transition: all .3s;
  176. transition: all .3s;
  177. }
  178.  
  179. a:hover{
  180. color:{color:links hover};
  181. -webkit-transition: all .3s;
  182. -moz-transition: all .3s;
  183. -o-transition: all .3s;
  184. -ms-transition: all .3s;
  185. transition: all .3s;
  186. }
  187.  
  188. blockquote {
  189. margin: 10px;
  190. padding-left:20px;
  191. padding-top:10px;
  192. padding-bottom:10px;
  193. padding-right:10px;
  194. background-color:{color:background};
  195. border-radius:5px;
  196. border-left:solid 2px {color:posts};
  197. }
  198.  
  199. iframe, img, embed, object, video {
  200. max-width: 100%;
  201. }
  202.  
  203. p{
  204. margin-bottom:10px;
  205. }
  206.  
  207. small, sub, sup {
  208. font-size:10px;
  209. }
  210.  
  211. ul{
  212. list-style-type:square;
  213. }
  214.  
  215. ol{
  216. list-style-type:;
  217. }
  218.  
  219. h1 {
  220. font-family:'frontage outline';
  221. background:-webkit-linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  222. -webkit-background-clip: text;
  223. -webkit-text-fill-color: transparent;
  224. text-align:center;
  225. font-size:24px;
  226. line-height:200%;
  227. }
  228.  
  229. h2 {
  230. font-family:'frontage outline';
  231. background:-webkit-linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  232. -webkit-background-clip: text;
  233. -webkit-text-fill-color: transparent;
  234. text-align:center;
  235. }
  236.  
  237. #bigcon{
  238. width:420px;
  239. margin-left:auto;
  240. margin-right:auto;
  241. }
  242.  
  243. .tabcontent {
  244. position:fixed;
  245. width: 420px;
  246. text-align:center;
  247. margin-bottom:200px;
  248. height:400px;
  249. max-height:400px;
  250. overflow-y:scroll;
  251. left:50%;
  252. margin-left:-640px;
  253. top:50%;
  254. margin-top:-200px;
  255.  
  256. padding:10px;
  257. }
  258.  
  259. #postcontainer {
  260. position:absolute;
  261. width: 420px;
  262. overflow:hidden;
  263. text-align:center;
  264. margin-bottom:150px;
  265. overflow-y:scroll;
  266. left:50%;
  267. margin-left:-640px;
  268. {block:ifcontained}
  269. top:50%;
  270. margin-top:-220px;
  271. height:400px;
  272. max-height:400px;
  273. overflow-y:scroll;
  274. {/block:ifcontained}
  275. padding:10px;
  276. }
  277.  
  278.  
  279. /* ----------------------------- HEADER STUFF ---------------------------*/
  280.  
  281. #sidebar{
  282. background-color:{color:sidebar};
  283. position:fixed;
  284. width:200px;
  285. height:400px;
  286. margin-bottom:50px;
  287. text-align:center;
  288.  
  289. top:50%;
  290. margin-top:-220px;
  291. left:50%;
  292. margin-left:-180px;
  293. border:solid 1px {color:borders};
  294. padding:10px;
  295. border-radius:5px;
  296. }
  297.  
  298. #sidebar img {
  299. width:160px;
  300. height:160px;
  301. border-radius:5px;
  302. }
  303.  
  304. .blogtitle{
  305. margin-bottom:20px;
  306. font-family:tamoro script;
  307. font-size:22px;
  308. letter-spacing:2px;
  309. font-weight:bold;
  310. margin-top:10px;
  311. }
  312.  
  313. .subtitle {
  314. font-size:15px;
  315. -webkit-text-stroke-width: 1px;
  316. -webkit-text-stroke-color:black;
  317. -webkit-text-fill-color:{color:background};
  318. font-family:frontage outline;
  319. margin-top:-15px;
  320. }
  321.  
  322. .description{
  323. margin-bottom:20px;
  324. height:100px;
  325. max-height:100px;
  326. overflow-y:scroll;
  327. font-size:8px;
  328. background-color:{color:background};
  329. padding:5px;
  330. border-radius:10px;
  331. }
  332.  
  333. #navbar{
  334. display:inline-block;
  335. text-align:center;
  336. }
  337.  
  338. /* ------------------------------ TABS ------------------------------ */
  339.  
  340. .tabs {
  341. width:100%;
  342. margin-left:0px;
  343. display:inline-block;
  344. }
  345.  
  346. /*----- Tab Links -----*/
  347.  
  348. /* Clearfix */
  349. .tab-links:after {
  350. display:block;
  351. clear:both;
  352. content:'';
  353. }
  354.  
  355. .tab-links {
  356. z-index:9999999999;
  357. margin-top:3px;
  358. }
  359. .tab-links li {
  360. margin-right:3px;
  361. display:inline-block;
  362. list-style:none;
  363. text-transform:uppercase;
  364. margin-bottom:5px;
  365. }
  366.  
  367. .tab-links a {
  368. padding-top:9px;
  369. padding-right:8px;
  370. padding-left:8px;
  371. padding-bottom:9px;
  372. display:inline-block;
  373. color:{color:links};
  374. transition:all linear 0.15s;
  375. border-bottom:1px solid transparent;
  376. font-weight:bold;
  377. font-size:15px;
  378. font-family:'frontage outline';
  379. border-radius:10px;
  380. }
  381.  
  382. .tab-links a:hover {
  383. text-decoration:none;
  384. }
  385.  
  386. li.active a, li.active a:hover {
  387. color:{color:background};
  388. background-image: linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  389. -webkit-transition: all .3s;
  390. -moz-transition: all .3s;
  391. -o-transition: all .3s;
  392. -ms-transition: all .3s;
  393. transition: all .3s;
  394. }
  395.  
  396. /*----- Content of Tabs -----*/
  397. .tab-content {
  398. }
  399.  
  400. .tab {
  401. display:none;
  402. }
  403.  
  404. .tab.active {
  405. display:block;
  406. }
  407.  
  408. /* --------------------------- POSTS (articles) --------------------- */
  409.  
  410. article {
  411. float:left;
  412. background:{color:posts};
  413. padding: 10px;
  414. width: 400px;
  415. text-align:left;
  416. margin-bottom:80px;
  417. border:solid 1px {color:borders};
  418. border-radius:5px;
  419. }
  420.  
  421. .photoset
  422. {
  423. border-radius:5px;
  424. -webkit-filter: grayscale({select:grayscale}); /* Safari 6.0 - 9.0 */
  425. filter: grayscale({select:grayscale});
  426. -webkit-transition: all 0.5s ease-in-out;
  427. -moz-transition: all 0.5s ease-in-out;
  428. -o-transition: all 0.5s ease-in-out;
  429. -ms-transition: all 0.5s ease-in-out;
  430. transition: all 0.5s ease-in-out;
  431. opacity:0.9;
  432. }
  433.  
  434. .photoset:hover {
  435. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  436. filter: grayscale(0%);
  437. -webkit-transition: all 0.5s ease-in-out;
  438. -moz-transition: all 0.5s ease-in-out;
  439. -o-transition: all 0.5s ease-in-out;
  440. -ms-transition: all 0.5s ease-in-out;
  441. transition: all 0.5s ease-in-out;
  442. opacity:1;
  443. }
  444.  
  445. article img {
  446. height: auto;
  447. width:auto;
  448. max-width:100%;
  449. border-radius:5px;
  450. -webkit-filter: grayscale({select:grayscale}); /* Safari 6.0 - 9.0 */
  451. filter: grayscale({select:grayscale});
  452. -webkit-transition: all 0.5s ease-in-out;
  453. -moz-transition: all 0.5s ease-in-out;
  454. -o-transition: all 0.5s ease-in-out;
  455. -ms-transition: all 0.5s ease-in-out;
  456. transition: all 0.5s ease-in-out;
  457. opacity:0.9;
  458. }
  459.  
  460. article img:hover {
  461. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  462. filter: grayscale(0%);
  463. -webkit-transition: all 0.7s ease-in-out;
  464. -moz-transition: all 0.7s ease-in-out;
  465. -o-transition: all 0.7s ease-in-out;
  466. opacity:1;
  467. }
  468.  
  469. /* ---------------------------- POST INFO -----------------------------*/
  470.  
  471. .postinfo{
  472. margin-top:10px;
  473. text-align:center;
  474. text-transform:uppercase;
  475. background-color:{color:background};
  476. padding:10px;
  477. border-radius:5px;
  478. letter-spacing:3px;
  479. font-size:12px;
  480. }
  481.  
  482. .tags {
  483. margin-top:5px;
  484. font-weight:normal;
  485. }
  486.  
  487. .tags a {
  488. background-image: linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  489. color:{color:links};
  490. padding-top:3px;
  491. padding-bottom:3px;
  492. padding-right:5px;
  493. padding-left:5px;
  494. border-radius:10px;
  495. text-transform:uppercase;
  496. font-size:10px;
  497. margin-bottom:5px;
  498. display:inline-block;
  499. }
  500.  
  501. .tags a:hover {
  502. color:{color:links hover};
  503. }
  504.  
  505. /* ---------------------------- NAVTAB ------------------------- */
  506.  
  507. .aboutme {
  508. width:180px;
  509. height:160px;
  510. max-height:160px;
  511. overflow-y:scroll;
  512. background-color:{color:posts};
  513. padding:10px;
  514. border-radius:10px;
  515.  
  516. font-size:10px;
  517. z-index:999;
  518. }
  519.  
  520. .aboutpic {
  521. width:180px;
  522. }
  523.  
  524. .aboutpic img {
  525. width:160px;
  526. height:160px;
  527. border-radius:5px;
  528. }
  529.  
  530. h5 {
  531. font-family:'tamoro script';
  532. background-image: linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  533. padding:5px;
  534. font-size:20px;
  535. margin-top:-20px;
  536. z-index:99999999999999999;
  537. color:#fff;
  538. }
  539.  
  540. h6 {
  541. float:right;
  542. margin-top:-350px;
  543. margin-right:10px;
  544. text-transform:uppercase;
  545. font-size:20px;
  546. font-family:'frontage outline';
  547. line-height:150%;
  548. background: -webkit-linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  549. -webkit-background-clip: text;
  550. -webkit-text-fill-color: transparent;
  551. width:190px;
  552. }
  553.  
  554. .aboutlinks {
  555. width:190px;
  556. margin-top:-170px;
  557. float:right;
  558. text-align:center;
  559. margin-right:10px;
  560. }
  561.  
  562. .aboutlinks a {
  563. font-family:'frontage outline';
  564. font-size:20px;
  565. background-image: linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  566. padding:10px;
  567. border-radius:5px;
  568. display:block;
  569. margin-bottom:5px;
  570. }
  571.  
  572. /* ---------------------------- MUSES ------------------------- */
  573.  
  574. .muse {
  575. width:100px;
  576. display:inline-block;
  577. }
  578.  
  579. .muse img {
  580. width:80px;
  581. border-radius:10px;
  582. }
  583.  
  584. h4 {
  585. font-family:'tamoro script';
  586. background-image: linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  587. padding:5px;
  588. font-size:20px;
  589. margin-top:-20px;
  590. z-index:99999999999999999;
  591. color:#fff;
  592. }
  593.  
  594. /* ---------------------------- POST NOTES ------------------------- */
  595.  
  596. ol.notes {
  597. display:block;
  598. text-align:left;
  599. list-style-type:none;
  600. margin-left:-35px;
  601. }
  602.  
  603. ol.notes li.note{
  604. margin-bottom:5px;
  605. }
  606.  
  607. .pagenotes {
  608. text-align:left;
  609. margin-top:15px;
  610. }
  611.  
  612. .pagenotes img{
  613. margin-right:5px;
  614. margin-top:5px;
  615. margin-bottom:-5px;
  616. border-radius:100px;
  617. }
  618.  
  619.  
  620. /* -------------------------- POST TYPES -------------------------- */
  621.  
  622. /*----------chat---------*/
  623.  
  624. /* IMESSAGE CHAT POST */
  625. .answer span,
  626.  
  627. .convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}
  628.  
  629. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:{color:gradient two};color:#000;left:3px}
  630.  
  631. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid {color:gradient two};border-bottom-right-radius:1em .5em}
  632.  
  633. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:{color:gradient one};color:#000}
  634.  
  635. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.4em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:gradient one}; border-bottom-left-radius:1em .5em}
  636.  
  637. .me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  638.  
  639. .asked p {
  640. text-align: left;
  641. margin: 0 0px 10px 0px;
  642. padding: 0;
  643. color: #666666;
  644. font-family:'open sans';
  645. font-size: 10px;
  646. line-height: 0px;
  647. }
  648. .footerright .viasrc {
  649. float: left;
  650. }
  651. .asked a {
  652. margin:0;padding:0;
  653. }
  654. .user_4{background-color:{color:gradient one};color:#000}.user_4::after{border-color:{color:chat bubble one}}.user_6{background-color:{color:gradient one};color:#000000}.user_6::after{color: chat bubble 1}}.user_5{background-color:{color:gradient two};color:#000}.user_5::after{{color:gradient two}}.user_3{background-color:{color:gradient two};color:#000}.user_3::after{border-color:{color:gradient two}}.user_7{background-color:{color:gradient two};color:#000}.user_7::after{{color:gradient two}}.user_8{background-color:{color:gradient one};color:#000}.user_8::after{{color:gradient two}}.user_9{color:gradient one}.user_9::after{{color:gradient two}}
  655. .convo {
  656. overflow: hidden;
  657. list-style-type: none;
  658. padding: 0;
  659. margin: 0;
  660. }
  661.  
  662. /* QUOTES */
  663.  
  664. .quote{
  665. font-family:'frontage outline';
  666. background:-webkit-linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  667. -webkit-background-clip: text;
  668. -webkit-text-fill-color: transparent;
  669. text-align:center;
  670. font-size:20px;
  671. line-height:110%;
  672. }
  673.  
  674. .quotesource{
  675. text-align:center;
  676. margin-bottom:15px;
  677. margin-top:15px;
  678. }
  679.  
  680. /* QUESTIONS */
  681.  
  682. .question{
  683. margin-bottom:15px;
  684. text-transform:uppercase;
  685. letter-spacing:2px;
  686. text-align:center;
  687. background-color:{color:background};
  688. border-radius:5px;
  689. padding:15px;
  690. }
  691.  
  692. .answer {
  693. font-size:11px;
  694. }
  695.  
  696. .askerimg{
  697. position:relative;
  698. float:right;
  699. border-radius:10px;
  700. }
  701.  
  702. /*----------audio---------*/
  703.  
  704. .playerbuttonbg {
  705. position: absolute;
  706. left: 50px;
  707. top: 45px;
  708. background-color:transparent;
  709. padding: 10px;
  710. opacity: .4;
  711. filter: alpha(opacity=40);
  712. -moz-opacity: 0.4;
  713. -khtml-opacity: 0.4;
  714. transition: opacity .7s ease-in-out;
  715. -moz-transition: opacity .7s ease-in-out;
  716. -webkit-transition: opacity .7s ease-in-out;
  717. padding-bottom:20px;
  718. }
  719.  
  720. .playerbuttonbg:hover {
  721. opacity: 1;
  722. filter: alpha(opacity=100);
  723. -moz-opacity: 1;
  724. -khtml-opacity: 1;
  725. }
  726.  
  727. .tumblr_audio_player {
  728. height: 90px;
  729. width: 32px;
  730. }
  731.  
  732. .audioimgwrapper {
  733. position: absolute;
  734. left: 0px;
  735. top: 0px;
  736. -webkit-border-radius: 5px;
  737. -moz-border-radius: 5px;
  738. border-radius: 5px;
  739. overflow: hidden;
  740. width: 150px;
  741. height: 150px;
  742. }
  743.  
  744. .audioimgwrapper img {
  745. width: 100%;
  746. height: auto;
  747. -webkit-border-radius: 5px;
  748. -moz-border-radius: 5px;
  749. border-radius: 5px;
  750. }
  751.  
  752. .trackdetails {
  753. width: auto;
  754. display:inline-block;
  755. margin-left: 200px;
  756. min-height: 150px;
  757. font-family:'work sans';
  758. font-weight:bold;
  759. text-transform:lowercase;
  760. letter-spacing:1px;
  761. text-align:center;
  762. }
  763.  
  764. .audiowrapper {
  765. position: relative;
  766. display:inline-block;
  767. }
  768. /* ------------------------- PAGINATION ------------------------- */
  769.  
  770. #pagination{
  771. position:static;
  772. margin-top:30px;
  773. text-align:center;
  774. }
  775.  
  776. .pagibutton{
  777. position:relative;
  778. display:inline-block;
  779. background-image: linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  780. padding:15px;
  781. text-transform:uppercase;
  782. font-weight:bold;
  783. border-radius:5px;
  784. margin-right:5px;
  785. height:12px;
  786. }
  787.  
  788. /*----------credit---------*/
  789.  
  790. .credit {
  791. font-size:15px;
  792. position:fixed;
  793. font-weight:normal;
  794. bottom:10px;
  795. right:15px;
  796. z-index:10;
  797. text-align:right;
  798. }
  799.  
  800. .credit a {
  801. background-image: linear-gradient(20deg, {color:gradient one}, {color:gradient two});
  802. color:{color:posts};
  803. padding-top:6px;
  804. padding-right:7px;
  805. padding-left:6px;
  806. border-radius:5px;
  807. }
  808.  
  809. .credit a:hover {
  810. color:{color:links hover};
  811. -moz-transition-duration:0.5s;
  812. -webkit-transition-duration:0.5s;
  813. -o-transition-duration:0.5s;
  814. }
  815.  
  816. /* --------------------------- Custom CSS -------------------------- */
  817. {CustomCSS}
  818. </style>
  819. </head>
  820. <body>
  821.  
  822.  
  823. <div id="bigcon">
  824. <div class="credit">
  825. <a title="skyofrp" href="https://skyofrp.tumblr.com/"><span class="th th-avocado-o
  826. "></span></a></div>
  827.  
  828. <!--SIDEBAR-->
  829.  
  830. <div id="sidebar">
  831.  
  832. <div class="blogtitle">
  833. <a href="/">{text:title}</a>
  834. </div>
  835.  
  836.  
  837. <img src="{image:sidebar}">
  838.  
  839. <div id="navbar">
  840. <div class="tabs">
  841. <ul class="tab-links">
  842. <li class="active" style="margin-left:-30px">
  843. <a title="home" href="#tab1">1.</a></li>
  844. <li><a title="ask" href="#tab2">2.</a></li>
  845. <li><a title="atlas" href="#tab3">3.</a></li>
  846. <li><a title="dossier" href="#tab4">4.</a></li>
  847. </ul>
  848. </div>
  849.  
  850. <div class="description">{description}</div>
  851. </div>
  852.  
  853. </div>
  854.  
  855.  
  856. <!-- --------------------------- TABS -------------------------- -->
  857.  
  858.  
  859. <div class="tabs">
  860.  
  861.  
  862. <!-- --------------------------- TAB 1 -------------------------- -->
  863.  
  864. <div class="tab-content">
  865. <div id="tab1" class="tab active">
  866.  
  867. <div id="postcontainer">
  868.  
  869. {block:Posts}
  870. <article>
  871.  
  872. <!--TEXT POST-->
  873. {block:Text}
  874. {block:Title}
  875. <h1 class="title">
  876. <a href="{Permalink}">{Title}</a></h1>
  877. {/block:Title}
  878. {Body}
  879. {/block:Text}
  880.  
  881.  
  882. <!--PHOTO POST-->
  883. {block:Photo}
  884. {block:IndexPage}
  885. {LinkOpenTag}
  886. <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
  887. {LinkCloseTag}
  888. {/block:IndexPage}
  889. {block:PermalinkPage}
  890. {LinkOpenTag}
  891. <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
  892. {LinkCloseTag}{/block:PermalinkPage}
  893. {/block:Photo}
  894.  
  895.  
  896. <!--PHOTOSET POST-->
  897. {block:Photoset}
  898. {block:IndexPage}{Photoset-400}{/block:IndexPage}
  899. {block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}
  900. {/block:Photoset}
  901.  
  902.  
  903. <!--QUOTE POST-->
  904. {block:Quote}
  905. <div class="quote">{Quote}</div>
  906. {block:Source}
  907. <div class="quotesource">&mdash; <b>{Source}</b></div>
  908. {/block:Source}
  909. {/block:Quote}
  910.  
  911.  
  912. <!--LINK POST-->
  913. {block:Link}
  914. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  915. {block:Description}{Description}{/block:Description}
  916. {/block:Link}
  917.  
  918.  
  919. <!--CHAT POST-->
  920. {block:Chat}
  921. {block:Title}
  922. <h1>{Title}</h1>{/block:Title}<br>
  923. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  924. {Line}</li>{/block:Lines}</ul>
  925. {/block:Chat}
  926.  
  927.  
  928. <!--AUDIO POST-->
  929. {block:Audio}
  930. {block:AudioPlayer}
  931. <div class="audiowrapper">
  932. {block:AlbumArt}
  933. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  934. {/block:AlbumArt}
  935.  
  936. <div class="playerbuttonbg">
  937. <div class="newplayerbutton">
  938. <div class="playerbuttonhug">
  939.  
  940. {AudioPlayer}
  941.  
  942. </div>
  943. </div>
  944. </div>
  945.  
  946. <div class="trackdetails">
  947.  
  948. {block:TrackName}<h2>{TrackName}</h2>{/block:TrackName}<br/>
  949. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  950. {block:Album}Album: {Album}{/block:Album}<br/>
  951. {PlayCountWithLabel}
  952.  
  953. </div>
  954. </div>
  955. {/block:AudioPlayer}
  956.  
  957. {/block:Audio}
  958.  
  959.  
  960. <!--VIDEO POST-->
  961. {block:Video}
  962. <div class="video">
  963. <div class="video-player">{Video-400}</div>
  964. {/block:Video}
  965.  
  966.  
  967. <!--ANSWER POST-->
  968. {block:Answer}
  969. <div class="askerimg"><img src="{AskerPortraitURL-64}"></div>
  970. <div class="question">{Question}</div>
  971. <h2>&mdash; {Asker}</h2></span>
  972. <p><div class="answer">{Answer}</div>
  973. {/block:Answer}
  974.  
  975. <!--CAPTIONS-->
  976. {block:Caption}
  977. {Caption}
  978. {/block:Caption}
  979.  
  980. <!--POST INFORMATION-->
  981. <div class="postinfo">
  982.  
  983. <!--PERMALINK-->
  984. <a title="{TimeAgo}" href="{Permalink}">
  985. {block:Date}
  986. <span class="th th-infinity-o"></span>
  987. {/block:Date}
  988. </a>
  989.  
  990. <!--NOTES-->
  991. {block:NoteCount}
  992. <a title="{NoteCountwithLabel}" href="{Permalink}"> <span class="th th-key-o"></span> </a>
  993. {/block:NoteCount}
  994.  
  995. <!--VIA AND SOURCE-->
  996. {block:RebloggedFrom}
  997. <a href="{ReblogParentURL}" title="{ReblogParentname}"><span class="th th-layers-o"></span></a>
  998. {/block:RebloggedFrom}
  999. {block:ContentSource}
  1000. <a title="{SourceTitle}" href="{SourceURL}"><span class="th th-home-o"></span></a>
  1001. {/block:ContentSource}
  1002. {block:RebloggedFrom} {/block:RebloggedFrom}
  1003.  
  1004. <!--TAGS-->
  1005. {block:HasTags}
  1006. <div class="tags">
  1007. {block:Tags}
  1008. <a href="{TagURL}">{Tag}</a>
  1009. {/block:Tags}
  1010. </div>
  1011. {/block:HasTags}
  1012.  
  1013. </div>
  1014.  
  1015. <!--POST NOTES-->
  1016. {block:PostNotes}
  1017. <div class="pagenotes">{PostNotes-16}</div>
  1018. {/block:PostNotes}
  1019.  
  1020.  
  1021. </article>
  1022. {/block:Posts}
  1023. <!--Close of article-->
  1024.  
  1025.  
  1026. <!--PAGINATION-->
  1027. {block:Pagination}
  1028. <div class="pagination">
  1029. {block:PreviousPage}
  1030. <a href="{PreviousPage}">
  1031. <div class="pagibutton">fall</div></a>
  1032. {/block:PreviousPage}
  1033. {block:NextPage}
  1034. <a href="{NextPage}">
  1035. <div class="pagibutton">shoot</div></a>
  1036. {/block:NextPage}
  1037. </div>
  1038. {/block:Pagination}
  1039.  
  1040. </div>
  1041.  
  1042. </div>
  1043.  
  1044. <!-- -------------------------- TAB 2 -------------------------- -->
  1045.  
  1046. <div id="tab2" class="tab">
  1047. <div class="tabcontent">
  1048.  
  1049. <h1>ask</h1>
  1050. <div align="center">
  1051. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/soulift.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></div>
  1052. </div>
  1053. </div>
  1054.  
  1055.  
  1056. <!-- -------------------------- TAB 3 -------------------------- -->
  1057.  
  1058. <div id="tab3" class="tab">
  1059. <div class="tabcontent">
  1060.  
  1061. <div class="aboutpic"><img src="{image:abouttab}"> <h5>{text:one line}</h5></div>
  1062.  
  1063. <div class="aboutme">{text:about description}</div>
  1064.  
  1065. <h6>{text:stats}
  1066. </h6>
  1067.  
  1068. <div class="aboutlinks">
  1069. <a href="{text:link 1}">{text:link 1 title}</a>
  1070. <a href="{text:link 2}">{text:link 2 title}</a>
  1071. <a href="{text:link 3}">{text:link 3 title}</a>
  1072. <a href="{text:link 4}">{text:link 4 title}</a>
  1073.  
  1074. </div>
  1075. </div>
  1076. </div>
  1077.  
  1078.  
  1079. <!-- -------------------------- TAB 4 -------------------------- -->
  1080.  
  1081. <div id="tab4" class="tab">
  1082. <div class="tabcontent">
  1083.  
  1084. <div class="muse">
  1085. <a title="Josie, 19, Nephilim." href="/josie">
  1086. <img src="https://66.media.tumblr.com/34ddd8cb0a1de72015820e1d417d68be/tumblr_inline_prz1vaejDA1wdokz5_1280.jpg">
  1087. <h4>Joey <p>♛</h4>
  1088. </a>
  1089. </div>
  1090.  
  1091. <div class="muse">
  1092. <a title="Birdi, 18, Human." href="/birdi">
  1093. <img src="https://66.media.tumblr.com/ed5b3588cb3e46b9bfcc7e2588ece812/tumblr_inline_prz1v9Uy0u1wdokz5_1280.jpg">
  1094. <h4>Birdi <p>♥</h4>
  1095. </a>
  1096. </div>
  1097.  
  1098. <div class="muse">
  1099. <a title="Eda, 20k, Faerie." href="/edalina">
  1100. <img src="https://66.media.tumblr.com/b6b71d295fa24b6c6d3a2864331c950e/tumblr_inline_prz1v95yfT1wdokz5_1280.jpg">
  1101. <h4>Eda <p>♥</h4>
  1102. </a>
  1103. </div>
  1104.  
  1105. <div class="muse">
  1106. <a title="Orienna, 16, Dreamwalker." href="/orienna">
  1107. <img src="https://66.media.tumblr.com/a9ab716fa7358babbbb77523c26e455f/tumblr_inline_prz1v9k95Y1wdokz5_1280.jpg">
  1108. <h4>Ori <p>♥</h4>
  1109. </a>
  1110. </div>
  1111.  
  1112. <div class="muse">
  1113. <a title="Shiro, 18, Spirit." href="/shiro">
  1114. <img src="https://66.media.tumblr.com/eb6d34e200111aa91e0c8575997bf395/tumblr_inline_prz1vaf0rc1wdokz5_1280.jpg">
  1115. <h4>Shiro <p> ♥</h4>
  1116. </a>
  1117. </div>
  1118.  
  1119. <div class="muse">
  1120. <a title="Theo, 16, Nephilim." href="/theo">
  1121. <img src="https://66.media.tumblr.com/f901d9bf94c0fe5769b521dad8b743f3/tumblr_inline_prz1v8Vx1R1wdokz5_1280.jpg">
  1122. <h4>Theo <p> ♥</h4>
  1123. </a>
  1124. </div>
  1125.  
  1126. <div class="muse">
  1127. <a title="Winter, 19, Human." href="/winter">
  1128. <img src="https://66.media.tumblr.com/2d465334cef5a09fce3ac0c2b46297d3/tumblr_inline_prz1vbpsSP1wdokz5_1280.jpg">
  1129. <h4>Win <p> ♥</h4>
  1130. </a>
  1131. </div>
  1132.  
  1133. <div class="muse">
  1134. <a title="Eliott, Unknown, Nebula." href="/eliott">
  1135. <img src="https://66.media.tumblr.com/bf6235d43a5d8274c3aea86096142a12/tumblr_inline_prz1v8NqEs1wdokz5_1280.jpg">
  1136. <h4>Eliott <p>✯</h4>
  1137. </a>
  1138. </div>
  1139.  
  1140. <div class="muse">
  1141. <a title="Frankie, 22, Silverblood." href="/frankie">
  1142. <img src="https://66.media.tumblr.com/2168644daca806fcce95989c41db172f/tumblr_inline_prz1v85ZXY1wdokz5_1280.jpg">
  1143. <h4>Fran <p>✯</h4>
  1144. </a>
  1145. </div>
  1146.  
  1147. <div class="muse">
  1148. <a title="Hunter, 4, Nephilim." href="/hunter">
  1149. <img src="https://66.media.tumblr.com/2cea2596b2475b85b1d71695be23fa5a/tumblr_inline_prz1vaCi901wdokz5_1280.jpg">
  1150. <h4>Hunt <p>✯</h4>
  1151. </a>
  1152. </div>
  1153.  
  1154. <div class="muse">
  1155. <a title="Maxine, 2, Nephilim." href="/max">
  1156. <img src="https://66.media.tumblr.com/592dcbe519049c94dc5c58437c3841e9/tumblr_inline_prz1vaCNFa1wdokz5_1280.jpg">
  1157. <h4>Max <p>✯</h4>
  1158. </a>
  1159. </div>
  1160.  
  1161. </div>
  1162.  
  1163. <!--- to add another muse, just copy this:
  1164.  
  1165. <div class="muse">
  1166. <a title="muse name, age, label." href="/">
  1167. <img src="https://i.imgur.com/tDVMvip.png">
  1168. <h4>muse name</h4>
  1169. </a>
  1170. </div>
  1171.  
  1172. ---->
  1173.  
  1174.  
  1175. </div>
  1176. </div>
  1177.  
  1178. <!-- END OF TABS -->
  1179.  
  1180. </div>
  1181. </div>
  1182. </div>
  1183. </div>
  1184. </div>
  1185.  
  1186.  
  1187. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1188.  
  1189. <script>
  1190. $(document).ready(function() {
  1191. $('.tabs .tab-links a').on('click', function(e) {
  1192. var currentAttrValue = $(this).attr('href');
  1193.  
  1194. // Show/Hide Tabs
  1195. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1196.  
  1197. // Change/remove current tab to active
  1198. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1199.  
  1200. e.preventDefault();
  1201. });
  1202. });
  1203. </script>
  1204.  
  1205. <script>
  1206. $(document).ready(function() {
  1207. $('#filterOptions li a').click(function() {
  1208. // fetch the class of the clicked item
  1209. var ourClass = $(this).attr('class');
  1210.  
  1211. // reset the active class on all the buttons
  1212. $('#filterOptions li').removeClass('active');
  1213. // update the active state on our clicked button
  1214. $(this).parent().addClass('active');
  1215.  
  1216. if(ourClass == 'all') {
  1217. // show all our items
  1218. $('#ourHolder').children('div.item').show();
  1219. }
  1220. else {
  1221. // hide all elements that don't share ourClass
  1222. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1223. // show all elements that do share ourClass
  1224. $('#ourHolder').children('div.' + ourClass).show();
  1225. }
  1226. return false;
  1227. });
  1228. });
  1229. </script>
  1230.  
  1231.  
  1232.  
  1233.  
  1234. </body>
  1235. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!