API tools faq
paste
Advertisement
Katting

Paw Prints Theme

Katting
Dec 15th, 2016
651
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. <!-----------------------------------------------------------------------
  7.  
  8. ***PLEASE READ THIS AS IT CONTAINS IMPORTANT INFO***
  9.  
  10. Feline Themes Presents: Paw Prints
  11.  
  12. You may make as many cosmetic changes as you'd like to this theme such as changing fonts, colors, and simple stuff like that. You may also change or remove the corner images if you want. Just please don't make this theme look like an entirely new theme, okay? :)
  13.  
  14. Do not use as a base code! And do not reupload this theme as your own, no matter how much you edit it, and keep both credit links intact.
  15.  
  16. You may look at my coding to see how I did certain things, but please don't copy and paste and of the CSS/HTML.
  17.  
  18. ***I did not draw/create the images I used for the corner images***
  19.  
  20. I know there's only two blank spaces for links, but you can always change the ask link if you want. I recommend getting some popup links though if you need more!
  21.  
  22. *FONTS USED*
  23.  
  24. All fonts are from Google Fonts or dafont.com, I did not make any of them!
  25.  
  26. -Chasing Embers - 'chasing_embers_demo_versionRg' [Title Font from dafont.com]
  27. -Poiret One [Headers, Quotes, Link Posts, Ect.]
  28. -Raleway [Main body]
  29.  
  30.  
  31.  
  32. *OTHER INFO*
  33.  
  34. -I have tested the following post types: Text, Photos/Photosets, Quotes, Asks, Videos, Chats. I didn't really touch the audio posts as I don't see them used often.. Honestly I didn't even code for them, as I see them so rarely.
  35.  
  36. -Popup script not included to keep out unneeded coding. If you want popups just add in the code. :)
  37.  
  38.  
  39. Enjoy and let me know if you use it so I can see! :)
  40.  
  41.  
  42. © Feline Themes 2016
  43.  
  44. ------------------------------------------------------------------------>
  45.  
  46. <meta name="color:Color 1" content="#e5b9a9"/>
  47. <meta name="color:Color 2" content="#52483d"/>
  48. <meta name="color:Color 3" content="#b6b0a6"/>
  49.  
  50. <meta name="color:Font Color" content="#000000"/>
  51. <meta name="text:Font Size" content="11px"/>
  52.  
  53. <meta name="text:Link 2 URL" content="/linktwo"/>
  54. <meta name="text:Link 2" content="Link Two"/>
  55. <meta name="text:Link 3 URL" content="/linkthree"/>
  56. <meta name="text:Link 3" content="Link Three"/>
  57.  
  58. <!------------ start of styled tooltips script ------------->
  59. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  60.  
  61. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  62.  
  63. <script>
  64. (function($){
  65. $(document).ready(function(){
  66. $("a[title]").style_my_tooltips({
  67. tip_follows_cursor:true,
  68. tip_delay_time:90,
  69. tip_fade_speed:600,
  70. attribute:"title"
  71. });
  72. });
  73. })(jQuery);
  74. </script>
  75. <!-------------- end of styled tooltip scripts -------------->
  76.  
  77. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!--font awesome icons-->
  78.  
  79. <link href="https://fonts.googleapis.com/css?family=Poiret+One|Raleway" rel="stylesheet">
  80.  
  81.  
  82. <link href="http://static.tumblr.com/dq6g0mp/MIzoe7f11/tropicalfont.css" rel="stylesheet">
  83.  
  84. <style type="text/css">
  85.  
  86. /*----------------------------------------------------------------------*/
  87.  
  88. #sidebar{
  89. position:fixed;
  90. z-index:10;
  91. top:70px;
  92. left:5%;
  93. padding-top:80px;
  94. padding-left:80px;
  95. text-align:center;
  96. }
  97.  
  98. #paw{
  99. height:200px;
  100. width:200px;
  101. transform:rotate(-30deg);
  102. }
  103.  
  104. #toeone, #toetwo, #toethree, #toefour{
  105. position:absolute;
  106. width:50px;
  107. height:50px;
  108. padding:10px;
  109. transform:rotate(30deg);
  110. border-radius:90px;
  111. background-color:{color:Color 1};
  112. display: flex;
  113. align-items: center;
  114. justify-content: center;
  115. font-size:11px;
  116. color:#ffffff;
  117. -webkit-transition: all 1s ease;
  118. -moz-transition: all 1s ease;
  119. -o-transition: all 1s ease;
  120. transition: all 1s ease;
  121. }
  122.  
  123. #toeone{
  124. top:-15px;
  125. left:-55px;
  126. }
  127.  
  128. #toeone:hover{
  129. background-color:{color:Color 2};
  130. }
  131.  
  132. #toetwo{
  133. top:-70px;
  134. left:20px;
  135. }
  136.  
  137. #toetwo:hover{
  138. background-color:{color:Color 2};
  139. }
  140.  
  141. #toethree{
  142. top:-70px;
  143. right:20px;
  144. }
  145.  
  146. #toethree:hover{
  147. background-color:{color:Color 2};
  148. }
  149.  
  150. #toefour{
  151. top:-15px;
  152. right:-55px;
  153. }
  154.  
  155. #toefour:hover{
  156. background-color:{color:Color 2};
  157. }
  158.  
  159. #pawpad{
  160. position:relative;
  161. width:170px;
  162. height:170px;
  163. transform:rotate(30deg);
  164. padding:15px;
  165. overflow:hidden;
  166. border-radius:300px;
  167. background-color:{color:Color 1};
  168. }
  169.  
  170. #pawpad img{
  171. width:170px;
  172. border-radius:300px;
  173. }
  174.  
  175. #pawoverlay{
  176. position:absolute;
  177. top:15px;
  178. bottom:15px;
  179. left:15px;
  180. right:15px;
  181. padding:10px;
  182. opacity:0;
  183. border-radius:300px;
  184. background-color:{color:Color 3};
  185. -webkit-transition: all 1s ease;
  186. -moz-transition: all 1s ease;
  187. -o-transition: all 1s ease;
  188. transition: all 1s ease;
  189. }
  190.  
  191. #sidebar:hover #pawoverlay{
  192. opacity:0.8;
  193. }
  194.  
  195. .pawoverlay{
  196. position:absolute;
  197. top:50%;
  198. left:50%;
  199. transform:translate(-50%,-50%);
  200. width:120px;
  201. height:120px;
  202. padding:20px;
  203. border-radius:300px;
  204. border:1px solid #ffffff;
  205. display: flex;
  206. align-items: center;
  207. justify-content: center;
  208. font-size:11px;
  209. color:#ffffff;
  210. }
  211.  
  212. #blogtitle{
  213. position:relative;
  214. z-index:11;
  215. margin-top:-35px;
  216. margin-left:-40px;
  217. width:250px;
  218. font-family:'chasing_embers_demo_versionRg';
  219. font-size:80px;
  220. color:{color:Color 2};
  221. text-shadow:2px 2px 2px {color:Color 3};
  222. }
  223.  
  224. /*----------------------------------------------------------------------*/
  225.  
  226. #container{
  227. position:absolute;
  228. top:20px;
  229. left:30%;
  230. width:650px;
  231. }
  232.  
  233. .entry{
  234. position:relative;
  235. float:left;
  236. {block:IndexPage}
  237. width:230px;
  238. {/block:IndexPage}
  239. {block:PermalinkPage}
  240. width:500px;
  241. {/block:PermalinkPage}
  242. margin:15px;
  243. padding:15px;
  244. background-color:{color:Color 3};
  245. }
  246.  
  247.  
  248. /*--Makes text posts look a little nicer--*/
  249. #textpostbody{
  250. padding:10px;
  251. background-color:#ffffff;
  252. }
  253. /*--Makes text posts look a little nicer--*/
  254.  
  255. /*--Post permalinks--*/
  256.  
  257. #posteddate{
  258. padding:7px;
  259. text-align:center;
  260. background-color:{color:Color 1};
  261. font-size:10px;
  262. color:#ffffff;
  263. }
  264.  
  265. #textpermalinks{
  266. padding:5px;
  267. background-color:{color:Color 2};
  268. text-align:center;
  269. color:#ffffff;
  270. }
  271.  
  272. #textpermalinks a{
  273. margin-left:5px;
  274. margin-right:5px;
  275. color:#ffffff;
  276. }
  277. /*--Post permalinks--*/
  278.  
  279. /*--Permalinks on photo posts--*/
  280.  
  281. #photopermalinks{
  282. {block:PermalinkPage}
  283. display:none;
  284. {/block:PermalinkPage}
  285. position:absolute;
  286. z-index:3;
  287. width:170px;
  288. top:50%;
  289. left:50%;
  290. transform:translate(-50%,-50%);
  291. opacity:0;
  292. text-align:center;
  293. -webkit-transition: all 1s ease;
  294. -moz-transition: all 1s ease;
  295. -o-transition: all 1s ease;
  296. transition: all 1s ease;
  297. }
  298.  
  299. .entry:hover #photopermalinks{
  300. opacity:1;
  301. }
  302.  
  303. .photopermalinks{
  304. margin:3px;
  305. padding:10px;
  306. background-color:{color:Color 1};
  307. font-family:'Poiret One';
  308. font-size:13px;
  309. color:#ffffff;
  310. -webkit-transition: all 1s ease;
  311. -moz-transition: all 1s ease;
  312. -o-transition: all 1s ease;
  313. transition: all 1s ease;
  314. }
  315.  
  316. .photopermalinks:hover{
  317. background-color:{color:Color 3};
  318. color:#ffffff;
  319. }
  320.  
  321. /*--Permalinks on photo posts--*/
  322.  
  323. /*--For hover effect on photo posts--*/
  324.  
  325. #photoposts{
  326. position:relative;
  327. overflow:hidden;
  328. }
  329.  
  330. #photoposts img{
  331. -webkit-filter: grayscale(20%); /* Safari 6.0 - 9.0 */
  332. filter: grayscale(20%);
  333. -webkit-transition: all 1s ease;
  334. -moz-transition: all 1s ease;
  335. -o-transition: all 1s ease;
  336. transition: all 1s ease;
  337. }
  338.  
  339. .entry:hover #photoposts img{
  340. -webkit-filter: grayscale(100%) blur(3px); /* Safari 6.0 - 9.0 */
  341. filter: grayscale(100%) blur(3px);
  342. -moz-transform: scale(1.4);
  343. -webkit-transform: scale(1.4);
  344. transform: scale(1.4);
  345. }
  346.  
  347. .photohovereffect{
  348. position:absolute;
  349. z-index:2;
  350. top:0px;
  351. bottom:0px;
  352. left:0px;
  353. right:0px;
  354. opacity:0;
  355. background-color:{color:Color 2};
  356. -webkit-transition: all 1s ease;
  357. -moz-transition: all 1s ease;
  358. -o-transition: all 1s ease;
  359. transition: all 1s ease;
  360. }
  361.  
  362. .entry:hover .photohovereffect{
  363. opacity:0.9;
  364. }
  365.  
  366. .entry:hover .photohovereffect{
  367. opacity:0.9;
  368. -webkit-transition-delay: 0s; /* Safari */
  369. transition-delay: 0s;
  370. }
  371.  
  372. .phototop, .photoleft, .photobottom, .photoright{
  373. position:absolute;
  374. z-index:3;
  375. background-color:#ffffff;
  376. -webkit-transition: all 1s ease;
  377. -moz-transition: all 1s ease;
  378. -o-transition: all 1s ease;
  379. transition: all 1s ease;
  380. }
  381.  
  382. .phototop{
  383. top:15px;
  384. left:15px;
  385. width:0px;
  386. height:1px;
  387. }
  388.  
  389. .photoleft{
  390. top:15px;
  391. left:15px;
  392. width:1px;
  393. height:0px;
  394. }
  395.  
  396. .photobottom{
  397. bottom:15px;
  398. right:15px;
  399. width:0px;
  400. height:1px;
  401. }
  402.  
  403. .photoright{
  404. bottom:15px;
  405. right:15px;
  406. width:1px;
  407. height:0px;
  408. }
  409.  
  410. .entry:hover .phototop{
  411. width:140px;
  412. }
  413.  
  414. .entry:hover .photobottom{
  415. width:140px;
  416. }
  417.  
  418. .entry:hover .photoleft{
  419. height:140px;
  420. }
  421.  
  422. .entry:hover .photoright{
  423. height:140px;
  424. }
  425.  
  426. /*--For hover effects on photo posts--*/
  427.  
  428. /*--For quote posts--*/
  429.  
  430. blockquote{
  431. margin:0px;
  432. text-align:left;
  433. font-family:'Poiret One';
  434. font-size:25px;
  435. }
  436.  
  437. #source{
  438. margin-top:5px;
  439. padding:5px;
  440. text-align:right;
  441. font-size:8px;
  442. }
  443.  
  444. /*--For quote posts--*/
  445.  
  446. /*--For the link in link posts--*/
  447.  
  448. #link{
  449. padding:10px;
  450. background-color:{color:Color 2};
  451. text-align:left;
  452. font-family:'Poiret One';
  453. font-size:25px;
  454. color:#ffffff;
  455. -webkit-transition: all 1s ease;
  456. -moz-transition: all 1s ease;
  457. -o-transition: all 1s ease;
  458. transition: all 1s ease;
  459. }
  460.  
  461. #link:hover{
  462. background-color:#ffffff;
  463. color:{color:Color 2};
  464. }
  465.  
  466. #link i{
  467. margin-right:10px;
  468. }
  469.  
  470. /*--For the link in link posts--*/
  471.  
  472. /*--For the lines of chat posts--*/
  473.  
  474. .odd{
  475. padding-top:5px;
  476. padding-bottom:5px;
  477. padding-left:15px;
  478. padding-right:15px;
  479. background-color:#ffffff;
  480. }
  481.  
  482. .even{
  483. padding-top:5px;
  484. padding-bottom:5px;
  485. padding-left:15px;
  486. padding-right:15px;
  487. background-color:{color:Color 2};
  488. color:#ffffff;
  489. }
  490.  
  491. /*--For the lines of chat posts--*/
  492.  
  493. /*--The question part of answer posts--*/
  494.  
  495. .question{
  496. margin-bottom:5px;
  497. padding:5px;
  498. border:3px double {color:Color 3};
  499. background-color:{color:Color 2};
  500. text-align:left;
  501. color:#ffffff;
  502. }
  503.  
  504. .theasker{
  505. font-size:11px;
  506. }
  507.  
  508. .theasker img{
  509. width:55px;
  510. height:55px;
  511. border-radius:10px;
  512. border:4px solid {color:Color 1};
  513. margin-right:20px;
  514. }
  515.  
  516. .theasker a{
  517. color:{color:Color 1};
  518. }
  519.  
  520. .theasker a:hover{
  521. color:{color:Color 3};
  522. }
  523.  
  524. /*--The question part of answer posts--*/
  525.  
  526. /*--The answer part of answer posts--*/
  527.  
  528. .replies{
  529. margin-bottom:5px;
  530. padding:5px 10px 5px 10px;
  531. border:3px double {color:Color 3};
  532. background-color:#ffffff;
  533. }
  534.  
  535. /*--The answer part of answer posts--*/
  536.  
  537. /*--Permalink page--*/
  538.  
  539. .caption{
  540. margin-top:10px;
  541. padding:10px;
  542. background-color:#ffffff;
  543. max-height:300px;
  544. overflow-y:auto;
  545. }
  546.  
  547. ol.notes{
  548. height:300px;
  549. padding:5px;
  550. overflow-y:auto;
  551. list-style-type:none;
  552. background-color:#ffffff;
  553. }
  554.  
  555. ol.notes img.avatar {
  556. margin-right:5px;
  557. width:15px;
  558. height:15px;
  559. border-radius:90px;
  560. }
  561.  
  562. /*--Permalink Page--*/
  563.  
  564. .tumblr_audio_player {
  565. {block:IndexPage}
  566. width: 230px;
  567. {/block:IndexPage}
  568. {block:PermalinkPage}
  569. width:500px;
  570. {/block:PermalinkPage}
  571. height: 100px;
  572. overflow: hidden;
  573. position: relative;
  574. z-index: 1000;
  575. }
  576.  
  577. /*makes images in texts posts stay in the box*/
  578. iframe, img, embed, object, video {
  579. max-width: 100%;
  580. }
  581.  
  582. img {
  583. vertical-align:middle;
  584. height: auto;
  585. width: auto;
  586. }
  587.  
  588. /*----------------------------------------------------------------------*/
  589.  
  590. #top, #bottom, #left, #right, #top1, #left1, #bottom1, #right1, #top2, #bottom2, #left2, #right2, #tlcorner, #trcorner, #blcorner, #brcorner{
  591. z-index:1000;
  592. }
  593.  
  594. #top, #bottom, #left, #right{
  595. position:fixed;
  596. background-color:#ffffff;
  597. }
  598.  
  599. #top, #bottom{
  600. left:0px;
  601. right:0px;
  602. height:10px;
  603. }
  604.  
  605. #top{
  606. top:0px;
  607. }
  608.  
  609. #bottom{
  610. bottom:0px;
  611. }
  612.  
  613. #left, #right{
  614. top:0px;
  615. bottom:0px;
  616. width:10px;
  617. }
  618.  
  619. #left{
  620. left:0px;
  621. }
  622.  
  623. #right{
  624. right:0px;
  625. }
  626.  
  627. #top1, #left1, #bottom1, #right1{
  628. position:fixed;
  629. background-color:{color:Color 3};
  630. }
  631.  
  632. #top1, #bottom1{
  633. left:0px;
  634. right:0px;
  635. height:5px;
  636. }
  637.  
  638. #top1{
  639. top:0px;
  640. }
  641.  
  642. #bottom1{
  643. bottom:0px;
  644. }
  645.  
  646. #left1, #right1{
  647. top:0px;
  648. bottom:0px;
  649. width:5px;
  650. }
  651.  
  652. #left1{
  653. left:0px;
  654. }
  655.  
  656. #right1{
  657. right:0px;
  658. }
  659.  
  660. #top2, #bottom2, #left2, #right2{
  661. position:fixed;
  662. background-color:{color:Color 2};
  663. }
  664.  
  665. #top2, #bottom2{
  666. right:115px;
  667. left:115px;
  668. height:1px;
  669. }
  670.  
  671. #top2{
  672. top:10px;
  673. }
  674.  
  675. #bottom2{
  676. bottom:10px;
  677. }
  678.  
  679. #left2, #right2{
  680. top:115px;
  681. bottom:115px;
  682. width:1px;
  683. }
  684.  
  685. #left2{
  686. left:10px;
  687. }
  688.  
  689. #right2{
  690. right:10px;
  691. }
  692.  
  693. #tlcorner, #trcorner, #blcorner, #brcorner{
  694. position:fixed;
  695. width:150px;
  696. height:150px;
  697. transform:rotate(45deg);
  698. background-color:{color:Color 3};
  699. box-shadow:0 0 5px #000000;
  700. }
  701.  
  702. #tlcorner,#trcorner{
  703. top:-75px;
  704. }
  705.  
  706. #tlcorner{
  707. left:-75px;
  708. }
  709.  
  710. #trcorner{
  711. right:-75px;
  712. }
  713.  
  714. #blcorner, #brcorner{
  715. bottom:-75px;
  716. }
  717.  
  718. #blcorner{
  719. left:-75px;
  720. }
  721.  
  722. #brcorner{
  723. right:-75px;
  724. }
  725.  
  726.  
  727.  
  728.  
  729. #printstc{
  730. position:fixed;
  731. top:-20px;
  732. right:-55px;
  733. height:500px;
  734. opacity:0.3;
  735. }
  736.  
  737. #printstc img{
  738. height::500px;
  739. -moz-transform: scaleX(-1);
  740. -o-transform: scaleX(-1);
  741. -webkit-transform: scaleX(-1);
  742. transform: scaleX(-1);
  743. filter: FlipH;
  744. -ms-filter: "FlipH";
  745. }
  746.  
  747. #puppyandkitty{
  748. position:fixed;
  749. z-index:-1;
  750. bottom:3px;
  751. right:-20px;
  752. width:350px;
  753. }
  754.  
  755. #puppyandkitty img{
  756. width:350px;
  757. }
  758.  
  759. #puppy{
  760. position:fixed;
  761. z-index:-1;
  762. bottom:-25px;
  763. left:-10px;
  764. width:250px;
  765. }
  766.  
  767. #puppy img{
  768. width:250px;
  769. }
  770.  
  771. /*----------------------------------------------------------------------*/
  772.  
  773. #s-m-t-tooltip {
  774. max-width:150px;
  775. background-color:{color:Color 1};
  776. border-radius:90px;
  777. font-family:'Poiret One';
  778. font-size:11px;
  779. color:#ffffff;
  780. letter-spacing:0px;
  781. padding:4px;
  782. margin:15px 0px 0px 10px;
  783. z-index:99999999999999999999999999999999999;
  784. }
  785.  
  786. body{
  787. text-align:justify;
  788. background-color:#ffffff;
  789. font-family: 'Raleway', sans-serif;
  790. font-size:{text:Font Size};
  791. color:{color:Font Color};
  792. }
  793.  
  794. h1{
  795. margin-top:0px;
  796. margin-bottom:0px;
  797. padding:3px;
  798. text-align:center;
  799. background-color:{color:Color 1};
  800. font-family:'Poiret One';
  801. font-size:30px;
  802. color:#ffffff;
  803. }
  804.  
  805. h2{
  806. margin-top:5px;
  807. margin-bottom:5px;
  808. text-align:center;
  809. text-align:center;
  810. font-family:'Poiret One';
  811. font-size:20px;
  812. }
  813.  
  814. ul{
  815. font-family: 'Raleway', sans-serif;
  816. font-size:{text:Font Size};
  817. }
  818.  
  819. p{
  820. text-align:justify;
  821. font-family: 'Raleway', sans-serif;
  822. font-size:{text:Font Size};
  823. }
  824.  
  825. a{
  826. text-decoration:none;
  827. color:{color:Color 1};
  828. webkit-transition: all 1s ease;
  829. -moz-transition: all 1s ease;
  830. -o-transition: all 1s ease;
  831. transition:all 1s ease; /*smooth transitions*/
  832. }
  833.  
  834. a:hover{
  835. color:{color:Color 2};
  836. }
  837.  
  838. /*--Change the color of the highlights--*/
  839. ::-moz-selection { /* Code for Firefox */
  840. background:{color:Color 1};
  841. color:#ffffff;
  842. }
  843. ::selection{
  844. background:{color:Color 1};
  845. color:#ffffff;
  846. }
  847.  
  848. /*Cred to html tutorials*/
  849. ::-webkit-scrollbar-thumb:vertical {
  850. width:3px; /*width of the slider*/
  851. opacity:1;
  852. border:1px solid #ffffff;
  853. background-color:{color:Color 1}; /*color of main scrollbar*/
  854. }
  855. ::-webkit-scrollbar {
  856. background-color:#ffffff; /*color of the slider*/
  857. width:3px;
  858. opacity:1;
  859. }
  860.  
  861. ::-webkit-scrollbar-corner{
  862. background-color:#FEFEFE;
  863. opacity:0;
  864. }
  865.  
  866. #infscr-loading {
  867. display: none !important;
  868. }
  869.  
  870. .tmblr-iframe{
  871. position:fixed;
  872. margin-top:11px;
  873. margin-right:5px;
  874. z-index:1000000 !important;
  875. -webkit-filter: invert(100%);
  876. }
  877.  
  878. /*----------------------------------------------------------------------*/
  879. </style>
  880.  
  881. </head>
  882.  
  883.  
  884. <!-------------------What Appears On The Browser Tab---------------------->
  885.  
  886. <title>{Title}</title>
  887.  
  888. <link href="{Favicon}" rel="icon" type="image/x-icon" />
  889. <!---------You can customize this to something differant from your profile pic by putting the url to your desired icon in place of {Favicon}------->
  890.  
  891. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  892. {block:Description}
  893.  
  894. <meta name="description" content="{MetaDescription}" />
  895. {/block:Description}
  896.  
  897. <!------------------------------------------------------------------------>
  898.  
  899.  
  900.  
  901. <!------------------------Masonry Infinite Scroll------------------------->
  902.  
  903. {block:indexpage}
  904. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>
  905. {/block:NextPage}
  906. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  907. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  908. <script type="text/javascript">
  909. $(window).load(function(){
  910. var $wall = $('#container');
  911. $wall.imagesLoaded(function(){
  912. $wall.masonry({
  913. itemSelector: '.entry, .entry_photo',
  914. isAnimated : true
  915. });
  916. });
  917.  
  918. $wall.infinitescroll({
  919. navSelector : '#page-nav',
  920. nextSelector : '#page-nav a',
  921. itemSelector : '.entry, .entry_photo',
  922. bufferPx : 2000,
  923. debug : false,
  924. errorCallback: function() {
  925. $('#infscr-loading').fadeOut('normal');
  926. }},
  927. function( newElements ) {
  928. var $newElems = $( newElements );
  929. $newElems.hide();
  930. $newElems.imagesLoaded(function(){
  931. $wall.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
  932. });
  933. }); $('#content').hide(500);
  934. });
  935. </script>
  936. {/block:indexpage}
  937.  
  938. <!----------------------------------End----------------------------------->
  939.  
  940.  
  941. <body>
  942.  
  943.  
  944.  
  945. <!-----------------------------------------------------------------------> <div id="sidebar">
  946.  
  947. <div id="paw">
  948.  
  949. <a href="/ask"><div id="toeone">Ask</div></a>
  950.  
  951. <a href="{text:Link 2 URL}"><div id="toetwo">{text:Link 2}</div></a>
  952.  
  953. <a href="{text:Link 3 URL}"><div id="toethree">{text:Link 3}</div></a>
  954.  
  955. <a href="http://katting.tk"><div id="toefour">Credit</div></a>
  956.  
  957. <a href="/" title="Refresh">
  958. <div id="pawpad">
  959. <img src="{Favicon}"/>
  960. <div id="pawoverlay">
  961. <div class="pawoverlay">
  962. {Description}
  963. </div>
  964. </div>
  965. </div>
  966. </a>
  967. </div>
  968.  
  969. <div id="blogtitle">{Title}</div>
  970.  
  971. </div>
  972. <!----------------------------------------------------------------------->
  973.  
  974. <div id="container">
  975.  
  976. {block:Posts}
  977. <div class="entry">
  978.  
  979. <!--------------------------------------------------------------->
  980. {block:Text}
  981. <div class="post text">
  982.  
  983. {block:Title}<h1>{Title}</h1>{/block:Title}
  984. <div id="textpostbody">{Body}</div>
  985.  
  986. <div id="posteddate">
  987. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  988. </div>
  989.  
  990. </div>
  991.  
  992.  
  993. {block:IndexPage}
  994. <div id="textpermalinks">
  995. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  996. <i class="fa fa-paw"></i>
  997. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  998. </div>
  999. {/block:IndexPage}
  1000.  
  1001. {block:Text}
  1002. <!--------------------------------------------------------------->
  1003.  
  1004.  
  1005. <!--------------------------------------------------------------->
  1006. {block:Photo}
  1007. <div class="post photo">
  1008.  
  1009. {block:IndexPage}
  1010. <div id="photoposts">
  1011.  
  1012. <div class="phototop"></div>
  1013. <div class="photoleft"></div>
  1014. <div class="photobottom"></div>
  1015. <div class="photoright"></div>
  1016.  
  1017. <div class="photohovereffect"></div>
  1018. <img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
  1019. </div>
  1020.  
  1021. <div id="photopermalinks">
  1022. <a href="{Permalink}"><div class="photopermalinks">{TimeAgo} </div></a>
  1023.  
  1024. <a href="{Permalink}"><div class="photopermalinks">{NoteCountWithLabel}</div></a>
  1025.  
  1026. <a href="{ReblogURL}"><div class="photopermalinks">Reblog</div></a>
  1027. </div>
  1028. {block:IndexPage}
  1029.  
  1030. {block:PermalinkPage}
  1031. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  1032. {/block:PermalinkPage}
  1033.  
  1034. </div>
  1035.  
  1036. {/block:Photo}
  1037. <!--------------------------------------------------------------->
  1038.  
  1039.  
  1040. <!--------------------------------------------------------------->
  1041. {block:Panorama}
  1042. <div class="post panorama">
  1043. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  1044. {LinkCloseTag}
  1045.  
  1046. <div id="posteddate">
  1047. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  1048. </div>
  1049.  
  1050. </div>
  1051.  
  1052.  
  1053. {block:IndexPage}
  1054. <div id="textpermalinks">
  1055. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1056. <i class="fa fa-paw"></i>
  1057. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1058. </div>
  1059. {/block:IndexPage}
  1060. {/block:Panorama}
  1061. <!--------------------------------------------------------------->
  1062.  
  1063.  
  1064. <!--------------------------------------------------------------->
  1065. {block:Photoset}
  1066. <div class="post photoset">
  1067.  
  1068. {block:IndexPage}
  1069. {Photoset-250}
  1070. {/block:IndexPage}
  1071.  
  1072. {block:PermalinkPage}
  1073. {Photoset-500}
  1074. {/block:PermalinkPage}
  1075.  
  1076. <div id="posteddate">
  1077. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  1078. </div>
  1079.  
  1080. </div>
  1081.  
  1082.  
  1083. {block:IndexPage}
  1084. <div id="textpermalinks">
  1085. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1086. <i class="fa fa-paw"></i>
  1087. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1088. </div>
  1089. {/block:IndexPage}
  1090. {/block:Photoset}
  1091. <!--------------------------------------------------------------->
  1092.  
  1093.  
  1094. <!--------------------------------------------------------------->
  1095. {block:Quote}
  1096. <div id="post quote">
  1097. <div id="textpostbody">
  1098. <blockquote>"{Quote}"</blockquote>
  1099. <div id="source">{Source}</div>
  1100. </div>
  1101.  
  1102. <div id="posteddate">
  1103. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  1104. </div>
  1105.  
  1106. </div>
  1107.  
  1108.  
  1109. {block:IndexPage}
  1110. <div id="textpermalinks">
  1111. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1112. <i class="fa fa-paw"></i>
  1113. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1114. </div>
  1115. {/block:IndexPage}
  1116. {/block:Quote}
  1117. <!--------------------------------------------------------------->
  1118.  
  1119.  
  1120. <!--------------------------------------------------------------->
  1121. {block:Link}
  1122. <div class="post link">
  1123. <a href="{URL}" class="link" {Target} target="blank"><div id="link"><i class="fa fa-external-link"></i>{Name}</div></a>
  1124.  
  1125. <div id="posteddate">
  1126. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  1127. </div>
  1128.  
  1129. </div>
  1130.  
  1131.  
  1132. {block:IndexPage}
  1133. <div id="textpermalinks">
  1134. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1135. <i class="fa fa-paw"></i>
  1136. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1137. </div>
  1138. {/block:IndexPage}
  1139. {/block:Link}
  1140. <!--------------------------------------------------------------->
  1141.  
  1142.  
  1143. <!--------------------------------------------------------------->
  1144. {block:Chat}
  1145. <div class="post chat">
  1146.  
  1147. {block:Title}<h1>{Title}</h1>{/block:Title}
  1148.  
  1149. <div class="chat">
  1150. {block:Lines}
  1151. <div class="{Alt} user_{UserNumber}">
  1152. {block:Label}<b>{Label}</b>{/block:Label}
  1153. {Line}
  1154. </div>
  1155. {block:Lines}
  1156. </div>
  1157.  
  1158. <div id="posteddate">
  1159. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  1160. </div>
  1161.  
  1162. </div>
  1163.  
  1164.  
  1165. {block:IndexPage}
  1166. <div id="textpermalinks">
  1167. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1168. <i class="fa fa-paw"></i>
  1169. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1170. </div>
  1171. {/block:IndexPage}
  1172. {/block:Chat}
  1173. <!--------------------------------------------------------------->
  1174.  
  1175.  
  1176. <!--------------------------------------------------------------->
  1177. {block:Video}
  1178. <div class="post video">
  1179. {block:IndexPage}{Video-250}{/block:IndexPage}
  1180. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  1181.  
  1182. <div id="posteddate">
  1183. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  1184. </div>
  1185. </div>
  1186.  
  1187. {block:IndexPage}
  1188. <div id="textpermalinks">
  1189. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1190. <i class="fa fa-paw"></i>
  1191. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1192. </div>
  1193. {/block:IndexPage}
  1194. {/block:Video}
  1195. <!--------------------------------------------------------------->
  1196.  
  1197.  
  1198. <!--------------------------------------------------------------->
  1199. {block:Audio}
  1200. <div class="post audio">
  1201.  
  1202.  
  1203. </div>
  1204.  
  1205.  
  1206. {/block:Audio}
  1207. <!--------------------------------------------------------------->
  1208.  
  1209.  
  1210. <!--------------------------------------------------------------->
  1211. {block:Answer}
  1212.  
  1213. <div class="question">
  1214. <div class="theasker">
  1215. <table>
  1216. <tr>
  1217. <td><img src="{AskerPortraitURL-64}"></td>
  1218. <td>{Asker} asked: {Question}</td>
  1219. </tr>
  1220. </table>
  1221. </div>
  1222. </div>
  1223.  
  1224. <div class="replies">
  1225. {Answer}
  1226. </div>
  1227.  
  1228. <div id="posteddate">
  1229. Posted on {DayOfWeek}, {Month} {DayOfMonth}, {Year}
  1230. </div>
  1231.  
  1232.  
  1233. {block:IndexPage}
  1234. <div id="textpermalinks">
  1235. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1236. <i class="fa fa-paw"></i>
  1237. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1238. </div>
  1239. {/block:IndexPage}
  1240. {/block:Answer}
  1241. <!--------------------------------------------------------------->
  1242.  
  1243.  
  1244. <!--------------------------------------------------------------->
  1245. {block:PermalinkPagination}
  1246. {block:PermalinkPage}
  1247.  
  1248. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1249.  
  1250. {block:PostNotes}{PostNotes-16}{/block:PostNotes}
  1251.  
  1252. {/block:PermalinkPage}
  1253. {/block:PermalinkPagination}
  1254. <!--------------------------------------------------------------->
  1255. </div>
  1256. {block:Posts}
  1257.  
  1258. </div>
  1259.  
  1260. <!----------------------------------------------------------------------->
  1261.  
  1262. <style>
  1263. #cred{
  1264. position:fixed;
  1265. z-index:9000;
  1266. bottom:8px;
  1267. right:8px;
  1268. width:15px;
  1269. height:15px;
  1270. padding:5px;
  1271. border-radius:90px;
  1272. background-color:{color:Color 2};
  1273. display: flex;
  1274. align-items: center;
  1275. justify-content: center;
  1276. text-align:center;
  1277. font-size:14px;
  1278. color:#ffffff;
  1279. webkit-transition: all 1s ease;
  1280. -moz-transition: all 1s ease;
  1281. -o-transition: all 1s ease;
  1282. transition:all 1s ease; /*smooth transitions*/
  1283. }
  1284. #cred:hover{
  1285. background-color:{color:Color 1};
  1286. }
  1287. </style>
  1288. <a href="http://felinethemes.tumblr.com" title="Feline Themes" target="blank"><div id="cred"><i class="fa fa-paw"></i></div></a>
  1289.  
  1290. <!---------------------------------------------------------------------->
  1291.  
  1292. <div id="puppyandkitty"><img src="http://i.imgur.com/Utoijtb.jpg"></div>
  1293. <div id="puppy"><img src="http://i.imgur.com/iVPbmji.jpg"></div>
  1294.  
  1295. <div id="printstc"><img src="http://i.imgur.com/KaPF4nw.gif"></div>
  1296.  
  1297. <div id="top"></div>
  1298. <div id="bottom"></div>
  1299. <div id="left"></div>
  1300. <div id="right"></div>
  1301. <div id="top1"></div>
  1302. <div id="bottom1"></div>
  1303. <div id="left1"></div>
  1304. <div id="right1"></div>
  1305. <div id="top2"></div>
  1306. <div id="bottom2"></div>
  1307. <div id="left2"></div>
  1308. <div id="right2"></div>
  1309. <div id="tlcorner"></div>
  1310. <div id="trcorner"></div>
  1311. <div id="blcorner"></div>
  1312. <div id="brcorner"></div>
  1313.  
  1314. </body>
  1315.  
  1316. </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!