API tools faq
paste
Advertisement
Katting

Scrapbook Tumblr Theme

Katting
Jul 28th, 2016
574
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. ***PLEASE READ THIS AS IT CONTAINS IMPORTANT INFO***
  8.  
  9. Feline Themes Presents: Scrapbook Theme
  10.  
  11. This is my first release of a main theme and I'm really proud of this theme! The design of this theme really reminds me of a scrapbook, thus the name of the theme. :)
  12.  
  13. 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 can also replace the included updates tab if you wish because I made it super simple, as I felt it really fit the scrapbook feel. Just please don't make this theme look like an entirely new theme.
  14.  
  15. 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.
  16.  
  17. 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.
  18.  
  19.  
  20.  
  21. *FONTS AND COLORS USED*
  22.  
  23. -All colors are easily editable with the customize theme settings.
  24.  
  25. -Hirjnotes is the font used for the blogtitle and in part of the ask layout. You may replace this if you don't like it. I chose it because it has a nice handwritten look for the scrapbook. I DID NOT MAKE THIS FONT!
  26.  
  27. -I used the Raleway font for the main body. Replace this if you wish as well.
  28.  
  29.  
  30. *OTHER INFO*
  31.  
  32. -I have tested the main post types that I see used most often. [Text, Photos/Photosets, Quotes, Asks]. It should look fine with chats, videos, and audio posts, but I don't see these too oftenly used. If there's a problem let me know.
  33.  
  34. -I did not include the scripts for popups to keep out unneccassary coding for the release as I didn't make any for this theme. Feel free to add them though when you use it!
  35.  
  36.  
  37. Enjoy and let me know if you use it so I can see! :)
  38.  
  39.  
  40. © Feline Themes 2016
  41.  
  42. ------------------------------------------------------------------------>
  43.  
  44.  
  45.  
  46.  
  47.  
  48. <!-----------------------Meta Tags------------------------->
  49.  
  50. <meta name="color:Accent 1" content="#cccccc"/>
  51. <meta name="color:Accent 2" content="#363333"/>
  52. <meta name="color:Font Color" content="#888888"/>
  53. <meta name="color:Borders" content="#b7cfd7"/>
  54. <meta name="color:Posts" content="#ffffff"/>
  55. <meta name="color:Backgrounds" content="#ffffff"/>
  56.  
  57. <meta name="if:Updates Tab" content="1"/>
  58. <meta name="if:Vertical Photosets" content="0"/>
  59.  
  60.  
  61. <meta name="text:Link 1 Title" content="Link 1"/>
  62. <meta name="text:Link 1 URL" content="Link 1 URL"/>
  63. <meta name="text:Link 2 Title" content="Link 2"/>
  64. <meta name="text:Link 2 URL" content="Link 2 URL"/>
  65. <meta name="text:Quote" content="Your Quote Goes Here"/>
  66.  
  67. <meta name="text:Updates Tab 1" content="Updates"/>
  68. <meta name="text:Updates Tab 1 Content" content="This is your updates tab. You can write as much as you want in here. It will scroll automatically if needed. This section is much easier to customize directly when you go into edit HTML. But it will still look nice editing it from customoze theme too."/>
  69.  
  70. <meta name="text:Updates Tab 2" content="Stats"/>
  71. <meta name="text:Updates Tab 2 Content" content="You can put your stats counters or anything you want in here. Use this updates tab as you see fit."/>
  72.  
  73. <meta name="text:Updates Tab 3" content="Tab 3"/>
  74. <meta name="text:Updates Tab 3 Content" content="If you don't want 3 tabs, just delete all the text in the sections you don't want. This updates tab is super simple to look nice with this theme, but feel free to replace it with a different one if you need something else."/>
  75.  
  76. <!---------------------------------------------------------->
  77.  
  78.  
  79.  
  80. <!--masonry--- (dont remove unless you want wierd columns--->
  81. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  82. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  83. <!------------------------end masonry----------------------->
  84.  
  85.  
  86. <!------------ start of styled tooltips script ------------->
  87. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  88.  
  89. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  90.  
  91. <script>
  92. (function($){
  93. $(document).ready(function(){
  94. $("a[title]").style_my_tooltips({
  95. tip_follows_cursor:true,
  96. tip_delay_time:90,
  97. tip_fade_speed:600,
  98. attribute:"title"
  99. });
  100. });
  101. })(jQuery);
  102. </script>
  103. <!-------------- end of styled tooltip scripts -------------->
  104.  
  105. <link rel="stylesheet" href="http://static.tumblr.com/dq6g0mp/Je9oataoz/hijrnotes.css"> <!--Title Font (from dafont.com)-->
  106.  
  107. <link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
  108.  
  109. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"> <!--font awesome icons-->
  110.  
  111.  
  112. <style type="text/css">
  113.  
  114. /*------------------------------------*/
  115.  
  116. #sidebar{
  117. position:fixed;
  118. top:130px;
  119. left:5%;
  120. z-index:9000;
  121. width:300px;
  122.  
  123. }
  124.  
  125. #blogtitle{
  126. margin-bottom:5px;
  127. padding:5px;
  128. outline:1px solid {color:Posts};
  129. outline-offset:-3px;
  130. background-color:{color:Borders};
  131. text-align:center;
  132. font-family:'hijrnotes_personal_use_onlyRg';
  133. font-size:20px;
  134. color:{color:Posts};
  135. }
  136.  
  137. #avatar{
  138. width:100px;
  139. height:100px;
  140. padding:10px;
  141. border:1px solid {color:Accent 1};
  142. background-color:{color:Posts};
  143. }
  144.  
  145. #avatar img{
  146. width:100px;
  147. height:100px;
  148. }
  149.  
  150. #avatar:hover .overlay{
  151. opacity:0.6;
  152. }
  153.  
  154. #description{
  155. position:absolute;
  156. top:60px;
  157. right:0px;
  158. width:150px;
  159. height:60px;
  160. overflow-y:scroll;
  161. padding:10px;
  162. background-color:{color:Posts};
  163. border:1px solid {color:Accent 1};
  164. text-align:center;
  165. font-size:12px;
  166. }
  167.  
  168. #links{
  169. position:absolute;
  170. top:145px;
  171. right:8px;
  172. margin-left:0px;
  173. width:169px;
  174. height:35px;
  175. }
  176.  
  177. .links{
  178. width:22px;
  179. height:22px;
  180. padding:5px;
  181. border-radius:2px;
  182. background-color:{color:Accent 2};
  183. text-align:center;
  184. font-size:20px;
  185. color:{color:Posts};
  186. webkit-transition: all 1s ease;
  187. -moz-transition: all 1s ease;
  188. -o-transition: all 1s ease;
  189. transition:all 1s ease; /*smooth transitions*/
  190. }
  191.  
  192. .links:hover{
  193. background-color:{color:Borders};
  194. }
  195.  
  196. #quote{
  197. margin-top:5px;
  198. padding:10px;
  199. border:1px solid {color:Accent 2};
  200. outline:1px dashed {color:Accent 1};
  201. outline-offset:-5px;
  202. background-color:{color:Posts};
  203. text-align:center;
  204. font-size:11px;
  205. }
  206.  
  207. #line{
  208. margin-top:5px;
  209. height:5px;
  210. background-color:{color:Borders};
  211. border-top:3px double {color:Posts};
  212.  
  213. }
  214.  
  215. /*------------------------------------*/
  216.  
  217.  
  218. #updatestab{
  219. position:fixed;
  220. right:4%;
  221. top:50px;
  222. bottom:60px;
  223. overflow-y:scroll;
  224. padding:10px;
  225. width:150px;
  226. background-color:{color:Posts};
  227. border:1px solid {color:Accent 2};
  228. outline:1px dashed {color:Accent 1};
  229. outline-offset:-5px;
  230. text-align:justify;
  231. font-size:11px;
  232. }
  233.  
  234. #updatestab h2{
  235. margin-top:5px;
  236. margin-bottom:5px;
  237. padding:5px;
  238. background-color:{color:Borders};
  239. border:3px double {color:Posts};
  240. text-align:center;
  241. color:{color:Posts};
  242. font-size:18px;
  243. }
  244.  
  245. #updatestab p{
  246. margin-left:5px;
  247. margin-right:5px;
  248. }
  249.  
  250. /*------------------------------------*/
  251.  
  252. #container{
  253. position:absolute;
  254. top:60px;
  255. left:30%;
  256. width:640px;
  257. {block:PermalinkPage}
  258. left:33%;
  259. {/block:PermalinkPage}
  260. }
  261.  
  262. .entry{
  263. position:relative;
  264. margin:17px;
  265. height:auto;
  266. background-color:{color:Posts};
  267. border:1px solid {color:Accent 1};
  268. padding:17px;
  269. text-align:justify;
  270. font-size:11.5px;
  271. {block:IndexPage}
  272. width:250px;
  273. height:auto;
  274. {/block:IndexPage}
  275. {block:PermalinkPage}
  276. width:500px;
  277. text-align:justify;
  278. {/block:PermalinkPage}
  279. -webkit-transition: all 2s ease; /* Safari and Chrome */
  280. -moz-transition: all 2s ease; /* Firefox */
  281. -o-transition: all 2s ease; /* IE 9 */
  282. -ms-transition: all 2s ease; /* Opera */
  283. transition: all 2s ease;
  284. }
  285.  
  286. .entry img{
  287. width:250px;
  288. -webkit-transition: all 1s ease; /* Safari and Chrome */
  289. -moz-transition: all 1s ease; /* Firefox */
  290. -o-transition: all 1s ease; /* IE 9 */
  291. -ms-transition: all 1s ease; /* Opera */
  292. transition: all 1s ease;
  293. max-width: 100%;
  294. {block:PermalinkPage}
  295. width:500px;
  296. {/block:PermalinkPage}
  297. }
  298.  
  299. .entry h2{
  300. margin-top:0px;
  301. margin-bottom:5px;
  302. padding:5px;
  303. background-color:{color:Accent 2};
  304. border:3px double {color:Posts};
  305. color:{color:Posts};
  306. font-size:15px;
  307. letter-spacing:1px;
  308. text-align:center;
  309. }
  310.  
  311. .entry h2 a{
  312. color:{color:Posts};
  313. }
  314.  
  315. .entry h2 a:hover{
  316. color:{color:Posts};
  317. }
  318.  
  319. .entry p{
  320. font-size:12px;
  321. text-align:justify;
  322. margin-top:5px;
  323. margin-bottom:5px;
  324. margin-left:10px;
  325. margin-right:10px;
  326. }
  327.  
  328. .entry ul{
  329. text-align:justify;
  330. }
  331.  
  332. .entry:hover .overlay {
  333. opacity:.5;
  334. }
  335.  
  336. .overlay {
  337. text-align:center;
  338. opacity:1;
  339. width:100%;height:100%;
  340. -webkit-transition: all 2s ease-in-out;
  341. -moz-transition: all 2s ease-in-out;
  342. -o-transition: all 2s ease-in-out;
  343. -ms-transition: all 2s ease-in-out;
  344. transition: all 2s ease-in-out;
  345. }
  346.  
  347. blockquote{
  348. {block:IndexPage}
  349. margin:1px;
  350. font-size:15px;
  351. text-align:left;
  352. {/block:IndexPage}
  353.  
  354. {block:PermalinkPage}
  355. text-align:center;
  356. {/block:PermalinkPage}
  357. }
  358.  
  359. .source{
  360. text-align:right;
  361. }
  362.  
  363. .linkpost{
  364. padding:10px;
  365. outline:1px solid {color:Posts};
  366. outline-offset:-4px;
  367. background-color:{color:Accent 2};
  368. color:{color:Posts};
  369. font-size:15px;
  370. text-align:center;
  371. }
  372.  
  373. .linkpost a{
  374. color:{color:Posts};
  375. }
  376.  
  377. .linkpost a:hover{
  378. color:{color:Posts};
  379. }
  380.  
  381.  
  382. #postpermalinks{
  383. position:absolute;
  384. width:210px;
  385. top:50%;
  386. left:50%;
  387. transform:translate(-50%,-50%);
  388. opacity:0;
  389. -webkit-transition: all 2s ease;
  390. -moz-transition: all 2s ease;
  391. -o-transition: all 2s ease;
  392. transition: all 2s ease;
  393. }
  394.  
  395. .entry:hover #postpermalinks{
  396. opacity:1;
  397. }
  398.  
  399. #permabutton{
  400. /*reblog permalink on hover on photos*/
  401. {block:PermalinkPage}
  402. display:none;
  403. {/block:PermalinkPage}
  404. margin:5px;
  405. position:relative;
  406. padding:7px;
  407. border-radius:4px;
  408. background-color:{color:Accent 2};
  409. text-align:center;
  410. font-size:12px;
  411. color:{color:Posts};
  412. -webkit-transition: all 2s ease;
  413. -moz-transition: all 2s ease;
  414. -o-transition: all 2s ease;
  415. transition: all 2s ease;
  416. }
  417.  
  418. #permabutton:hover{
  419. background-color:{color:Borders};
  420. }
  421.  
  422. #permalinktext {
  423. display: block;
  424. margin-top:15px;
  425. border-top:1px solid {color:Accent 1};
  426. {block:PermalinkPage}
  427. display:none;
  428. {/block:PermalinkPage}
  429. }
  430.  
  431. .permalinktext{
  432. margin-top:-6px;
  433. margin-right:15px;
  434. font-size:10px;
  435. letter-spacing:1px;
  436. text-align: right;
  437. }
  438.  
  439. .permalinktext a{
  440. margin-left:2px;
  441. margin-right:2px;
  442. padding:3px;
  443. background-color:{color:Posts};
  444. }
  445.  
  446.  
  447. /*--q/a post--*/
  448. .question{
  449. outline:1px solid {color:Posts};
  450. outline-offset:-4px;
  451. font-size:11.5px;
  452. background-color:{color:Borders};
  453. color:{color:Posts};
  454. padding:10px;
  455. text-align:justify;
  456. }
  457. .asker{
  458. font-family:'hijrnotes_personal_use_onlyRg';
  459. font-size:18px;
  460. text-decoration:none;
  461. }
  462. .asker a{
  463. color:{color:Accent 2};
  464. }
  465.  
  466. .asker img{
  467. width:35px;
  468. height:35px;
  469. padding:1px;
  470. border:1px solid {color:Posts};
  471. }
  472.  
  473. .asked{
  474. color:{color:Posts};
  475. padding:4px;
  476. margin-top:4px;
  477. }
  478.  
  479. .answer{
  480. font-style: normal;
  481. }
  482.  
  483. .answerer{
  484. padding:3px;
  485. margin-bottom:5px;
  486. text-align:right;
  487. color:{color:Accent 2};
  488. font-family:'hijrnotes_personal_use_onlyRg';
  489. font-size:18px;
  490. }
  491.  
  492. .replies{
  493. margin-top:5px;
  494. padding:5px;
  495. border:1px solid {color:Accent 1};
  496. font-size: 11px;
  497. text-align: justify;
  498. }
  499. /*--q/a post*/
  500.  
  501. .tumblr_audio_player {
  502. {block:IndexPage}
  503. width: 250px;
  504. {/block:IndexPage}
  505. {block:PermalinkPage}
  506. width:500px;
  507. {/block:PermalinkPage}
  508. height: 100px;
  509. overflow: hidden;
  510. position: relative;
  511. z-index: 1000;
  512. }
  513.  
  514. /*makes images in texts posts stay in the box*/
  515. iframe, img, embed, object, video {
  516. max-width: 100%;
  517. }
  518.  
  519. img {
  520. vertical-align:middle;
  521. height: auto;
  522. width: auto;
  523. }
  524.  
  525. /*styling of how the notes will look on the permalink page*/
  526. #permpage{
  527. {block:PermalinkPage}
  528. position: relative;
  529. float: center;
  530. {/block:PermalinkPage}
  531. }
  532.  
  533. .caption{
  534. margin-top:10px;
  535. padding:10px;
  536. border:1px solid {color:Accent 1};
  537. max-height:300px;
  538. overflow-y:scroll;
  539. }
  540.  
  541. .caption p{
  542. text-align:justify;
  543. }
  544.  
  545. .caption ul{
  546. text-align:justify;
  547. }
  548.  
  549. .date{
  550. margin-top:10px;
  551. padding:10px;
  552. font-size:15px;
  553. text-align:center;
  554. border:4px double {color:Posts};
  555. background-color:{color:Borders};
  556. color:{color:Posts};
  557. }
  558.  
  559. ol.notes {
  560. margin:2px;
  561. height:300px;
  562. padding:5px;
  563. overflow-y:auto;
  564. text-align:left;
  565. border:1px solid {color:Accent 1};
  566. font-size:12px;
  567. list-style-type: none;
  568. }
  569.  
  570. ol.notes img.avatar {
  571. margin:2px;
  572. padding:2px;
  573. border:1px solid {color:Accent 1};
  574. width:10px;
  575. height:10px;
  576. }
  577.  
  578. /*------------------------------------*/
  579.  
  580. #left, #right, #top, #bottom{
  581. position:fixed;
  582. z-index:99000000000000000000;
  583. background-color:{color:Borders};
  584. }
  585.  
  586. #top, #bottom{
  587. left:0;
  588. right:0;
  589. height:20px;
  590. }
  591.  
  592. #top{
  593. top:0;
  594. }
  595.  
  596. #bottom{
  597. bottom:0;
  598. }
  599.  
  600. #left, #right{
  601. top:0;
  602. bottom:0;
  603. width:20px;
  604. }
  605.  
  606. #left{
  607. left:0;
  608. }
  609.  
  610. #right{
  611. right:0;
  612. }
  613.  
  614. /*------------------------------------*/
  615.  
  616. #s-m-t-tooltip {
  617. margin:15px 0px 0px 10px;
  618. padding:5px;
  619. border-radius:5px;
  620. max-width:100px;
  621. border:1px solid {color:Borders};
  622. background-color:{color:Posts};
  623. font-size:11.5px;
  624. color:{color:Borders};
  625. z-index:99999999999999999999999999999999999;
  626. }
  627.  
  628. body{
  629. background-color:{color:Backgrounds};
  630. color:#888888;
  631. font-family:Raleway;
  632. }
  633.  
  634. a{
  635. color:{color:Borders};
  636. text-decoration:none;
  637. webkit-transition: all 1s ease;
  638. -moz-transition: all 1s ease;
  639. -o-transition: all 1s ease;
  640. transition:all 1s ease; /*smooth transitions*/
  641. }
  642.  
  643. a:hover{
  644. color:{color:Accent 2};
  645. }
  646.  
  647. /*change the color of the highlights*/
  648. ::-moz-selection { /* Code for Firefox */
  649. background: {color:Borders};
  650. }
  651. ::selection {
  652. background: {color:Borders};
  653. }
  654.  
  655. /*cred to html tutorials*/
  656. ::-webkit-scrollbar-thumb:vertical {
  657. background-color:{color:Borders};
  658. width:2px;
  659. opacity:1;
  660. }
  661. ::-webkit-scrollbar {
  662. background-color:{color:Posts};
  663. width:2px;
  664. opacity:1;
  665. }
  666. ::-webkit-scrollbar-corner{
  667. opacity:0;
  668. }
  669.  
  670. .tmblr-iframe{
  671. margin-top:22px;
  672. margin-right:20px;
  673. z-index:9999999999999;!important;
  674. -webkit-filter: invert(50%);
  675. }
  676.  
  677. #infscr-loading {
  678. display: none !important;
  679. }
  680.  
  681. </style>
  682.  
  683.  
  684.  
  685. <!--------------What Appears On The Browser Tab-------------->
  686.  
  687. <title>{Title}</title>
  688.  
  689. <link href="{Favicon}" rel="icon" type="image/x-icon" />
  690. <!---------You can customize this to something differant from your profile pic by putting the url to your desired icon in place of {favicon}------->
  691.  
  692.  
  693. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  694. {block:Description}
  695.  
  696.  
  697. <meta name="description" content="{MetaDescription}" />
  698. {/block:Description}
  699.  
  700. <!----------------------------------------------------------->
  701.  
  702.  
  703. <!-----------------masonry infinite scroll------------------->
  704. {block:indexpage}
  705. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>
  706.  
  707. {/block:NextPage}
  708. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  709. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  710. <script type="text/javascript">
  711. $(window).load(function(){
  712. var $wall = $('#container');
  713. $wall.imagesLoaded(function(){
  714. $wall.masonry({
  715. itemSelector: '.entry, .entry_photo',
  716. isAnimated : true
  717. });
  718. });
  719.  
  720. $wall.infinitescroll({
  721. navSelector : '#page-nav',
  722. nextSelector : '#page-nav a',
  723. itemSelector : '.entry, .entry_photo',
  724. bufferPx : 2000,
  725. debug : false,
  726. errorCallback: function() {
  727. $('#infscr-loading').fadeOut('normal');
  728. }},
  729. function( newElements ) {
  730. var $newElems = $( newElements );
  731. $newElems.hide();
  732. $newElems.imagesLoaded(function(){
  733. $wall.masonry( 'appended', $newElems,{isAnimated: true}, function(){$newElems.fadeIn('slow');} );
  734. });
  735. }); $('#content').hide(500);
  736. });
  737. </script>
  738. {/block:indexpage}
  739.  
  740. <!-------------------------end--------------------------->
  741.  
  742.  
  743. </head>
  744.  
  745.  
  746. <body>
  747.  
  748.  
  749. <!---------------------------------------------------------------------->
  750.  
  751. <div id="sidebar">
  752.  
  753. <div id="blogtitle">{Title}</div>
  754.  
  755. <a href="/" title="Refresh">
  756. <div id="avatar">
  757. <div class="overlay">
  758. <img src="{Favicon}">
  759. </div>
  760. </div></a>
  761.  
  762. <div id="description">{Description}</div>
  763.  
  764. <div id="links">
  765. <table>
  766. <tr>
  767.  
  768. <td>
  769. <a href="/ask" title="Ask"><div class="links"><i class="fa fa-envelope-o"></i></div></a>
  770. </td>
  771.  
  772. <td>
  773. <a href="{text:Link 1 URL}" title="{text:Link 1 Title}"><div class="links"><i class="fa fa-plus"></i></div></a>
  774. </td>
  775.  
  776. <td>
  777. <a href="{text:Link 2 URL}" title="{text:Link 2 Title}"><div class="links"><i class="fa fa-heart-o"></i></div></a>
  778. </td>
  779.  
  780. <td>
  781. <a href="/archive" title="Archive"><div class="links"><i class="fa fa-calendar"></i></div></a>
  782. </td>
  783.  
  784. <td>
  785. <a href="http://katting.tk/" title="Theme Credit" target="blank"><div class="links"><i class="fa fa-code"></i></div></a> <!--Don't Remove!!-->
  786. </td>
  787.  
  788. </tr>
  789. </table>
  790. </div>
  791.  
  792. <div id="quote">{text:Quote}</div>
  793.  
  794. <div id="line"></div>
  795.  
  796. </div>
  797.  
  798.  
  799. <!---------------------------------------------------------------------->
  800.  
  801. {block:IfUpdatesTab}
  802. <div id="updatestab">
  803. <h2>{text:Updates Tab 1}</h2>
  804. <p>{text:Updates Tab 1 Content}<p>
  805.  
  806. <h2>{text:Updates Tab 2}</h2>
  807. <p>{text:Updates Tab 2 Content}</p>
  808.  
  809. <h2>{text:Updates Tab 3}</h2>
  810. <p>{text:Updates Tab 3 Content}</p>
  811. </div>
  812. {/block:IfUpdatesTab}
  813.  
  814.  
  815. <!---------------------------------------------------------------------->
  816.  
  817. <style>
  818. #cred{
  819. position:fixed;
  820. z-index:90000000;
  821. bottom:25px;
  822. right:25px;
  823. width:15px;
  824. height:15px;
  825. padding:5px;
  826. border-radius:90px;
  827. background-color:{color:Accent 2};
  828. text-align:center;
  829. font-size:14px;
  830. color:{color:Posts};
  831. webkit-transition: all 1s ease;
  832. -moz-transition: all 1s ease;
  833. -o-transition: all 1s ease;
  834. transition:all 1s ease; /*smooth transitions*/
  835. }
  836. #cred:hover{
  837. background-color:{color:Borders};
  838. }
  839. </style>
  840. <a href="http://felinethemes.tumblr.com" title="Feline Themes" target="blank"><div id="cred"><i class="fa fa-paw"></i></div></a>
  841.  
  842.  
  843. <!--------------------------------------------------------------------->
  844.  
  845. <div id="container">
  846. {block:Posts}
  847. <div class="entry">
  848.  
  849. <!-------------------------Text Posts-------------------------->
  850. {block:Text}
  851. <div class="post text">
  852. {block:Title}<h2>{Title}</h2>{/block:Title}
  853. {Body}
  854. </div>
  855.  
  856.  
  857. {block:IndexPage}
  858. <div id="permalinktext">
  859. <div class="permalinktext">
  860.  
  861. <b>
  862. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  863. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  864. </b>
  865. </div>
  866. </div>
  867. {/block:IndexPage}
  868. {/block:Text}
  869. <!------------------------------------------------------------>
  870.  
  871.  
  872.  
  873.  
  874. <!------------------------Photo Posts------------------------->
  875. {block:Photo}
  876. <div class="post photo">
  877.  
  878. {block:IndexPage}
  879. <div class="overlay">
  880. <img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
  881. </div>
  882.  
  883. <div id="postpermalinks">
  884.  
  885. <a href="{Permalink}" title="Details"><div id="permabutton">{TimeAgo} W/
  886. {NoteCountWithLabel}</div></a>
  887.  
  888. <a href="{ReblogUrl}" title="Reblog"><div id="permabutton">Reblog</div></a>
  889.  
  890. </div>
  891. {/block:IndexPage}
  892.  
  893.  
  894. {block:PermalinkPage}
  895. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
  896. {/block:PermalinkPage}
  897.  
  898. </div>
  899. {/block:Photo}
  900. <!------------------------------------------------------------>
  901.  
  902.  
  903.  
  904. <!---------------------Panorama Posts-------------------------> {block:Panorama}
  905. <div class="post panorama">
  906.  
  907. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  908. {LinkCloseTag}
  909.  
  910. </div>
  911.  
  912.  
  913. <div id="permalinktext">
  914. <div class="permalinktext">
  915.  
  916. <b>
  917. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  918. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  919. </b>
  920. </div>
  921. </div>
  922. {/block:Panorama}
  923. <!----------------------------------------------------------->
  924.  
  925.  
  926.  
  927. <!----------------------Photoset Posts----------------------->
  928. {block:Photoset}
  929. <div class="post photoset">
  930.  
  931.  
  932. {block:IndexPage}
  933. {block:ifVerticalPhotosets}
  934. <center>
  935.  
  936. {block:Photos}
  937. {block:IndexPage}
  938.  
  939. <img src="{PhotoURL-250}" width="250px" style="border-bottom:5px solid {color:Posts};"/>
  940.  
  941. {/block:IndexPage}
  942. {/block:Photos}
  943. </center>
  944. {/block:ifVerticalPhotosets}
  945.  
  946.  
  947. {block:ifNotVerticalPhotosets}
  948.  
  949. {Photoset-250}
  950.  
  951. {/block:ifNotVerticalPhotosets}
  952. {/block:IndexPage}
  953.  
  954.  
  955. {block:PermalinkPage}
  956. {Photoset-500}
  957. {/block:PermalinkPage}
  958.  
  959.  
  960. <div id="permalinktext">
  961. <div class="permalinktext">
  962.  
  963. <b>
  964. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  965. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  966. </b>
  967. </div>
  968. </div>
  969.  
  970. </div>
  971. {/block:Photoset}
  972. <!----------------------------------------------------------->
  973.  
  974.  
  975.  
  976. <!------------------------Quote Posts------------------------>
  977. {block:Quote}
  978. <div class="post quote">
  979.  
  980. <blockquote> "{Quote}" </blockquote>
  981.  
  982. {block:Source}
  983. <div class="source">{Source}</div>
  984. {/block:Source}
  985.  
  986. </div>
  987.  
  988.  
  989. {block:IndexPage}
  990. <div id="permalinktext">
  991. <div class="permalinktext">
  992.  
  993. <b>
  994. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  995. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  996. </b>
  997. </div>
  998. </div>
  999. {/block:IndexPage}
  1000. {/block:Quote}
  1001.  
  1002. <!--------------------------------------------------------->
  1003.  
  1004.  
  1005.  
  1006. <!------------------------Link Posts----------------------->
  1007. {block:Link}
  1008. <div class="post link">
  1009.  
  1010. <div class="linkpost">
  1011. <a href="{URL}" class="link" {Target}> {Name} </a>
  1012. </div>
  1013.  
  1014. {block:Description}
  1015. <div class="description">{Description}</div>
  1016. {/block:Description}
  1017.  
  1018. </div>
  1019.  
  1020.  
  1021. {block:IndexPage}
  1022. <div id="permalinktext">
  1023. <div class="permalinktext">
  1024.  
  1025. <b>
  1026. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1027. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1028. </b>
  1029. </div>
  1030. </div>
  1031. {/block:IndexPage}
  1032. {/block:Link}
  1033. <!---------------------------------------------------------->
  1034.  
  1035.  
  1036.  
  1037. <!-----------------------Chat Posts------------------------->
  1038. {block:Chat}
  1039. <div class="post chat">
  1040.  
  1041. {block:Title}<h2>{Title}</h2>{/block:Title}
  1042.  
  1043. <div class="chat">
  1044.  
  1045. {block:Lines}
  1046.  
  1047. <div class="{Alt} user_{UserNumber}">
  1048.  
  1049. {block:Label}<b>{Label}</b>{/block:Label}
  1050. {Line}
  1051.  
  1052. </div>
  1053. {/block:Lines}
  1054. <br></div>
  1055.  
  1056.  
  1057. {block:IndexPage}
  1058. <div id="permalinktext">
  1059. <div class="permalinktext">
  1060.  
  1061. <b>
  1062. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1063. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1064. </b>
  1065. </div>
  1066. </div>
  1067. </div>
  1068. {/block:IndexPage}
  1069. {/block:Chat}
  1070. <!----------------------------------------------------------->
  1071.  
  1072.  
  1073.  
  1074. <!-----------------------Videos Posts------------------------>
  1075. {block:Video}
  1076. <div class="post video">{Video-250}</div>
  1077.  
  1078. {block:IndexPage}
  1079. <div id="permalinktext">
  1080. <div class="permalinktext">
  1081.  
  1082. <b>
  1083. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1084. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1085. </b>
  1086. </div>
  1087. </div>
  1088. {/block:IndexPage}
  1089. {/block:Video}
  1090. <!----------------------------------------------------------->
  1091.  
  1092.  
  1093.  
  1094.  
  1095. <!------------------------Audio Post------------------------->
  1096. {block:Audio}
  1097. <div class="post audio">{AudioEmbed-250}</div>
  1098.  
  1099.  
  1100. {block:IndexPage}
  1101. {block:TrackName}{TrackName} by{/block:TrackName}
  1102. {block:Artist}{Artist}{/block:Artist}
  1103.  
  1104.  
  1105. <div id="permalinktext">
  1106. <div class="permalinktext">
  1107.  
  1108. <b>
  1109. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1110. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1111. </b>
  1112. </div>
  1113. </div>
  1114. {/block:IndexPage}
  1115. {/block:Audio}
  1116. <!---------------------------------------------------------->
  1117.  
  1118.  
  1119.  
  1120. <!------------------------Q/A Post-------------------------->
  1121. {block:Answer}
  1122. <div class="question">
  1123. <div class="asker">
  1124. <img src="{AskerPortraitURL-64}">
  1125. {Asker} asked:<br></div>
  1126. <div class="asked">{Question}</div>
  1127. </div>
  1128.  
  1129. <div class="replies">
  1130. <div class="answer">
  1131. <div class="answerer">{Name} Replied:
  1132. </div>
  1133. {Answer}
  1134. </div>
  1135. </div>
  1136.  
  1137.  
  1138. {block:IndexPage}
  1139. <div id="permalinktext">
  1140. <div class="permalinktext">
  1141.  
  1142. <b>
  1143. <a href="{Permalink}" title="Permalink">{NoteCountWithLabel}</a>
  1144. <a href="{ReblogURL}"title="Reblog">Reblog</a>
  1145. </b>
  1146. </div>
  1147. </div>
  1148. {/block:IndexPage}
  1149.  
  1150. {/block:Answer}
  1151. <!---------------------------------------------------------->
  1152.  
  1153.  
  1154. <!-------------------------Permapage------------------------>
  1155. {block:PermalinkPagination}
  1156. {block:PermalinkPage}
  1157.  
  1158. <div class="date">
  1159. Posted {DayOfWeek}, {Month} {MonthNumber}, {Year}
  1160.  
  1161. {block:NoteCount}/ With {NoteCountWithLabel}{/block:NoteCount}
  1162.  
  1163. </div>
  1164.  
  1165.  
  1166.  
  1167. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1168.  
  1169.  
  1170. <div id="permpage">
  1171.  
  1172.  
  1173.  
  1174. {block:PostNotes}{PostNotes-16}{/block:PostNotes}
  1175. </div>
  1176. {/block:PermalinkPage}
  1177. {/block:PermalinkPagination}
  1178. </div>
  1179. <!---------------------------------------------------------->
  1180.  
  1181. {/block:Posts}
  1182. </div>
  1183.  
  1184. <!---------------------------------------------------------------------->
  1185.  
  1186.  
  1187. <div id="top"></div>
  1188. <div id="bottom"></div>
  1189. <div id="left"></div>
  1190. <div id="right"></div>
  1191.  
  1192. <!---------------------------------------------------------------------->
  1193.  
  1194. </body>
  1195.  
  1196.  
  1197.  
  1198. </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!