bychloethemes

Incandescent Theme - by Chloe

Aug 5th, 2015
1,086
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.36 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. _ _ _
  5. | |__ _ _ ___| |__ | | ___ ___
  6. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  7. | |_) | |_| | | (__| | | | | (_) | __/
  8. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  9. |___/
  10.  
  11. Incandescent Theme by Chloe | @dontbrag | @bychloethemes
  12. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistibute.
  13.  
  14. For html help go to @htmlqueens
  15.  
  16. -->
  17. <meta name="image:Background" content="" />
  18.  
  19. <meta name="color:Background" content="#f6f6f6" />
  20. <meta name="color:Scrollbar" content="#000" />
  21. <meta name="color:Text" content="#000" />
  22. <meta name="color:Links" content="#666" />
  23. <meta name="color:Post Backgrounds" content="#fff" />
  24. <meta name="color:Accent" content="#eee" />
  25. <meta name="color:Dark Accent" content="#ccc" />
  26.  
  27. <meta name="select:About Tab Height" content="shorty" title="Short" />
  28. <meta name="select:About Tab Height" content="meddy" title="Medium" />
  29. <meta name="select:About Tab Height" content="tally" title="Tall" />
  30.  
  31. <meta name="select:Number of Links" content="onerow" title="1-3" />
  32. <meta name="select:Number of Links" content="tworow" title="4-6" />
  33. <meta name="select:Number of Links" content="trerow" title="5-9" />
  34.  
  35. <meta name="if:Tiled Background" content="0"/>
  36. <meta name="if:Pagination" content="1" />
  37. <meta name="if:Anon Enabled" content="0" />
  38.  
  39. <meta name="text:About" content="" />
  40. <meta name="text:Link 1" content="" />
  41. <meta name="text:URL 1" content="" />
  42. <meta name="text:Link 2" content="" />
  43. <meta name="text:URL 2" content="" />
  44. <meta name="text:Link 3" content="" />
  45. <meta name="text:URL 3" content="" />
  46. <meta name="text:Link 4" content="" />
  47. <meta name="text:URL 4" content="" />
  48. <meta name="text:Link 5" content="" />
  49. <meta name="text:URL 5" content="" />
  50. <meta name="text:Link 6" content="" />
  51. <meta name="text:URL 6" content="" />
  52. <meta name="text:Link 7" content="" />
  53. <meta name="text:URL 7" content="" />
  54. <meta name="text:Link 8" content="" />
  55. <meta name="text:URL 8" content="" />
  56. <meta name="text:Link 9" content="" />
  57. <meta name="text:URL 9" content="" />
  58.  
  59. {block:Description}
  60. <meta name="description" content="{MetaDescription}" />
  61. {/block:Description}
  62. <meta charset="utf-8">
  63. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  64. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  65. <title>{text:Tab Title}</title>
  66. <link rel="shortcut icon" href="{Favicon}">
  67. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  68. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  69. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  70. <link href='//fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
  71. <style type="text/css">
  72. ::-webkit-scrollbar {
  73. background-color: rgba(0,0,0,0);
  74. height: 7px;
  75. width: 7px;
  76. }
  77. ::-webkit-scrollbar-thumb {
  78. background-color: {color:Scrollbar};
  79. width: 7px;
  80. height: 7px;
  81. }
  82. body {
  83. background: {color:Background} url('{image:Background}'){block:IfNotTiledBackground}
  84. no-repeat center center fixed;
  85. -webkit-background-size: cover;
  86. -moz-background-size: cover;
  87. -o-background-size: cover;
  88. background-size: cover;
  89. {/block:IfNotTiledBackground}
  90. {block:IfTiledBackground}
  91. repeat fixed;
  92. {/block:IfTiledBackground}
  93. color: {color:Text};
  94. font-family: 'Raleway', sans-serif;
  95. font-size: 12px;
  96. margin: 0;
  97. padding: 0;
  98. }
  99. iframe, img, embed, object, video {
  100. max-width: 100%;
  101. }
  102. img {
  103. height: auto;
  104. width: auto;
  105. vertical-align:middle;
  106. }
  107. blockquote {
  108. border-left:1px solid {color:Text};
  109. margin:0 0 0 15px;
  110. padding:0 0 0 8px;
  111. }
  112. a:link, a:visited {
  113. color:{color:Links};
  114. text-decoration:none;
  115. }
  116. a:hover, a:active {
  117. }
  118. a:focus {
  119. outline:none;
  120. }
  121. b, strong {
  122. font-weight:600;
  123. }
  124. hr {
  125. height:1px;
  126. background:{color:Text};
  127. border:0;
  128. }
  129. h1, h2, h3 {
  130. font-weight:400;
  131. }
  132. cite {
  133. margin-top:3px;
  134. display:block;
  135. text-align:right;
  136. }
  137. .credit {
  138. width:14px;
  139. height:13px;
  140. color: {color:Text};
  141. position:fixed;
  142. bottom: 15px;
  143. right: 15px;
  144. line-height: 14px;
  145. font-size:12px;
  146. text-transform: uppercase;
  147. padding:3px 4px;
  148. overflow: hidden;
  149. z-index:999999999999999999;
  150. text-align:left;
  151. -webkit-transition: all 0.5s ease-in-out;
  152. -moz-transition: all 0.5s ease-in-out;
  153. -o-transition: all 0.5s ease-in-out;
  154. transition: all 0.5s ease-in-out;
  155. }
  156. .fa-diamond {
  157. right:4px;
  158. position:absolute;
  159. }
  160. .credit:hover {
  161. width:126px;
  162. background:#000;
  163. color:#fff;
  164. -webkit-transition: all 0.5s ease-in-out;
  165. -moz-transition: all 0.5s ease-in-out;
  166. -o-transition: all 0.5s ease-in-out;
  167. transition: all 0.5s ease-in-out;
  168. }
  169. .credit a {
  170. color:#fff;
  171. text-decoration: none;
  172. }
  173. .credit .mine {
  174. opacity:0;
  175. visibility:hidden;
  176. }
  177. .credit:hover .mine {
  178. opacity: 1;
  179. visibility: visible;
  180. -webkit-transition: all 0.5s ease-in-out 0.5s;
  181. -moz-transition: all 0.5s ease-in-out 0.5s;
  182. -o-transition: all 0.5s ease-in-out 0.5s;
  183. transition: all 0.5s ease-in-out 0.5s;
  184. }
  185. .sidebar {
  186. width:295px;
  187. background:{color:Post Backgrounds};
  188. position:fixed;
  189. top:100px;
  190. padding:20px;
  191. z-index:9;
  192. color:{color:Text};
  193. left:-408px;
  194. margin-left:50%;
  195. }
  196. .sidebar h1 {
  197. margin:0;
  198. text-align:left;
  199. }
  200. .sidebar h2 {
  201. margin:0;
  202. text-align:left;
  203. }
  204. .sidebar a {
  205. color:{color:Sidebar Links};
  206. }
  207. .tab {
  208. margin: 0;
  209. display: inline-block;
  210.  
  211. }
  212. .tab label {
  213. color: {color:Text};
  214. background-color: {color:Accent};
  215. padding: 5px;
  216. margin:3px;
  217. text-align: center;
  218. cursor: pointer;
  219. display: inline-block;
  220. width:80px;
  221.  
  222. }
  223. .tab label:hover {
  224. background: {color:Dark Accent};
  225. color:{color:Text};
  226. }
  227. [type=radio]:checked ~ label {
  228. z-index: 2;
  229. color: {color:Text};
  230. background: {color:Dark Accent};
  231. }
  232.  
  233. .tab [type=radio] {
  234. display: none;
  235. }
  236. .radio-content {
  237. width:295px;
  238. padding:20px;
  239. position: absolute;
  240. left:0px;
  241. background:{color:Post Backgrounds};
  242. display:none;
  243. overflow-y:auto;
  244. }
  245.  
  246. [type=radio]:checked ~ label ~ .radio-content {
  247. display:block;
  248. }
  249. .onerow {
  250. height:30px;
  251. bottom:-85px;
  252. }
  253. .tworow {
  254. height:60px;
  255. bottom:-115px;
  256. }
  257. .trerow {
  258. height:90px;
  259. bottom:-145px;
  260. }
  261. .shorty {
  262. height:95px;
  263. bottom:-150px;
  264. }
  265. .meddy {
  266. height:165px;
  267. bottom:-220px;
  268. }
  269. .tally {
  270. height:240px;
  271. bottom:-295px;
  272. }
  273. ul.navlinks {
  274. padding:0;
  275. margin:0;
  276. list-style-type:none;
  277. text-align: center;
  278. }
  279. ul.navlinks li {
  280. background-color: {color:Accent};
  281. padding: 5px;
  282. margin:3px;
  283. text-align: center;
  284. display: inline-block;
  285. width:80px;
  286. }
  287. ul.navlinks li:hover {
  288. background:{color:Dark Accent};
  289. }
  290. .pagination {
  291. margin-top:20px;
  292. width:440px;
  293. text-align:center;
  294. margin-bottom:40px;
  295. }
  296. .pagination a {
  297. background:{color:Post Backgrounds};
  298. padding:10px 20px;
  299. margin:0 5px;
  300. }
  301. .pagination a:hover {
  302. background:{color:Dark Accent};
  303. }
  304. .current_page {
  305. padding:10px 20px;
  306. background:{color:Accent};
  307. margin:0 5px;
  308. }
  309. .content {
  310. width:440px;
  311. margin-left:50%;
  312. left:-32px;
  313. }
  314. article {
  315. width:400px;
  316. margin:20px 0;
  317. padding:20px;
  318. background:{color:Post Backgrounds};
  319. }
  320. article h1 {
  321. margin:0;
  322. }
  323. article p {
  324. margin:10px 0 0 0;
  325. }
  326. article blockquote p {
  327. margin-bottom:10px;
  328. }
  329. article ul {
  330. padding:0;
  331. margin-left:30px;
  332. }
  333. .photoset {
  334. margin-bottom:-1px;
  335. }
  336. .short h1 {
  337. font-size:2em;
  338. }
  339. .medium h1 {
  340. font-size:1.5em;
  341. }
  342. .long h1 {
  343. font-size:1.2em;
  344. }
  345. ul.chat-list {
  346. list-style-type:none;
  347. padding:0;
  348. margin:0;
  349. }
  350. ul.chat-list li {
  351. margin:3px 0;
  352. padding:10px;
  353. }
  354. ul.chat-list li.even {
  355. background:{color:Accent}
  356. }
  357. span.label {
  358. font-weight:bold;
  359. }
  360. .album-art {
  361. float:left;
  362. }
  363. .album-art img {
  364. height:140px;
  365. width:140px;
  366. }
  367. .audio-info {
  368. min-height:130px;
  369. padding-left:10px;
  370. margin-top:4px;
  371. width:250px;
  372. padding-bottom:10px;
  373. display:inline-block;
  374. }
  375. .audio-info .info {
  376. padding:9px;
  377. margin:2px 0;
  378. }
  379. .audio-info .info:nth-of-type(2),
  380. .audio-info .info:nth-of-type(4) {
  381. background:{color:Accent};
  382. }
  383. .tumblr_audio_player {
  384. width: 50px;
  385. height: 50px;
  386. border-radius: 50%;
  387. position: absolute;
  388. top: 70px;
  389. left: 70px;
  390. opacity: 0.8;
  391. }
  392. .asks, .asks2 {
  393. margin-bottom:10px;
  394. }
  395. .asks {
  396. float:left;
  397. margin-right:15px;
  398. }
  399. .asks2 {
  400. float:right;
  401. margin-left:15px;
  402. }
  403. .question, .question2 {
  404. margin-bottom:10px;
  405. background:{color:Accent};
  406. padding:4px;
  407. line-height:18px;
  408. }
  409. .question {
  410. margin-left:63px;
  411. }
  412. .question:before {
  413. content:"";
  414. width: 0;
  415. height: 0;
  416. border-style: solid;
  417. z-index:7;
  418. border-color: transparent {color:Accent} transparent transparent;
  419. position:absolute;
  420. border-width: 7px 11px 7px 0px;
  421. left:72px;
  422. }
  423. .question2 {
  424. margin-right:63px;
  425. }
  426. .question2:before {
  427. content:"";
  428. width: 0;
  429. height: 0;
  430. border-style: solid;
  431. z-index:7;
  432. border-color: transparent transparent transparent {color:Accent};
  433. position:absolute;
  434. border-width: 7px 0px 7px 11px;
  435. right:72px;
  436. }
  437. .question2 p {
  438. display:inline;
  439. margin:0;
  440. }
  441. ul.permas {
  442. padding:0;
  443. list-style-type:none;
  444. margin:10px 0 2px 0;
  445. text-align:right;
  446. overflow:hidden;
  447. }
  448. ul.permas li {
  449. display:inline-block;
  450. }
  451. ul.permas li:first-child {
  452. float:left;
  453. }
  454. ol.notes {
  455. list-style-type: none;
  456. margin:0 5px 0 0;
  457. padding:0;
  458. }
  459.  
  460. ol.notes li.note {
  461. padding:0;
  462. text-align:left;
  463. line-height:16px;
  464. width:100%;
  465. border:0;
  466. border-radius:0;
  467. background:transparent;
  468. padding-bottom:8px;
  469. padding-top:8px;
  470. }
  471. ol.notes li.note img.avatar {
  472. display:none;
  473. }
  474.  
  475. ol.notes li.note span.action {
  476. font-weight: normal;
  477. }
  478.  
  479. ol.notes li.note .answer_content {
  480. font-weight: normal;
  481. }
  482. #infscr-loading {
  483. position:absolute;
  484. bottom:-10px;
  485. width:200px;
  486. margin-left:50%;
  487. left:-100px;
  488. text-align:center;
  489. color:{color:Links};
  490. }
  491. #infscr-loading img{
  492. display:none;
  493. }
  494. </style>
  495. </head>
  496. <body>
  497. <div class="left-sidebar sidebar">
  498. <h1>{Title}</h1>
  499. {block:Description}<p>{Description}</p>{/block:Description}
  500. <a href="/"><div class="tab">
  501. <label>home</label>
  502. </div></a>
  503. <div class="tab">
  504. <input type="radio" id="tab-2" name="tab-group-1">
  505. <label for="tab-2">about</label>
  506. <div class="radio-content {select:About Tab Height}">
  507. {text:About}
  508. </div>
  509. </div>
  510. <div class="tab">
  511. <input type="radio" id="tab-3" name="tab-group-1">
  512. <label for="tab-3">ask</label>
  513. <div class="radio-content" style="overflow:hidden;height:{block:IfNotAnonEnabled}240px;bottom:-295px;{/block:IfNotAnonEnabled}{block:IfAnonEnabled}260px;bottom:-315px;{/block:IfAnonEnabled}">
  514. <iframe frameborder="0" width="295px" height="235px" id="ask_form" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" seamless></iframe>
  515. </div>
  516. </div>
  517. <div class="tab">
  518. <input type="radio" id="tab-4" name="tab-group-1">
  519. <label for="tab-4">links</label>
  520. <div class="radio-content {select:Number of Links}">
  521. <ul class="navlinks">
  522. {block:IfLink1}
  523. <a href="{text:URL 1}"><li>{text:Link 1}</li></a>
  524. {/block:IfLink1}
  525. {block:IfLink2}
  526. <a href="{text:URL 2}"><li>{text:Link 2}</li></a>
  527. {/block:IfLink2}
  528. {block:IfLink3}
  529. <a href="{text:URL 3}" ><li>{text:Link 3}</li></a>
  530. {/block:IfLink3}
  531. {block:IfLink4}
  532. <a href="{text:URL 4}"><li>{text:Link 4}</li></a>
  533. {/block:IfLink4}
  534. {block:IfLink5}
  535. <a href="{text:URL 5}"><li>{text:Link 5}</li></a>
  536. {/block:IfLink5}
  537. {block:IfLink6}
  538. <a href="{text:URL 6}" ><li>{text:Link 6}</li></a>
  539. {/block:IfLink6}
  540. {block:IfLink7}
  541. <a href="{text:URL 7}"><li>{text:Link 7}</li></a>
  542. {/block:IfLink7}
  543. {block:IfLink8}
  544. <a href="{text:URL 8}"><li>{text:Link 8}</li></a>
  545. {/block:IfLink8}
  546. {block:IfLink9}
  547. <a href="{text:URL 9}" ><li>{text:Link 9}</li></a>
  548. {/block:IfLink9}
  549. </ul>
  550. </div>
  551. </div>
  552. <a href="/archive"><div class="tab">
  553. <label>past</label>
  554. </div></a>
  555. <a href="http://dontbrag.tumblr.com" target="_blank"><div class="tab">
  556. <label>theme</label>
  557. </div></a>
  558. </div>
  559. <div class="content">
  560. {block:Posts}
  561. {block:PermalinkPagination}
  562. <article>
  563. <center>Posted on {DayOfWeek} the {DayOfMonth}{DayOfMonthSuffix} of {Month}, {Year} at {12Hour}:{Minutes}{AmPm} with {NoteCountWithLabel}.</center>
  564. </article>
  565. {/block:PermalinkPagination}
  566. <article>
  567. {block:Text}
  568. <div class="text">
  569. {block:Title}<h1>{Title}</h1>{block:Title}
  570. <p>{Body}</p>
  571. </div>
  572. {/block:Text}
  573.  
  574. {block:Photo}
  575. <div class="photo">
  576. <div class="make_lightbox" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  577. </div>
  578. {block:IndexPage}
  579. {block:Caption}<p>{Caption}</p>{/block:Caption}
  580. {/block:IndexPage}
  581. {/block:Photo}
  582.  
  583. {block:Photoset}
  584. <div class="photoset">
  585. {Photoset-400}
  586. {block:IndexPage}
  587. {block:Caption}<p>{Caption}</p>{/block:Caption}
  588. {/block:IndexPage}
  589. </div>
  590. {/block:Photoset}
  591.  
  592. {block:Quote}
  593. <div class="quote {Length}">
  594. <h1>&ldquo;{Quote}&rdquo;</h1>
  595. {block:IndexPage}
  596. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  597. {/block:IndexPage}
  598. </div>
  599. {/block:Quote}
  600.  
  601. {block:Link}
  602. <div class="link">
  603. <h1><i class="fa fa-link"></i>&nbsp;<a href="{URL}" {Target}>{Name}</a></h1>
  604. {block:IndexPage}
  605. {block:Description}<p>{Description}</p>{/block:Description}
  606. {/block:IndexPage}
  607. </div>
  608. {/block:Link}
  609.  
  610. {block:Chat}
  611. <div class="chat">
  612. {block:Title}<h1>{Title}</h1>{/block:Title}
  613. <ul class="chat-list">
  614. {block:Lines}
  615. <li class="{Alt}">
  616. {block:Label}<span class="label">{Label}</span>{/block:Label}
  617. {Line}</li>
  618. {/block:Lines}
  619. </ul>
  620. </div>
  621. {/block:Chat}
  622.  
  623. {block:Audio}
  624. <div class="audio">
  625. {block:AlbumArt}
  626. <div class="album-art">
  627. <img src="{AlbumArtURL}">
  628. </div>
  629. {/block:AlbumArt}
  630. <div class="audio-info" {block:AudioEmbed}style="display:none;"{/block:AudioEmbed}>
  631. <div class="info">Artist: <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}</div>
  632. <div class="info">Title: <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}</div>
  633. <div class="info">Album: <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}</div>
  634. <div class="info">Plays: {FormattedPlayCount}</div></div>
  635. {block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}
  636. {block:AudioEmbed}{AudioEmbed-400}{/block:AudioEmbed}
  637. {block:IndexPage}
  638. {block:Caption}<p>{Caption}</p>{/block:Caption}
  639. {/block:IndexPage}
  640. </div>
  641. {/block:Audio}
  642.  
  643. {block:Video}
  644. <div class="video">
  645. {Video-400}
  646. {block:IndexPage}
  647. {block:Caption}<p>{Caption}</p>{/block:Caption}
  648. {/block:IndexPage}
  649. </div>
  650. {block:Video}
  651.  
  652. {block:Answer}
  653. <div class="answer">
  654. <img class="asks" src="{AskerPortraitURL-48}">
  655. <div class="question">{lang:Asker asked 2}: {Question}</div>
  656. <hr style="visibility:hidden;width:100%;margin:0;">
  657. {block:Answerer}
  658. <img class="asks2" src="{AnswererPortraitURL-48}">
  659. <div class="question2">{Answerer} replied: {Answer}</div>
  660. <hr style="visibility:hidden;width:100%;">
  661. {/block:Answerer}
  662. {Replies}
  663. </div>
  664. {/block:Answer}
  665.  
  666. {block:IndexPage}
  667. <ul class="permas">
  668. <li><a href="{Permalink}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} &middot; {NoteCountWithLabel}</a></li>
  669. <li><a href="{ReblogURL}">Reblog</a></li>
  670. {block:RebloggedFrom}<li>&middot;</li>
  671. <li><a href="{ReblogParentURL}">Via</a></li>
  672. {/block:RebloggedFrom}
  673. {block:ContentSource}<li>&middot;</li>
  674. <li><a href="{SourceURL}">Source</a></li>
  675. {/block:ContentSource}
  676. </ul>
  677. {block:HasTags}
  678. <div style="text-align:center">filed under: &nbsp;{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}</div>
  679. {/block:HasTags}
  680. {/block:IndexPage}
  681. </article>
  682. {block:PermalinkPage}
  683. {block:Photo}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Photo}
  684.  
  685. {block:Photoset}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Photoset}
  686.  
  687. {block:Quote}{block:Source}<article><cite style="font-style:normal;"> &mdash;&nbsp;{Source}</cite></article>{/block:Source}{/block:Quote}
  688.  
  689. {block:Link}{block:Description}<article>{Description}</article>{/block:Description}{/block:Link}
  690.  
  691. {block:Audio}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Audio}
  692.  
  693. {block:Video}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Video}
  694.  
  695. {block:HasTags}
  696. <article id="tags">
  697. filed under: {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}
  698. </article>{/block:HasTags}
  699. {block:PostNotes}
  700. <article id="notes" class="postnotes">
  701. {PostNotes}
  702. </article>
  703. {/block:PostNotes}
  704. {/block:PermalinkPage}
  705. {/block:Posts}
  706. {block:Pagination}
  707. <div class="pagination" {block:IfNotPagination}style="visibility:hidden;"{/block:IfNotPagination}>
  708. {block:PreviousPage}
  709. <a href="{PreviousPage}"><i class="fa fa-chevron-left"></i></a>
  710. {/block:PreviousPage}
  711. {block:JumpPagination length="5"}
  712. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  713. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  714. {/block:JumpPagination}
  715. {block:NextPage}<a href="{NextPage}"><i class="fa fa-chevron-right"></i></a>{/block:NextPage}
  716. </div>
  717. {/block:Pagination}
  718. </div>
  719. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  720. <script type="text/javascript">
  721.  
  722. $(function(){ // shorthand document.ready()
  723. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  724. $(this).on('click',function(){ // when clicked. this is the newer jQuery click() handler that's only in v1.8+ so that may be something to note.
  725. var lbArray = []; // create blank array.
  726. var arrayContents = {"width":$(this).data('width'), "height":$(this).data('height'), "low_res":$(this).data("lowres"), "high_res":$(this).data('highres')}; // make set of the data- attributes.
  727. lbArray.push(arrayContents); // push the set into the array.
  728. Tumblr.Lightbox.init(lbArray,1); // trigger Tumblr lightbox. the '1' is the number of photos it expects. specific to how tumblr has things set up.
  729. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  730. });
  731. });
  732. });
  733. </script>
  734. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  735. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  736. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  737. <!--Code for infinite scroll and grid layout-->
  738. <script>
  739. (function() {
  740. var $tumblelog = $('.content');
  741.  
  742. $tumblelog.imagesLoaded( function(){
  743. $tumblelog.masonry({
  744. columnWidth: function( containerWidth ) {
  745. return containerWidth / 100;
  746. }
  747. });
  748. });
  749. {block:IfNotPagination}
  750. $tumblelog.infinitescroll({
  751. navSelector : ".pagination",
  752. nextSelector : ".pagination a:last",
  753. itemSelector : "article",
  754. bufferPx : 50,
  755. done : "",
  756. loading: {
  757. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  758. img : "",
  759. msg: null,
  760. msgText: "<p><i class='fa fa-spinner fa-pulse fa-3x'></i></p>"
  761. },
  762. },
  763. function( newElements ) {
  764. var $newElems = $( newElements ).css({ opacity: 0 });
  765. $newElems.imagesLoaded(function(){
  766. $newElems.animate({ opacity: 1 });
  767. $tumblelog.masonry( 'appended', $newElems);
  768. });
  769. $(function(){ // shorthand document.ready()
  770. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  771. $(this).on('click',function(){ // when clicked. this is the newer jQuery click() handler that's only in v1.8+ so that may be something to note.
  772. var lbArray = []; // create blank array.
  773. var arrayContents = {"width":$(this).data('width'), "height":$(this).data('height'), "low_res":$(this).data("lowres"), "high_res":$(this).data('highres')}; // make set of the data- attributes.
  774. lbArray.push(arrayContents); // push the set into the array.
  775. Tumblr.Lightbox.init(lbArray,1); // trigger Tumblr lightbox. the '1' is the number of photos it expects. specific to how tumblr has things set up.
  776. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  777. });
  778. });
  779. });
  780.  
  781. }
  782. );
  783. {/block:IfNotPagination}
  784. })();
  785. </script>
  786. <div class="credit">
  787. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
  788. </div>
  789. </body>
  790. </html>
Advertisement
Add Comment
Please, Sign In to add comment