API tools faq
paste
fallingforthemes

Booville

fallingforthemes
Oct 12th, 2019
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.33 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. - theme #2 'booville' by fallingforthemes for the Thriller Themes Challenge
  3. - feel free to make modifications but please don't steal my code
  4. - let me know of any problems or questions
  5. - Enjoy!
  6.  
  7. - CREDIT TO SUIOMI/THEMEHIVE FOR HONEYBEE ICON FONT
  8. - CREDIT TO SHYTHEMES FOR VIDEO RESIZING
  9. - CREDIT TO BYCHLOETHEMES FOR MODIFIED PXU PHOTOSET SCRIPT
  10. -->
  11. <html>
  12. <head>
  13. <title>{Title}</title>
  14. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
  15. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  16. <link href="https://fonts.googleapis.com/css?family=IM+Fell+English&display=swap" rel="stylesheet">
  17. <meta name="color:Background" content="#000000"/>
  18. <meta name="color:Navigation" content="#000000"/>
  19. <meta name="color:Nav Font Color" content="#000000"/>
  20. <meta name="color:Inner Background" content="#000000"/>
  21. <meta name="color:Post Info" content="#000000"/>
  22. <meta name="color:Sidebar" content="#000000"/>
  23. <meta name="text:URL 1" content="" />
  24. <meta name="text:Link 1 Name" content="" />
  25. <meta name="text:Nav Link 1" content="" />
  26. <meta name="text:Link 2 Name" content="" />
  27. <meta name="text:Nav Link 2" content="" />
  28. <meta name="color:Pumpkin" content="#000000"/>
  29. <meta name="color:Eyes and Smile" content="#000000"/>
  30. <meta name="color:Stem" content="#000000"/>
  31. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32.  
  33. <style type="text/css">
  34. * {
  35. position: relative;
  36. }
  37.  
  38. .grid {
  39. display: grid;
  40. grid-template-columns: 25vw 50vw 25vw;
  41. grid-template-rows: 5vh 90vh 5vh;
  42. font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
  43. font-size: 1.1em;
  44. }
  45.  
  46. /*Controls the outside bkgd*/
  47. /*General*/
  48. body {
  49. /* background-color: rgb(129,34,233);*/
  50. background-color: {color:Background};
  51. }
  52.  
  53. nav {
  54. grid-row: 1/2;
  55. grid-column: 1/4;
  56. background-color: {color:Navigation};
  57. }
  58.  
  59. a {
  60. text-decoration: none;
  61. color: black;
  62. }
  63.  
  64. .links{
  65. color: {color:Nav Font Color};
  66. }
  67.  
  68. nav ul,nav li {
  69. list-style-type:none;
  70. margin:0;
  71. padding:0;
  72. }
  73.  
  74. nav ul {
  75. height: 5vh;
  76. margin-top: .5rem;
  77. margin-left: .5rem;
  78. display: flex;
  79. flex-flow: row nowrap;
  80. justify-content: start;
  81. font-size: 1.1rem;
  82. }
  83.  
  84. nav ul li {
  85. padding: 0 .8rem;
  86. }
  87.  
  88. .permalink_notes ol{
  89. list-style-type: none;
  90. }
  91.  
  92. .permalink_notes img{
  93. display: none;
  94. }
  95.  
  96. .note:before{
  97. content:'\eb2c';
  98. font-family:'honeybee';
  99. font-size:25px;
  100. color: orange;
  101. padding-right: 5px;
  102. }
  103.  
  104. .note.reblog:before{
  105. color: purple;
  106. }
  107.  
  108. .png_scarecrow{
  109. width: 300px;
  110. height: 400px;
  111. top: 395px;
  112. }
  113.  
  114. /*POSTS*/
  115. #post_container {
  116. grid-column: 2/3;
  117. grid-row: 2/3;
  118. background: {color:Inner Background};
  119. overflow: scroll;
  120. margin-top: 10px;
  121. border-radius: 3px;
  122. }
  123.  
  124. /*Post info*/
  125. .info {
  126. background-color: {color:Post Info};
  127. margin-bottom: 30px;
  128. margin-top: 10px;
  129. display: flex;
  130. flex-flow: row nowrap;
  131. justify-content: center;
  132. font-weight: bold;
  133. }
  134.  
  135. #like_reblog_buttons ul {
  136. list-style-type: none;
  137. display: flex;
  138. flex-flow: row nowrap;
  139. margin: .5rem 0;
  140. padding: 0;
  141. }
  142.  
  143. #like_reblog_buttons li {
  144. margin-right: 1rem;
  145. }
  146.  
  147. .post:first-child {
  148. margin-top: 30px;
  149. }
  150.  
  151. .post {
  152. outline: 1px solid black;
  153. padding: .8rem 1rem;
  154. max-width: 500px;
  155. margin: auto;
  156. margin-bottom: 30px;
  157. box-shadow: -.5rem .6rem rgb(235,235,235);
  158. background: white;
  159. overflow: auto;
  160. }
  161.  
  162. .chat li{
  163. list-style-type:none;
  164. }
  165.  
  166. /*Reblogged posts*/
  167. .reblog-item:not(:last-child) {
  168. border-bottom: .5px solid #a4a4a4;
  169. }
  170.  
  171. .reblog-item:not(:first-child) {
  172. padding-top: 1rem;
  173. }
  174.  
  175. .post-avatar-image {
  176. width: 25px;
  177. height: 25px;
  178. }
  179.  
  180. .reblogged_from {
  181. display: inline-block;
  182. }
  183.  
  184. .permalink, .info.reblogged_from {
  185. background-color: #fff!important;
  186. display: flex;
  187. flex-flow: row nowrap;
  188. justify-content: space-between;
  189. }
  190.  
  191. .reblog-list .reblog-header .post-avatar {
  192. width: 25px;
  193. margin-right: 10px;
  194. position: relative;
  195. display: inline-block;
  196. vertical-align: middle;
  197. }
  198.  
  199. /*SIDEBAR*/
  200. #sidebar{
  201. width: 15vw;
  202. height: auto;
  203. grid-row: 2/3;
  204. grid-column: 3/4;
  205. background-color: {color:Sidebar};
  206. padding: 1vw;
  207. text-align: center;
  208. margin: 10vh auto auto auto;
  209. border: 1px solid black;
  210. box-shadow: -.3rem .3rem rgb(235,235,235);
  211. }
  212.  
  213. .pagination{
  214. font-family: 'IM Fell English', serif;
  215. }
  216.  
  217. /*PUMPKIN PATCH*/
  218. .pumpkin_patch{
  219. position: fixed;
  220. top: 70%;
  221. right: 5%;
  222. text-align: center;
  223. }
  224.  
  225. .click_me{
  226. background-color: white;
  227. border-radius: 5px;
  228. width: 100px;
  229. margin: auto;
  230. margin-bottom: 20px;
  231. }
  232.  
  233. .pumpkin{
  234. width: 200px;
  235. height: 150px;
  236. border-radius: 180px/240px;
  237. background-color: {color:Pumpkin};
  238. }
  239.  
  240. .eye1, .eye2{
  241. width: 0;
  242. height: 0;
  243. border-left: 20px solid transparent;
  244. border-right: 20px solid transparent;
  245. border-bottom: 40px solid {color:Eyes and Smile};
  246. position: relative;
  247. z-index: 1;
  248. }
  249.  
  250. .eye1{
  251. left: 19%;
  252. }
  253.  
  254. .eye2{
  255. left: 59%;
  256. bottom: 26%;
  257. }
  258.  
  259. .smile{
  260. position: relative;
  261. width: 80px;
  262. height: 80px;
  263. border-radius: 50%;
  264. box-shadow: 15px 15px 0 0 {color:Eyes and Smile};
  265. transform: rotate(45deg);
  266. bottom: 50%;
  267. left: 30%;
  268. }
  269.  
  270. .pumpkin:before,
  271. .pumpkin:after {
  272. content: '';
  273. position: absolute;
  274. width: 200px;
  275. height: 150px;
  276. top: 0px;
  277. border-radius: 180px / 240px;
  278. }
  279.  
  280. .pumpkin:before{
  281. left: 23%;
  282. border-left: 3px solid rgba(0,0,0,0.1);
  283. }
  284.  
  285. .pumpkin:after {
  286. left: -23%;
  287. border-right: 3px solid rgba(0,0,0,0.1)
  288. }
  289.  
  290. .pumpkin .pumpkin_stem{
  291. width: 25px;
  292. height: 25px;
  293. background-color: {color:Stem};
  294. border-radius: 180px/240px;
  295. position: relative;
  296. left: 45%;
  297. bottom: 10%;
  298. z-index: -1;
  299. }
  300.  
  301.  
  302. .credit{
  303. position: fixed;
  304. right: 3vh;
  305. bottom: 2vh;
  306. z-index: 10;
  307. }
  308. {CustomCSS}
  309. </style>
  310. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  311. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  312. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  313. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  314.  
  315. </head>
  316.  
  317. <!--
  318. BODY
  319. -->
  320.  
  321. <body>
  322. <div class="grid">
  323. <!-- NAV -->
  324. <nav>
  325. <ul>
  326. <li><a href="/"><div class="links">Home</div></a></li>
  327. <li><a href="/archive"><div class="links">Archive</div></a></li>
  328. <li>{block:AskEnabled}<a href="/ask"><div class="links">Ask</div></a>{/block:AskEnabled}</li>
  329. <li>{block:SubmissionsEnabled}<a href="/submit"><div class="links">Submit</div></a>{/block:SubmissionsEnabled}</li>
  330. <li><a href="{text:Nav Link 1}"><div class="links">{text:Link 1 Name}</div></a></li>
  331. <li><a href="{text:Nav Link 2}"><div class="links">{text:Link 2 Name}</div></a></li>
  332. </ul>
  333. </nav>
  334. <!-- End of nav -->
  335. <div class="decor">
  336. <img class="png_scarecrow" src="https://pngimg.com/uploads/halloween/halloween_PNG199.png" alt="Scarecrow with an owl on its pumpkin head">
  337. </div>
  338. <!-- POST CONTAINER -->
  339. <section id="post_container"> <!--Outside container-->
  340. <!-- CONTENT -->
  341. <section id="content"> <!--Inner container-->
  342. {block:Posts}
  343. <article class="post"> <!--The post-->
  344. <div class="info">
  345. <div class="date">
  346. {block:Date}
  347. {ShortMonth} {MonthNumberWithZero}
  348. {/block:Date}<span class="th th-bat"> </span>
  349. </div>
  350. <div class="notes">
  351. <a href="{Permalink}">&nbsp{NoteCountWithLabel}</a>
  352. </div>
  353. </div>
  354.  
  355. {block:Video}
  356. <div class="video">{Video-500}</div>
  357. {block:Caption}<div class="caption text">{Caption}</div>{/block:Caption}
  358. {/block:Video}
  359.  
  360. {block:Audio}
  361. {AudioPlayerBlack}
  362. <div class="text">~ {PlayCountWithLabel}</div>
  363. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  364. {/block:Audio}
  365.  
  366. {block:Photo}
  367. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  368. {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
  369. {/block:Photo}
  370.  
  371. {block:Photoset}
  372. <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>
  373. {/block:Photoset}
  374.  
  375. {block:Quote}
  376. <div class="title">“{Quote}”</div>
  377. {block:Source}<div class="text"><br>~ {Source}</div>{/block:Source}
  378. {/block:Quote}
  379.  
  380. {block:Text}
  381. {block:Title}<div class="title">{Title}</div>
  382. {/block:Title}
  383.  
  384. {block:NotReblog}
  385. <div class="text">{Body}</div>
  386. {/block:NotReblog}
  387.  
  388. {block:RebloggedFrom}
  389. <div class="reblog-list">
  390. {block:Reblogs}
  391. <div class="reblog-item{block:isOriginalEntry} original-reblog-content{/block:isOriginalEntry}">
  392. <div class="reblog-header">
  393. <div class="post-avatar">
  394. <div class="post-avatar-wrapper">
  395. {block:IsActive}
  396. <a class="post-avatar-link{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"><img class="post-avatar-image" src="{PortraitURL-64}"></a>
  397. {/block:IsActive}
  398. {block:IsDeactivated}
  399. <span class="inactive reblog-avatar{block:isNotOriginalEntry} sub-icon-reblog{/block:isNotOriginalEntry}"><img class="post-avatar-image" src="{PortraitURL-64}"></span>
  400. {/block:IsDeactivated}
  401. </div>
  402. </div>
  403. {block:IsActive}
  404. <a target="_blank" class="active reblogged_from" href="{Permalink}">{Username}</a>
  405. {/block:IsActive}
  406. {block:IsDeactivated}
  407. <span class="inactive reblogged_from">{Username}</span>
  408. {/block:IsDeactivated}
  409. </div>
  410. <div class="post-reblog-content">
  411. <div class="post-body">
  412. {Body}</div>
  413. </div>
  414. </div>
  415. {/block:Reblogs}
  416. </div>
  417. {/block:RebloggedFrom}
  418. {/block:Text}
  419.  
  420. {block:Answer}
  421. <div class="title">{Question}</div>
  422. <div class="text">~ {Asker}</div>
  423. <div class="text">{Answer}</div>
  424. {block:Answer}
  425.  
  426. {block:Chat}
  427. <div class="chat">
  428. <ul>
  429. {block:Lines}<li class="{Alt}">{block:Label} {Label} {/block:Label}{Line}</li>{/block:Lines}
  430. </ul>
  431. </div>
  432. {/block:Chat}
  433.  
  434.  
  435. {block:Link}
  436. <div class="title"><a href="{URL}">{Name}</a></div>
  437. {block:Description}
  438. <div class="text">{Description}</div>
  439. {/block:Description}
  440. {/block:Link}
  441.  
  442. <footer class="permalink">
  443. {block:RebloggedFrom}
  444. <a class="info reblogged_from" href="{ReblogParentURL}"> src: {ReblogParentName}</a>
  445. {/block:RebloggedFrom}
  446. <div class="permalink_notes">
  447. {block:PermalinkPage}
  448. {block:PostNotes}
  449. {PostNotes-64}
  450. {/block:PostNotes}
  451. {/block:PermalinkPage}
  452. </div>
  453. {block:IndexPage}
  454. <div id="like_reblog_buttons">
  455. <ul>
  456. <li>{LikeButton}</li>
  457. <li>{ReblogButton}</li>
  458. </ul>
  459. </div>
  460. {/block:IndexPage}
  461. </footer>
  462. </article> <!--End of posts-->
  463. {/block:Posts}
  464.  
  465. </section> <!--End of content-->
  466. </section> <!-- End of container -->
  467. <div id="side">
  468. <div id="sidebar">
  469. <hr>
  470. <div class="description">{Description}</div>
  471. <hr>
  472. <!-- PAGINATION -->
  473. <div class="pagination">
  474. {block:Pagination}
  475. {block:PreviousPage}
  476. <a href="{PreviousPage}">Last&nbsp</a>
  477. {/block:PreviousPage}
  478. {block:JumpPagination length="5"}
  479. {block:CurrentPage}
  480. <span class="current_page"></span>
  481. {/block:CurrentPage}
  482. {block:JumpPage}
  483. <a class="jump_page" href="{URL}"></a>
  484. {/block:JumpPage}
  485. {/block:JumpPagination}
  486. {block:NextPage}
  487. <a href="{NextPage}">&nbspNext</a>
  488. {/block:NextPage}
  489. {/block:Pagination}
  490. </div> <!-- End of pagination -->
  491. </div>
  492. <div class="pumpkin_patch">
  493. <div class="click_me">
  494. <p>Click Me<p>
  495. </div>
  496. <a href="{text:URL 1}">
  497. <div class="pumpkin">
  498. <div class="pumpkin_stem"></div>
  499. <div class="eye1">
  500. <div class="innerEye1"></div>
  501. </div>
  502. <div class="eye2">
  503. <div class="innerEye2"></div>
  504. </div>
  505. <div class="smile">
  506. <div class="tooth"></div>
  507. </div>
  508. </div>
  509. </div>
  510. </a>
  511. </div>
  512. </div> <!-- End of grid -->
  513. <script>
  514. $(document).ready(function(){
  515. $('.photo-slideshow').pxuPhotoset({
  516. lightbox: true,
  517. rounded: false,
  518. gutter: '0px',
  519. borderRadius: '0px',
  520. photoset: '.photo-slideshow',
  521. photoWrap: '.photo-data',
  522. photo: '.pxu-photo'
  523. });
  524. });
  525. </script>
  526. </body>
  527. <footer class="credit"><a href="https://fallingforthemes.tumblr.com" target="_blank" title="fallingforthemes"><span class="th th-shooting-star"></span></a></footer>
  528. </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!