API tools faq
paste
baechubaechubaechu

(4/12) Momo

baechubaechubaechu
Apr 6th, 2018
5,756
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.30 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6. ** Momo -Theme by Caro / baechys@tumblr
  7.  
  8. ------------------------------------------------------------------------
  9.  
  10. Script/s used:
  11.  
  12. - PXU Photosets
  13. - Tooltips
  14. - Smooth scrolling ( http://zacharyfury.tumblr.com/post/138066236021/smoothscroll )
  15.  
  16. ------------------------------------------------------------------------
  17.  
  18. FAQ:
  19.  
  20. Can i edit/tweak this theme?
  21. - Tweak and edit it as much as you want! But don't you dare touch my credits in any way possible
  22.  
  23. Can i use this theme as a base-code?
  24. - No you cant.
  25.  
  26. Can i release my edited version of your theme?
  27. - No you cant, and if i find out about you doing that, i will report you.
  28.  
  29. ------------------------------------------------------------------------
  30.  
  31. Any questions?
  32.  
  33. Please visit baechys.tumblr.com/faq
  34.  
  35. ------------------------------------------------------------------------
  36.  
  37. CREDIT TO HTTP://BAECHYS.TUMBLR.COM
  38. -->
  39.  
  40. <head>
  41.  
  42. <!------------------------- General HTML ------------------------->
  43.  
  44. <title>{title}</title>
  45. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  46. <link rel="shortcut icon" href="{favicon}" />
  47.  
  48. <!------------------------- Meta Names ------------------------->
  49.  
  50. <meta name="image:sidebar" content="https://static.tumblr.com/d70w4cr/tjpp6rsx1/momo_whatislove.png"/>
  51. <meta name="image:background" content=""/>
  52.  
  53. <meta name="color:background" content="#f7bbc3"/>
  54. <meta name="color:body font" content="#888"/>
  55. <meta name="color:links" content="#f4a4af"/>
  56. <meta name="color:links hover" content="#edb0ce"/>
  57. <meta name="color:bold text" content="#999"/>
  58. <meta name="color:scrollbar" content="#c01408"/>
  59. <meta name="color:hearts" content="#c01408"/>
  60.  
  61. <meta name="select:post width" content="300px"/>
  62. <meta name="select:post width" content="350px"/>
  63. <meta name="select:post width" content="400px"/>
  64. <meta name="select:post width" content="450px"/>
  65. <meta name="select:post width" content="500px"/>
  66.  
  67. <meta name="if:sidebar image" content="1"/>
  68. <meta name="if:updates tab" content="1"/>
  69.  
  70. <meta name="text:link 1" content="/"/>
  71. <meta name="text:link 1 title" content="link 1"/>
  72. <meta name="text:link 2" content="/"/>
  73. <meta name="text:link 2 title" content="link 2"/>
  74. <meta name="text:link 3" content="/"/>
  75. <meta name="text:link 3 title" content="link 3"/>
  76. <meta name="text:link 4" content="/"/>
  77. <meta name="text:link 4 title" content="link 4"/>
  78. <meta name="text:link 5" content="/"/>
  79. <meta name="text:link 5 title" content="link 5"/>
  80.  
  81. <!------------------------- Imported Fonts ------------------------->
  82.  
  83. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  84.  
  85. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i" rel="stylesheet">
  86. <link href="https://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet">
  87.  
  88. <!------------------------- SCRIPTS! DONT TOUCH! ------------------------->
  89.  
  90. <!-- photosets -->
  91. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  92. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  93. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  94.  
  95. <script>
  96. $(document).ready(function(){
  97. $('.photo-slideshow').pxuPhotoset({
  98. lightbox: true,
  99. rounded: false,
  100. gutter: '5px',
  101. borderRadius: '0px',
  102. photoset: '.photo-slideshow',
  103. photoWrap: '.photo-data',
  104. photo: '.pxu-photo'
  105. });
  106. });
  107. </script>
  108. <!-- tooltips -->
  109. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  110. <script>
  111. (function($){
  112. $(document).ready(function(){
  113. $("[title]").style_my_tooltips({
  114. tip_follows_cursor:true,
  115. tip_delay_time:200,
  116. tip_fade_speed:300
  117. }
  118. );
  119. });
  120. })(jQuery);
  121. </script>
  122.  
  123. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  124.  
  125. <style type="text/css">
  126. /* ----------------- lightbox ----------------- */
  127.  
  128. .vignette, #vignette {
  129. opacity:0;
  130. }
  131. .lightbox-image, #tumblr_lightbox img {
  132. box-shadow:none !important;
  133. border-radius:0 !important;
  134. max-width:none;
  135. }
  136.  
  137. .tmblr-lightbox, #tumblr_lightbox {
  138. background-color:rgba({RGBcolor:background},0.85) !important;
  139. z-index:999999999999!important;
  140. }
  141.  
  142. /* ----------------- basic settings ----------------- */
  143.  
  144. body{
  145. margin:0px;
  146. padding:0px;
  147. font-family: 'open sans', arial, sans-serif;
  148. font-size:11px;
  149. color:{color:body font};
  150. background:{color:background} url('{image:background}');
  151. background-attachment:fixed;
  152. }
  153.  
  154. b, strong{
  155. color:{color:bold text};
  156. }
  157. a{
  158. color:{color:links};
  159. text-decoration:none;
  160. -moz-transition: all 0.4s ease-in-out;
  161. -o-transition: all 0.4s ease-in-out;
  162. -webkit-transition: all 0.4s ease-in-outs;
  163. transition: all 0.4s ease-in-out;
  164. }
  165.  
  166. a:hover{
  167. color:{color:links hover};
  168. }
  169.  
  170. h1, h2, h3, h4, h5, h6{
  171. font-family:'Leckerli One', cursive;
  172. margin:5px 0px;
  173. line-height:150%;
  174. color:{color:hearts};
  175. }
  176.  
  177. {block:AskPage}
  178. h1{
  179. font-size:25px;
  180. }
  181. {/block:AskPage}
  182.  
  183. blockquote{
  184. margin:10px 0;
  185. padding:0 0 0 10px;
  186. border-left:3px solid rgba({RGBcolor:hearts},0.3);
  187. }
  188.  
  189. underlined{
  190. border-bottom:1px solid {color:body font};
  191. }
  192.  
  193. pre{
  194. white-space: pre-wrap;
  195. background-color:rgba({RGBcolor:background},0.3);
  196. display:block;
  197. padding:5px;
  198. border-radius:5px;
  199. }
  200.  
  201. ul{
  202. margin-left:-20px;
  203. }
  204.  
  205. ul li::before{
  206. content:'\e12a';
  207. font-family:'saturnicons';
  208. color:{color:hearts};
  209. position:absolute;
  210. margin-left:-20px;
  211. font-size:90%;
  212. }
  213.  
  214. /* think about the people reading ur blog... dont make this smaller pls */
  215. small, h5, h6, h4{
  216. font-size:10px;
  217. }
  218.  
  219. /*DONT REMOVE OR DESTROY MY CREDITS
  220. LEAVE EVERYTHING WHERE IT IS*/
  221. #c{
  222. position:fixed;
  223. bottom: 15px;
  224. right: 10px;
  225. text-align:center;
  226. z-index:999999;
  227. }
  228. #c a{
  229. background:{color:hearts};
  230. font-size:12px;
  231. color:#fff;
  232. font-size:10px;
  233. padding:5px 7px;
  234. letter-spacing:1px;
  235. text-decoration:none;
  236. border-radius:5px;
  237. margin:0px 3px;
  238. }
  239. #c a:hover{
  240. background:{color:hearts};
  241. box-shadow:2px 2px rgba({RGBcolor:hearts}, 0.5);
  242. color:#fff;
  243. letter-spacing:1px;
  244. }
  245.  
  246. /* ----------------- scrollbar ----------------- */
  247.  
  248. ::-webkit-scrollbar-thumb:vertical {
  249. background-color: {color:scrollbar};
  250. width:6px;
  251. height:auto;
  252. }
  253.  
  254.  
  255. ::-webkit-scrollbar-thumb:horizontal {
  256. background-color: {color:scrollbar};
  257. height:6px;
  258. }
  259.  
  260. ::-webkit-scrollbar {
  261. height:6px;
  262. width:6px;
  263. background-color:{color:background};
  264. }
  265.  
  266. ::selection {
  267. background-color:{color:hearts};
  268. color:white;
  269. }
  270.  
  271. ::-moz-selection-{
  272. background-color:{color:hearts};
  273. color:white;
  274. }
  275.  
  276. /* ----------------- tooltips ----------------- */
  277.  
  278. #s-m-t-tooltip {
  279. max-width:150px;
  280. padding:7px 12px;
  281. margin:20px 14px 7px 10px;
  282. background-color:rgba({RGBcolor:hearts},0.9);
  283. color:#fff;
  284. font-style: normal;
  285. font-size:11px;
  286. line-height:140%;
  287. letter-spacing:0px;
  288. text-transform:none;
  289. z-index:999999999;
  290. border-radius:5px;
  291. box-shadow:2px 2px rgba({RGBcolor:hearts},0.5), 4px 4px rgba({RGBcolor:hearts},0.2);
  292. }
  293.  
  294. .wrapper{
  295. width:calc({select:post width} + 300px);
  296. margin:0 auto;
  297. }
  298.  
  299. /* ----------------- sidebar ----------------- */
  300.  
  301. aside{
  302. width:170px;
  303. background-color:#fff;
  304. margin-top:140px;
  305. position:fixed;
  306. border-radius:10px;
  307. overflow:hidden;
  308. margin-left:calc({select:post width} + 20px + 80px);
  309. }
  310.  
  311. aside .avi{
  312. max-width:150px;
  313. padding:10px 10px 0 10px;
  314. }
  315.  
  316. .avi img{
  317. max-width:150px;
  318. }
  319.  
  320. .description{
  321. padding:10px;
  322. }
  323.  
  324. .links{
  325. padding:0px 4px 10px 4px;
  326. }
  327.  
  328. .links .sf-heart-2{
  329. font-size:20px;
  330. padding:0px 6px;
  331. }
  332.  
  333. .links a:nth-of-type(1){
  334. color:{color:hearts};
  335. }
  336. .links a:hover:nth-of-type(1){
  337. color:{color:links hover};
  338. }
  339.  
  340. .links a:nth-of-type(2){
  341. color:rgba({RGBcolor:hearts}, 0.8);
  342. }
  343. .links a:hover:nth-of-type(2){
  344. color:rgba({RGBcolor:links hover}, 0.8);
  345. }
  346.  
  347. .links a:nth-of-type(3){
  348. color:rgba({RGBcolor:hearts}, 0.7);
  349. }
  350. .links a:hover:nth-of-type(3){
  351. color:rgba({RGBcolor:links hover}, 0.7);
  352. }
  353.  
  354. .links a:nth-of-type(4){
  355. color:rgba({RGBcolor:hearts}, 0.6);
  356. }
  357. .links a:hover:nth-of-type(4){
  358. color:rgba({RGBcolor:links hover}, 0.6);
  359. }
  360.  
  361. .links a:nth-of-type(5){
  362. color:rgba({RGBcolor:hearts}, 0.5);
  363. }
  364. .links a:hover:nth-of-type(5){
  365. color:rgba({RGBcolor:links hover}, 0.5);
  366. }
  367.  
  368. /* ----------------- postcontainer ----------------- */
  369.  
  370. .postcont{
  371. width:calc({select:post width} + 20px);
  372. padding-top:140px;
  373. }
  374.  
  375. /* ----------------- posts ----------------- */
  376.  
  377. article{
  378. margin:0 auto;
  379. padding:10px;
  380. border-radius:10px;
  381. width:{select:post width};
  382. background-color:#fff;
  383. margin-bottom:70px;
  384. line-height:150%;
  385. background-color:#fff;
  386. }
  387.  
  388. article img{
  389. max-width:100%;
  390. height:auto;
  391. }
  392.  
  393. /* ----------------- post info ----------------- */
  394.  
  395. .postinfo{
  396. position:absolute;
  397. margin-top:-20px;
  398. margin-left:-25px;
  399. z-index:999999999!important;
  400. }
  401.  
  402. .postinfo .sf-heart-2{
  403. font-size:30px;
  404. }
  405.  
  406. .postinfo a{
  407. color:{color:hearts};
  408. }
  409.  
  410. .postinfo a:hover{
  411. color:{color:hearts};
  412. }
  413.  
  414. {block:AskPage}
  415. .postinfo{
  416. display:none;
  417. opacity:0;
  418. }
  419. {/block:AskPage}
  420.  
  421. .loveletter{
  422. width:30px;
  423. height:25px;
  424. position:absolute;
  425. margin-top:-20px;
  426. margin-left:-25px;
  427. z-index:999999999!important;
  428. background-color:#fff;
  429. border-radius:5px;
  430. box-shadow:0 0 3px #ddd;
  431. }
  432.  
  433. .loveletter::before:{
  434. content:'▼';
  435. color:#666;
  436. font-size:14px;
  437. z-index:999;
  438. position:absolute;
  439. display:block;
  440. left:0px;
  441. top:0px;
  442. overflow:hidden;
  443. }
  444.  
  445. .loveletter::after{
  446. content:'\e12a';
  447. font-family:'saturnicons';
  448. color:{color:hearts};
  449. position:absolute;
  450. font-size:14px;
  451. left:8px;
  452. top:5px;
  453. }
  454.  
  455. .loveletter .sf-chevron-down{
  456. font-size:30px;
  457. top:-7px;
  458. position:absolute;
  459. color:#ddd;
  460. }
  461.  
  462. /* ----------------- captions ----------------- */
  463.  
  464. .caprebloghead{
  465. margin-top:5px;
  466. height:22px;
  467. }
  468.  
  469. .rebloghead{
  470. height:22px;
  471. margin-top:5px;
  472. }
  473.  
  474. .cimg{
  475. width:20px;
  476. border-radius:5px;
  477. float:left;
  478. }
  479.  
  480. .user{
  481. margin-left:7px;
  482. padding:2px 5px;
  483. position:absolute;
  484. border-radius:5px;
  485. letter-spacing:0.25px;
  486. font-size:11px;
  487. background:rgba({RGBcolor:background},0.5);
  488. color:{color:links};
  489. }
  490.  
  491. .user:hover{
  492. color:{color:links};
  493. box-shadow:2px 2px {color:links};
  494. }
  495.  
  496. .cap{
  497. margin-top:5px;
  498. margin-bottom:10px;
  499. }
  500.  
  501. .cap:nth-last-of-type(){
  502. margin-bottom:0px;
  503. }
  504.  
  505. /* ----------------- chats ----------------- */
  506.  
  507. .line{
  508. margin:10px 0px;
  509. }
  510.  
  511. .line b{
  512. color:{color:hearts};
  513. padding:1px 3px;
  514. border-radius:5px;
  515. margin-right:5px;
  516. background-color:rgba({RGBcolor:background},0.4);
  517. }
  518.  
  519. /* ----------------- quotes ----------------- */
  520.  
  521. .quote{
  522. text-align:center;
  523. font-size:25px;
  524. line-height:130%;
  525. font-family:'Leckerli One', cursive;
  526. color:{color:hearts};
  527. }
  528.  
  529. /* ----------------- audio ----------------- */
  530.  
  531. .playerwrap{
  532. width:calc({select:post width} - 20px);
  533. height:80px;
  534. padding:10px;
  535. background-color:{color:background};
  536. border-radius:5px;
  537. }
  538.  
  539. .player{
  540. width:30px;
  541. height:30px;
  542. overflow:hidden;
  543. background-color:#f2f2f2;
  544. border:3px solid {color:hearts};
  545. margin-left:22px;
  546. margin-top:22px;
  547. position:absolute;
  548. z-index:1000;
  549. }
  550.  
  551. .playerbg{
  552. height:80px;
  553. width:80px;
  554. float:left;
  555. }
  556.  
  557. .albumart{
  558. position:relative;
  559. z-index:1;
  560. background-color:#fff;
  561. height:80px;
  562. width:80px;
  563. overflow:hidden;
  564. }
  565.  
  566. .overlay{
  567. height:80px;
  568. width:80px;
  569. background-color:rgba({RGBcolor:hearts}, 0.5);
  570. position:absolute;
  571. z-index:999;
  572. }
  573.  
  574. .audioinfo{
  575. position:absolute;
  576. margin-left:90px;
  577. height:80px;
  578. padding:5px;
  579. color:#fff;
  580. }
  581.  
  582. .sttl{
  583. font-size:200%;
  584. padding-bottom:5px;
  585. text-shadow:2px 2px rgba({RGBcolor:hearts}, 0.2);
  586. font-family:'Leckerli One', cursive;
  587. color:{color:hearts};
  588. }
  589.  
  590. .attl{
  591. font-size:115%;
  592. padding-bottom:5px;
  593. line-height:200%;
  594. }
  595.  
  596. /* ----------------- videos ----------------- */
  597.  
  598. .vd{
  599. overflow:hidden;
  600. background-color:#fff;
  601. }
  602.  
  603. .video{
  604. position: relative;
  605. padding-bottom: 56.25%;
  606. padding-top: 25px;
  607. height: 0;
  608. background-color:#fff;
  609. }
  610.  
  611. .video iframe{
  612. position: absolute;
  613. width: 100%;
  614. height: 100%;
  615. overflow:hidden;
  616. top: 0;
  617. left: 0;
  618. }
  619.  
  620. /* ----------------- ask posts ----------------- */
  621.  
  622. #q{
  623. width:calc({select:post width} - 85px);
  624. padding:10px;
  625. background-color:rgba({RGBcolor:background},0.3);
  626. border-radius:5px;
  627. margin-left:65px;
  628. }
  629.  
  630. #q::before{
  631. content:'◀︎';
  632. color:rgba({RGBcolor:background},0.3);
  633. position:absolute;
  634. margin-left:-20px;
  635. font-size:110%;
  636. }
  637.  
  638. #qimg{
  639. position:absolute;
  640. }
  641.  
  642. #qimg img{
  643. border-radius:5px;
  644. max-width:50px;
  645. }
  646.  
  647. .replied{
  648. margin-top:5px;
  649. }
  650.  
  651. #ahead{
  652. color:{color:gradient 1};
  653. font-style:normal;
  654. padding-bottom:10px;
  655. width:100%;
  656. height:18px;
  657. margin-top:10px;
  658. }
  659.  
  660. #ahead a{
  661. margin-left:7px;
  662. padding:2px 5px;
  663. position:absolute;
  664. border-radius:5px;
  665. letter-spacing:0.25px;
  666. font-size:11px;
  667. background:rgba({RGBcolor:background},0.5);
  668. color:{color:links};
  669. }
  670.  
  671. .light #ahead a{
  672. color:#fff;
  673. }
  674.  
  675. .replied{
  676. margin-top:-10px;
  677. }
  678.  
  679. #ahead a:hover{
  680. background-color:{color:gradient 2};
  681. box-shadow:2px 2px {color:gradient 1};
  682. }
  683.  
  684. /* ----------------- tags ----------------- */
  685.  
  686. .below{
  687. width:{select:post width};
  688. margin-top:15px;
  689. }
  690.  
  691. .below .sf{
  692. font-size:10px;
  693. }
  694.  
  695. .bl a{
  696. margin:10px 7px 0 0;
  697. border-radius:5px;
  698. padding:4px 5px;
  699. font-weight:600;
  700. color:{color:hearts};
  701. background:rgba({RGBcolor:background},0.5);
  702. }
  703.  
  704. .bl a:hover{
  705. box-shadow:2px 2px {color:hearts};
  706. }
  707.  
  708. /* ----------------- tags ----------------- */
  709.  
  710. .tags{
  711. font-style:italic;
  712. margin-top:7px;
  713. }
  714.  
  715. .tags a{
  716. color:{color:links};
  717. padding-right:5px;
  718. text-decoration:none;
  719. }
  720.  
  721.  
  722. /* ----------------- permalink page notes ----------------- */
  723.  
  724. .notecont{
  725. width:calc({select:post width} + 20px);
  726. }
  727.  
  728. #note{
  729. margin:0 auto;
  730. padding:10px;
  731. border-radius:10px;
  732. width:{select:post width};
  733. background-color:#fff;
  734. margin-bottom:70px;
  735. line-height:150%;
  736. margin:0 auto;
  737. }
  738.  
  739. .notes li{
  740. line-height:20px;
  741. }
  742. ol.notes, .notes li{width:calc({select:post width} - 10px); list-style:none; margin:0px 0 -1px 5px; padding:5px}
  743. .notes a{
  744. padding:1px 5px;
  745. border-radius:5px;
  746. letter-spacing:0.25px;
  747. font-size:11px;
  748. background:rgba({RGBcolor:background},0.5);
  749. color:{color:links};
  750. }
  751. .notes img, a.avatar_frame{
  752. display:none;
  753. }
  754.  
  755. .notes li::before{
  756. content:'\e12a';
  757. font-family:'saturnicons';
  758. color:{color:hearts};
  759. position:absolute;
  760. font-size:13px;
  761. margin-left:-18px;
  762. }
  763. /* ----------------- pagination ----------------- */
  764.  
  765. #pagi{
  766. width:{select:post width};
  767. padding:10px;
  768. margin:0 auto;
  769. margin-top:50px;
  770. margin-bottom:150px;
  771. overflow:hidden;
  772. text-align:center;
  773. }
  774.  
  775. #pagi a{
  776. padding:5px 10px;
  777. border-radius:5px;
  778. margin:10px;
  779. font-weight:bold;
  780. background-color:{color:hearts};
  781. color:#fff;
  782. }
  783.  
  784. #pagi a:hover{
  785. color:{color:hearts};
  786. background-color:#fff;
  787. }
  788.  
  789. .current_page{
  790. padding:5px 10px;
  791. background-color:#fff;
  792. border-radius:5px;
  793. margin:10px;
  794. font-weight:bold;
  795. color:{color:hearts};
  796. }
  797.  
  798. /* ----------------- funky fonts this theme is able to display ----------------- */
  799.  
  800. @font-face {
  801. font-family: Calluna;
  802. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  803. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3%3F=&v=f685dc881c60c298ea22a73fe505b88a#iefix") format("embedded-opentype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.woff?3=&v=760a50f4d098e59aebaf0f0e58ae2cc8") format("woff"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.ttf?3=&v=5ace789439bff3b27f8d4112725531da") format("truetype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.svg?3=&v=5b95c481dd7411c6e112143d6646bd9b#_.regular") format("svg");
  804. font-weight: 700;
  805. font-style: italic
  806. }
  807.  
  808. @font-face {
  809. font-family: Fairwater;
  810. src: url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
  811. font-weight: 400;
  812. font-style: normal
  813. }
  814. p.npf_quirky{font-family:Fairwater; font-size:20px;}
  815. p.npf_chat{font-family:Courier;}
  816. p.npf_quote{font-family:Calluna;}
  817.  
  818. {CustomCSS}
  819.  
  820. /* ------- Loveletter Updates Tab CSS by baechys.tumblr.com ------- */
  821.  
  822. /* Instructions:
  823. - remove {color:hearts} and insert a hexcode if you're NOT using this updates tab with the theme Momo by baechys.tumblr.com
  824. - you can match options like the font, text-color and font-size to the theme you're currently using!
  825. - editing is allowed but please keep it somewhat close to the version i provided!*/
  826.  
  827. .updates{
  828. position:fixed;
  829. top:10px;
  830. left:10px;
  831. }
  832.  
  833. .udheart{
  834. padding:5px;
  835. font-size:15px;
  836. color:{color:hearts}; /* change color of hearts here */
  837. background-color:#fff;
  838. border-radius:5px;
  839. width:15px;
  840. height:15px;
  841. }
  842.  
  843. .udcont{
  844. width:150px;
  845. padding:7px;
  846. border-radius:5px;
  847. margin-left:-235px;
  848. background-color:#fff;
  849. margin-top:10px;
  850. transition:0.5s ease-in-out;
  851. font-size:11px;
  852. color:{color:body font};
  853. }
  854.  
  855. .udcont:nth-of-type(1){
  856. transition:0.3s ease-in-out;
  857. -webkit-transition:0.3s ease-in-out;
  858. -moz-transition:0.3s ease-in-out;
  859. -o-transition:0.3s ease-in-out;
  860. }
  861.  
  862. .udcont:nth-of-type(2){
  863. transition:0.4s ease-in-out;
  864. -webkit-transition:0.4s ease-in-out;
  865. -moz-transition:0.4s ease-in-out;
  866. -o-transition:0.4s ease-in-out;
  867. }
  868.  
  869. .udcont:nth-of-type(3){
  870. transition:0.5s ease-in-out;
  871. -webkit-transition:0.5s ease-in-out;
  872. -moz-transition:0.5s ease-in-out;
  873. -o-transition:0.5s ease-in-out;
  874. }
  875.  
  876. .udcont p{
  877. margin-top:5px;
  878. margin-bottom:10px;
  879. }
  880.  
  881. .udcont p:last-of-type(){
  882. margin-bottom:0px;
  883. }
  884.  
  885. .udcont li::before{
  886. margin-left:-18px;
  887. font-size:100%;
  888. margin-top:3.3px;
  889. }
  890.  
  891. .udheart:hover .udcont{
  892. margin-left:-5px;
  893. }
  894.  
  895. .udhead .sf{
  896. font-size:90%;
  897. }
  898.  
  899. .udhead{
  900. font-weight:bold;
  901. color:{color:hearts};
  902. background-color:{color:background};
  903. border-radius:5px;
  904. padding:2px 3.5px;
  905. line-height:130%;
  906. }
  907.  
  908. .udheart:hover .udc{
  909. margin-left:-5px;
  910. }
  911.  
  912. /* dont touch this! */
  913.  
  914. .udc{
  915. width:150px;
  916. margin-left:-235px;
  917. margin-top:10px;
  918. transition:0.5s ease-in-out;
  919. font-size:11px;
  920. text-align:center;
  921. }
  922.  
  923. .udc a{
  924. color:#fff;
  925. background-color:{color:hearts};
  926. font-weight:bold;
  927. padding:2px 5px;
  928. border-radius:5px;
  929. font-size:9px;
  930. letter-spacing:0.25px;
  931. }
  932.  
  933.  
  934. </style>
  935. </head>
  936. <body>
  937.  
  938. <!------ Loveletter Updates Tab HTML by baechys.tumblr.com ------->
  939.  
  940. {block:ifupdatestab}
  941. <div class="updates">
  942. <div class="udheart"><span class="sf sf-heart-2"></span>
  943. <div class="udcont">
  944.  
  945. <div class="udhead"><span class="sf sf-heart-2"></span> Stats:</div>
  946. <p>
  947. Online counter here <br>
  948. Visit counter here
  949. </p>
  950. </div><!-- updates container end -->
  951.  
  952. <div class="udcont">
  953. <div class="udhead"><span class="sf sf-heart-2"></span> Currently:</div>
  954. <ul>
  955. <li> Suffering through school </li>
  956. <li> Crying about red velvet </li>
  957. </ul>
  958. </div><!-- updates container end -->
  959.  
  960. <div class="udcont">
  961. <div class="udhead"><span class="sf sf-heart-2"></span> Socials:</div>
  962. <p>
  963. Insert your social media here!
  964. </p>
  965. </div><!-- updates container end -->
  966.  
  967. </div><!-- updates tab end -->
  968. </div><!-- update tab container end -->
  969. {/block:ifupdatestab}
  970.  
  971. <!------ Loveletter Updates Tab HTML by baechys.tumblr.com ------->
  972.  
  973. <div class="wrapper">
  974. <aside>
  975. {block:ifsidebarimage} <div class="avi"><img src="{image:sidebar}"></div> {/block:ifsidebarimage}
  976. <div class="description">{description}</div>
  977.  
  978. <div class="links">
  979. <a href="{text:link 1}" title="{text:link 1 title}"><span class="sf sf-heart-2"></span></a>
  980. <a href="{text:link 2}" title="{text:link 2 title}"><span class="sf sf-heart-2"></span></a>
  981. <a href="{text:link 3}" title="{text:link 3 title}"><span class="sf sf-heart-2"></span></a>
  982. <a href="{text:link 4}" title="{text:link 4 title}"><span class="sf sf-heart-2"></span></a>
  983. <a href="{text:link 5}" title="{text:link 5 title}"><span class="sf sf-heart-2"></span></a>
  984. </div>
  985. </aside>
  986.  
  987. <div class="postcont">
  988. {block:Posts}
  989. <article>
  990. {block:AskPage}
  991. <div class="loveletter"><span class="sf sf-chevron-down"></span></div>
  992. <div class="postinfo" style="display:none"></div>
  993. {/block:AskPage}
  994.  
  995. <!------------------ text ----------------->
  996. {block:Text}
  997. <div class="postinfo">
  998. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  999. </div>
  1000. {block:Title}<h1>{Title}</h1>{/block:Title}
  1001. {block:Body}
  1002. {block:NotReblog}{Body}{/block:NotReblog}
  1003. {block:RebloggedFrom}{block:Reblogs}
  1004. <div class="cap">
  1005. <div class="rebloghead">
  1006. {block:HasAvatar}
  1007. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1008. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1009. {/block:HasAvatar}
  1010. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1011. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink} </div>
  1012. {Body}</div>
  1013. {/block:Reblogs}{/block:RebloggedFrom}
  1014. {/block:Body}
  1015. {/block:Text}
  1016.  
  1017. <!------------------ photo ----------------->
  1018. {block:Photo}
  1019. <div class="postinfo">
  1020. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  1021. </div>
  1022. <img class="image" src="{PhotoURL-500}" alt="{PhotoAlt}" />
  1023. {block:Caption}
  1024. {block:NotReblog}{Caption}{/block:NotReblog}
  1025. {block:RebloggedFrom}{block:Reblogs}
  1026. <div class="cap">
  1027. <div class="caprebloghead">
  1028. {block:HasAvatar}
  1029. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1030. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1031. {/block:HasAvatar}
  1032. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1033. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1034. </div>
  1035. {Body}</div><!-- cap -->
  1036. {/block:Reblogs}{/block:RebloggedFrom}
  1037. {/block:Caption}
  1038. {/block:Photo}
  1039.  
  1040. <!------------------ photoset ----------------->
  1041. {block:Photoset}
  1042. <div class="postinfo">
  1043. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  1044. </div>
  1045. <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>
  1046. {block:Caption}
  1047. {block:NotReblog}{Caption}{/block:NotReblog}
  1048. {block:RebloggedFrom}{block:Reblogs}
  1049. <div class="cap">
  1050. <div class="caprebloghead">
  1051. {block:HasAvatar}
  1052. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1053. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1054. {/block:HasAvatar}
  1055. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1056. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1057. </div>
  1058. {Body}</div><!-- cap -->
  1059. {/block:Reblogs}{/block:RebloggedFrom}
  1060. {/block:Caption}
  1061. {/block:Photoset}
  1062.  
  1063. <!------------------ quote----------------->
  1064. {block:Quote}
  1065. <div class="postinfo">
  1066. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  1067. </div>
  1068. <div class="quote">{Quote}</div> <br>
  1069. {block:Source}<div align="center">- {Source}</div>{/block:Source}
  1070. {/block:Quote}
  1071.  
  1072. <!------------------ link ----------------->
  1073. {block:Link}
  1074. <div class="postinfo">
  1075. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  1076. </div>
  1077. <div class="link">
  1078. <h1><a href="{URL}" target="_blank">{Name} > </a></h1>
  1079. {block:Excerpt}<div class="linkdesc">{Excerpt}</div>{/block:Excerpt}
  1080. </div>
  1081. {block:Description}
  1082. {block:NotReblog}{Description}{/block:NotReblog}
  1083. {block:RebloggedFrom}{block:Reblogs}
  1084. <div class="cap">
  1085. <div class="caprebloghead">
  1086. {block:HasAvatar}
  1087. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1088. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1089. {/block:HasAvatar}
  1090. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1091. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1092. </div>
  1093. {Description}</div> <!-- cap -->
  1094. {/block:Reblogs}{/block:RebloggedFrom}
  1095. {/block:Description}
  1096. {/block:Link}
  1097.  
  1098. <!------------------ chat ----------------->
  1099. {block:Chat}
  1100. <div class="postinfo">
  1101. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  1102. </div>
  1103. {block:Title}<h2>{Title}</h2>{/block:Title}
  1104. <div class="chatcont">
  1105. {block:Lines}
  1106. {block:Label}<div class="line"><b>{Label}</b>{/block:Label} {Line}<br>
  1107. </div>{/block:Lines}
  1108. </div>
  1109. {/block:Chat}
  1110.  
  1111. <!------------------ audio ----------------->
  1112. {block:Audio}
  1113. <div class="postinfo">
  1114. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  1115. </div>
  1116. <div class="playerwrap">
  1117. <div class="playerbg">
  1118. <div class="player">{AudioPlayer}</div><!-- audioplayer -->
  1119. <div class="overlay"></div>
  1120. <div class="albumart" style="background-color:#fff;">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1121. </div><!-- playerbg -->
  1122. <div class="audioinfo">{block:TrackName}<div class="sttl">{TrackName}</div>{/block:TrackName}
  1123. {block:Artist}<div class="attl">{Artist}{/block:Artist}
  1124. {block:PlayCount}<br> {PlayCountWithLabel}</div>{/block:PlayCount}
  1125. </div><!-- audioinfo --></div><!-- playerwrap -->
  1126. {block:Caption}
  1127. {block:NotReblog}{Caption}{/block:NotReblog}
  1128. {block:RebloggedFrom}{block:Reblogs}
  1129. <div class="cap">
  1130. <div class="caprebloghead">
  1131. {block:HasAvatar}
  1132. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1133. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1134. {/block:HasAvatar}
  1135. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1136. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1137. </div>
  1138. {Body}</div><!-- cap -->
  1139. {/block:Reblogs}{/block:RebloggedFrom}
  1140. {/block:Caption}
  1141. {/block:Audio}
  1142.  
  1143. <!------------------ video ----------------->
  1144. {block:Video}
  1145. <div class="postinfo">
  1146. <a href="{permalink}" title="{TimeAgo}"><span class="sf sf-heart-2"></span></a>
  1147. </div>
  1148. <div class="vd"><div class="video">{Video-500}</div></div>
  1149. {block:Caption}
  1150. {block:NotReblog}{Caption}{/block:NotReblog}
  1151. {block:RebloggedFrom}{block:Reblogs}
  1152. <div class="cap">
  1153. <div class="caprebloghead">
  1154. {block:HasAvatar}
  1155. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1156. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1157. {/block:HasAvatar}
  1158. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1159. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1160. </div>
  1161. {Body}</div><!-- cap -->
  1162. {/block:Reblogs}{/block:RebloggedFrom}
  1163. {/block:Caption}
  1164. {/block:Video}
  1165.  
  1166. <!------------------ ask ----------------->
  1167. {block:Answer}
  1168. <a href="{permalink}" title="{timeago}"><div class="loveletter"><span class="sf sf-chevron-down"></span></div></a>
  1169. <div id="qimg">
  1170. <img src="{AskerPortraitURL-64}">
  1171. </div>
  1172. <div id="q">
  1173. <b>{Asker}</b> asked: <br> {Question}
  1174. </div>
  1175.  
  1176. {block:NotReblog}
  1177. <div id="answer">
  1178. {Answer}
  1179. </div>
  1180. {/block:NotReblog}
  1181.  
  1182. {block:Answerer}
  1183. <div id="answer">
  1184. <div id="ahead"><img class="cimg" src="{AnswererPortraitURL-64}">
  1185. {answerer}</div>
  1186. <div class="replied">{Answer}</div>
  1187. </div>
  1188. {/block:Answerer}
  1189.  
  1190. {block:RebloggedFrom}
  1191. {block:Reblogs}
  1192. {block:HasAvatar}
  1193. {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1194. {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1195. {/block:HasAvatar}
  1196. {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1197. {block:HasNoPermalink}<span class="user">{Username}</span>{/block:HasNoPermalink}
  1198. {Body}
  1199. {/block:Reblogs}
  1200. {/block:RebloggedFrom}
  1201. {/block:Answer}
  1202.  
  1203. {block:IndexPage}
  1204. <div class="below">
  1205. <div class="bl">
  1206. {block:Date}
  1207. <a href="{permalink}" title="{TimeAgo}" style="font-style:normal"><span class="sf sf-clock-3"></span> {ShortMonth} {DayOfMonthWithZero}</a>
  1208. {/block:date}
  1209.  
  1210. {block:NoteCount}<a href="{Permalink}"> <span class="sf sf-heart-2"></span> {NoteCount} Notes</a>{/block:NoteCount}
  1211. </div>
  1212. </div><!-- post buttons -->
  1213. {block:HasTags}
  1214. <div class="tags">
  1215. {block:Tags}<a href="{TagURL}">#{tag}</a> {/block:Tags}
  1216. </div>
  1217. {/block:HasTags}
  1218. {/block:indexpage}
  1219.  
  1220. {block:PermalinkPage}
  1221. {block:Date}
  1222. <b>Posted:</b> {TimeAgo} on {Month} {DayOfMonthWithZero}, {Year} at {24Hour}:{Minutes}
  1223. {/block:Date} <br>
  1224. {block:NoteCount}
  1225. <b>Notes:</b> {NoteCount}<br>
  1226. {/block:NoteCount}
  1227. {block:HasTags}
  1228. <b>Tags:</b>
  1229. {block:Tags}
  1230. <a href="{TagURL}">#{tag}</a>
  1231. {/block:Tags}<br>
  1232. {/block:HasTags}
  1233. {block:RebloggedFrom}
  1234. <br><b>Via:</b> <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a><br>
  1235. {block:ContentSource}
  1236. <b>Source:</b> <a href="{SourceURL}">{SourceTitle}</a>
  1237. {/block:ContentSource}
  1238. {/block:RebloggedFrom}
  1239. </div>
  1240. {/block:PermalinkPage}
  1241. </article>
  1242.  
  1243.  
  1244. {block:PermalinkPage}
  1245. {block:PostNotes}
  1246. {block:NoteCount}
  1247. <div class="notecont">
  1248. <div id="note">
  1249. {PostNotes}
  1250. </div>
  1251. </div>
  1252. {/block:NoteCount}
  1253. {/block:PostNotes}
  1254. {/block:permalinkpage}
  1255. {/block:Posts}
  1256.  
  1257. {block:indexpage}
  1258. {block:Pagination}
  1259. <div id="pagi">
  1260. {block:PreviousPage}
  1261. <a href="{PreviousPage}"><</a>
  1262. {/block:PreviousPage}
  1263.  
  1264. {block:JumpPagination length="3"}
  1265. {block:CurrentPage}
  1266. <span class="current_page">{PageNumber}</span>
  1267. {/block:CurrentPage}
  1268.  
  1269. {block:JumpPage}
  1270. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1271. {/block:JumpPage}
  1272. {/block:JumpPagination}
  1273.  
  1274. {block:NextPage}
  1275. <a href="{NextPage}">></a>
  1276. {/block:NextPage}
  1277.  
  1278. </div>
  1279. {/block:Pagination}
  1280. {/block:indexpage}
  1281. </div><!-- postcont -->
  1282. </div><!-- wrapper -->
  1283.  
  1284. <div id="c">
  1285. <a href="http://baechys.tumblr.com" title="Made with ♡ by Caroline">BCHYS</a>
  1286. </div>
  1287.  
  1288. </body>
  1289. </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!