API tools faq
paste
bisexualsteverogers

solasz theme 03

bisexualsteverogers
Aug 6th, 2018
8,549
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <!--
  5.  
  6. ------
  7. ------
  8.  
  9. THEME 03 BY SOLASZ
  10.  
  11. EDITING TO ANY EXTEND ALLOWED AS LONG AS THE CREDIT STAYS IN TACT :)
  12. Questions go here: https://solasz.tumblr.com/ask
  13.  
  14. ------
  15. ------
  16.  
  17. This theme is inspired by: sorrism
  18.  
  19. Big Thank You to shythemes for:
  20.  
  21. - Infinite Scroll, Load More & Pixel Union merged code
  22. - Video Resizing Script
  23.  
  24. Unnest Tumblr Captions
  25. https://neothm.com/post/148902138319/
  26.  
  27. Tumblr Controls Fix
  28. http://cyantists.tumblr.com/post/163728517915/
  29.  
  30.  
  31. -->
  32. <title>{Title}</title>
  33.  
  34. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  35. <link rel="shortcut icon" href="{Favicon}">
  36. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  37.  
  38. <meta name="viewport" content="width=device-width, initial-scale=1">
  39.  
  40. <meta name="color:Accent" content="#f7c282">
  41. <meta name="color:Text" content="#636363">
  42. <meta name="color:Underline" content="#636363">
  43.  
  44. <meta name="image:Sidebar" content=""/>
  45.  
  46. <meta name="select:Post Margin" content="80" title="80px" />
  47. <meta name="select:Post Margin" content="90" title="90px" />
  48. <meta name="select:Post Margin" content="100" title="100px" />
  49. <meta name="select:Post Margin" content="110" title="110px" />
  50. <meta name="select:Post Margin" content="120" title="120px" />
  51.  
  52. <meta name="select:Post Size" content="300" title="300px" />
  53. <meta name="select:Post Size" content="350" title="350px" />
  54. <meta name="select:Post Size" content="375" title="375px" />
  55. <meta name="select:Post Size" content="400" title="400px" />
  56. <meta name="select:Post Size" content="450" title="450px" />
  57. <meta name="select:Post Size" content="500" title="500px" />
  58. <meta name="select:Post Size" content="540" title="540px" />
  59.  
  60. <meta name="if:Sidebar Image" content="1">
  61. <meta name="if:Show Tags" content="1">
  62. <meta name="if:Updates Section" content="1">
  63. <meta name="if:Updates Section Toggle" content="1">
  64.  
  65. <meta name="text:Updates Title" content="Updates">
  66. <meta name="text:Updates Content" content="your updates goes here">
  67. <meta name="text:Link 1" content="">
  68. <meta name="text:Link 1 Title" content="">
  69. <meta name="text:Link 2" content="">
  70. <meta name="text:Link 2 Title" content="">
  71. <meta name="text:Link 3" content="">
  72. <meta name="text:Link 3 Title" content="">
  73. <meta name="text:Link 4" content="">
  74. <meta name="text:Link 4 Title" content="">
  75.  
  76. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  77. <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
  78.  
  79. <style type="text/css">
  80.  
  81. figure img {
  82. max-width:100%;
  83. height:auto;
  84. }
  85.  
  86. body {
  87. margin:0;
  88. font-size:10px;
  89. font-family:'PT Sans', sans-serif;
  90. line-height:1.7em;
  91. -moz-osx-font-smoothing:grayscale;
  92. -webkit-font-smoothing:antialiased;
  93. font-smoothing:antialiased;
  94. color:{color:text};
  95. background:#f5f5f5;
  96. overflow-x:hidden;
  97. }
  98.  
  99. b {
  100. font-weight:700;
  101. }
  102.  
  103. h1 {
  104. margin:0;
  105. padding:0;
  106. }
  107.  
  108. blockquote {
  109. padding-top:4px;
  110. }
  111. blockquote, ol, ul, p, pre {
  112. margin:0 0 .5em 0;
  113. {block:PermalinkPage}
  114. margin:0 0 .6em;
  115. {block:PermalinkPage}
  116. }
  117.  
  118. a {
  119. color:inherit;
  120. text-decoration:none;
  121. {block:PermalinkPage}
  122. border-bottom:1px solid #eee;
  123. {/block:PermalinkPage}
  124. }
  125.  
  126. a:hover {
  127. color:{color:accent};
  128. }
  129.  
  130. small, sub {
  131. font-size:1em;
  132. vertical-align:baseline;
  133. }
  134.  
  135. .tumblr_parent {
  136. }
  137.  
  138. /* wrapper */
  139.  
  140. .main {
  141. margin:130px auto;
  142. left:0px;
  143. width:{select:post size}px;
  144. position:relative;
  145. }
  146.  
  147. /* posts */
  148.  
  149. .content {
  150. margin:0px 0;
  151. width:{select:post size}px;
  152. }
  153.  
  154. .entry {
  155. position:relative;
  156. margin:0 0 {select:post margin}px;
  157. width:{select:post size}px;
  158.  
  159. }
  160. {block:ifShowTagsOnHover}
  161. .entry:hover .tags {
  162. opacity:1;
  163. -webkit-transition: all 0.4s ease-out;
  164. -moz-transition: all 0.4s ease-out;
  165. transition: all 0.4s ease-out;
  166. }
  167. {/block:ifShowTagsOnHover}
  168.  
  169. .photo img {
  170. display:block;
  171. width:{select:post size}px;
  172. }
  173.  
  174. .wrap {
  175. display:block;
  176. width:{select:post size}px;
  177. }
  178.  
  179. .video {
  180. width:{select:post size}px;
  181. }
  182.  
  183. .entry:last-child {
  184. margin-bottom:20px;
  185. }
  186.  
  187. .load {
  188. background:#fff;
  189. border:1px solid #eee;
  190. padding:4px;
  191. margin-left:40px;
  192. width:70px;
  193. }
  194.  
  195. hr {
  196. margin:1em 0;
  197. border:0;
  198. height:1px;
  199. -moz-box-sizing:border-box;
  200. box-sizing:border-box;
  201. background-color:{color:border};
  202. }
  203.  
  204. /* box container */
  205.  
  206. .sbar {
  207. position:fixed;
  208. margin-top:0px;
  209. margin-left:-300px;
  210. background:#fff;
  211. width:140px;
  212. padding:16px;
  213. border-bottom:1px solid #e0e0e0;
  214. }
  215.  
  216. .sbar a {
  217. border:none;
  218. }
  219.  
  220. .sbimage, .sbimage img {
  221. width:33px;
  222. border-radius:90px;
  223. margin-bottom:8px;
  224. }
  225.  
  226. .tit {
  227. color:{color:accent};
  228. font-size:12px;
  229. {block:ifSidebarImage}
  230. position:absolute;
  231. top:25px;
  232. left:63px;
  233. {/block:ifSidebarImage}
  234. {block:ifNotSidebarImage}
  235. position:absolute;
  236. {/block:ifNotSidebarImage}
  237. text-transform:uppercase;
  238. }
  239.  
  240. .tit:after {
  241. content: "";
  242. background: {color:underline};
  243. opacity:0.3;
  244. position: absolute;
  245. left: -.08em;
  246. right: -.08em;
  247. bottom: 0;
  248. height: 40%;
  249. }
  250.  
  251. .button {
  252. color:{color:accent};
  253. font-size:11px;
  254. letter-spacing:1px;
  255. background-color:#fff;
  256. border:none;
  257. padding:0;
  258. font:inherit;
  259. font-size:11px;
  260. position:relative;
  261. cursor:pointer;
  262. text-transform:uppercase;
  263. }
  264. .button:after {
  265. content: "";
  266. background: {color:underline};
  267. opacity:0.3;
  268. position: absolute;
  269. left: -.08em;
  270. right: -.08em;
  271. bottom: 0;
  272. height: 44%;
  273. }
  274. .button:focus {
  275. outline:0;
  276. }
  277.  
  278. .in {
  279. margin-top:9px;
  280. }
  281.  
  282. .desc {
  283. margin-top:-5px;
  284. {block:ifNotSidebarImage}
  285. margin-top:30px;
  286. {/block:ifNotSidebarImage}
  287. }
  288.  
  289. .sblinks {
  290. margin-top:13px;
  291. }
  292.  
  293. .sblinks a {
  294. float:left;
  295. width:50px;
  296. margin-bottom:3px;
  297. text-transform:capitalize;
  298. margin-right:10px;
  299. }
  300.  
  301. .sticky {
  302. margin-top:15px;
  303. display:inline-block;
  304. margin-bottom:5px;
  305. }
  306.  
  307. .sticky span {
  308. color:#000;
  309. }
  310.  
  311. /* text post */
  312.  
  313. .title {
  314. color:{color:accent};
  315. font-size:13px;
  316. background:#fff;
  317. padding:20px 20px 0px 20px;
  318. }
  319.  
  320. /* post caption */
  321.  
  322. .caption, .text {
  323. background:#fff;
  324. padding:16px 20px 1px 20px;
  325. {block:PermalinkPage}
  326. padding:20px;
  327. border-bottom:1px solid #e0e0e0;
  328. {block:PermalinkPage}
  329. }
  330.  
  331. /* tags */
  332.  
  333. .date {
  334. letter-spacing:0px;
  335. background:#fff;
  336. padding:20px 20px 20px 20px;
  337. border-bottom:1px solid #e0e0e0;
  338. }
  339.  
  340. .date a {
  341. margin-right:8px;
  342. }
  343.  
  344. .d {
  345. display:inline;
  346. position:relative;
  347.  
  348. }
  349.  
  350. .d:after {
  351. content: "";
  352. background: {color:underline};
  353. opacity:0.4;
  354. position: absolute;
  355. left: -.08em;
  356. right: .7em;
  357. bottom: 0;
  358. height: 40%;
  359. }
  360.  
  361. .tags {
  362. display:inline;
  363. {block:ifNotShowTags}display:none;{/block:ifNotShowTags}
  364. }
  365.  
  366. /* ask */
  367.  
  368. .question {
  369. background:#fff;
  370. padding:20px 20px 0px 20px;
  371. }
  372.  
  373. .sender {
  374. font-size:10px;
  375. margin-bottom:6px;
  376. text-transform:uppercase;
  377. }
  378.  
  379. .aimg img {
  380. border-radius:90px;
  381. }
  382.  
  383. a.tumblr_blog {
  384. padding-left:24px;
  385. text-transform:uppercase;
  386. letter-spacing:1px;
  387. font-size:8px;
  388. }
  389. .tumblr_avatar {
  390. width:14px;
  391. border-radius:90px;
  392. position:absolute;
  393. margin-top:1px;
  394. }
  395.  
  396. {block:IndexPage}
  397. .caption p {
  398. margin-top:7px;
  399. }
  400. {/block:IndexPage}
  401.  
  402.  
  403.  
  404. /* chat */
  405.  
  406. .chat {
  407. padding:0;
  408. list-style-type:none;
  409. padding:40px 20px 0px 20px;
  410. }
  411.  
  412. .chat .label {
  413. font-weight:bold;
  414. }
  415.  
  416. /* quote */
  417.  
  418. .quote {
  419. font-size:15px;
  420. line-height:1.3em;
  421. }
  422.  
  423. .source {
  424. padding:10px 20px 0px 20px;
  425. }
  426.  
  427. .media {
  428. position:relative;
  429. display:inline-block;
  430. width:100%;
  431. }
  432.  
  433. /* music player */
  434.  
  435. .playbox {
  436. height:50px;
  437. background:#f2f2f2;
  438. width:{select:post size}px;
  439. border:1px solid #eee;
  440. }
  441.  
  442. .playbutton {
  443. overflow:hidden;
  444. position:relative;
  445. z-index:1000;
  446. width:calc({select:post size}px - 50px);
  447. height:26px;
  448. padding:3px;
  449. margin-left:5px;
  450. top:9px;
  451. border-radius:90px;
  452. }
  453.  
  454. .info {
  455. position:relative;
  456. z-index: 1000;
  457. left: 120px;
  458. top: -13px;
  459. }
  460.  
  461.  
  462. /* DO NOT EDIT ANY OF THE FOLLOWING CODE IF YOU DONT KNOW WHAT YOURE DOING */
  463.  
  464. /* pagination (load more, back to top) */
  465.  
  466. .pagi {
  467. margin-top:{select:post margin}px;
  468. text-align:center;
  469. }
  470. .pagi a {
  471. background:#fff;
  472. padding:15px;
  473. border-bottom:1px solid #e0e0e0;
  474. }
  475.  
  476. /* tumblr controls */
  477.  
  478. iframe.tmblr-iframe {
  479. z-index:99999999999999!important;
  480. top:0!important;
  481. right:0!important;
  482. opacity:0.4;
  483. /* delete invert(1) from here */
  484. filter:invert(1) contrast(150%);
  485. -webkit-filter:invert(1) contrast(150%);
  486. -o-filter:invert(1) contrast(150%);
  487. -moz-filter:invert(1) contrast(150%);
  488. -ms-filter:invert(1) contrast(150%);
  489. /* to here if your blog has a dark background */
  490. transform:scale(0.65);
  491. transform-origin:100% 0;
  492. -webkit-transform:scale(0.65);
  493. -webkit-transform-origin:100% 0;
  494. -o-transform:scale(0.65);
  495. -o-transform-origin:100% 0;
  496. -moz-transform:scale(0.65);
  497. -moz-transform-origin:100% 0;
  498. -ms-transform:scale(0.65);
  499. -ms-transform-origin:100% 0;}
  500.  
  501. iframe.tmblr-iframe:hover {
  502. opacity:0.6!important;}
  503.  
  504. /* infinite scroll stuff */
  505.  
  506. .pagination,
  507. #infscr-loading {
  508. display:none!important;
  509. }
  510.  
  511. /* permalink page notes */
  512.  
  513. .pnotes {
  514. width:{select:post size}px;
  515. font-size:9px;
  516. }
  517.  
  518. .pnotes ol.notes {
  519. list-style-type:decimal-leading-zero;
  520. margin-left:20px;
  521. padding:0;
  522. margin-top: -80px;
  523. }
  524.  
  525. .pnotes img.avatar {
  526. display:none;
  527. }
  528.  
  529. /* :) */
  530.  
  531. .credit {
  532. bottom:20px;
  533. right:30px;
  534. position:fixed;
  535. font-size:10px;
  536. color:#000;
  537.  
  538. }
  539.  
  540. .sfm input {
  541. background-color: #eee;
  542. font-size:10px;
  543. font-family:{select:font};
  544. border: 0px;
  545. width:250px;
  546. border-radius:3px;
  547. margin-top: 0px;
  548. color: #999;
  549. padding: 4px 8px;
  550. outline:none;
  551. }
  552.  
  553. </style>
  554.  
  555.  
  556. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  557.  
  558. </head>
  559. <body>
  560.  
  561. <div class="credit"><a href="https://solasz.tumblr.com" title="theme"><span class="lnr lnr-moon"></span></a></div>
  562.  
  563.  
  564. <div class="main">
  565.  
  566. <div class="sbar">
  567. {block:ifSidebarImage}
  568. <div class="sbimage"><a href="/"><img src="{image:sidebar}"></a></div>
  569. {/block:ifSidebarImage}
  570. <div class="tit"><a href="/">{title}</a></div>
  571. <div class="desc">{description}</div>
  572. <div class="sblinks">
  573. <a href="{text:Link 1}">› {text:Link 1 Title}</a>
  574. <a href="{text:Link 2}">› {text:Link 2 Title}</a>
  575. <a href="{text:Link 3}">› {text:Link 3 Title}</a>
  576. <a href="{text:Link 4}">› {text:Link 4 Title}</a>
  577. </div>
  578. {block:ifUpdatesSection}
  579. <div class="sticky">
  580. <button class="button">{text:Updates Title}</button>
  581. <div class="in" {block:ifUpdatesSectionToggle}style="display:none;"{/block:ifUpdatesSectionToggle}>
  582. {text:Updates Content}
  583. </div>
  584. </div>
  585. {/block:ifUpdatesSection}
  586. </div>
  587.  
  588.  
  589. <!--- don't edit any of the things below if you don't know what you're doing --->
  590.  
  591. <div class="content">
  592.  
  593. {block:Posts}
  594. <article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}">
  595.  
  596. <section class="post">
  597.  
  598. {block:Audio}
  599. {block:AudioPlayer}
  600. <div class="playbox">
  601. <div class="playbutton">{block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}</div>
  602. <div class="info">
  603. {block:Artist}{Artist}{/block:Artist} &mdash;
  604. {block:TrackName}{TrackName}{/block:TrackName}
  605. </div>
  606. </div>
  607. {/block:Audio}
  608.  
  609.  
  610. {block:Photo}
  611. <div class="photo">
  612. <a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
  613. </div>
  614. {/block:Photo}
  615.  
  616.  
  617. {block:Photoset}
  618. <div class="wrap">
  619. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" 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>{/block:Photos}</div>
  620. </div>
  621. {/block:Photoset}
  622.  
  623.  
  624. {block:Video}
  625. <div class="video">{Video-500}</div>
  626. {/block:Video}
  627.  
  628.  
  629. {block:Answer}
  630. <div class="question">
  631. <div class="sender">{Asker} said..</div>
  632. <span class="inquiry">{Question}</span>
  633. </div>
  634. <div class="answer text"><div class="sender">{Name} answered:</div> {Answer}</div>
  635. {/block:Answer}
  636.  
  637.  
  638. {block:Chat}
  639. {block:Title}<div class="title">{Title}</div>{/block:Title}
  640. <ul class="chat text">
  641. {block:Lines}
  642. <li class="line">
  643. {block:Label}
  644. <span class="label">{Label}&nbsp; </span>
  645. {/block:Label}
  646. {Line}
  647. </li>
  648. {/block:Lines}
  649. </ul>
  650. {/block:Chat}
  651.  
  652.  
  653. {block:Link}
  654. <div class="title"><a href="{URL}">{Name}</a></div>
  655. {block:Description}<div class="text">{Description}</div>{/block:Description}
  656. {/block:Link}
  657.  
  658.  
  659. {block:Quote}
  660. <div class="quote text">&ldquo;{Quote}&rdquo;</div>
  661. {block:Source}
  662. <div class="source text">&mdash; {Source}</div>
  663. {/block:Source}
  664. {/block:Quote}
  665.  
  666.  
  667. {block:Text}
  668. {block:Title}<div class="title">{Title}</div>{/block:Title}
  669. <div class="caption">{Body}</div>
  670. {/block:Text}
  671.  
  672.  
  673. {block:Caption}
  674. <div class="caption">{Caption}</div>
  675. {/block:Caption}
  676.  
  677.  
  678. {block:Date}
  679. <div class="date">
  680. <div class="d"><a href="{permalink}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a></div>
  681. {block:ifShowTags}<div class="tags">
  682. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  683. </div>{/block:ifShowTags}
  684. </div>
  685. {/block:Date}
  686.  
  687.  
  688. </section>
  689. </article>
  690.  
  691. {block:PermalinkPage}{block:PostNotes}<div class="pnotes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  692.  
  693. {/block:Posts}
  694.  
  695.  
  696.  
  697.  
  698. <!--- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} --->
  699. </div>
  700.  
  701. {block:Pagination}<div class="pagination">{block:PreviousPage}<a class="prev" href="{PreviousPage}">previous</a>{/block:PreviousPage} {block:NextPage}<a class="next" href="{NextPage}">next</a>{/block:NextPage}</div>{/block:Pagination}
  702.  
  703. {block:IndexPage} <div class="pagi">
  704. {block:Pagination}<a href="#" class="load-more">Load More</a>{/block:Pagination} </div>{/block:IndexPage}
  705.  
  706. </div>
  707.  
  708. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  709. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  710. <script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  711. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  712.  
  713. {block:IndexPage}
  714. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  715. {/block:IndexPage}
  716.  
  717. <script>
  718. $(document).ready(function(){
  719. $('.photo-slideshow').pxuPhotoset({
  720. lightbox: true,
  721. rounded: false,
  722. gutter: '2px',
  723. photoset: '.photo-slideshow',
  724. photoWrap: '.photo-data',
  725. photo: '.pxu-photo'
  726. });
  727. var $container = $('.content');
  728. $container.infinitescroll({
  729. itemSelector: '.entry',
  730. navSelector: '.pagination',
  731. nextSelector: '.next',
  732. loadingImg: '',
  733. loadingText: '<em></em>',
  734. bufferPx: 2000
  735. },
  736. function( newElements ) {
  737. var $newElems = $( newElements );
  738. $newElems.unnest();
  739. $newElems.find('.photo-slideshow').pxuPhotoset({
  740. lightbox: true,
  741. rounded: false,
  742. gutter: '2px',
  743. photoset: '.photo-slideshow',
  744. photoWrap: '.photo-data',
  745. photo: '.pxu-photo'
  746. });
  747. resizeVideos();
  748. });
  749. $(window).unbind('.infscr');
  750. $('.load-more').click(function(){
  751. $container.infinitescroll('retrieve');
  752. return false;
  753. });
  754. });
  755.  
  756.  
  757. $('.entry').unnest({
  758. yourCaption: ".caption", //your caption selector, the div wrapping
  759. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  760. newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
  761. originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  762. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  763. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  764. usernameColon: false //if turned to false, removes the colon at the end of usernames bc :) seriously :) hwy :)
  765. });
  766.  
  767. {block:ifUpdatesSectionToggle}
  768. $( "button" ).click(function() {
  769. $( ".in" ).slideToggle( "fast" );
  770. });
  771. {/block:ifUpdatesSectionToggle}
  772.  
  773.  
  774. </script>
  775.  
  776. </body>
  777. </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!