API tools faq
paste
Advertisement
heartilys

THEME 01

heartilys
Nov 4th, 2017
796
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.20 KB | None | 0 0
raw download clone embed print report
  1. <!-- ・ﾟ✧ ——— THEME 01 by @bycandleliqht
  2.  
  3. feel free to edit as you see fit! if you need
  4. customization / editing help, or just find a
  5. bug in the coding, drop an ask @
  6. http://bycandleliqht.tumblr.com/ask OR
  7. http://dragondiamonds.tumblr.com/ask. i'll
  8. help you as best i can. all i ask is that you
  9. keep the credit intact & don't claim as your
  10. own!
  11.  
  12. you can find the script credits above the
  13. appropriate scripts. base code is by me.
  14.  
  15. -->
  16.  
  17.  
  18. <!DOCTYPE html>
  19. <html>
  20. <head>
  21.  
  22. <title>{Title}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26.  
  27. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  28.  
  29. <!-- SCRIPTS // don't touch these unless you know what you're doing -->
  30.  
  31.  
  32. <!-- font document -->
  33. <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  34.  
  35. <!-- icons document // find more @ https://linearicons.com/free -->
  36. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  37.  
  38. <!-- jquery docs -->
  39. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  40.  
  41. <script type="text/javascript"
  42. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  43.  
  44. <!-- photoset scripts // tutorials @ http://shythemes.tumblr.com/post/113728114758/tutorial-pixel-union-photosets + http://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by -->
  45. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  46. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  47. <script src="http://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  48.  
  49. <script>
  50. $(document).ready(function(){
  51. $('.photo-slideshow').pxuPhotoset({
  52. lightbox: true,
  53. rounded: false,
  54. gutter: '3px',
  55. borderRadius: '0px',
  56. photoset: '.photo-slideshow',
  57. photoWrap: '.photo-data',
  58. photo: '.pxu-photo'
  59. });
  60. });
  61. </script>
  62.  
  63. <!-- pop up menu // tutorial @ http://starious.tumblr.com/post/27923651360/tutorial-pop-up-menu -->
  64. <script>
  65. $(document).ready(function() {
  66. //
  67. //When you click on a link with class of poplight and the href starts with a #
  68. $('a.poplight[href^=#]').click(function() {
  69. var popID = $(this).attr('rel'); //Get Popup Name
  70. var popURL = $(this).attr('href'); //Get Popup href to define size
  71.  
  72. //Pull Query & Variables from href URL
  73. var query= popURL.split('?');
  74. var dim= query[1].split('&');
  75. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  76.  
  77. //Fade in the Popup and add close button
  78. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="" class="btn_close" title="Close Window" alt="×" /></a>');
  79.  
  80. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  81.  
  82. var popMargTop = ($('#' + popID).height() + 80) / 2;
  83. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  84.  
  85. //Apply Margin to Popup
  86. $('#' + popID).css({
  87. 'margin-top' : -popMargTop,
  88. 'margin-left' : -popMargLeft
  89. });
  90.  
  91. //Fade in Background
  92. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  93. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  94. return false;
  95. });
  96.  
  97. //Close Popups and Fade Layer
  98. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  99. $('#fade , .popup_block').fadeOut(function() {
  100. $('#fade, a.close').remove(); //fade them both out
  101. });
  102. return false;
  103. });
  104. });
  105. </script>
  106.  
  107.  
  108. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  109.  
  110. <script>
  111.  
  112. (function($){
  113.  
  114. $(document).ready(function(){
  115.  
  116. $("a[title]").style_my_tooltips({
  117.  
  118. tip_follows_cursor:true,
  119.  
  120. tip_delay_time:90,
  121.  
  122. tip_fade_speed:600,
  123.  
  124. attribute:"title"
  125.  
  126. });
  127.  
  128. });
  129.  
  130. })(jQuery);
  131.  
  132. </script>
  133.  
  134. <!--DEFAULTS-->
  135.  
  136. <!--TEXT-->
  137. <meta name="text:subtitle" content="subtitle here"/>
  138. <meta name="text:update1" content="first bubble info here"/>
  139. <meta name="text:update2" content="second bubble info here"/>
  140. <meta name="text:update3" content="third bubble info here"/>
  141.  
  142. <!--COLOURS-->
  143. <meta name="color:scroll" content="#d7b8c6"/>
  144. <meta name="color:main" content="#201f1f"/>
  145. <meta name="color:cont" content="#201f1f"/>
  146. <meta name="color:nav" content="#a7c7c9"/>
  147. <meta name="color:title" content="#d7b8c6"/>
  148. <meta name="color:post" content="#ffffff"/>
  149. <meta name="color:text" content="#2e1d1d"/>
  150. <meta name="color:info" content="#d7b8c6"/>
  151. <meta name="color:link" content="#ad858f"/>
  152. <meta name="color:hover" content="#a7c7c9"/>
  153. <meta name="color:updates border" content="#ffffff"/>
  154. <meta name="color:updates bubbles" content="#ffffff"/>
  155. <meta name="color:borders" content="#ffffff"/>
  156.  
  157. <!--POST WIDTH-->
  158. <meta name="if:400px" content="0"/>
  159. <meta name="if:cont" content="0"/>
  160.  
  161. <!--IMAGES-->
  162. <meta name="image:top" content=""/>
  163. <meta name="image:uicon" content=""/>
  164. <meta name="image:bg" content=""/>
  165.  
  166. <!--LINKS-->
  167. <meta name="text:Link1" content="/" />
  168. <meta name="text:Link1 Title" content="" />
  169. <meta name="text:Link2" content="/" />
  170. <meta name="text:Link2 Title" content="" />
  171. <meta name="text:Link3" content="/" />
  172. <meta name="text:Link3 Title" content="" />
  173.  
  174. <style type="text/css">
  175.  
  176. /* TOOLTIPS */
  177.  
  178. .tooltip{
  179. display:inline;
  180. position:absolute;
  181. }
  182.  
  183. #s-m-t-tooltip {
  184. max-width:100px;
  185. background-color:{color:post};
  186. border:1px solid #dddbdb;
  187. margin:15px 10px 10px 10px;
  188. font-size:9px;
  189. text-transform:uppercase;
  190. font-family:'Karla', sans-serif;
  191. text-align:center;
  192. padding:4px;
  193. }
  194.  
  195.  
  196. /* SCROLLBAR */
  197.  
  198. ::-webkit-scrollbar {
  199. width:2.5px;
  200. }
  201.  
  202. ::-webkit-scrollbar-thumb {
  203. background-color:{color:scroll};
  204. border:2.5px solid transparent;
  205. }
  206.  
  207. /* GENERAL */
  208.  
  209. body {
  210. background-color:{color:main};
  211. background-image:url('{image:bg}');
  212. background-attachment:fixed;
  213. background-repeat:no-repeat;
  214. background-position:left top;
  215. color:{color:text};
  216. font-size:10px;
  217. overflow-y:scroll;
  218. }
  219.  
  220. a {
  221. color:{color:link};
  222. text-decoration:none;
  223. }
  224.  
  225. a:hover {
  226. color:{color:hover};
  227. transition-duration:1s;
  228. -moz-transition-duration:1s;
  229. -webkit-transition-duration:1s;
  230. -o-transition-duration:1s;
  231. }
  232.  
  233. sub {
  234. font-size:11px;
  235. }
  236.  
  237. sub sub {
  238. font-size:9.5px;
  239. }
  240.  
  241. blockquote {
  242. padding:2px 14px 5px 14px;
  243. margin-top:5px;
  244. text-align:justify;
  245. margin-bottom:5px;
  246. background-color:{color:info};
  247. font-family:'Karla', sans-serif;
  248. color:{color:post};
  249. }
  250.  
  251. blockquote img {
  252. max-width:300px;
  253. {block:if400px}max-width:240px;{/block:if400px}
  254. height:auto;
  255. padding-bottom:5px;
  256. }
  257.  
  258.  
  259. /* HEADINGS */
  260.  
  261. h1 {
  262. margin-bottom:15px;
  263. background-color:{color:info};
  264. border:1px solid {color:borders};
  265. font-size:12px;
  266. font-weight:bold;
  267. text-transform:uppercase;
  268. letter-spacing:2px;
  269. font-family:'Karla', sans-serif;
  270. text-shadow: 0 0 1em;
  271. text-align:center;
  272. padding:5px;
  273. border-radius:5px;
  274. color:{color:post};
  275. }
  276.  
  277. h1 a {
  278. color:{color:post};
  279. }
  280.  
  281. h1 a:hover {
  282. color:{color:link};
  283. transition-duration:1s;
  284. -moz-transition-duration:1s;
  285. -webkit-transition-duration:1s;
  286. -o-transition-duration:1s;
  287. }
  288.  
  289. h2 {
  290. background-color:{color:info};
  291. border:1px solid {color:borders};
  292. font-size:9px;
  293. text-transform:uppercase;
  294. font-weight:bold;
  295. letter-spacing:2px;
  296. font-family:'Karla', sans-serif;
  297. text-shadow: 0 0 1em;
  298. text-align:center;
  299. padding:3px;
  300. border-radius:5px;
  301. color:{color:text};
  302. }
  303.  
  304. /* CONTENT */
  305.  
  306. #cont {
  307. margin-left:300px;
  308. width:590px;
  309. {block:if400px}width:450px;{/block:if400px}
  310. {block:ifcont}top:208px;
  311. height:350px;
  312. background-color:{color:cont};
  313. overflow-y:scroll;{/block:ifcont}
  314. {block:ifnotcont}top:165px;
  315. height:100%;{/block:ifnotcont}
  316. overflow-x:hidden;
  317. position:relative;
  318. }
  319.  
  320. #entries {
  321. {block:ifnot400px}margin-top:130px;{/block:ifnot400px}
  322. width:540px;
  323. margin-top:-10px;
  324. margin-bottom:20px;
  325. {block:if400px}width:400px;
  326. margin-top:-20px;{/block:if400px}
  327. padding:25px;
  328. overflow-x:hidden;
  329. }
  330.  
  331. #post {
  332. width:540px;
  333. {block:if400px}width:400px;{/block:if400px}
  334. font-family: 'Karla', sans-serif;
  335. padding-top:40px;
  336. color:{color:text};
  337. }
  338.  
  339. #caption {
  340. text-align:left;
  341. padding:5px;
  342. margin-left:0px;
  343. color:{color:text};
  344. font-family:'Karla', sans-serif;
  345. }
  346.  
  347. #caption a {
  348. text-transform:uppercase;
  349. font-weight:bold;
  350. }
  351.  
  352. #info {
  353. margin-top:-8px;
  354. margin-bottom:5px;
  355. color:{color:post};
  356. font-size:12px;
  357. font-family:'Karla', sans-serif;
  358. text-align:center;
  359. text-transform:uppercase;
  360. background-color:{color:info};
  361. border:1px solid {color:borders};
  362. width:530px;
  363. {block:if400px}width:390px;{/block:if400px}
  364. padding:5px;
  365. }
  366.  
  367. #tags {
  368. margin-top:5px;
  369. padding-bottom:2px;
  370. color:{color:post};
  371. font-family:'Karla', sans-serif;
  372. font-size:9px;
  373. text-transform:uppercase;
  374. letter-spacing:1px;
  375. word-spacing:2px;
  376. }
  377.  
  378. #tags a {
  379. color:{color:post};
  380. }
  381.  
  382. #tags a:hover {
  383. transition-duration:1s;
  384. -moz-transition-duration:1s;
  385. -webkit-transition-duration:1s;
  386. -o-transition-duration:1s;
  387. font-weight:bold;
  388. color:{color:link};
  389. }
  390.  
  391. #notes {
  392. font-family:'Karla', sans-serif;
  393. text-transform:uppercase;
  394. font-size:8px;
  395. }
  396.  
  397. ol.notes {
  398. list-style-type:none;
  399. }
  400.  
  401. /* UPDATES */
  402.  
  403. #uicon {
  404. width:120px;
  405. height:120px;
  406. {block:ifnotcont}bottom:20px;{/block:ifnotcont}
  407. {block:ifcont}top:460px;{/block:ifcont}
  408. left:120px;
  409. position:fixed;
  410. }
  411.  
  412. #uicon img {
  413. width:120px;
  414. height:120px;
  415. border-radius:100px;
  416. border:4px solid {color:updates border};
  417. }
  418.  
  419. #dots {
  420. left:98px;
  421. {block:ifnotcont}bottom:0px;{/block:ifnotcont}
  422. {block:ifcont}top:450px;{/block:ifcont}
  423. position:fixed;
  424. line-height:45px;
  425. }
  426.  
  427. #dots a {
  428. color:{color:scroll};
  429. -webkit-text-stroke:1px {color:updates border};
  430. }
  431.  
  432. #dots a:hover {
  433. color:{color:main};
  434. transition-duration:1s;
  435. -moz-transition-duration:1s;
  436. -webkit-transition-duration:1s;
  437. -o-transition-duration:1s;
  438. }
  439.  
  440. #incon {
  441. {block:ifnotcont}bottom:175px;{/block:ifnotcont}
  442. {block:ifcont}top:390px;{/block:ifcont}
  443. left:223px;
  444. width:165px;
  445. height:135px;
  446. position:fixed;
  447. background-color:{color:updates bubbles};
  448. border-radius: .4em;
  449. }
  450.  
  451. #incon:after {
  452. content: '';
  453. position:absolute;
  454. bottom: 0;
  455. left: 50%;
  456. border: 23px solid transparent;
  457. border-top-color:{color:updates bubbles};
  458. border-bottom: 0;
  459. border-left: 0;
  460. margin-left:10px;
  461. margin-bottom:-23px;
  462. }
  463.  
  464. #in {
  465. width:140px;
  466. height:110px;
  467. padding:3px;
  468. margin-left:11px;
  469. margin-top:7px;
  470. overflow-y:scroll;
  471. font-family:'Karla', sans-serif;
  472. text-align:justify;
  473. font-size:10px;
  474. position:relative;
  475. }
  476.  
  477. #trcon {
  478. bottom:175px;
  479. {block:ifnotcont}bottom:175px;{/block:ifnotcont}
  480. {block:ifcont}top:390px;{/block:ifcont}
  481. left:223px;
  482. width:165px;
  483. height:135px;
  484. position:fixed;
  485. background-color:{color:updates bubbles};
  486. border-radius: .4em;
  487. }
  488.  
  489. #trcon:after {
  490. content: '';
  491. position:absolute;
  492. bottom: 0;
  493. left: 50%;
  494. border: 23px solid transparent;
  495. border-top-color:{color:updates bubbles};
  496. border-bottom: 0;
  497. border-left: 0;
  498. margin-left:10px;
  499. margin-bottom:-23px;
  500. }
  501.  
  502. #tr {
  503. width:140px;
  504. height:110px;
  505. padding:3px;
  506. margin-left:11px;
  507. margin-top:7px;
  508. overflow-y:scroll;
  509. font-family:'Karla', sans-serif;
  510. text-align:justify;
  511. font-size:10px;
  512. position:relative;
  513. }
  514.  
  515.  
  516. #excon {
  517. {block:ifnotcont}bottom:175px;{/block:ifnotcont}
  518. {block:ifcont}top:390px;{/block:ifcont}
  519. left:223px;
  520. width:165px;
  521. height:135px;
  522. position:fixed;
  523. background-color:{color:updates bubbles};
  524. border-radius: .4em;
  525. }
  526.  
  527. #excon:after {
  528. content: '';
  529. position:absolute;
  530. bottom: 0;
  531. left: 50%;
  532. border: 23px solid transparent;
  533. border-top-color:{color:updates bubbles};
  534. border-bottom: 0;
  535. border-left: 0;
  536. margin-left:10px;
  537. margin-bottom:-23px;
  538. }
  539.  
  540. #ex {
  541. width:140px;
  542. height:110px;
  543. padding:3px;
  544. margin-left:11px;
  545. margin-top:7px;
  546. overflow-y:scroll;
  547. font-family:'Karla', sans-serif;
  548. text-align:justify;
  549. font-size:10px;
  550. position:relative;
  551. }
  552.  
  553. .popup_block{
  554. display: none;
  555. float: left;
  556. position: fixed;
  557. z-index: 99999;
  558. }
  559.  
  560. .btn_close {
  561. float:right;
  562. margin:135px -5px 0px 0;
  563. position:relative;
  564. font-size:20px;
  565. font-weight:bold;
  566. font-family:'Karla', sans-serif;
  567. }
  568.  
  569. *html #fade {
  570. position: absolute;
  571. }
  572.  
  573. *html .popup_block {
  574. position: absolute;
  575. }
  576.  
  577.  
  578. /* TOPBAR */
  579.  
  580. #top {
  581. width:590px;
  582. {block:if400px}width:450px;{/block:if400px}
  583. height:165px;
  584. position:fixed;
  585. {block:ifnotcont}top:0px;{/block:ifnotcont}
  586. {block:ifcont}top:50px;{/block:ifcont}
  587. left:308px;
  588. background-color:{color:cont};
  589. border-bottom:1px solid {color:borders};
  590. z-index:10002;
  591. }
  592.  
  593. #title {
  594. {block:ifnot400px}width:500px;
  595. margin-top:-120px;
  596. margin-left:60px;{/block:ifnot400px}
  597. {block:if400px}width:400px;
  598. margin-top:-120px;
  599. margin-left:25px;{/block:if400px}
  600. font-size:14px;
  601. letter-spacing:1px;
  602. font-family:'Karla', sans-serif;
  603. color:{color:title};
  604. position:relative;
  605. font-style:italic;
  606. font-weight:bold;
  607. text-align:right;
  608. }
  609.  
  610. #description {
  611. width:230px;
  612. {block:if400px}width:200px;
  613. margin-left:15px;
  614. margin-top:25px;{/block:if400px}
  615. height:90px;
  616. padding:5px;
  617. {block:ifnot400px}margin-left:20px;
  618. margin-top:30px;{/block:ifnot400px}
  619. color:{color:text};
  620. background-color:{color:post};
  621. font-family: 'Karla', sans-serif;
  622. font-size:10px;
  623. text-align:justify;
  624. border-radius:5px;
  625. font-weight:bold;
  626. line-height:12px;
  627. letter-spacing:.5px;
  628. position:relative;
  629. overflow-x:hidden;
  630. }
  631.  
  632. #topimg {
  633. {block:ifnot400px}width:290px;
  634. margin-left:280px;
  635. margin-top:3px;{/block:ifnot400px}
  636. {block:if400px}width:200px;
  637. margin-left:235px;
  638. margin-top:3px;{/block:if400px}
  639. height:100px;
  640. position:relative;
  641. }
  642.  
  643. #topimg img {
  644. width:290px;
  645. {block:if400px}width:200px;{/block:if400px}
  646. height:100px;
  647. }
  648.  
  649. #nav {
  650. margin-top:25px;
  651. margin-left:15px;
  652. padding-bottom:5px;
  653. text-align:left;
  654. word-spacing:15px;
  655. position:relative;
  656. }
  657.  
  658. #nav a {
  659. color:{color:nav};
  660. font-size:12px;
  661. font-weight:bold;
  662. text-align:center;
  663. background-color:{color:cont};
  664. padding:8px;
  665. border:1px solid {color:borders};
  666. border-radius:200px;
  667. }
  668.  
  669. #nav a:hover {
  670. background-color:{color:info};
  671. color:{color:post};
  672. transition-duration:1s;
  673. -moz-transition-duration:1s;
  674. -webkit-transition-duration:1s;
  675. -o-transition-duration:1s;
  676. }
  677.  
  678. #subtitle {
  679. {block:ifnot400px}width:290px;
  680. margin-left:280px;{/block:ifnot400px}
  681. {block:if400px}width:200px;
  682. margin-left:235px;{/block:if400px}
  683. font-size:8.5px;
  684. font-family:'Karla', sans-serif;
  685. color:{color:nav};
  686. position:relative;
  687. text-transform:uppercase;
  688. letter-spacing:.5px;
  689. font-weight:bold;
  690. margin-top:-33px;
  691. text-align:center;
  692. }
  693.  
  694. /* PAGINATION */
  695.  
  696. #bottom {
  697. width:590px;
  698. {block:if400px}width:450px;{/block:if400px}
  699. height:30px;
  700. {block:ifnotcont}bottom:0px;{/block:ifnotcont}
  701. {block:ifcont}top:555px;{/block:ifcont}
  702. left:308px;
  703. background-color:{color:cont};
  704. font-size:20px;
  705. font-family: 'Karla', sans-serif;
  706. position:fixed;
  707. z-index:10004;
  708. border-top:1px solid {color:scroll};
  709. }
  710.  
  711. #pagination {
  712. margin-top:-4px;
  713. text-align:center;
  714. position:relative;
  715. padding:5px;
  716. }
  717.  
  718. #pagination a {
  719. color:{color:nav};
  720. font-size:12px;
  721. font-weight:bold;
  722. text-align:center;
  723. background-color:{color:cont};
  724. padding:3px;
  725. border:1px solid {color:borders};
  726. border-radius:200px;
  727. }
  728.  
  729. #pagination a:hover {
  730. background-color:{color:info};
  731. color:{color:post};
  732. transition-duration:1s;
  733. -moz-transition-duration:1s;
  734. -webkit-transition-duration:1s;
  735. -o-transition-duration:1s;
  736. }
  737.  
  738. /* ASK POSTS */
  739.  
  740. #question {
  741. width:460px;
  742. {block:if400px}width:320px;{/block:if400px}
  743. margin-left:20px;
  744. padding:21px;
  745. background-color:{color:post};
  746. color:{color:text};
  747. font-family:'Karla', sans-serif;
  748. text-transform:uppercase;
  749. font-size:11px;
  750. text-align:justify;
  751. line-height:14px;
  752. font-weight:bold;
  753. font-style:italic;
  754. position:relative;
  755. border-radius:.4em;
  756. }
  757.  
  758. #question:after {
  759. content:'';
  760. position:absolute;
  761. bottom:0;
  762. left:50%;
  763. width:0;
  764. height:0;
  765. border:20px solid transparent;
  766. border-top-color:{color:post};
  767. border-bottom:0;
  768. border-left:0;
  769. {block:ifnot400px}margin-left:170px;{/block:ifnot400px}
  770. {block:if400px}margin-left:100px;{/block:if400px}
  771. margin-bottom:-20px;
  772. }
  773.  
  774. #asker {
  775. text-align:right;
  776. font-size:12px;
  777. text-transform:uppercase;
  778. font-weight:bold;
  779. font-style:italic;
  780. letter-spacing:2px;
  781. font-family:'Karla', sans-serif;
  782. margin-top:0px;
  783. margin-right:50px;
  784. text-shadow: 0 0 .1em;
  785. }
  786.  
  787. #asker img {
  788. border-radius:100px;
  789. position:relative;
  790. top:16px;
  791. right:10px;
  792. box-shadow: 0 0 .1em;
  793. }
  794.  
  795. #answer {
  796. width:475px;
  797. {block:if400px}width:335px;{/block:if400px}
  798. margin-left:20px;
  799. border-radius:5px;
  800. padding:2px 14px 5px 14px;
  801. margin-top:25px;
  802. text-align:left;
  803. margin-bottom:20px;
  804. background-color:{color:info};
  805. font-family:'Karla', sans-serif;
  806. color:{color:post};
  807. }
  808.  
  809. /* LINK POSTS */
  810.  
  811. #linkp {
  812. {block:if400px}width:380px;{/block:if400px}
  813. {block:ifnot400px}width:520px;{/block:ifnot400px}
  814. padding:10px;
  815. background-color:{color:post};
  816. color:{color:text};
  817. font-family:'Karla', sans-serif;
  818. border:1px solid {color:borders};
  819. border-radius:10px;
  820. line-height:12px;
  821. }
  822.  
  823. /* QUOTE POSTS */
  824.  
  825. #quote {
  826. width:460px;
  827. {block:if400px}width:320px;{/block:if400px}
  828. margin-left:21px;
  829. padding:20px;
  830. background-color:{color:post};
  831. color:{color:text};
  832. font-family:'Karla', sans-serif;
  833. font-size:12px;
  834. font-style:italic;
  835. line-height:14px;
  836. position:relative;
  837. border-radius:.4em;
  838. }
  839.  
  840. #quote:after {
  841. content:'';
  842. position:absolute;
  843. left:50%;
  844. bottom:0;
  845. width:0;
  846. height:0;
  847. border:20px solid transparent;
  848. border-top-color:{color:post};
  849. border-bottom:0;
  850. border-left:0;
  851. {block:ifnot400px}margin-left:170px;{/block:ifnot400px}
  852. {block:if400px}margin-left:100px;{/block:if400px}
  853. margin-bottom:-20px;
  854. }
  855.  
  856. #source {
  857. margin-right:25px;
  858. margin-top:25px;
  859. margin-bottom:25px;
  860. font-family:'Karla', sans-serif;
  861. font-size:15px;
  862. font-weight:bold;
  863. text-transform:uppercase;
  864. text-align:right;
  865. text-shadow: 0 0 .1em;
  866. }
  867.  
  868. /* TEXT POSTS */
  869.  
  870. #text {
  871. padding:10px;
  872. background-color:{color:post};
  873. color:{color:text};
  874. {block:if400px}width:380px;{/block:if400px}
  875. {block:ifnot400px}width:520px;{/block:ifnot400px}
  876. font-family:'Karla', sans-serif;
  877. border:1px solid {color:borders};
  878. border-radius:10px;
  879. line-height:12px;
  880. text-align:justify;
  881. }
  882.  
  883. /* CHAT POSTS */
  884.  
  885. #chat {
  886. padding:20px;
  887. background-color:{color:post};
  888. color:{color:text};
  889. list-style:none;
  890. border:1px solid {color:borders};
  891. border-radius:10px;
  892. font-family:'Karla', sans-serif;
  893. }
  894.  
  895. #chat li {
  896. list-style-type: none;
  897. margin-left:0px;
  898. }
  899.  
  900. #chat li:nth-of-type(odd) {
  901. background-color:{color:info};
  902. padding:6px;
  903. color:{color:post};
  904. border-radius:5px;
  905. }
  906.  
  907. #chat li:nth-of-type(even) {
  908. background-color:{color:post};
  909. color:{color:text};
  910. padding:6px;
  911. border-radius:5px;
  912. }
  913.  
  914. #chat li:last-of-type {
  915. margin-bottom:5px;
  916. }
  917.  
  918. #chat li.span {
  919. margin-right:10px;
  920. }
  921.  
  922.  
  923. .label {
  924. font-weight:bold;
  925. text-transform:uppercase;
  926. letter-spacing:1px;
  927. }
  928.  
  929. /* PHOTO POSTS */
  930.  
  931. #ph {
  932. width:520px;
  933. {block:if400px}width:380px;{/block:if400px}
  934. background-color:{color:post};
  935. padding:10px;
  936. padding-bottom:15px;
  937. border-radius:10px;
  938. margin-bottom:0px;
  939. border:1px solid {color:borders};
  940. }
  941.  
  942. #ph img {
  943. margin-top:3px;
  944. max-width:100%;
  945. }
  946.  
  947. #phset {
  948. width:520px;
  949. {block:if400px}width:380px;{/block:if400px}
  950. background-color:{color:post};
  951. padding:10px;
  952. padding-bottom:15px;
  953. border-radius:10px;
  954. margin-bottom:0px;
  955. border-radius:10px;
  956. border:1px solid {color:borders};
  957. margin-bottom:0px;
  958. }
  959.  
  960. .photo-slideshow {
  961. width:auto!important;
  962. }
  963.  
  964. #cs {
  965. display:none;
  966. }
  967.  
  968. /* VIDEO POSTS */
  969.  
  970. #vid {
  971. text-align:center;
  972. width:500px;
  973. {block:if400px}width:360px;{/block:if400px}
  974. height:auto;
  975. padding:20px 20px 20px 20px;
  976. background-color:{color:post};
  977. color:{color:text};
  978. border:1px solid {color:borders};
  979. border-radius:10px;
  980. }
  981.  
  982. /* AUDIO POSTS */
  983.  
  984. #aud {
  985. width:500px;
  986. {block:if400px}width:360px;{/block:if400px}
  987. padding:20px;
  988. background-color:{color:post};
  989. color:{color:text};
  990. border:1px solid {color:borders};
  991. border-radius:10px;
  992. }
  993.  
  994. #albumart {
  995. {block:ifnot400px}margin-left:103px;{block:ifnot400px}
  996. {block:if400px}margin-left:40px;{/block:if400px}
  997. background-color:{color:cont};
  998. border-radius:.4em;
  999. position: relative;
  1000. }
  1001.  
  1002. #albumart:after {
  1003. content: '';
  1004. position: absolute;
  1005. left:95px;
  1006. top:42px;
  1007. width: 0;
  1008. height: 0;
  1009. border: 12px solid transparent;
  1010. border-left-color:{color:info};
  1011. border-right: 0;
  1012. border-bottom: 0;
  1013. }
  1014.  
  1015.  
  1016. #albumart img {
  1017. width:85px;
  1018. height:85px;
  1019. float:left;
  1020. border:5px solid {color:info};
  1021. border-radius:85em;
  1022. }
  1023.  
  1024. #lis {
  1025. width:28px;
  1026. height:28px;
  1027. overflow:hidden;
  1028. float:left;
  1029. background-color:{color:cont};
  1030. position:absolute;
  1031. margin-top:33px;
  1032. {block:ifnot400px}margin-left:138px;{block:ifnot400px}
  1033. {block:if400px}margin-left:75px;{/block:if400px}
  1034. border-radius:30px;
  1035. opacity:0.7;
  1036. }
  1037.  
  1038. #track {
  1039. font-size:9px;
  1040. text-align:right;
  1041. text-transform:lowercase;
  1042. letter-spacing:1px;
  1043. margin-top:50px;
  1044. {block:ifnot400px}margin-right:100px;{block:ifnot400px}
  1045. {block:if400px}margin-right:40px;{/block:if400px}
  1046. margin-bottom:5px;
  1047. font-family:'Karla', sans-serif;
  1048. }
  1049.  
  1050. #artist {
  1051. font-size:9px;
  1052. text-align:right;
  1053. font-weight:bold;
  1054. text-transform:uppercase;
  1055. letter-spacing:1px;
  1056. {block:ifnot400px}margin-right:100px;{block:ifnot400px}
  1057. {block:if400px}margin-right:40px;{/block:if400px}
  1058. margin-bottom:20px;
  1059. font-family:'Karla', sans-serif;
  1060. text-shadow: 0 0 .1em;
  1061. }
  1062.  
  1063. /* LIKE BUTTON */
  1064.  
  1065. .like { /* Make a parent element */
  1066. position: relative;
  1067. }
  1068. .like svg path { /* Select your color of choice */
  1069. fill: #563d7c;
  1070. }
  1071. .like .like_button { /* Position like button above your custom one */
  1072. position:absolute;
  1073. left:20px;
  1074. opacity: 0;
  1075. }
  1076. .like .like_button.liked { /* Keep the functionality active */
  1077. opacity: 1;
  1078. }
  1079.  
  1080.  
  1081. /* CREDIT -- DO NOT REMOVE */
  1082.  
  1083. #credit {
  1084. bottom:10px;
  1085. right:10px;
  1086. background-color:{color:post};
  1087. padding:3px;
  1088. border:1px solid {color:borders};
  1089. font-size:8px;
  1090. text-transform:uppercase;
  1091. font-family:'Karla', sans-serif;
  1092. text-shadow: 0 1 0em;
  1093. text-align:left;
  1094. position:fixed;
  1095. padding:4px;
  1096. }
  1097.  
  1098. #credit a {
  1099. color:{color:link};
  1100. }
  1101.  
  1102. {CustomCSS}
  1103. </style>
  1104. </head>
  1105. <body>
  1106.  
  1107.  
  1108. <!--HTML-->
  1109.  
  1110. <!--Sidebar-->
  1111.  
  1112. <div id="dots">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a style="font-size:20px;" href="#?w=165" rel="incon" class="poplight" title="updates">●</a><br>
  1113. <a style="font-size:26px;" href="#?w=165" rel="trcon" class="poplight" title="counters">●</a><br>
  1114. &nbsp;&nbsp;&nbsp;&nbsp;<a style="font-size:32px;" href="#?w=165" rel="excon" class="poplight" title="extra">●</a></div>
  1115.  
  1116. <div id="uicon"><img src="{image:uicon}"></div>
  1117.  
  1118. <div id="incon" class="popup_block">
  1119. <div id="in">
  1120. {text:update1}
  1121. </div></div>
  1122.  
  1123. <div id="trcon" class="popup_block">
  1124. <div id="tr">
  1125. {text:update2}
  1126. </div></div>
  1127.  
  1128. <div id="excon" class="popup_block">
  1129. <div id="ex">
  1130. {text:update3}
  1131. </div></div>
  1132.  
  1133. <!--Bottombar-->
  1134.  
  1135. <div id="top">
  1136.  
  1137. <div id="description">
  1138. {Description}
  1139. </div>
  1140.  
  1141. <div id="title">
  1142. {Title}
  1143. </div>
  1144.  
  1145. <div id="topimg"><img src="{image:top}"></div>
  1146.  
  1147. <div id="nav">
  1148. <a href="/" title="refresh"><span class="lnr lnr-home"></span></a>
  1149. <a href="/ask" title="askbox"><span class="lnr lnr-envelope"></span></a>
  1150. <a href="{text:Link1}" title="{text:Link1 Title}"><span class="lnr lnr-tag"></span></a> <a href="{text:Link2}" title="{text:Link2 Title}"><span class="lnr lnr-users"></span></a> <a href="{text:Link3}" title="{text:Link3 Title}"><span class="lnr lnr-heart"></span></span></a>
  1151. </div>
  1152.  
  1153. <div id="subtitle">{text:subtitle}</div>
  1154.  
  1155. </div>
  1156.  
  1157. <div id="bottom">
  1158. <!--Pagination-->
  1159. {block:Pagination}
  1160. <div id="pagination">
  1161. {block:PreviousPage}
  1162. <a href="{PreviousPage}"><span class="lnr lnr-undo"></span></a>
  1163. {/block:PreviousPage}
  1164. &nbsp; &nbsp; &nbsp;
  1165. {block:NextPage}
  1166. <a href="{NextPage}"><span class="lnr lnr-redo"></span></a>
  1167. {/block:NextPage}
  1168. </div>
  1169. {/block:Pagination}
  1170. </div>
  1171.  
  1172. <!--Content-->
  1173. <div id="cont">
  1174.  
  1175. <div id="entries">
  1176. {block:Posts}
  1177.  
  1178. {block:ContentSource}
  1179. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1180. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1181. {/block:SourceLogo}
  1182. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1183. {/block:ContentSource}
  1184.  
  1185. {block:ReblogParentUrl}
  1186. <!-- {URL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1187. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1188. {/block:SourceLogo}
  1189. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1190. {/block:ReblogParentUrl}
  1191.  
  1192. <div id="post">
  1193.  
  1194. <!--Text Posts-->
  1195.  
  1196. {block:Text}
  1197. <div id="text">
  1198. {block:Title}<h1>{Title}</h1>{/block:Title}
  1199. {Body}
  1200. </div>
  1201. {/block:Text}
  1202.  
  1203. <!--Photo Posts-->
  1204.  
  1205. {block:Photo}
  1206. {LinkOpenTag}
  1207. <div id="ph"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1208. {LinkCloseTag}
  1209. {block:Caption}
  1210. <div id="caption">
  1211. {Caption}
  1212. </div>
  1213. {/block:Caption}
  1214. </div>
  1215. {/block:Photo}
  1216.  
  1217. {block:Photoset}
  1218. <div id="phset">
  1219.  
  1220. <center><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></center>
  1221. {block:Caption}
  1222. <div id="caption">
  1223. {Caption}
  1224. </div>
  1225. {/block:Caption}
  1226. </div>
  1227. {/block:Photoset}
  1228.  
  1229.  
  1230.  
  1231. <!--Quote Posts-->
  1232.  
  1233. {block:Quote}
  1234. <div id="quote">
  1235. {Quote}
  1236. </div>
  1237. {block:Source}
  1238. <div id="source">
  1239. — &nbsp; {Source}
  1240. </div>
  1241. {/block:Source}
  1242. {/block:Quote}
  1243.  
  1244. <!--Link Posts-->
  1245.  
  1246. {block:Link}
  1247. <div id="linkp">
  1248. <h1>
  1249. <a href="{URL}" {Target}>{Name}</a>
  1250. </h1>
  1251. <div id="caption">{block:Description}{Description}{/block:Description}</div>
  1252. {/block:Link}
  1253. </div>
  1254.  
  1255. <!--Chat Posts-->
  1256.  
  1257. {block:Chat}
  1258. <div id="chat">
  1259. {block:Title}
  1260. <h1>{Title}</h1>
  1261. {/block:Title}
  1262. {block:Lines}
  1263. <li class=“{Alt} user_{UserNumber}”>
  1264. {block:Label}
  1265. <span class="label">{Label}</span>
  1266. {/block:Label}
  1267. {Line}
  1268. </li>
  1269. {/block:Lines}
  1270. </div>
  1271. {/block:Chat}
  1272.  
  1273. <!--Audio Posts-->
  1274.  
  1275. {block:Audio}
  1276. <div id="aud">
  1277. {block:AlbumArt}
  1278. <div id="albumart"><img src="{AlbumArtURL}"></div>
  1279. {/block:AlbumArt}
  1280. <div id="lis">{AudioPlayerWhite}</div>
  1281. {block:TrackName}
  1282. <div id="track">{TrackName}</div>
  1283. {/block:TrackName}
  1284. {block:Artist}
  1285. <div id="artist">— {Artist}</div>
  1286. {/block:Artist}
  1287. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  1288. </div>
  1289. {/block:Audio}
  1290.  
  1291. <!--Video Posts-->
  1292.  
  1293. {block:ifnot400px}
  1294. {block:Video}<div id="vid">{VideoEmbed-500}
  1295. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  1296. </div>
  1297. {/block:Video}
  1298. {/block:ifnot400px}
  1299.  
  1300. {block:if400px}
  1301. {block:Video}<div id="vid">{Video-250}
  1302. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  1303. </div>
  1304. {/block:Video}
  1305. {/block:if400px}
  1306.  
  1307.  
  1308. <!--Ask Posts-->
  1309.  
  1310. {block:Answer}
  1311. <div id="question">
  1312. <font style="font-size:30px; margin-top:10px">❝</font> {Question}</div>
  1313. <div id="asker"><img src="{AskerPortraitURL-40}"> — {Asker}</div>
  1314. <div id="answer">{Answer}</div>
  1315. {/block:Answer}
  1316.  
  1317. <!--Post Info-->
  1318.  
  1319. <div id="info">
  1320. {block:Date}
  1321. <a href="" title="{12HourWithZero}:{Minutes}{CapitalAmPm}">{ShortMonth} {DayOfMonth}</a>
  1322. &nbsp;&nbsp;
  1323. {/block:Date}
  1324. <a href="{Permalink}">♡ {NoteCount}</a> &nbsp; &nbsp;
  1325. {block:RebloggedFrom}
  1326. <a href="{ReblogParentURL}">VIA</a> &nbsp;
  1327. {/block:RebloggedFrom}
  1328. <a href="{ReblogRootURL}" title="{ReblogRootName}">SRC</a>
  1329. &nbsp; &nbsp; <a class="reblog" href="{ReblogURL" title="Reblog">REBLOG</a>
  1330. </li>
  1331. <div id="tags">
  1332. {block:HasTags}
  1333. <div id="tags">
  1334. {block:Tags}
  1335. <a href="{TagURL}">{Tag}</a>
  1336. &nbsp;
  1337. {/block:Tags}
  1338. </div>
  1339. {/block:HasTags}
  1340. </div>
  1341. </div>
  1342. {/block:Posts}
  1343. {block:PostNotes}
  1344. <div id="notes">
  1345. {PostNotes}
  1346. </div>
  1347. {/block:PostNotes}
  1348. </div>
  1349. </div>
  1350. {/block:Posts}
  1351.  
  1352. </div>
  1353.  
  1354. </div>
  1355.  
  1356. </div>
  1357. </div>
  1358.  
  1359. <div id="credit"><a href="http://bycandleliqht.tumblr.com">PAGE BY EVIE</a></div>
  1360.  
  1361. </body>
  1362. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!