bychloethemes

Plant Theme Revamp - by Chloe

Jul 20th, 2015
650
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.90 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6. _ _ _
  7. | |__ _ _ ___| |__ | | ___ ___
  8. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  9. | |_) | |_| | | (__| | | | | (_) | __/
  10. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  11. |___/
  12.  
  13. Plant Theme Revamp by Chloe | @dontbrag | @bychloethemes
  14. Do not delete the credit. Do not claim as your own. Do not copy any ideas or code. Do not redistibute.
  15.  
  16. For html help go to @htmlqueens
  17.  
  18. -->
  19.  
  20. <meta name="image:Background" content="" />
  21.  
  22. <meta name="color:Background" content="#eee" />
  23. <meta name="color:Body Text" content="#1d1818" />
  24. <meta name="color:Body links" content="#444" />
  25. <meta name="color:Posts" content="#fff" />
  26. <meta name="color:Border Hover Effect" content="#666" />
  27. <meta name="color:Sidebar Link Hover" content="#444" />
  28. <meta name="color:Post Accent" content="#eee" />
  29. <meta name="color:Question Background" content="#eee" />
  30. <meta name="color:Question Text" content="#1d1818" />
  31. <meta name="color:Text highlight" content="#78cc6f" />
  32.  
  33. <meta name="font:Body" content='verdana,sans-serif'/>
  34.  
  35. <meta name="select:Other Font 1" content="Consolas" title="Consolas">
  36. <meta name="select:Other Font 1" content="Arial" title="Arial">
  37. <meta name="select:Other Font 1" content="Century Gothic" title="Century Gothic">
  38. <meta name="select:Other Font 1" content="'Abel', sans-serif" title="Abel">
  39. <meta name="select:Other Font 1" content="'Cutive Mono', " title="Cutive Mono">
  40. <meta name="select:Other Font 1" content="'Short Stack', cursive" title="Short Stack">
  41. <meta name="select:Other Font 1" content="'Shadows Into Light', cursive" title="Shadows Into Light">
  42. <meta name="select:Other Font 1" content="'Inconsolata', " title="Inconsolata">
  43.  
  44. <meta name="select:Other Font 2" content="'Raleway', sans-serif" title="Raleway">
  45. <meta name="select:Other Font 2" content="'Indie Flower', cursive" title="Indie Flower">
  46. <meta name="select:Other Font 2" content="'Coming Soon', cursive" title="Coming Soon">
  47. <meta name="select:Other Font 2" content="'Slabo 27px', serif" title="Slabo 27px">
  48. <meta name="select:Other Font 2" content="'Open Sans', sans-serif" title="Open Sans">
  49. <meta name="select:Other Font 2" content="'Delius', cursive" title="Delius">
  50.  
  51. <meta name="select:Font Size" content="12px" title="Small">
  52. <meta name="select:Font Size" content="14px" title="Medium">
  53. <meta name="select:Font Size" content="16px" title="Large">
  54. <meta name="select:Font Size" content="18px" title="Huge">
  55.  
  56. <meta name="if:Other Font 1" content="0" />
  57. <meta name="if:Other Font 2" content="1" />
  58. <meta name="if:Tiled Background" content="0" />
  59. <meta name="if:Pagination" content="1" />
  60. <meta name="if:Captions" content="1" />
  61. <meta name="if:Sign Off Asks" content="" />
  62. <meta name="if:Archive link" content="1" />
  63. <meta name="if:Inverted Tumblr Controls" content="1"/>
  64.  
  65. <meta name="text:Link 1" content="" />
  66. <meta name="text:URL 1" content="" />
  67. <meta name="text:Link 2" content="" />
  68. <meta name="text:URL 2" content="" />
  69. <meta name="text:Link 3" content="" />
  70. <meta name="text:URL 3" content="" />
  71. <meta name="text:Ask Sign Off" content="your name xx" />
  72.  
  73. {block:Description}
  74. <meta name="description" content="{MetaDescription}" />
  75. {/block:Description}
  76. <meta charset="utf-8">
  77. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  78. <title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  79. <link rel="shortcut icon" href="{Favicon}">
  80. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  81. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  82. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  83. {block:IfSignOffAsks}
  84. {block:IfOtherFont1}
  85. <link href='//fonts.googleapis.com/css?family=Abel|Cutive+Mono|Short+Stack|Shadows+Into+Light|Inconsolata' rel='stylesheet' type='text/css'>
  86. {/block:IfOtherFont1}
  87. {block:IfOtherFont2}
  88. <link href='//fonts.googleapis.com/css?family=Indie+Flower|Raleway|Coming+Soon|Slabo+27px|Open+Sans|Delius' rel='stylesheet' type='text/css'>
  89. {/block:IfOtherFont2}
  90. <link href='//fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
  91. <link href='//fonts.googleapis.com/css?family=Allura&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  92. {/block:IfSignOffAsks}
  93. <style type="text/css">
  94. /*Basic styles*/
  95. ::-moz-selection {
  96. background: {color:Text highlight};
  97. color: #fff;
  98. }
  99. ::selection {
  100. background: {color:Text highlight};
  101. color: #fff;
  102. }
  103. div.scrollit::-webkit-scrollbar {
  104. background-color: rgba(0,0,0,0);
  105. height: 5px;
  106. width: 5px;
  107. }
  108. div.scrollit::-webkit-scrollbar-thumb {
  109. background-color: {color:Border Hover Effect};
  110. width: 5px;
  111. height: 5px;
  112. }
  113. #tumblr_controls{
  114. margin: 0 0 0 0!important;
  115. position: fixed !important;
  116. {block:IfInvertedTumblrControls}
  117. -webkit-filter: invert(100%) ;important;
  118. opacity:0.5!important;
  119. {/block:IfInvertedTumblrControls}
  120. }
  121. body {
  122. background: {color:Background} url('{image:Background}')
  123. {block:IfNotTiledBackground}
  124. no-repeat center center fixed;
  125. -webkit-background-size: cover;
  126. -moz-background-size: cover;
  127. -o-background-size: cover;
  128. background-size: cover;
  129. {/block:IfNotTiledBackground}
  130. {block:IfTiledBackground}
  131. repeat fixed;
  132. {/block:IfTiledBackground}
  133. color: {color:Body Text};
  134. {block:IfOtherFont1}
  135. font-family: {select:Other Font 1};
  136. {/block:IfOtherFont1}
  137. {block:IfOtherFont2}
  138. font-family: {select:Other Font 2};
  139. {/block:IfOtherFont2}
  140. {block:IfNotOtherFont1}
  141. {block:IfNotOtherFont2}
  142. font-family: {font:Body};
  143. {/block:IfNotOtherFont2}
  144. {/block:IfNotOtherFont1}
  145. font-size: {select:Font Size};
  146. }
  147. #content {
  148. margin: 20px 150px 20px 85px;
  149. width: 700px;
  150. }
  151. a {
  152. color: {color:Body Links};
  153. text-decoration: none;
  154. }
  155. blockquote {
  156. border-left: 1px solid {color:Post Accent};
  157. margin:0 0 0 10px;
  158. padding: 0 0px 0 5px;
  159. }
  160. iframe, img, embed, object, video {
  161. max-width: 100%;
  162. }
  163. img {
  164. height: auto;
  165. width: auto;
  166. }
  167. /*Masthead*/
  168. .sidebar {
  169. height:auto;
  170. width:250px;
  171. position:fixed;
  172. bottom:110px;
  173. right:110px;
  174. background:{color:Posts};
  175. text-align:right;
  176. padding:15px 15px 0 15px;
  177. z-index:9999999;
  178. border:5px solid {color:Posts};
  179. -webkit-transition: all 0.4s ease-in-out;
  180. -moz-transition: all 0.4s ease-in-out;
  181. -o-transition: all 0.4s ease-in-out;
  182. transition: all 0.4s ease-in-out;
  183. }
  184. .sidebar:hover {
  185. border-color:{color:Border Hover Effect};
  186. -webkit-transition: all 0.4s ease-in-out;
  187. -moz-transition: all 0.4s ease-in-out;
  188. -o-transition: all 0.4s ease-in-out;
  189. transition: all 0.4s ease-in-out;
  190. }
  191. h1.blogtitle {
  192. text-align:left;
  193. font-size:2.8em;
  194. margin:0 0 15px 0;
  195. padding:0;
  196. font-family: 'Allura', cursive;
  197. position:relative;
  198. bottom:-5px;
  199. }
  200. .sidebar .description {
  201. text-align:left;
  202. }
  203. ul.nav {
  204. padding:0;
  205. margin:10px 0 10px 0;
  206. }
  207. .sidebar li {
  208. display: inline;
  209. padding:5px 2px 10px 2px;
  210. font-size:{select:Font Size};
  211. margin:0;
  212. }
  213. .sidebar li:hover {
  214. border-bottom:solid 5px {color:Sidebar Link Hover};
  215. }
  216. .credit {
  217. width:14px;
  218. height:13px;
  219. color: #000;
  220. position:fixed;
  221. bottom: 10px;
  222. right: 10px;
  223. line-height: 14px;
  224. font-size:12px;
  225. font-family: 'consolas';
  226. text-transform: uppercase;
  227. padding:3px 4px;
  228. overflow: hidden;
  229. z-index:999999999999999999;
  230. text-align:left;
  231. -webkit-transition: all 0.5s ease-in-out;
  232. -moz-transition: all 0.5s ease-in-out;
  233. -o-transition: all 0.5s ease-in-out;
  234. transition: all 0.5s ease-in-out;
  235. }
  236. .fa-diamond {
  237. right:4px;
  238. position:absolute;
  239. }
  240. .credit:hover {
  241. width:111px;
  242. background:#000;
  243. color:#fff;
  244. -webkit-transition: all 0.5s ease-in-out;
  245. -moz-transition: all 0.5s ease-in-out;
  246. -o-transition: all 0.5s ease-in-out;
  247. transition: all 0.5s ease-in-out;
  248. }
  249. .credit a {
  250. color:#fff;
  251. text-decoration: none;
  252. }
  253. .credit .mine {
  254. opacity:0;
  255. visibility:hidden;
  256. }
  257. .credit:hover .mine {
  258. opacity: 1;
  259. visibility: visible;
  260. -webkit-transition: all 0.5s ease-in-out 0.5s;
  261. -moz-transition: all 0.5s ease-in-out 0.5s;
  262. -o-transition: all 0.5s ease-in-out 0.5s;
  263. transition: all 0.5s ease-in-out 0.5s;
  264. }
  265.  
  266. /*Article*/
  267. article {
  268. background: {color:Posts};
  269. margin: 25px;
  270. border:5px solid {color:Posts};
  271. padding:15px;
  272. width: 250px;
  273. {block:PermalinkPage}
  274. width: 500px;
  275. {/block:PermalinkPage}
  276. -webkit-transition: all 0.4s ease-in-out;
  277. -moz-transition: all 0.4s ease-in-out;
  278. -o-transition: all 0.4s ease-in-out;
  279. transition: all 0.4s ease-in-out;
  280. }
  281. .detailios {
  282. background: {color:Posts};
  283. margin: 25px;
  284. border:5px solid {color:Posts};
  285. padding:15px;
  286. width: 500px;
  287. }
  288. article:hover, .detailios:hover {
  289. border-color:{color:Border Hover Effect};
  290. -webkit-transition: all 0.4s ease-in-out;
  291. -moz-transition: all 0.4s ease-in-out;
  292. -o-transition: all 0.4s ease-in-out;
  293. transition: all 0.4s ease-in-out;
  294. }
  295. article img {
  296. vertical-align:middle;
  297. }
  298. .text ul {
  299. padding-left:20px;
  300. }
  301. h1.post_title {
  302. padding:0;
  303. margin:0;
  304. font-size:1.6em;
  305. }
  306. .quote h1.post_title {
  307. color:{color:Post Accent};
  308. }
  309. .quote .short {
  310. font-size:1.6em;
  311. }
  312. .quote .medium {
  313. font-size:1.4em;
  314. }
  315. .quote .long {
  316. font-size:1em;
  317. }
  318. .photosetty {
  319. margin-bottom:-5px;
  320. }
  321. cite {
  322. font-style:normal;
  323. }
  324. .chat span {
  325. float: left;
  326. margin-right: 5px;
  327. }
  328. .chat .label {
  329. color:{color:Post Accent};
  330. text-transform:uppercase;
  331. font-weight:bold;
  332. }
  333. .chat ul {
  334. list-style: none;
  335. margin: 0;
  336. padding: 0;
  337. }
  338. .chat li {
  339. padding: 5px 0px;
  340. border-bottom:1px solid {color:Post Accent};
  341. }
  342. .chat li:last-child {
  343. border-bottom:0!important;
  344. }
  345. .tumblr_audio_player {
  346. height: 30px;
  347. width: 500px;
  348. opacity:0.9;
  349. {block:permalinkpage}
  350. margin-top:14px;
  351. {/block:permalinkpage}
  352. }
  353. .albumart {
  354. position:absolute;
  355. width:60px;
  356. height:60px;
  357. }
  358.  
  359. .albumart img {
  360. float:left;
  361. width:60px;
  362. height:60px;
  363. }
  364.  
  365. .playa {
  366. opacity:0.6;
  367. width:30px;
  368. height:30px;
  369. overflow:hidden;
  370. position:absolute;
  371. z-index:2;
  372. border-radius:50%;
  373. margin-left:16px;
  374. margin-top:16px;
  375. }
  376. .audioinfo {
  377. margin-top:2px;
  378. padding-left:8px;
  379. font-size:1em;
  380. border-left:1px solid {color:Post Accent};
  381. {block:IndexPage}
  382. margin-left:68px;
  383. {block:IndexPage}
  384. margin-left:68px;
  385. min-height:60px;
  386. line-height:12px;
  387. }
  388. .asks {
  389. border-radius:5px;
  390. margin-right:15px;
  391. margin-bottom:10px;
  392. float:left;
  393. }
  394. .question {
  395. background:{color:Question Background};
  396. border-radius:5px;
  397. padding:5px 5px 5px 8px;
  398. line-height:15px;
  399. float:left;
  400. margin-bottom:15px;
  401. {block:IndexPage}
  402. width:190px;
  403. {/block:IndexPage}
  404. {block:PermalinkPage}
  405. width:375px;
  406. {/block:PermalinkPage}
  407. color:{color:Question Text};
  408. }
  409. .question2 p {
  410. margin:0;
  411. display:inline;
  412. }
  413. .question:before {
  414. content:"";
  415. width: 0;
  416. height: 0;
  417. border-style: solid;
  418. z-index:999;
  419. border-color: transparent {color:Question Background} transparent transparent;
  420. position:absolute;
  421. {block:IndexPage}
  422. border-width: 4px 10px 4px 0px;
  423. left:50px;
  424. {/block:IndexPage}
  425. {block:PermalinkPage}
  426. border-width: 7px 15px 7px 0px;
  427. left:111px;
  428. {/block:PermalinkPage}
  429. }
  430. .asks2 {
  431. border-radius:5px;
  432. margin-left:15px;
  433. margin-bottom:10px;
  434. float:right;
  435. }
  436. .question2 {
  437. background:{color:Question Background};
  438. border-radius:5px;
  439. padding:5px 5px 5px 8px;
  440. line-height:15px;
  441. margin-bottom:15px;
  442. float:right;
  443. {block:IndexPage}
  444. width:190px;
  445. {/block:IndexPage}
  446. {block:PermalinkPage}
  447. width:375px;
  448. {/block:PermalinkPage}
  449. color:{color:Question Text};
  450. }
  451. .question2:before {
  452. content:"";
  453. width: 0;
  454. height: 0;
  455. border-style: solid;
  456. z-index:999;
  457. border-color: transparent transparent transparent {color:Question Background};
  458. position:absolute;
  459. {block:IndexPage}
  460. border-width: 4px 0px 4px 10px;
  461. right:50px;
  462. {/block:IndexPage}
  463. {block:PermalinkPage}
  464. border-width: 7px 0px 7px 15px;
  465. right:111px;
  466. {/block:PermalinkPage}
  467. }
  468. #signature {
  469. font-size: 1.4em;
  470. font-family: 'Nothing You Could Do', cursive;
  471. color: {color:Body Text};
  472. text-align: right;
  473. }
  474.  
  475. .tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {
  476. display:none;
  477. }
  478. #infscr-loading {
  479. display:none;
  480. }
  481. .navigation {
  482. display:none!important;
  483. }
  484. ul.permalinks2 {
  485. color:gray;
  486. list-style-type:none;
  487. padding:0;
  488. margin:0;
  489. font-size:22px;
  490. font-family:verdana;
  491. padding:0 5px;
  492. text-align:left;
  493. overflow:hidden;
  494. visibility:hidden;
  495. opacity:0;
  496. position:absolute;
  497. right:-55px;
  498. top:0px;
  499. width:20px;
  500. -webkit-transition: all 0.4s ease-in-out;
  501. -moz-transition: all 0.4s ease-in-out;
  502. -o-transition: all 0.4s ease-in-out;
  503. transition: all 0.4s ease-in-out;
  504. }
  505. .hovers:hover ul.permalinks2 {
  506. visibility:visible;
  507. opacity:1;
  508. right:-38px;
  509. -webkit-transition: all 0.4s ease-in-out;
  510. -moz-transition: all 0.4s ease-in-out;
  511. -o-transition: all 0.4s ease-in-out;
  512. transition: all 0.4s ease-in-out;
  513. }
  514. ul.permalinks2 li {
  515. border-bottom:0;
  516. margin:0;
  517. padding:0;
  518. }
  519. ul.permalinks2 li:last-child {
  520. margin-top:6px;
  521. }
  522. ul.permalinks2 li a {
  523. color:#ccc;
  524. }
  525. .postnotes {
  526. width:490px;
  527. background:{color:Posts};
  528. padding:25px 15px 25px 25px!important;
  529. }
  530. .scrollit {
  531. overflow:auto;
  532. }
  533. ol.notes {
  534. list-style-type: none;
  535. margin:0 5px 0 0;
  536. padding:0;
  537. max-height:250px;
  538. }
  539.  
  540. ol.notes li.note {
  541. padding:0;
  542. text-align:left;
  543. line-height:16px;
  544. width:100%;
  545. border:0;
  546. border-radius:0;
  547. background:transparent;
  548. border-bottom:1px solid {color:Border Hover Effect};
  549. padding-bottom:8px;
  550. padding-top:8px;
  551.  
  552. }
  553. ol.notes li.note:last-child {
  554. border-bottom:0;
  555. }
  556. ol.notes li.note img.avatar {
  557. display:none;
  558. }
  559.  
  560. ol.notes li.note span.action {
  561. font-weight: normal;
  562. }
  563.  
  564. ol.notes li.note .answer_content {
  565. font-weight: normal;
  566. }
  567. #infscr-loading {
  568. position:absolute;
  569. bottom:-10px;
  570. width:200px;
  571. margin-left:50%;
  572. left:-105px;
  573. text-align:center;
  574. color:{color:Border Hover Effect};
  575. }
  576. #infscr-loading img{
  577. display:none;
  578. }
  579. .pagination .prev {
  580. background:{color:Posts};
  581. padding:10px;
  582. border:5px solid {color:Posts};
  583. position:fixed;
  584. bottom:30px;
  585. left:30px;
  586. font-size:22px;
  587. font-family:verdana;
  588. -webkit-transition: all 0.4s ease-in-out;
  589. -moz-transition: all 0.4s ease-in-out;
  590. -o-transition: all 0.4s ease-in-out;
  591. transition: all 0.4s ease-in-out;
  592. }
  593. .pagination .next {
  594. background:{color:Posts};
  595. padding:10px;
  596. border:5px solid {color:Posts};
  597. position:fixed;
  598. bottom:30px;
  599. left:780px;
  600. font-family:verdana;
  601. font-size:22px;
  602. -webkit-transition: all 0.4s ease-in-out;
  603. -moz-transition: all 0.4s ease-in-out;
  604. -o-transition: all 0.4s ease-in-out;
  605. transition: all 0.4s ease-in-out;
  606. }
  607. .next:hover, .prev:hover {
  608. border-color:{color:Border Hover Effect};
  609. -webkit-transition: all 0.4s ease-in-out;
  610. -moz-transition: all 0.4s ease-in-out;
  611. -o-transition: all 0.4s ease-in-out;
  612. transition: all 0.4s ease-in-out;
  613. /*Custom CSS*/
  614. {CustomCSS}
  615. </style>
  616. </head>
  617. <body>
  618. <!--Masthead-->
  619. <header class="sidebar">
  620. <h1 class="blogtitle"><a href="/" title="{lang:Home}">{Title}</a></h1>
  621. <div class="description">
  622. {block:Description}
  623. {Description}
  624. {block:Description}
  625. </div>
  626. <!--Navigation-->
  627. <ul class="nav">
  628. {block:AskEnabled}
  629. <li><a href="/ask">ask</a></li>
  630. {/block:AskEnabled}
  631. {block:SubmissionsEnabled}
  632. <li><a href="/submit">submit</a></li>
  633. {/block:SubmissionsEnabled}
  634. {block:HasPages}
  635. {block:Pages}
  636. <li><a href="{URL}">{Label}</a></li>
  637. {/block:Pages}
  638. {/block:HasPages}
  639. {block:IfLink1}
  640. <li><a href="{text:URL 1}">{text:Link 1}</a></li>
  641. {/block:IfLink1}
  642. {block:IfLink2}
  643. <li><a href="{text:URL 2}">{text:Link 2}</a></li>
  644. {/block:IfLink2}
  645. {block:IfLink3}
  646. <li><a href="{text:URL 3}">{text:Link 3}</a></li>
  647. {/block:IfLink3}
  648. {block:IfArchiveLink}
  649. <li><a href="/archive">past</a></li>
  650. {/block:IfArchiveLink}
  651. <li><a href="http://dontbrag.tumblr.com">theme</a></li>
  652. </ul>
  653. </header>
  654. <!--Content holder-->
  655. <div id="content">
  656. {block:Posts}
  657. {block:PermalinkPage}
  658. {block:PermalinkPagination}
  659. <div class="detailios">
  660. Posted on {DayOfWeek} the {DayOfMonth}{DayOfMonthSuffix} of {Month}, {Year} at {12Hour}:{Minutes}{AmPm} with {NoteCountWithLabel}.
  661. </div>
  662. {/block:PermalinkPagination}
  663. {/block:PermalinkPage}
  664. <article class="hovers">
  665.  
  666. {block:IndexPage}
  667. <ul class="permalinks2">
  668. <li>{LikeButton}</li>
  669. <li>{ReblogButton}</li>
  670. <li><a href="{Permalink}"><i class="fa fa-link"></i></a></li>
  671. </ul>
  672. {/block:IndexPage}
  673. <!--Unique code for each post type-->
  674. {block:Text}
  675. <div class="text">
  676. {block:Title}<h1 class="post_title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  677. {Body}
  678. </div>
  679. {/block:Text}
  680.  
  681. {block:Photo}<div class="photo">
  682. {block:IndexPage}
  683. <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}" />
  684. </div>
  685. {block:IfCaptions}
  686. {block:Caption}{Caption}{/block:Caption}
  687. {/block:IfCaptions}
  688. {/block:IndexPage}
  689. {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  690. {/block:PermalinkPage}</div>
  691. {/block:Photo}
  692.  
  693. {block:Photoset}
  694. <div class="photoset">
  695. {block:IndexPage}
  696. <div class="photosetty">{Photoset-250}</div>
  697. {block:IfCaptions}
  698. {block:Caption}{Caption}{/block:Caption}
  699. {/block:IfCaptions}
  700. {/block:IndexPage}
  701. {block:PermalinkPage}
  702. {Photoset-500}
  703. {/block:PermalinkPage}</div>
  704. {/block:Photoset}
  705.  
  706. {block:Quote}
  707. <div class="quote">
  708. <h1 class="post_title {Length}"><i>&ldquo;{Quote}&rdquo;</i></h1>
  709. {block:IndexPage}{block:Source}<p><cite>&mdash;&nbsp;{Source}</cite></p>{/block:Source}{/block:IndexPage}
  710. </div>
  711. {/block:Quote}
  712.  
  713. {block:Link}
  714. <div class="link">
  715. <h1 class="post_title"><a href="{URL}">{Name}</a></h1>
  716. {block:IndexPage}{block:Description}{Description}{/block:Description}{/block:IndexPage}
  717. </div>
  718. {/block:Link}
  719.  
  720. {block:Chat}
  721. <div class="chat inner">
  722. <ul>
  723. {block:Lines}<li class="{Alt}">{block:Label}
  724. <span class="label">{Label}</span>{/block:Label} {Line}
  725. </li>{/block:Lines}
  726. </ul>
  727. </div>
  728. {/block:Chat}
  729.  
  730. {block:Audio}
  731. <div class="audio">
  732. {block:IndexPage}
  733. {block:AlbumArt}
  734. <div class="albumart">
  735. <a href="{Permalink}"><img src="{AlbumArtURL}"></a>
  736. </div>
  737. {/block:AlbumArt}
  738. {block:AudioPlayer}
  739. <div class="playa">
  740. {AudioPlayerWhite}
  741. </div>
  742. {/block:AudioPlayer}
  743. <div class="audioinfo">
  744. Artist: <span{block:Artist} style="display:none;"
  745. {/block:Artist}>Unknown</span>
  746. {block:Artist}{Artist}{/block:Artist}</br>
  747. Title: <span{block:TrackName} style="display:none;"
  748. {/block:TrackName}>Unknown</span>
  749. {block:TrackName}{TrackName}{/block:TrackName}</br>
  750. Album: <span{block:Album} style="display:none;"
  751. {/block:Album}>Unknown</span>
  752. {block:Album}{Album}{/block:Album}{block:PlayCount}</br>
  753. Plays: {FormattedPlayCount}{/block:PlayCount}
  754. </div>
  755. {/block:IndexPage}
  756. {block:PermalinkPage}
  757. {block:AlbumArt}<img src="{AlbumArtURL}" width="500"
  758. height="500"/>{/block:AlbumArt}
  759. {block:AudioPlayer}
  760. {AudioPlayerWhite}
  761. {/block:AudioPlayer}
  762. {/block:PermalinkPage}</div>
  763. {/block:Audio}
  764.  
  765. {block:Video}
  766. <div class="video">
  767. {block:IndexPage}
  768. <div class="video-player">{block:IfNot1Column}{Video-250}{/block:IfNot1Column}{block:If1Column}{Video-400}{/block:If1Column}</div>
  769. {/block:IndexPage}
  770. {block:PermalinkPage}
  771. <div class="video-player">{Video-500}</div>
  772. {/block:permalinkPage}
  773. </div>
  774. {/block:Video}
  775.  
  776. {block:Answer}
  777. <div class="answer">
  778. <img class="asks" src="{block:IndexPage}{AskerPortraitURL-30}{/block:IndexPage}{block:PermalinkPage}{AskerPortraitURL-96}{/block:PermalinkPage}"><div class="question">{lang:Asker asked 2}: {Question}</div><hr style="visibility:hidden;width:100%;margin:0;">
  779. {block:Answerer}<img class="asks2" src="{block:IndexPage}{AnswererPortraitURL-30}{/block:IndexPage}{block:PermalinkPage}{AnswererPortraitURL-96}{/block:PermalinkPage}"><div class="question2">{Answerer} replied: {Answer}</div><br><hr style="visibility:hidden;">{/block:Answerer}
  780. {Replies}
  781. {block:IfSignOffAsks}
  782. <div id="signature" {block:Answerer}style="display:none;"{/block:Answerer}>-{text:Ask Sign Off}</div>
  783. {/block:IfSignOffAsks}
  784. </div>
  785. {/block:Answer}
  786. {block:indexpage}
  787. <!-- {block:NoRebloggedFrom}
  788. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  789. {/block:NoRebloggedFrom} -->
  790. {block:ContentSource}<!-- {SourceURL}
  791. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  792. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  793. {/block:ContentSource}
  794. {/block:IndexPage}
  795.  
  796. </article>
  797. {block:PermalinkPage}
  798. {block:Photo}
  799. {block:Caption}<div class="detailios">{Caption}</div>{/block:Caption}
  800. {/block:Photo}
  801. {block:Photoset}
  802. {block:Caption}<div class="detailios">{Caption}</div>{/block:Caption}
  803. {/block:Photoset}
  804. {block:Quote}
  805. {block:Source}<div class="detailios"><cite style="font-style:normal;"> &mdash;&nbsp;{Source}</cite></div>{/block:Source}
  806. {/block:Quote}
  807. {block:Link}
  808. {block:Description}<div class="detailios">{Description}</div>{/block:Description}
  809. {/block:Link}
  810. {block:Audio}
  811. <div class="detailios">
  812. Artist: <span{block:Artist} style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  813. Title: <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  814. Album: <span{block:Album} style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}{block:PlayCount}<br>
  815. Plays: {FormattedPlayCount}{/block:PlayCount}</div>
  816. {block:Caption}<div class="detailios">{Caption}</div>{/block:Caption}
  817. {/block:Audio}
  818. {block:Video}
  819. <div class="detailios">{Caption}</div>{/block:Caption}
  820. {/block:Video}
  821. {block:HasTags}
  822. <div id="tags" class="detailios">
  823. filed under: {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}
  824. </div>{/block:HasTags}
  825. {block:PostNotes}
  826. <div id="notes" class="postnotes detailios">
  827. <div class="scrollit">{PostNotes}</div>
  828. </div>
  829. {/block:PostNotes}
  830. {/block:PermalinkPage}
  831. {/block:Posts}
  832. <!--Close of article-->
  833. </div>
  834. <!--Pagination: previous/next page links-->
  835. {block:Pagination}
  836. <div class="pagination" {block:ifNotPagination}style="display:none"{/block:IfNotPagination}>
  837. {block:PreviousPage}<a class="prev" href="{PreviousPage}"><i class="fa fa-angle-double-left"></i></a>{/block:PreviousPage}
  838. {block:NextPage}<a class="next" href="{NextPage}"><i class="fa fa-angle-double-right"></i></a>{/block:NextPage}
  839. </div>
  840. {/block:Pagination}
  841. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  842. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  843. <script type="text/javascript">
  844.  
  845. $(function(){ // shorthand document.ready()
  846. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  847. $(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.
  848. var lbArray = []; // create blank array.
  849. 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.
  850. lbArray.push(arrayContents); // push the set into the array.
  851. 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.
  852. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  853. });
  854. });
  855. });
  856. </script>
  857. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  858. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  859. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  860. <!--Code for infinite scroll and grid layout-->
  861. <script>
  862. (function() {
  863. var $tumblelog = $('#content');
  864.  
  865. $tumblelog.imagesLoaded( function(){
  866. $tumblelog.masonry({
  867. columnWidth: function( containerWidth ) {
  868. return containerWidth / 100;
  869. }
  870. });
  871. });
  872. {block:IfNotPagination}
  873. $tumblelog.infinitescroll({
  874. navSelector : ".pagination",
  875. nextSelector : ".pagination a:last",
  876. itemSelector : "article",
  877. bufferPx : 50,
  878. done : "",
  879. loading: {
  880. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  881. img : "",
  882. msg: null,
  883. msgText: "<p><i class='fa fa-spinner fa-pulse fa-3x'></i></p>"
  884. },
  885. },
  886. function( newElements ) {
  887. var $newElems = $( newElements ).css({ opacity: 0 });
  888. $newElems.imagesLoaded(function(){
  889. $newElems.animate({ opacity: 1 });
  890. $tumblelog.masonry( 'appended', $newElems);
  891. });
  892. $(function(){ // shorthand document.ready()
  893. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  894. $(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.
  895. var lbArray = []; // create blank array.
  896. 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.
  897. lbArray.push(arrayContents); // push the set into the array.
  898. 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.
  899. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  900. });
  901. });
  902. });
  903.  
  904. }
  905. );
  906. {/block:IfNotPagination}
  907. })();
  908. </script>
  909. <div class="credit">
  910. <i class="fa fa-diamond"></i>&nbsp;<a class="mine" target="_blank" href="http://dontbrag.tumblr.com">ByChloeThemes</a>
  911. </div>
  912. </body>
  913. </html>
Advertisement
Add Comment
Please, Sign In to add comment