API tools faq
paste
Advertisement
drxgonfly

THEME 05- Spotify

drxgonfly
Sep 2nd, 2017
2,285
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.45 KB | None | 0 0
raw download clone embed print report
  1. <!---------------------------------------
  2. THEME O5 BY DRXGONFLY
  3. Last Updated March 3rd 2018
  4.  
  5.  
  6. RESOURCES:
  7.  
  8. UNNESTED CAPTIONS:
  9. https://neothm.com/post/148902138319/un-nest-tumblr-captions-a-plugin-by
  10.  
  11. RESIZING VIDEOS:
  12. https://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos
  13.  
  14. PXU PHOTOSETS:
  15. https://shythemes.tumblr.com/post/148791415248/tutorial-masonry-with-infinite-scroll-and-pxu
  16.  
  17. LIKE/REBLOG BUTTONS:
  18. https://shythemes.tumblr.com/post/147903463743/custom-like-and-reblog-buttons
  19.  
  20. FONT AWESOME ICONS:
  21. https://fontawesome.io/
  22.  
  23. AUDIO POSTS:
  24. https://lmthemeslp-tut.tumblr.com/audio
  25.  
  26. TUMBLR CONTROLS FIX:
  27. https://cyantists.tumblr.com/post/163728517915/fix-tumblrs-new-controls-i-have-come-up-with-3
  28.  
  29. ----------------------------------------->
  30.  
  31.  
  32. <html>
  33. <head>
  34. <meta name="text:Header Image" content="https://www.commentnation.com/backgrounds/images/light_gray_parchment_paper_seamless_pattern.jpg"/> <!--Header image, it will be cropped at an odd size-->
  35. <meta name="text:Avatar Image" content="https://www.bluemaize.net/im/sunglasses/taylor-swift-sunglasses-0.jpg"/> <!--Image on Header-->
  36. <meta name="color:accent color 1"content="#84bd00"/> <!--links,hover -->
  37. <meta name="color:accent color 2"content="#121314"/> <!--background color-->
  38. <meta name="color:accent color 3"content="#1c1c1f"/> <!--sidebar background, post borders-->
  39. <meta name="color:accent color 4"content="#848589"/> <!--sidebar icons-->
  40. <meta name="color:body font" content="#aaa"/> <!--body font-->
  41. <meta name="color:header titles" content="fff"/> <!-- header titles-->
  42.  
  43. <meta name="text:link 1 name" content="Submit"/>
  44. <meta name="text:link 1 url" content=""/>
  45. <meta name="text:link 2 name" content="Explore"/>
  46. <meta name="text:link 2 url" content=""/>
  47.  
  48. <meta name="text:name" content="Your Name"/>
  49.  
  50. <meta name="if:show captions" content="1"/>
  51. <meta name="if:functional header buttons" content="0"/>
  52. <meta name="text:header button 1 name" content="▸ PLAY "/>
  53. <meta name="text:header button 1 URL" content=""/>
  54. <meta name="text:header button 2 name" content="Following"/>
  55. <meta name="text:header button 2 URL" content=""/>
  56. <meta name="if:show link 1" content="1"/>
  57. <meta name="if:show link 2" content="1"/>
  58. <meta name="if:show avatar" content="1"/>
  59.  
  60. <!---------------------------------------
  61. SCRIPTS & STYLESHEETS
  62. ----------------------------------------->
  63. <link href="https://file.myfontastic.com/qDbcTszXoEeyJ6PzE2deHY/icons.css" rel="stylesheet"> <!--credit symbol-->
  64. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!--JQuery--->
  65. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script> <!---video resize--->
  66. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/> <!--PXU PHOTOSET CSS--->
  67. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script> <!--PXU PHOTOSET JQUERY--->
  68. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script> <!-- UNNESTED CAPTIONS-->
  69. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><!--FA ICONS-->
  70. <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"> <!-- GOOGLE FONTS-->
  71.  
  72. <!---------------------------------------
  73. SCRIPTS
  74. ----------------------------------------->
  75. <script> //PXU PHOTOSETS
  76. $(document).ready(function(){
  77. $('.photo-slideshow').pxuPhotoset({
  78. lightbox: true, // use tumblr lightbox
  79. rounded: false, // rounded edges?
  80. gutter: '1px', // spacing between photosets
  81. borderRadius: '0px',
  82. photoset: '.photo-slideshow',
  83. photoWrap: '.photo-data',
  84. photo: '.pxu-photo'
  85. });
  86. });
  87. </script>
  88.  
  89. <script> // UNNESTED CAPTIONS
  90. $(function(){ $('.posts').unnest({
  91. yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
  92. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  93. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  94. originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  95. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  96. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  97. usernameColon: false //if turned to false, removes the colon at the end of usernames
  98. }); }); </script>
  99.  
  100. </head>
  101. <style>
  102. /**********************************
  103. BASIC STYLING
  104. **********************************/
  105. *{margin:0 auto;}
  106.  
  107. a{/*all links*/
  108. text-decoration:none;
  109. transition:ease-in-out .7s;
  110. color:{color:accent color 1};
  111. }
  112.  
  113. body{/*body*/
  114. background-color:{color:accent color 2};
  115. font-family: 'Karla',sans-serif;
  116. color:{color:body font};
  117. }
  118.  
  119. img{max-width:100%;} /*makes sure images are 100% wide*/
  120.  
  121. /* scrollbar */
  122. ::-webkit-scrollbar{
  123. width:8px;
  124. height:5px;
  125. background-color:{color:accent color 1};
  126. }
  127. ::-webkit-scrollbar-track{
  128. border:5px solid {color:accent color 3};
  129. background-color: {color:accent color 3};
  130. }
  131. ::-webkit-scrollbar-thumb{
  132. border:1px solid {color:accent color 1};
  133. background-color: {color:accent color 1};
  134. }
  135.  
  136. iframe.tmblr-iframe { /*tumblr controls*/
  137. z-index:99999999999999!important;
  138. top:0px!important;
  139. right:0%!important;
  140. opacity:0.4;
  141. transform:scale(0.6);
  142. transform-origin:100% 0;
  143. -webkit-transform:scale(0.6);
  144. -webkit-transform-origin:100% 0;
  145. -o-transform:scale(0.6);
  146. -o-transform-origin:100% 0;
  147. -moz-transform:scale(0.6);
  148. -moz-transform-origin:100% 0;
  149. -ms-transform:scale(0.6);
  150. -ms-transform-origin:100% 0;}
  151.  
  152. iframe.tmblr-iframe:hover {opacity:0.6!important;}
  153.  
  154. /**********************************
  155. HEADER
  156. **********************************/
  157. .header{/*header*/
  158. width:100%;
  159. height:350px;
  160. background-image:url("{text:Header image}");
  161. background-attachment:fixed;
  162. background-size:cover;
  163. }
  164.  
  165. .dimmed {/*gray overlay on header*/
  166. position: relative;
  167. margin-left:100px;
  168. }
  169.  
  170. .dimmed:before { /*gray overlay on header*/
  171. content: " ";
  172. z-index: 1;
  173. display: block;
  174. position: absolute;
  175. height: 100%;
  176. top: 0;
  177. left: 0;
  178. right: 0;
  179. background: rgba(0, 0, 0, 0.5);
  180. }
  181.  
  182. .avatar img{ /*avatar image on header*/
  183. border-radius:100%;
  184. width:150px;
  185. height:150px;
  186. line-height:350px;
  187. margin:100px 0px 75px 100px;
  188. float:left;
  189. position:absolute;
  190. z-index:2;
  191. }
  192.  
  193. .header h1{ /*text on header 'artist/ taylor swift'*/
  194. text-transform:uppercase;
  195. font-size:20px;
  196. float:left;
  197. padding-left:30px;
  198. margin:145px 0px 0px 250px;
  199. font-weight:100;
  200. color:{color:header titles};
  201. position:absolute;
  202. z-index:2;
  203. }
  204.  
  205. .buttons{ /* buttons on header 'play, following, ...'*/
  206. padding-top:200px;
  207. position:absolute;
  208. z-index:2;
  209. margin-left:250px;
  210. }
  211.  
  212. .buttons a{ /*if functional buttons are turned on,make the text change color*/
  213. color:{color:header titles};
  214. z-index:1;
  215. }
  216.  
  217. .button{ /*play button*/
  218. background-color:{color:accent color 1};
  219. color:{color:header titles};
  220. font-size:10px;
  221. width:100px;
  222. height:40px;
  223. border-radius:50px;
  224. padding:5px 20px;
  225. text-align:center;
  226. text-transform:uppercase;
  227. margin:10px;
  228. display:inline;
  229. line-height:20px;
  230. }
  231.  
  232. .button2{/*following button*/
  233. border:2px solid {color:accent color 1};
  234. color:{color:header titles};
  235. font-size:10px;
  236. width:98px;
  237. height:38px;
  238. border-radius:50px;
  239. padding:5px 20px;
  240. text-align:center;
  241. text-transform:uppercase;
  242. margin:10px;
  243. display:inline;
  244. line-height:20px;
  245. }
  246.  
  247. .button3{ /*... button*/
  248. border:2px solid {color:accent color 1};
  249. color:{color:header titles};
  250. font-size:10px;
  251. width:38px;
  252. height:38px;
  253. border-radius:100%;
  254. padding:5px;
  255. text-align:center;
  256. text-transform:uppercase;
  257. margin:10px;
  258. display:inline;
  259. line-height:20px;
  260. }
  261.  
  262. /**********************************
  263. SIDEBAR
  264. **********************************/
  265. .sidebar{ /*sidebar*/
  266. height:100%;
  267. width:100px;
  268. position:fixed;
  269. background-color:{color:accent color 3};
  270. float:left;
  271. top:0;
  272. z-index:1;
  273. }
  274.  
  275. .sidebarcontent{/* centers the sidebar content vertically*/
  276. top:50%;
  277. left:50%;
  278. transform:translate(-50%,-50%);
  279. position:relative;
  280. }
  281.  
  282. .sidebar img{ /*sidebar image, your default tumblr icon*/
  283. border-radius:100%;
  284. height:50px;
  285. width:50px;
  286. padding:10px;
  287. display:block;
  288. }
  289.  
  290. .sidebar i{ /*sidebar icons*/
  291. color:{color:accent color 4};
  292. font-size:30px;
  293. padding:5px;
  294. margin-bottom:10px;
  295. display:block;
  296. text-align:center;
  297. }
  298.  
  299. .sidebar i:hover{ /*sidebar icons hover*/
  300. color:{color:accent color 1};
  301. }
  302.  
  303. .sidebar p{ /*text underneath sidebar icons*/
  304. font-size:14px;
  305. text-align:center;
  306. }
  307.  
  308. .pagination{ /*previous/next page size*/
  309. width:50px;
  310. padding:20px;
  311. text-align:Center;
  312. font-size:10px;
  313. }
  314.  
  315. .pagination i{ /*previous/next page icons*/
  316. font-size:10px;
  317. display:inline;
  318. }
  319.  
  320. .pagination2{ /*previous/next page size*/
  321. width:100%;
  322. padding:10px;
  323. text-align:Center;
  324. border-bottom:1px solid #000;
  325. display:none;
  326. }
  327.  
  328. .pagination2 i{ /*previous/next page icons*/
  329. font-size:14px;
  330. display:none;
  331. }
  332.  
  333. /**********************************
  334. CONTAINER & POSTS
  335. **********************************/
  336. .container{ /*posts container*/
  337. height:100%;
  338. width:720px;
  339. background-color:{color:accent color 2};
  340. margin:0 auto;
  341. {block:permalinkpage}
  342. width:580px;
  343. {/block:permalinkpage}
  344. }
  345.  
  346. .posts{ /*the size of each individual post*/
  347. width:500px;
  348. height:auto;
  349. background-color:{color:accent color 2};
  350. border:2px solid {color:accent color 3};
  351. padding:20px;
  352. margin:20px;
  353. position:relative;
  354. {block:permalinkpage}
  355. width:500px;
  356. {/block:permalinkpage}
  357. }
  358.  
  359. /**********************************
  360. INDIVIDUAL POST STYLING
  361. **********************************/
  362. .asker{ /*centers asker icon*/
  363. display:inline-block;
  364. vertical-align:middle;
  365. }
  366.  
  367. a.asker{ /*centers asker*/
  368. margin-bottom:4px;
  369. }
  370.  
  371. .asker img{ /*asker image*/
  372. width:20px;
  373. height:20px;
  374. }
  375.  
  376. .cover{ /*audio post album art*/
  377. position:relative;
  378. width: 500px;
  379. z-index: 1;
  380. }
  381.  
  382. .playbutton { /*audio post play button*/
  383. width: 23px;
  384. height: 33px;
  385. overflow: hidden;
  386. position: relative;
  387. z-index: 98;
  388. margin: 15px 24px 13px 16px;
  389. }
  390.  
  391. .playbox{ /* audio post white circle*/
  392. background-color: #f2f2f2;
  393. position: absolute;
  394. z-index:2;
  395. margin:220px 0px 0px 220px;
  396. border-radius: 100px;
  397. opacity:1;
  398. }
  399.  
  400. .posts li{list-style:none;}
  401. .posts h1{padding-bottom:5px;}
  402.  
  403. .posts blockquote { /*change the color of the blockquote here*/
  404. border-left: 0px solid #555;
  405. padding:2px 7px;
  406. margin:3px 0px 3px 0px;
  407. }
  408.  
  409. .posts blockquote:img{ /*doesn't cut off images with blockquotes*/
  410. max-width:100%;
  411. height:auto;
  412. }
  413.  
  414. .posts p{margin:5px 0px;}
  415.  
  416. .tumblr_video_container{ /*video post size*/
  417. width:500px;
  418. margin:0;
  419. }
  420. /**********************************
  421. PERMALINKS & NOTES
  422. **********************************/
  423. .permalinks{ /*permalinks- appear to the right of the post*/
  424. text-align:center;
  425. margin:20px 0px 0px 520px;
  426. padding:0px 20px;
  427. top:0px;
  428. width:120px;
  429. max-width:120px;
  430. position:absolute;
  431. }
  432.  
  433. .tags{ /*tags appear under permalinks*/
  434. text-align:center;
  435. margin-top:5px;
  436. }
  437.  
  438. .tags i{font-size:10px;}/*tag icon*/
  439.  
  440. ol.notes{ /*how the notes are displayed on permalink pages*/
  441. list-style:none;
  442. padding-left:0px;
  443. padding:20px;
  444. height:auto;
  445. border-top:1px solid {color:accent color 3};
  446. }
  447.  
  448. ol.notes li.note img.avatar{
  449. border-radius:100%;
  450. margin-right:5px;
  451. padding-top:3px;
  452. width:15px;
  453. height:15px;
  454. }
  455.  
  456. /**********************************
  457. LIKE & REBLOG BUTTONS
  458. **********************************/
  459. svg{
  460. width:10px;
  461. height:auto;
  462. opacity:.5;
  463. padding:1px;
  464. display:block;
  465. overflow:visible;
  466. }
  467.  
  468. .controls svg{fill:{color:accent color 4};}
  469.  
  470. .controls a{
  471. position:relative;
  472. display:inline-block;
  473. overflow:hidden;
  474. padding:5px;
  475. width:12px;
  476. height:12px;
  477. }
  478.  
  479. .controls .reblog {opacity:.93;}
  480. .controls .reblog svg {width:9px;margin-top:1px;}
  481. .controls .like .liked + svg {opacity:1;}
  482. .controls .like .liked + svg path {fill:{color: accent color 1}};
  483. .controls .like .like_button {position:relative;}
  484.  
  485. .controls .like .like_button iframe{
  486. position:absolute;
  487. top:0;
  488. left:0;
  489. bottom:0;
  490. right:0;
  491. z-index:2;
  492. opacity:0;
  493. }
  494. /**********************************
  495. UNESTED CAPTIONS - CENTERS ICONS
  496. **********************************/
  497. .tumblr_parent {padding: 10px 0px;}
  498. .tumblr_parent blockquote{
  499. margin-left:0px;
  500. padding-left:20px;
  501. border-left: 2px solid #eee;
  502. }
  503.  
  504. .tumblr_avatar,.tumblr_blog{
  505. display:inline-block;
  506. margin-bottom:10px;
  507. }
  508.  
  509. .tumblr_avatar{
  510. border-radius:50%;
  511. width:20px;
  512. vertical-align:middle;
  513. margin:3px 10px 3px 0px;
  514. }
  515.  
  516. #credit{position:fixed;bottom:0px;right:20px;height:50px;width:100%;}
  517. #credit i{font-size:30px;float:right;color:{color:accent color 1};z-index:99999;}
  518.  
  519. /**********************************
  520. RESPONSIVE SMALL SCREEN
  521. **********************************/
  522. @media only screen and (min-width:0px) and (max-width:799px){
  523.  
  524. .container{
  525. width:380px;
  526. margin:0 auto;
  527. margin-bottom:150px;
  528. {block:permalinkpage}width:380px;{/block:permalinkpage}
  529. }
  530.  
  531. .posts{
  532. max-width:300px;
  533. {block:permalinkpage}width:300px;{/block:permalinkpage}
  534. }
  535.  
  536. .permalinks{
  537. position:relative;
  538. margin:0 auto;
  539. text-align:center;
  540. margin-top:10px;
  541. padding:0px 10px;
  542. }
  543.  
  544. .sidebar{
  545. top:auto;
  546. bottom:0;
  547. width:100%;
  548. height:120px;
  549. position:fixed;
  550. z-index:999;
  551. }
  552.  
  553. .sidebarcontent{
  554. width:100%;
  555. display:inline;
  556. text-align:center;
  557. position:absolute;
  558. margin-top:25px;
  559. }
  560.  
  561. .sidebar i{
  562. display:inline-block;
  563. text-align:center;
  564. line-height:20px;
  565. padding:0% 2%
  566. }
  567.  
  568. .sidebar p{display:none;}
  569. .sidebar img{display:none;}
  570. .pagination{display:none;}
  571.  
  572. .pagination2{ /*previous/next page size*/
  573. width:100%;
  574. padding:10px;
  575. text-align:center;
  576. border-bottom:1px solid #000;
  577. display:inline;
  578. position:absolute;
  579. }
  580.  
  581. .pagination2 i{ /*previous/next page icons*/
  582. font-size:14px;
  583. display:inline;
  584. }
  585.  
  586. .dimmed{display:none;}
  587. .tumblr_video_container{max-width:300px;margin:0;}
  588. .playbox{margin:120px 0px 0px 120px;}
  589.  
  590. #credit{
  591. position:fixed;
  592. bottom:10px;
  593. right:20px;
  594. height:50px;
  595. width:100%;
  596. z-index:999;
  597. }
  598.  
  599. #credit i{
  600. font-size:30px;
  601. float:right;
  602. color:{color:accent color 1};
  603. z-index:999;
  604. }
  605. }
  606. /**********************************
  607. RESPONSIVE MEDIUM SCREEN
  608. **********************************/
  609. @media only screen and (min-width:800px) and (max-width:1099px){
  610.  
  611. .container{
  612. width:480px;
  613. margin:0 auto;
  614. margin-bottom:250px;
  615. {block:permalinkpage}width:480px;{/block:permalinkpage}
  616. }
  617.  
  618. .posts{
  619. max-width:400px;
  620. {block:permalinkpage}width:400px;{/block:permalinkpage}
  621. }
  622.  
  623. .permalinks{ /*permalinks- appear to the right of the post*/
  624. text-align:center;
  625. margin:20px 0px 0px 420px;
  626. padding:0px 20px;
  627. top:0px;
  628. width:120px;
  629. max-width:120px;
  630. position:absolute;
  631. }
  632.  
  633. .tumblr_video_container{max-width:400px;margin:0;}
  634. .playbox{margin:170px 0px 0px 170px;}
  635. }
  636. /**********************************
  637. RESPONSIVE LARGE SCREEN
  638. **********************************/
  639. @media only screen and (min-width:1367px) {
  640.  
  641. .container{
  642. width:780px;
  643. margin:0 auto;
  644. margin-bottom:250px;
  645. {block:permalinkpage}width:780px;{/block:permalinkpage}
  646. }
  647.  
  648. .posts{
  649. width:700px;
  650. {block:permalinkpage}width:500px;{/block:permalinkpage}
  651. }
  652.  
  653. .permalinks{ /*permalinks- appear to the right of the post*/
  654. text-align:center;
  655. margin:20px 0px 0px 720px;
  656. padding:0px 20px;
  657. top:0px;
  658. width:120px;
  659. max-width:120px;
  660. position:absolute;
  661. }
  662.  
  663. .tumblr_video_container{width:700px;margin:0;}
  664.  
  665. .cover{width:700px;}
  666. .playbox{margin:325px 0px 0px 325px;}
  667. }
  668. </style>
  669. <body>
  670. <!---------------------------------------
  671. SIDEBAR
  672. ----------------------------------------->
  673. <div class="sidebar">
  674. {block:pagination}
  675. <div class="pagination2">
  676. {block:PreviousPage}<a href="{PreviousPage}"><i class="fa fa-backward"></i></a>{/block:PreviousPage} {CurrentPage} / {TotalPages}
  677. {block:NextPage}<a href="{NextPage}"><i class="fa fa-forward"></i></a>{/block:NextPage}
  678. </div>
  679. {/block:Pagination}
  680.  
  681. <div class="sidebarcontent">
  682. <a href="/"><i class="fa fa-home"><br><span style="font-size:15px;font-family:Karla;padding:0px">Home</span> </i></a>
  683. <a href="/ask"><i class="fa fa-comment-o"><br><span style="font-size:15px;font-family:Karla;">Ask</span> </i></a>
  684. {block:ifshowlink1}
  685. <a href="{text:link 1 url}"><i class="fa fa-paper-plane"><br><span style="font-size:15px;font-family:Karla;">{text:link 1 name}</span> </i> </a>
  686. {/block:ifshowlink1}
  687. {block:ifshowlink2}
  688. <a href="{text:link 2 url}"><i class="fa fa-globe"><br><span style="font-size:15px;font-family:Karla;">{text:link 2 name}</span> </i> </a>
  689. {/block:ifshowlink2}
  690. <a href="/archive"><i class="fa fa-folder-open-o"><br><span style="font-size:15px;font-family:Karla;">Archive</span> </i> </a>
  691.  
  692.  
  693. {block:ifshowavatar}
  694. <img src="{PortraitURL-128}" id="avatar">
  695. <p> {text:name}</p>
  696. {/block:ifshowavatar}
  697.  
  698. {block:Pagination}
  699. <div class="pagination">
  700. {CurrentPage} / {TotalPages} <br>
  701. {block:PreviousPage}<a href="{PreviousPage}"><i class="fa fa-backward"></i></a>{/block:PreviousPage}
  702. {block:NextPage}<a href="{NextPage}"><i class="fa fa-forward"></i></a>{/block:NextPage}
  703. </div>
  704. {/block:Pagination}
  705. </div>
  706. </div>
  707.  
  708. <!---------------------------------------
  709. HEADER
  710. ----------------------------------------->
  711. <div class="dimmed">
  712. <div class="header">
  713. <div class="avatar"><img src="{text:Avatar Image}">
  714. </div>
  715. <h1> {title}
  716. <br>
  717. {description}
  718. </h1>
  719. <div class="buttons">
  720.  
  721. {block:iffunctionalheaderbuttons}
  722. <div class="button"> <a href="{text:header button 1 url}"> {text:header button 1 name} </a> </div>
  723. <div class="button2"> <a href="{text:header button 2 url}"> {text:header button 2 name} </a> </div>
  724. <div class="button3"> ••• </div>
  725. {/block:iffunctionalheaderbuttons}
  726. {block:ifnotfunctionalheaderbuttons}
  727. <div class="button"> ▸ Play </div>
  728. <div class="button2"> Following </div>
  729. <div class="button3"> ••• </div>
  730. {/block:ifnotfunctionalheaderbuttons}
  731. </div>
  732. </div>
  733. </div>
  734. <!---------------------------------------
  735. CONTAINER & POSTS
  736. ----------------------------------------->
  737. <div class="container">
  738. {block:posts}
  739. <div class="posts">
  740.  
  741. <!---------------------------------------
  742. TEXT POSTS
  743. ----------------------------------------->
  744. {block:text}
  745. {block:title}{title}{/block:title}
  746. <div class="caption">{Body}</div>
  747. {/block:text}
  748.  
  749. <!---------------------------------------
  750. Q&A POSTS
  751. ----------------------------------------->
  752. {block:Answer}
  753. <div class="asker"><img src="{AskerPortraitURL-24}"style="border-radius:100%;"></div> {Asker} asked: {Question} <br> <br> {Answer}
  754. {/block:Answer}
  755.  
  756. <!---------------------------------------
  757. QUOTE POSTS
  758. ----------------------------------------->
  759. {block:Quote}
  760. <h2>"{Quote}"</h2>
  761. {block:Source}<div class="source">{Source}</div>{/block:Source}
  762. {/block:Quote}
  763.  
  764. <!---------------------------------------
  765. LINK POSTS
  766. ----------------------------------------->
  767. {block:Link}
  768. <h1><a href="{URL}">{Name}</a></h1>
  769. {block:Description}{Description}{/block:Description}
  770. {/block:Link}
  771.  
  772. <!---------------------------------------
  773. CHAT POSTS
  774. ----------------------------------------->
  775. {block:Chat}
  776. {block:Title}<h1>{Title}</h1>{/block:Title}
  777. {block:Lines}
  778. {block:Label}<b>{Label}</b>{/block:Label}
  779. {Line}<br>
  780. {/block:Lines}
  781. {/block:Chat}
  782.  
  783. <!---------------------------------------
  784. PHOTO POSTS
  785. ----------------------------------------->
  786. {block:Photo}
  787. {LinkOpenTag}<img src="{PhotoURL-HighRes}" width="700px" alt="{PhotoAlt}">{LinkCloseTag}
  788. <div class="caption" style="text-align:center">{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}</div>
  789. {/block:Photo}
  790.  
  791. <!---------------------------------------
  792. PHOTOSET POSTS
  793. ----------------------------------------->
  794. {block:Photoset}
  795. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-HighRes}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>
  796. {/block:Photos}</div><div class="caption" style="text-align:center">{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}</div>
  797. {/block:Photoset}
  798.  
  799. <!---------------------------------------
  800. AUDIO POSTS
  801. ----------------------------------------->
  802. {block:Audio}
  803. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div></div>
  804. {block:AlbumArt}
  805. <img src="{AlbumArtURL}" class="cover">
  806. {/block:AlbumArt}
  807. <div class="caption"style="text-align:center">{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}</div>
  808. {/block:Audio}
  809.  
  810. <!---------------------------------------
  811. VIDEO POSTS
  812. ----------------------------------------->
  813. {block:Video}
  814. <div class="video">{Video-500} </div>
  815. <div class="caption" style="text-align:center">{block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}</div>
  816. {/block:Video}
  817. <!---------------------------------------------------
  818. PERMALINKS
  819. ---------------------------------------------------->
  820. <div class="permalinks">
  821. <a href="{Permalink}">{TimeAgo}{block:NoteCount}<br> {NoteCountWithLabel}{/block:NoteCount}</a>
  822. <br>
  823. {block:date}
  824. <div class="controls">
  825. <a href="#" class="like">{LikeButton}
  826. <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95 c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1 c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1 c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4 c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5 c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767 c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45 c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg>
  827. <a href="{ReblogURL}" target="_blank" class="reblog">
  828. <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 361.095 361.095" style="enable-background:new 0 0 361.095 361.095;" xml:space="preserve"><g><g><path d="M182.595,325.678c-63.183,0-120.133-42.217-138.267-102.567c-2.833-9.067-12.183-14.167-21.25-11.333 c-9.067,2.833-14.167,12.183-11.333,21.25c22.95,75.933,91.517,126.65,170.85,126.65c98.317,0,178.5-80.183,178.5-178.5 s-80.183-178.5-178.5-178.5c-55.817,0-108.233,26.633-141.667,69.7l-7.083-56.1c-1.133-9.35-9.633-15.867-18.983-14.733 C5.511,2.678-1.005,11.178,0.128,20.528l13.317,103.7c1.133,8.5,8.5,14.733,16.717,14.733c0.567,0,1.417,0,1.983,0l102.567-11.617 c9.35-1.133,16.15-9.35,15.017-18.7s-9.35-16.15-18.7-15.017l-68.85,7.65c26.633-39.95,71.683-64.6,120.417-64.6 c79.617,0,144.5,64.883,144.5,144.5S262.211,325.678,182.595,325.678z"/></g></g></svg>
  829. </a>
  830. </a>
  831. </div>
  832.  
  833. {block:PermalinkPage}
  834. Via <a href="{ReblogParentURL}">{ReblogParentName}</a><br> Source {block:RebloggedFrom}<a href="{ReblogRootURL}">{ReblogRootName}</a> {/block:RebloggedFrom}<br>
  835. <div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"><i class="fa fa-tag"></i> {Tag} </a>{/block:Tags}{/block:HasTags}</div>
  836. {/block:PermalinkPage}
  837. </div>
  838. {/block:date}
  839. {block:permalinkpage}<br>{/block:permalinkpage}
  840. {block:PostNotes}{PostNotes}{/block:PostNotes}
  841. </div>
  842. {/block:posts}
  843. <div id="credit">
  844. <a href="https://drxgonfly.tumblr.com"><i class="drx-drxgonfly-left" aria-hidden="true"></i></a>
  845. </div>
  846. </div>
  847. </body>
  848.  
  849. </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!