API tools faq
paste
bisexualsteverogers

theme 03 with pagination

bisexualsteverogers
Nov 22nd, 2018
630
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.24 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:50px;
  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 {
  465. margin-top:20px;text-align:center;
  466. }
  467.  
  468. /* tumblr controls */
  469.  
  470. iframe.tmblr-iframe {
  471. z-index:99999999999999!important;
  472. top:0!important;
  473. right:0!important;
  474. opacity:0.4;
  475. /* delete invert(1) from here */
  476. filter:invert(1) contrast(150%);
  477. -webkit-filter:invert(1) contrast(150%);
  478. -o-filter:invert(1) contrast(150%);
  479. -moz-filter:invert(1) contrast(150%);
  480. -ms-filter:invert(1) contrast(150%);
  481. /* to here if your blog has a dark background */
  482. transform:scale(0.65);
  483. transform-origin:100% 0;
  484. -webkit-transform:scale(0.65);
  485. -webkit-transform-origin:100% 0;
  486. -o-transform:scale(0.65);
  487. -o-transform-origin:100% 0;
  488. -moz-transform:scale(0.65);
  489. -moz-transform-origin:100% 0;
  490. -ms-transform:scale(0.65);
  491. -ms-transform-origin:100% 0;}
  492.  
  493. iframe.tmblr-iframe:hover {
  494. opacity:0.6!important;}
  495.  
  496.  
  497. /* permalink page notes */
  498.  
  499. .pnotes {
  500. width:{select:post size}px;
  501. font-size:9px;
  502. }
  503.  
  504. .pnotes ol.notes {
  505. list-style-type:decimal-leading-zero;
  506. margin-left:20px;
  507. padding:0;
  508. margin-top: -80px;
  509. }
  510.  
  511. .pnotes img.avatar {
  512. display:none;
  513. }
  514.  
  515. /* :) */
  516.  
  517. .credit {
  518. bottom:20px;
  519. right:30px;
  520. position:fixed;
  521. font-size:10px;
  522. color:#000;
  523.  
  524. }
  525.  
  526. .sfm input {
  527. background-color: #eee;
  528. font-size:10px;
  529. font-family:{select:font};
  530. border: 0px;
  531. width:250px;
  532. border-radius:3px;
  533. margin-top: 0px;
  534. color: #999;
  535. padding: 4px 8px;
  536. outline:none;
  537. }
  538.  
  539. </style>
  540.  
  541.  
  542. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">
  543.  
  544. </head>
  545. <body>
  546.  
  547. <div class="credit"><a href="https://solasz.tumblr.com" title="theme"><span class="lnr lnr-moon"></span></a></div>
  548.  
  549.  
  550. <div class="main">
  551.  
  552. <div class="sbar">
  553. {block:ifSidebarImage}
  554. <div class="sbimage"><a href="/"><img src="{image:sidebar}"></a></div>
  555. {/block:ifSidebarImage}
  556. <div class="tit"><a href="/">{title}</a></div>
  557. <div class="desc">{description}</div>
  558. <div class="sblinks">
  559. <a href="{text:Link 1}">› {text:Link 1 Title}</a>
  560. <a href="{text:Link 2}">› {text:Link 2 Title}</a>
  561. <a href="{text:Link 3}">› {text:Link 3 Title}</a>
  562. <a href="{text:Link 4}">› {text:Link 4 Title}</a>
  563. </div>
  564. {block:ifUpdatesSection}
  565. <div class="sticky">
  566. <button class="button">{text:Updates Title}</button>
  567. <div class="in" {block:ifUpdatesSectionToggle}style="display:none;"{/block:ifUpdatesSectionToggle}>
  568. {text:Updates Content}
  569. </div>
  570. </div>
  571. {/block:ifUpdatesSection}
  572. </div>
  573.  
  574.  
  575. <!--- don't edit any of the things below if you don't know what you're doing --->
  576.  
  577. <div class="content">
  578.  
  579. {block:Posts}
  580. <article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}">
  581.  
  582. <section class="post">
  583.  
  584. {block:Audio}
  585. {block:AudioPlayer}
  586. <div class="playbox">
  587. <div class="playbutton">{block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}</div>
  588. <div class="info">
  589. {block:Artist}{Artist}{/block:Artist} &mdash;
  590. {block:TrackName}{TrackName}{/block:TrackName}
  591. </div>
  592. </div>
  593. {/block:Audio}
  594.  
  595.  
  596. {block:Photo}
  597. <div class="photo">
  598. <a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
  599. </div>
  600. {/block:Photo}
  601.  
  602.  
  603. {block:Photoset}
  604. <div class="wrap">
  605. <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>
  606. </div>
  607. {/block:Photoset}
  608.  
  609.  
  610. {block:Video}
  611. <div class="video">{Video-500}</div>
  612. {/block:Video}
  613.  
  614.  
  615. {block:Answer}
  616. <div class="question">
  617. <div class="sender">{Asker} said..</div>
  618. <span class="inquiry">{Question}</span>
  619. </div>
  620. <div class="answer text"><div class="sender">{Name} answered:</div> {Answer}</div>
  621. {/block:Answer}
  622.  
  623.  
  624. {block:Chat}
  625. {block:Title}<div class="title">{Title}</div>{/block:Title}
  626. <ul class="chat text">
  627. {block:Lines}
  628. <li class="line">
  629. {block:Label}
  630. <span class="label">{Label}&nbsp; </span>
  631. {/block:Label}
  632. {Line}
  633. </li>
  634. {/block:Lines}
  635. </ul>
  636. {/block:Chat}
  637.  
  638.  
  639. {block:Link}
  640. <div class="title"><a href="{URL}">{Name}</a></div>
  641. {block:Description}<div class="text">{Description}</div>{/block:Description}
  642. {/block:Link}
  643.  
  644.  
  645. {block:Quote}
  646. <div class="quote text">&ldquo;{Quote}&rdquo;</div>
  647. {block:Source}
  648. <div class="source text">&mdash; {Source}</div>
  649. {/block:Source}
  650. {/block:Quote}
  651.  
  652.  
  653. {block:Text}
  654. {block:Title}<div class="title">{Title}</div>{/block:Title}
  655. <div class="caption">{Body}</div>
  656. {/block:Text}
  657.  
  658.  
  659. {block:Caption}
  660. <div class="caption">{Caption}</div>
  661. {/block:Caption}
  662.  
  663.  
  664. {block:Date}
  665. <div class="date">
  666. <div class="d"><a href="{permalink}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a></div>
  667. {block:ifShowTags}<div class="tags">
  668. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  669. </div>{/block:ifShowTags}
  670. </div>
  671. {/block:Date}
  672.  
  673.  
  674. </section>
  675. </article>
  676.  
  677. {block:PermalinkPage}{block:PostNotes}<div class="pnotes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}
  678.  
  679. {/block:Posts}
  680.  
  681.  
  682. <!--- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} --->
  683. </div>
  684.  
  685.  
  686. {block:Pagination}<div class="pagination">{block:PreviousPage}<span class="lnr lnr-chevron-left" style="font-size:7px;"></span> <a class="prev" href="{PreviousPage}">back</a>{/block:PreviousPage} {block:NextPage}<a class="next" href="{NextPage}">next</a> <span class="lnr lnr-chevron-right" style="font-size:7px;"></span>{/block:NextPage}</div>{/block:Pagination}
  687.  
  688. </div>
  689.  
  690. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  691. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  692. <script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  693. <script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  694.  
  695. {block:IndexPage}
  696. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  697. {/block:IndexPage}
  698.  
  699. <script>
  700. $(document).ready(function(){
  701. $('.photo-slideshow').pxuPhotoset({
  702. lightbox: true,
  703. rounded: false,
  704. gutter: '1px',
  705. photoset: '.photo-slideshow',
  706. photoWrap: '.photo-data',
  707. photo: '.pxu-photo'
  708. });
  709. $("[title]").style_my_tooltips({
  710. tip_follows_cursor:true,
  711. tip_delay_time:0,
  712. tip_fade_speed:200,
  713. attribute:"title"
  714. });
  715. });
  716.  
  717.  
  718. $('.entry').unnest({
  719. yourCaption: ".caption", //your caption selector, the div wrapping
  720. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  721. newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
  722. originalPostCaptionUsername: true, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  723. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  724. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  725. usernameColon: false //if turned to false, removes the colon at the end of usernames bc :) seriously :) hwy :)
  726. });
  727.  
  728. {block:ifUpdatesSectionToggle}
  729. $( "button" ).click(function() {
  730. $( ".in" ).slideToggle( "fast" );
  731. });
  732. {/block:ifUpdatesSectionToggle}
  733.  
  734.  
  735. </script>
  736.  
  737. </body>
  738. </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!