azurethemes

theme 36: watchtower

Sep 23rd, 2017
1,261
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.43 KB | None | 0 0
  1. <!----
  2.  
  3.  
  4.  
  5. theme 36 watchtower
  6. 1 2 0 4 p x . t u m b l r . c o m
  7. © 2017. all rights reserved
  8.  
  9. -----
  10.  
  11. this theme was coded by azure (1204px).
  12. !this theme must not be republished or
  13. used as a basecode!
  14. all coding was created by me, unless it
  15. was stated otherwise.
  16.  
  17. -----
  18.  
  19. video resize script by shythemes
  20. photo resize by excolo
  21. smooth scrolling by deadpoolkilledzac
  22. photo set fix by pxuphoto
  23. tumblr caption plugin by neothms & magnusthemes
  24. icon font by saturnthemes
  25. icon font by zavalokom
  26.  
  27. -----
  28.  
  29. all themes by 1204px.tumblr.com are licensed
  30. under a Creative Commons Attribution-NoDerivatives
  31. 4.0 International License.
  32.  
  33.  
  34.  
  35. --->
  36. <!--start html-->
  37. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  38. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  39. <!--custom google fonts-->
  40. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Roboto:300i,400,400i,500,500i,700,700i|Source+Sans+Pro:400,600,700|Nunito:400,600,700|Lato:400,700|Cabin:400,500,600,700|Muli:400,600,700|Raleway:400,500,600,700|Khula:400,600,700|Cutive+Mono|Inconsolata:400,700|Lora:400,700|Parisienne|Abhaya+Libre:400,500,600,700" rel="stylesheet">
  41. <!--tooltips-->
  42. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  43. <script>
  44. (function($){
  45. $(document).ready(function(){
  46. $("a[title]").style_my_tooltips({
  47. tip_follows_cursor:true,
  48. tip_delay_time:10,
  49. tip_fade_speed:900,
  50. attribute:"title"
  51. });
  52. });
  53. })(jQuery);
  54. </script>
  55. <!--back to top button-->
  56. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  57. <script>
  58. $(document).ready(function(){
  59.  
  60. // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
  61. var back_to_top_button = ['<a href="#top" class="back-to-top"><span class="sf sf-arrow-up"></span> scroll to top</a>'].join("");
  62. $("body").append(back_to_top_button)
  63.  
  64. // Der Button wird ausgeblendet
  65. $(".back-to-top").hide();
  66.  
  67. // Funktion für das Scroll-Verhalten
  68. $(function () {
  69. $(window).scroll(function () {
  70. if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
  71. $('.back-to-top').fadeIn();
  72. } else {
  73. $('.back-to-top').fadeOut();
  74. }
  75. });
  76.  
  77. $('.back-to-top').click(function () { // Klick auf den Button
  78. $('body,html').animate({
  79. scrollTop: 0
  80. }, 800);
  81. return false;
  82. });
  83. });
  84.  
  85. });
  86. </script>
  87. <script type="text/javascript">
  88. /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
  89. $(document).ready(function() {
  90. function photosetResize() {
  91. $('iframe.photoset').each(function(){
  92. var newSize = 500;
  93. var newSrc = $(this).attr('src').replace('500',newSize);
  94. $(this).attr('src', newSrc).width(newSize);
  95. var high = $(this).css('height');
  96. var calculate = parseInt(high, 10)* newSize/500;
  97. $(this).css('height', calculate);
  98. });
  99. }
  100. photosetResize();
  101. });
  102. </script>
  103. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  104. <script>
  105. $(document).ready(function(){
  106. $('.photo-slideshow').pxuPhotoset({
  107. lightbox: true,
  108. rounded: false,
  109. gutter: '1px',
  110. borderRadius: '0px',
  111. photoset: '.photo-slideshow',
  112. photoWrap: '.photo-data',
  113. photo: '.pxu-photo'
  114. });
  115. });
  116. </script>
  117. <!-- smooth scrolling by deadpoolkilledzac.tumblr.com -->
  118. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  119. <!--minimalist fonts-->
  120. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  121. <link href="https://dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  122. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  123. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
  124. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  125. <!-- meta names -->
  126. <head>
  127. <title>{Title}</title>
  128. <link rel="shortcut icon" href="{Favicon}">
  129. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  130. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  131. <!-- toggles -->
  132. <meta name="if:FontLora" content="0"/>
  133. <!-- all colors -->
  134. <meta name="color:background" content="#ffffff"/>
  135. <meta name="color:posts" content="#ffffff">
  136. <meta name="color:text" content="#000000"/>
  137. <meta name="color:links" content="#000000"/>
  138. <meta name="color:credit" content="#000000"/>
  139. <meta name="color:accent" content="#f6f6f6">
  140. <meta name="color:info" content="#000000">
  141. <meta name="color:hover" content="#888888">
  142. <meta name="color:credit hover" content="#888888">
  143. <meta name="color:asks" content="#fbfbfb">
  144. <meta name="color:border" content="#fbfbfb"/>
  145. <meta name="color:scrollbar" content="#fbfbfb">
  146. <meta name="color:tooltip" content="#fbfbfb">
  147. <meta name="color:tooltip text" content="#000000">
  148.  
  149. <!-- images -->
  150. <meta name="image:icon" content=""/>
  151. <meta name="image:header" content=""/>
  152. <!-- texts -->
  153. <meta name="text:sidebar label" content="kali ma."/>
  154. <!-- sidebar links -->
  155. <meta name="text:link one label" content="Link one">
  156. <meta name="text:link two label" content="Link two">
  157. <meta name="text:link one url" content="/">
  158. <meta name="text:link two url" content="/">
  159. <meta name="viewport"
  160. content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  161. <!-- custom css -->
  162. <style type="text/css">
  163. @media screen and (max-width: 3480px) {
  164. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  165. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  166. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  167. .fade-in {
  168. opacity:0;
  169. -webkit-animation:fadeIn ease-in 1;
  170. -moz-animation:fadeIn ease-in 1;
  171. animation:fadeIn ease-in 1;
  172. -webkit-animation-fill-mode:forwards;
  173. -moz-animation-fill-mode:forwards;
  174. animation-fill-mode:forwards;
  175. -webkit-animation-duration:1s;
  176. -moz-animation-duration:1s;
  177. animation-duration:1s;}
  178. .fade-in.one {
  179. -webkit-animation-delay:0s;
  180. -moz-animation-delay:0s;
  181. animation-delay:0s;}
  182. .fade-in.two {
  183. -webkit-animation-delay:0.8s;
  184. -moz-animation-delay:0.8s;
  185. animation-delay:0.8s;
  186. }
  187. .fade-in .post_container {
  188. -webkit-animation-delay:0.9s;
  189. -moz-animation-delay:0.9s;
  190. animation-delay:0.9s;
  191. }
  192. /*tumblr controls*/
  193. .tmblr-iframe{ white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:.2;transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;position:fixed!important;right:-20px!important;transform:scale(0.7,0.7); } .tmblr-iframe:hover { opacity:1; }
  194. /*scrollbar*/
  195. ::-webkit-scrollbar {
  196. width:6px;
  197. height:6px;
  198. background:white;
  199. }
  200. ::-webkit-scrollbar-thumb {
  201. background:{color:scrollbar};
  202. }
  203. /*tooltips*/
  204. #s-m-t-tooltip{
  205. margin:13px 10px 6px 10px;
  206. padding:6px;
  207. background-color:{color:tooltip};
  208. font-family: 'khula', sans-serif;
  209. {block:IfFontLora}
  210. font-family: 'lora', sans-serif;
  211. {/block:IfFontLora}
  212. font-weight:600;
  213. font-size:8px;
  214. text-transform:lowercase;
  215. letter-spacing:0px;
  216. color:{color:tooltip text};
  217. z-index:999999999999999999999999999999999999;
  218. transition:0.3s ease-in-out;
  219. -webkit-transition:0.3s ease-in-out;
  220. -moz-transition:0.3s ease-in-out;
  221. -ms-transition:0.3s ease-in-out;
  222. -o-transition:0.3s ease-in-out;
  223. }
  224. /*body basics*/
  225. body{
  226. background-color:{color:background};
  227. font-family: 'khula', sans-serif;
  228. {block:IfFontLora}
  229. font-family: 'lora', sans-serif;
  230. {/block:IfFontLora}
  231. margin:0px;
  232. padding:0px;
  233. -webkit-font-smoothing: antialiased;
  234. -moz-osx-font-smoothing: grayscale;
  235. }
  236. p {
  237. padding-left:15px;
  238. padding-right:15px;
  239. }
  240. a{
  241. text-decoration:none;
  242. color:{color:links};
  243. -moz-transition-duration:0.5s;
  244. -webkit-transition-duration:0.5s;
  245. -o-transition-duration:0.5s;
  246. transition: all 0.3s ease-out;
  247. }
  248. a:hover{
  249. text-decoration:none;
  250. color:{color:hover};
  251. -moz-transition-duration:0.5s;
  252. -webkit-transition-duration:0.5s;
  253. -o-transition-duration:0.5s;
  254. transition: all 0.3s ease-out;
  255. }
  256. img {
  257. }
  258. blockquote {
  259. width:auto;
  260. border-left:1px solid {color:border};
  261. text-align:left;
  262. padding:1px;
  263. font-weight:none;
  264. margin-top:11px;
  265. margin-left:13px;
  266. padding-top:0.5px;
  267. padding-bottom:0.5px;
  268. font-size:10px;
  269. font-family: 'khula', sans-serif;
  270. {block:IfFontLora}
  271. font-family: 'lora', sans-serif;
  272. {/block:IfFontLora}
  273. margin-right:20px;
  274. padding-left:2px;
  275. color:{color:text};
  276. }
  277. pre{
  278. font-size:11px;
  279. text-align:center;
  280. text-transform:none;
  281. font-family: 'Cutive Mono', monospace;
  282. font-weight:300;
  283. line-height:9px;
  284. margin-left:10px;
  285. margin-right:10px;
  286. letter-spacing:0px;
  287. background-color:{color:background};
  288. color:{color:text};
  289. padding:10px;
  290. }
  291. small{
  292. font-size:9px;
  293. font-family: 'khula', sans-serif;
  294. {block:IfFontLora}
  295. font-family: 'lora', sans-serif;
  296. {/block:IfFontLora}
  297. }
  298. big{
  299. font-size:12px;
  300. font-family: 'khula', sans-serif;
  301. {block:IfFontLora}
  302. font-family: 'lora', sans-serif;
  303. {/block:IfFontLora}
  304. font-weight:700;
  305. }
  306. sub{
  307. font-size:7px;
  308. letter-spacing:0px;
  309. font-weight:600;
  310. text-transform:none;
  311. font-family: 'khula', sans-serif;
  312. {block:IfFontLora}
  313. font-family: 'lora', sans-serif;
  314. {/block:IfFontLora}
  315. }
  316. h1 {
  317. font-size:15px;
  318. text-align:left;
  319. font-family: 'nunito', sans-serif;
  320. letter-spacing:0px;
  321. margin-left:7px;
  322. text-transform:uppercase;
  323. font-weight:700;
  324. line-height:0px;
  325. color:{color:text};
  326. padding:10px;
  327. padding-top:15px;
  328. }
  329. h1 a{
  330. color:{color:text};
  331. text-align:left;
  332. }
  333. h2{
  334. color:{color:text};
  335. text-transform:uppercase;
  336. font-family: 'nunito', sans-serif;
  337. text-align:left;
  338. }
  339. b {
  340. font-weight:600;
  341. font-family: 'khula', sans-serif;
  342. {block:IfFontLora}
  343. font-family: 'lora', sans-serif;
  344. {/block:IfFontLora}
  345. color:{color:text};
  346. }
  347. sh {
  348. color:{color:links};
  349. text-transform:uppercase;
  350. font-family: 'khula', sans-serif;
  351. font-size:13px
  352. font-weight:800;
  353. }
  354. am {
  355. color:{color:text};
  356. font-size:22px;
  357. padding:8px;
  358. padding-top:2px;
  359. text-transform:uppercase;
  360. font-family: 'khula', sans-serif;
  361. letter-spacing:0px;
  362. font-weight:500;
  363. }
  364. t {
  365. font-weight:bold;
  366. letter-spacing:0px;
  367. font-size:45px;
  368. font-style:italic;
  369. font-family: 'khula', sans-serif;
  370. text-transform:uppercase;
  371. color:{color:text};
  372. }
  373. u {
  374. text-decoration:none;
  375. color:{color:text};
  376. border-bottom:1px solid {color:text};
  377. }
  378. p.npf_quirky {
  379. font-family: 'Parisienne', cursive;
  380. font-size:25px;
  381. }
  382. /*back to top button*/
  383. .back-to-top {
  384. position: fixed;
  385. color:{color:text};
  386. bottom:60px;
  387. text-transform:lowercase;
  388. right:10px;
  389. text-align:right;
  390. font-family: 'khula', sans-serif;
  391. {block:IfFontLora}
  392. font-family: 'lora', sans-serif;
  393. {/block:IfFontLora}
  394. font-size:9px;
  395. z-index:9999999999;
  396. font-weight:400;
  397. line-height:15px;
  398. padding:10px;
  399. }
  400. /*jump pagination*/
  401. .pagination{
  402. font-family: 'khula', sans-serif;
  403. {block:IfFontLora}
  404. font-family: 'lora', sans-serif;
  405. {/block:IfFontLora}
  406. margin-left:-190px;
  407. width:auto;
  408. padding-top:-10px;
  409. letter-spacing:2px;
  410. padding-bottom:20px;
  411. font-size:13px;
  412. text-align:center;
  413. }
  414. .pagination a{
  415. padding:5px;
  416. font-family: 'khula', sans-serif;
  417. {block:IfFontLora}
  418. font-family: 'lora', sans-serif;
  419. {/block:IfFontLora}
  420. font-weight:600;
  421. bottom:10px;
  422. margin-left:5px;
  423. color:{color:text};
  424. }
  425. .pagination a:hover{
  426. color:{color:hover};
  427. -moz-transition-duration:0.5s;
  428. -webkit-transition-duration:0.5s;
  429. -o-transition-duration:0.5s;
  430. transition: all 0.3s ease-out;
  431. }
  432. #description {
  433. width:370px;
  434. position:fixed;
  435. top:240px;
  436. left:100px;
  437. font-family: 'khula', sans-serif;
  438. {block:IfFontLora}
  439. font-family: 'lora', sans-serif;
  440. {/block:IfFontLora}
  441. font-size:11px;
  442. z-index:9999999999999;
  443. line-height:16px;
  444. color:{color:text};
  445. text-align:left;
  446. overflow:hidden;
  447. }
  448. #description h4 {
  449. font-size:25px;
  450. text-align:left;
  451. margin-bottom:10px;
  452. line-height:25px;
  453. text-transform:none;
  454. font-family: 'Abhaya Libre', sans-serif;
  455. }
  456. /*header*/
  457. #header_con {
  458. position:relative;
  459. width:1200px;
  460. opacity:1;
  461. height:470px;
  462. text-align:center;
  463. left:0px;
  464. top:0px;
  465. z-index:999;
  466. }
  467. #sidebar_con {
  468. position:fixed;
  469. left:0px;
  470. top:450px;
  471. width:300px;
  472. height:100%;
  473. background:{color:posts};
  474. opacity:1;
  475. border-radius:0px;
  476. text-align:center;
  477. z-index:9999999;
  478. }
  479. #sbicon {
  480. position:fixed;
  481. margin-top:450px;
  482. width:200px;
  483. height:50px;
  484. margin-left:0px;
  485. border-radius:100px;
  486. z-index:9999999999999999;
  487. }
  488. #sbiconimage {
  489. z-index:-99999;
  490. }
  491. #sbiconimage img {
  492. width:50px;
  493. height:50px;
  494. position:fixed;
  495. left:100px;
  496. top:210px;
  497. opacity:1;
  498. border-radius:100px;
  499. z-index:99999999999;
  500. }
  501. #tit_sdebr {
  502. width:300px;
  503. font-family: 'Abhaya Libre', sans-serif;
  504. color:{color:text};
  505. text-align:center;
  506. height:23px;
  507. line-height:30px;
  508. font-size:23px;
  509. letter-spacing:0px;
  510. font-weight:700;
  511. position:relative;
  512. margin:-120px auto;
  513. z-index:99999999;
  514. text-transform:lowercase;
  515. }
  516. #tit_sdebr #border{
  517. width:60px;
  518. text-align:center;
  519. margin:10px auto;
  520. border-bottom:2px solid {color:text};
  521. height:1px;
  522. }
  523. #custom_links {
  524. top:220px;
  525. left:170px;
  526. font-size:9px;
  527. height:25px;
  528. letter-spacing:1px;
  529. font-weight:200;
  530. opacity:1;
  531. z-index:9999;
  532. width:370px;
  533. position:fixed;
  534. font-style:none;
  535. text-align:left;
  536. }
  537. #custom_links a{
  538. display:inline-block;
  539. color:{color:links};
  540. padding:9px 0px 2px 0px;
  541. margin:2px 10px 0px 5px;
  542. font-weight:400;
  543. margin-top:-4px;
  544. text-align:left;
  545. line-height:20px;
  546. font-style:none;
  547. border-bottom:3px solid transparent;
  548. font-family: 'khula', sans-serif;
  549. {block:IfFontLora}
  550. font-family: 'lora', sans-serif;
  551. {/block:IfFontLora}
  552. text-transform:lowercase;
  553. border-bottom:1px solid {color:border};
  554. }
  555. #custom_links a:hover{
  556. color:{color:hover};
  557. border-bottom:1px solid {color:hover};
  558. -webkit-transition: all 0.4s ease-in-out;
  559. -moz-transition: all 0.4s ease-in-out;
  560. -o-transition: all 0.4s ease-in-out;
  561. -ms-transition: all 0.4s ease-in-out;
  562. transition: all 0.4s ease-in-out;
  563. }
  564. /*blog container*/
  565. .container {
  566. width:calc(100% + 0px + 0px + 0px);
  567. margin:0 auto;
  568. text-align:center;
  569. overflow:hidden;
  570. }
  571. /*post notes*/
  572. ol.notes {
  573. padding: 0px;
  574. margin: 0px 0px;
  575. font-family: 'khula', sans-serif;
  576. {block:IfFontLora}
  577. font-family: 'lora', sans-serif;
  578. {/block:IfFontLora}
  579. list-style-type: none;
  580. margin-top:-25px;
  581. font-size:9px;
  582. background:{color:posts};
  583. margin-left:15px;
  584. text-align:left;
  585. width:499px;
  586. border-radius:0px;
  587. {block:IfRoundedCorners}
  588. border-radius:0px 0px 3px 3px;
  589. {/block:IfRoundedCorners}
  590. border-left: solid 1px {color:border};
  591. border-right: solid 1px {color:border};
  592. border-bottom: solid 1px {color:border};
  593. }
  594. ol.notes li.note {
  595. border-top: solid 1px {color:border};
  596. padding: 10px;
  597. }
  598. ol.notes li.note img.avatar {
  599. vertical-align: -10px;
  600. border-radius:100px;
  601. margin-left: 10px;
  602. padding:6px;
  603. width: 16px;
  604. height: 16px;
  605. }
  606. ol.notes li.note span.action {
  607. font-weight: 300;
  608. }
  609. ol.notes li.note .answer_content {
  610. font-weight: normal;
  611. }
  612. ol.notes li.note blockquote {
  613. border-color: {color:border};
  614. padding: 4px 10px;
  615. margin: 10px 0px 0px 25px;
  616. }
  617. ol.notes li.note blockquote a {
  618. text-decoration: none;
  619. }
  620. /*like button*/
  621. .buttons a {
  622. position:relative;
  623. display:inline-block;
  624. padding:3px;
  625. }
  626. .custom-like-button {
  627. position: relative;
  628. display: inline-block;
  629. width: 12px;
  630. height: 12px;
  631. cursor: pointer;
  632. top: -4px;
  633. left: -2px;
  634. }
  635. .like_button {
  636. position: absolute;
  637. right: 0;
  638. font-size:9px;
  639. bottom: -1px;
  640. width: 12px;
  641. height: 12px;
  642. opacity: 0;
  643. z-index: 10;
  644. }
  645. .like_button iframe {
  646. width: 100% !important;
  647. height: 100% !important;
  648. }
  649. .our_button {
  650. position: absolute;
  651. top: 1.5px;
  652. left: 0;
  653. right: 0;
  654. bottom: 0;
  655. width: 100%;
  656. height: 100%;
  657. z-index: 1;
  658. -webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
  659. -o-transition:all 0.6s ease-in-out;/*opera*/
  660. -moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
  661. -ms-transition:all 0.6s ease-in-out;/*ie*/
  662. transition:all 0.6s ease-in-out;/*w3c*/
  663. }
  664. .like_button:hover + .our_button {
  665. color: {color:link hover};
  666. }
  667. .custom-like-button:hover {
  668. color:{color:hover};
  669. }
  670. .like_button.liked + .our_button {
  671. color: red;
  672. }
  673. /*audio*/
  674. .audio_artist {
  675. font-family: 'khula', sans-serif;
  676. {block:IfFontLora}
  677. font-family: 'lora', sans-serif;
  678. {/block:IfFontLora}
  679. font-size:10px;
  680. text-transform:capitalize;
  681. font-weight:600;
  682. margin-left:55px;
  683. padding-left:23px;
  684. }
  685. .audio_tit {
  686. font-family: 'khula', sans-serif;
  687. {block:IfFontLora}
  688. font-family: 'lora', sans-serif;
  689. {/block:IfFontLora}
  690. font-size:10px;
  691. text-transform:capitalize;
  692. font-weight:600;
  693. margin-top:-45px;
  694. margin-left:55px;
  695. padding-left:23px;
  696. }
  697. .audio_play {
  698. font-family: 'khula', sans-serif;
  699. {block:IfFontLora}
  700. font-family: 'lora', sans-serif;
  701. {/block:IfFontLora}
  702. font-size:10px;
  703. text-transform:capitalize;
  704. font-weight:600;
  705. margin-left:55px;
  706. padding-left:23px;
  707. }
  708. .audio_player {
  709. width:200px;
  710. margin-left:5px;
  711. color:{color:text};
  712. }
  713. .album_cover img {
  714. width:50px;
  715. border-radius:100px;
  716. margin-left:15px;
  717. }
  718. /*post styles*/
  719. .photo_caption{
  720. font-family: 'khula', sans-serif;
  721. {block:IfFontLora}
  722. font-family: 'lora', sans-serif;
  723. {/block:IfFontLora}
  724. margin-left:-10px;
  725. margin-top:5px;
  726. }
  727. .tumblr_avatar {
  728. display:inline-block;
  729. margin-right:10px;
  730. margin-left:13px;
  731. border-radius:100%;
  732. width:18px;
  733. vertical-align:middle;
  734. }
  735. .tumblr_parent {
  736. padding:0px;
  737. margin-top:18px;
  738. font-family: 'khula', sans-serif;
  739. {block:IfFontLora}
  740. font-family: 'lora', sans-serif;
  741. {/block:IfFontLora}
  742. font-size:10px;
  743. text-align:left;
  744. font-weight:500;
  745. color:{color:info};
  746. letter-spacing:0px;
  747. border:none;
  748. }
  749. .psets{
  750. width:100%;
  751. margin-top:0px;
  752. margin-left:0px;
  753. }
  754. .vsets{
  755. width:100%;
  756. margin-top:-12px;
  757. }
  758. .ppost{
  759. width:100%;
  760. margin-top:-12px;
  761. }
  762. .quote_cap{
  763. font-family: 'khula', sans-serif;
  764. {block:IfFontLora}
  765. font-family: 'lora', sans-serif;
  766. {/block:IfFontLora}
  767. font-size:15px;
  768. margin-left:15px;
  769. margin-top:15px;
  770. padding-right:15px;
  771. letter-spacing:0px;
  772. text-align:justify;
  773. text-transform:none;
  774. color:{color:text};
  775. font-weight:200;
  776. }
  777. .quote_src{
  778. font-size:10px;
  779. margin-left:15px;
  780. margin-top:12px;
  781. text-align:left;
  782. letter-spacing:0px;
  783. font-family: 'khula', sans-serif;
  784. {block:IfFontLora}
  785. font-family: 'lora', sans-serif;
  786. {/block:IfFontLora}
  787. text-transform:capitalize;
  788. font-style:italic;
  789. font-weight:300;
  790. }
  791. .chat_box{
  792. font-family: 'khula', sans-serif;
  793. {block:IfFontLora}
  794. font-family: 'lora', sans-serif;
  795. {/block:IfFontLora}
  796. margin-left:15px;
  797. padding-right:15px;
  798. }
  799. .chat_line {
  800. padding:3px;
  801. }
  802. .chat_label {
  803. padding:5px;
  804. border-radius:3px;
  805. font-weight:600;
  806. font-family: 'khula', sans-serif;
  807. {block:IfFontLora}
  808. font-family: 'lora', sans-serif;
  809. {/block:IfFontLora}
  810. background:{color:accent};
  811. text-transform:uppercase;
  812. }
  813. .chat_box blockquote {
  814. padding-left:12px;
  815. border-left:1px solid {color:border};
  816. margin-left:2px;
  817. }
  818. .post_container {
  819. width:calc(1000px + 120px + 0px + 0px);
  820. margin:75px auto;
  821. text-align:center;
  822. z-index:99;
  823. overflow:hidden;
  824. }
  825. /*posts*/
  826. #entries {
  827. margin-left:530px;
  828. overflow:auto;
  829. z-index:999999;
  830. }
  831. #post {
  832. font-size:10px;
  833. width:500px;
  834. color:{color:text};
  835. opacity:1;
  836. background-color:{color:posts};
  837. text-align:justify;
  838. border-radius:0px;
  839. z-index:99999999999999999;
  840. font-family: 'khula', sans-serif;
  841. {block:IfFontLora}
  842. font-family: 'lora', sans-serif;
  843. {/block:IfFontLora}
  844. margin-left:15px;
  845. margin-bottom:40px;
  846. padding-bottom:0px;
  847. overflow:hidden;
  848. }
  849. #post img{
  850. max-width:100%;
  851. margin-top:-5px;
  852. height:auto;
  853. }
  854. /*post info*/
  855. #info {
  856. width:515px;
  857. text-align:left;
  858. font-family: 'khula', sans-serif;
  859. {block:IfFontLora}
  860. font-family: 'lora', sans-serif;
  861. {/block:IfFontLora}
  862. text-transform:lowercase;
  863. margin-left:0px;
  864. font-size:10px;
  865. margin-top:0px;
  866. padding-left:20px;
  867. padding-top:0px;
  868. padding-bottom:6px;
  869. opacity:1;
  870. overflow:hidden;
  871. border-top:1px solid {color:border};
  872. font-weight:400;
  873. line-height:21px;
  874. letter-spacing:0px;
  875. background:{color:posts};
  876. z-index:9999999999999999;
  877. color:{color:info};
  878. }
  879. #info a {
  880. text-align:left;
  881. font-weight:400;
  882. padding:2px;
  883. font-size:10px;
  884. letter-spacing:-1px;
  885. font-family: 'khula', sans-serif;
  886. {block:IfFontLora}
  887. font-family: 'lora', sans-serif;
  888. {/block:IfFontLora}
  889. text-transform:lowercase;
  890. line-height:12px;
  891. color:{color:info};
  892. -moz-transition-duration:0.2s;
  893. -webkit-transition-duration:0.2s;
  894. -o-transition-duration:0.2s;
  895. transition: all 0.2s ease-out;
  896. }
  897. #info a,date:hover{
  898. color:{color:hover};
  899. -moz-transition-duration:0.2s;
  900. -webkit-transition-duration:0.2s;
  901. -o-transition-duration:0.2s;
  902. transition: all 0.2s ease-out;
  903. }
  904. #info tagged {
  905. font-family: 'khula', sans-serif;
  906. {block:IfFontLora}
  907. font-family: 'lora', sans-serif;
  908. {/block:IfFontLora}
  909. text-transform:lowercase;
  910. font-size:10px;
  911. margin-top:0px;
  912. color:{color:info};
  913. padding-top:0px;
  914. text-align:left;
  915. display:inline-block;
  916. line-height:15px;
  917. letter-spacing:0px;
  918. margin-left:-2px;
  919. margin-bottom:0px;
  920. padding-bottom:1px;
  921. font-weight:400;
  922. -moz-transition-duration:0.2s;
  923. -webkit-transition-duration:0.2s;
  924. -o-transition-duration:0.2s;
  925. transition: all 0.2s ease-out;
  926. }
  927. #info tagged:hover{
  928. color:{color:hover};
  929. -moz-transition-duration:0.2s;
  930. -webkit-transition-duration:0.2s;
  931. -o-transition-duration:0.2s;
  932. transition: all 0.2s ease-out;
  933. }
  934. #info span {
  935. padding:4px;
  936. }
  937. #info namee {
  938. text-transform:lowercase;
  939. color:{color:info};
  940. letter-spacing:1px;
  941. font-family: 'khula', sans-serif;
  942. {block:IfFontLora}
  943. font-family: 'lora', sans-serif;
  944. {/block:IfFontLora}
  945. font-weight:600;
  946. }
  947. #post_info {
  948. width:520px;
  949. padding:5px;
  950. margin-top:-10px;
  951. font-size:10px;
  952. margin-left:-28px;
  953. color:{color:info};
  954. text-align:left;
  955. margin-bottom:-16px;
  956. z-index:9999999999999999;
  957. padding-left:12px;
  958. line-height:20px;
  959. letter-spacing:0px;
  960. font-family: 'khula', sans-serif;
  961. {block:IfFontLora}
  962. font-family: 'lora', sans-serif;
  963. {/block:IfFontLora}
  964. -moz-transition-duration:0.2s;
  965. -webkit-transition-duration:0.2s;
  966. -o-transition-duration:0.2s;
  967. transition: all 0.2s ease-out;
  968. }
  969. #post_info date {
  970. font-size:9px;
  971. letter-spacing:0px;
  972. text-transform:lowercase;
  973. font-family: 'khula', sans-serif;
  974. {block:IfFontLora}
  975. font-family: 'lora', sans-serif;
  976. {/block:IfFontLora}
  977. font-weight:600;
  978. width:512px;
  979. padding:2px;
  980. text-align:left;
  981. padding-left:0px;
  982. line-height:17px;
  983. color:{color:info};
  984. padding-bottom:3px;
  985. padding-top:1px;
  986. }
  987. #post_info a {
  988. font-size:12px;
  989. letter-spacing:0px;
  990. color:{color:info};
  991. font-family: 'khula', sans-serif;
  992. {block:IfFontLora}
  993. font-family: 'lora', sans-serif;
  994. {/block:IfFontLora}
  995. }
  996. #post_info span {
  997. font-size:10px;
  998. font-weight:bold;
  999. }
  1000. #post_info a:hover {
  1001. color:{color:hover};
  1002. -moz-transition-duration:0.2s;
  1003. -webkit-transition-duration:0.2s;
  1004. -o-transition-duration:0.2s;
  1005. transition: all 0.2s ease-out;
  1006. }
  1007. #permalink{
  1008. margin-bottom:12px;
  1009. text-align:left;
  1010. font-size:9px;
  1011. margin-left:15px;
  1012. margin-top:16px;
  1013. font-weight:bold;
  1014. width:520px;
  1015. font-size:11px;
  1016. text-transform:none;
  1017. font-weight:300;
  1018. font-family: 'khula', sans-serif;
  1019. {block:IfFontLora}
  1020. font-family: 'lora', sans-serif;
  1021. {/block:IfFontLora}
  1022. letter-spacing:0px;
  1023. line-height:10px;
  1024. color:{color:text};
  1025. }
  1026. #permalink a{
  1027. color:{color:text};
  1028. font-family: 'khula', sans-serif;
  1029. {block:IfFontLora}
  1030. font-family: 'lora', sans-serif;
  1031. {/block:IfFontLora}
  1032. font-size:10px;
  1033. margin-left:-3px;
  1034. text-transform:none;
  1035. font-weight:600;
  1036. padding:3px;
  1037. }
  1038. #permalink a:hover{
  1039. color:{color:hover};
  1040. }
  1041. #permalink b {
  1042. color:{color:text};
  1043. font-family: 'khula', sans-serif;
  1044. {block:IfFontLora}
  1045. font-family: 'lora', sans-serif;
  1046. {/block:IfFontLora}
  1047. font-size:9px;
  1048. margin-left:-3px;
  1049. text-transform:none;
  1050. font-weight:600;
  1051. padding:3px;
  1052. }
  1053. #permalink span {
  1054. color:{color:text};
  1055. font-size:10px;
  1056. text-transform:none;
  1057. font-weight:700;
  1058. padding:3px;
  1059. }
  1060. /*questions and answers*/
  1061. #asking {
  1062. margin-left:40px;
  1063. margin-top:-55px;
  1064. }
  1065. #question {
  1066. padding:25px;
  1067. padding-left:52px;
  1068. margin-top:5px;
  1069. padding-top:22px;
  1070. margin-left:10px;
  1071. width:457px;
  1072. text-transform:none;
  1073. border-radius:0px;
  1074. {block:IfRoundedCorners}
  1075. border-radius:3px;
  1076. {/block:IfRoundedCorners}
  1077. font-family: 'khula', sans-serif;
  1078. {block:IfFontLora}
  1079. font-family: 'lora', sans-serif;
  1080. {/block:IfFontLora}
  1081. color:{color:text};
  1082. background-color:{color:asks};
  1083. }
  1084. #asker{
  1085. margin-top:12px;
  1086. padding:20px;
  1087. font-weight:300;
  1088. width:435px;
  1089. font-size:10px;
  1090. z-index:9999999999;
  1091. color:{color:text};
  1092. opacity:1;
  1093. background:{color:asks};
  1094. border-radius:2px;
  1095. margin-left:12px;
  1096. line-height:18px;
  1097. letter-spacing:0px;
  1098. font-family: 'khula', sans-serif;
  1099. {block:IfFontLora}
  1100. font-family: 'lora', sans-serif;
  1101. {/block:IfFontLora}
  1102. text-transform:none;
  1103. }
  1104. askerurl{
  1105. font-weight:600;
  1106. font-family: 'khula', sans-serif;
  1107. {block:IfFontLora}
  1108. font-family: 'lora', sans-serif;
  1109. {/block:IfFontLora}
  1110. font-size:10px;
  1111. margin-bottom:16px;
  1112. }
  1113. /*credit (u better leave this here u goof)*/
  1114. #credit{
  1115. position:fixed;
  1116. font-size:9px;
  1117. font-weight:400;
  1118. height:20px;
  1119. width:52px;
  1120. opacity:1;
  1121. right:12px;
  1122. bottom:10px;
  1123. line-height:10px;
  1124. letter-spacing:0px;
  1125. border-radius:3px;
  1126. background:{color:credit};
  1127. padding:7px;
  1128. z-index:9999999999999999999999999999;
  1129. text-align:center;
  1130. font-family: 'lora', sans-serif;
  1131. border:1px solid {color:border};
  1132. color:{color:text};
  1133. text-transform:lowercase;
  1134. -moz-transition-duration:0.6s;
  1135. -webkit-transition-duration:0.6s;
  1136. -o-transition-duration:0.6s;
  1137. transition: all 0.6s ease-out;
  1138. }
  1139. #credit a:hover{
  1140. color:{color:credit hover};
  1141. -moz-transition-duration:0.6s;
  1142. -webkit-transition-duration:0.6s;
  1143. -o-transition-duration:0.6s;
  1144. transition: all 0.6s ease-out;
  1145. }
  1146. {CustomCSS}</style>
  1147. </head>
  1148. <body>
  1149. <div class="container fade-in one">
  1150. <div id="description"><h4>{text:sidebar label}</h4> {description}</div>
  1151. </div>
  1152. <div id="custom_links">
  1153. <a href="/">Index</a>
  1154. <a href="/ask">Contact</a>
  1155. <a href="{text:link one url}">{text:link one label}</a>
  1156. <a href="{text:link two url}">{text:link two label}</a>
  1157. <div id="headerimage"><img src="{image:header}"></div>
  1158. <div id="sbiconimage"><img src="{image:icon}"></div>
  1159. </div>
  1160. </div>
  1161. <div class="post_container fade-in one">
  1162. <!-- posts and entries -->
  1163. <div id="entries"class="fade-in one">
  1164. {block:Posts}
  1165. <div id="post"class="fade-in one">
  1166. <!-- texts -->
  1167. {block:Text}
  1168. {block:Title}<h1>{Title}</h1>{/block:Title}
  1169. <p>{Body}</p>
  1170. {/block:Text}
  1171. <!-- question and answers -->
  1172. {block:Answer}
  1173. <div id="asker"><askerurl>{Asker} asked:</askerurl></br> {Question}</div>
  1174. {Answer}{/block:Answer}
  1175. <!-- quotes -->
  1176. {block:Quote}
  1177. <div class="quote_cap"><i class="zmdi zmdi-quote"></i>
  1178. {Quote}<i class="zmdi zmdi-quote"></i>
  1179. </div>
  1180. <div class="quote_src">
  1181. {block:Source}- {Source}{/block:Source}
  1182. </div>
  1183. {/block:Quote}
  1184. <!-- links -->
  1185. {block:Link}
  1186. <h2><center><a href="{URL}">{Name}</center></a></h2>
  1187. {block:Description}{Description}{/block:Description}
  1188. {/block:Link}
  1189. <!-- chats -->
  1190. {block:Chat}
  1191. {block:Title}<h1>{Title}</h1>{/block:Title}
  1192. <div class="chat_box">{block:Lines}<div class="chat_line">{block:Label}<div class ="chat_label">{Label}</div>{/block:Label}
  1193. <blockquote>{Line}</blockquote></div>{/block:Lines}</div>
  1194. {/block:Chat}
  1195. <!-- photos -->
  1196. {block:Photo}
  1197. {LinkOpenTag}<div class="ppost"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%">{LinkCloseTag}</div>
  1198. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1199. {/block:Photo}
  1200. <!-- photosets -->
  1201. {block:Photoset}
  1202. <div class="set"style="margin-top:-15px"><center><div class="pxu"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
  1203. <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}" ></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div></center></div>
  1204. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1205. {/block:Photoset}
  1206. <!-- videos -->
  1207. {block:Video}
  1208. <div class="vsets">{Video-500}</div>
  1209. {block:Caption}<div class="photo_caption">{Caption}</div>{/block:Caption}
  1210. {/block:Video}
  1211. <!-- audios -->
  1212. {block:Audio}<div class="album_cover">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1213. {block:TrackName}<div class="audio_tit">Title: <audioinfo>{TrackName}</audioinfo><br/></div>{/block:TrackName}
  1214. {block:Artist}<div class="audio_artist">Artist: <audioinfo>{Artist}</audioinfo><br/></div>{/block:Artist}
  1215. {/block:ExternalAudio}<div class="audio_play">Played: <audioinfo>{PlayCount} times</audioinfo> </div>
  1216. </br>
  1217. <div class="audio_player">{AudioPlayer}</div>
  1218. {/block:Audio}
  1219. <!-- info -->
  1220. <div id="info">
  1221. <div id="permalink">
  1222. <div id="post_info">
  1223. <date><a href="{Permalink}">{TimeAgo} </a><font style="float:right;margin-right:60px;margin-top:0px;"> {NoteCountWithLabel}</font style></date></br>
  1224. {block:RebloggedFrom}{block:ContentSource}
  1225. <a href="{ReblogParentURL}" title="via">via</a><a href="{SourceURL}"title="source">src</a>
  1226. {/block:ContentSource}
  1227. {/block:RebloggedFrom}
  1228. <font style="float:right;margin-right:60px;margin-top:-3px;"><a href="{ReblogURL}" title="reblog"target="_blank" class="details">reblog</a>
  1229. </a><div class="custom-like-button"style="margin-top:-25px">{LikeButton}<span class="our_button"><span class="sf sf-heart-o"></span></div></font style>
  1230. </div></div>
  1231. {/block:Date}
  1232.  
  1233. {block:HasTags}<tagged>{block:Tags} <a href="{TagURL}"> <tagged>#{Tag}</tagged> </a> {/block:Tags}
  1234.  
  1235. {/block:HasTags}
  1236. </div></div>
  1237. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1238. {/block:Posts}
  1239. {/block:Posts}
  1240. <div class="pagination"style="{color:title text}">
  1241. {block:PreviousPage}<a href="{PreviousPage}"title="previous page">BACK</a>{/block:PreviousPage}{block:JumpPagination length="4"}{block:CurrentPage}<span class="current_page"style="color:{color:accent};font-weight:600;padding:5px">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page"style="{color:text}" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}"title="next page">NEXT</a>{/block:NextPage}
  1242. {/block:Pagination}</div>
  1243. </div>
  1244.  
  1245. </div>
  1246. <!-- credit(u better dont touch this here u goof) -->
  1247. <div id="credit">
  1248. <a href="http://ceesty.com/qNgV4R"title="Coded by 1204px">themes by azure</a>
  1249. </div></div>
  1250. </html>
  1251. <script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1252. <script> $(function(){ $('#entries').unnest({
  1253. yourCaption: ".photo_caption", //your caption selector, the div wrapping {Caption}
  1254. wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
  1255. newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
  1256. originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  1257. tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
  1258. tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
  1259. usernameColon: false //if turned to false, removes the colon at the end of usernames
  1260. }); });
  1261. </script>
  1262. <!-- pixel union photoset script -->
  1263. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1264. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1265. <script>
  1266. $(document).ready(function(){
  1267. $('.photo-slideshow').pxuPhotoset({
  1268. lightbox: true,
  1269. rounded: false,
  1270. gutter: '0px',
  1271. borderRadius:'0px',
  1272. photoset: '.photo-slideshow',
  1273. photoWrap: '.photo-data',
  1274. photo: '.pxu-photo'
  1275. });</script>
  1276.  
  1277. </body>
  1278. <!-- end html -->
Advertisement
Add Comment
Please, Sign In to add comment