API tools faq
paste
Advertisement
altraviolence

theme 02 - peachy

altraviolence
Jun 28th, 2017
1,192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 28.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. PEACHY theme (02) by PEACHTHMS | peachthms.tumblr.com
  6. V1.1 - new tumblr controls
  7.  
  8. - do not claim this page or any of the code as your own
  9. - do not redistribute this page or any of the code as your own
  10. - do not mix my code with another theme maker's code
  11. - do not remove or edit the credit in anyway; it must remain visible
  12.  
  13. shythemes - minimalistic soundcloud player
  14. shythemes - video resize script
  15.  
  16. -->
  17.    
  18. <head>
  19.    
  20. <title>{Title}</title>
  21.    
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  25.  
  26. <script src="https://use.fontawesome.com/3ef4dfb6e0.js"></script>
  27.  
  28. <script type="text/javascript"
  29. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  30.  
  31. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  32.  
  33. <script>
  34.    (function($){
  35.        $(document).ready(function(){
  36.            $("[title]").style_my_tooltips({
  37.                tip_follows_cursor:true,
  38.                tip_delay_time:200,
  39.                tip_fade_speed:300
  40.            }
  41.                );
  42.        });
  43.    })(jQuery);
  44. </script>
  45.  
  46.  
  47. <!-- SHYTHEMES SOUNDCLOUD PLAYER -->
  48. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  49. <script>
  50. // minimal soundcloud player © shythemes.tumblr
  51. $(document).ready(function(){
  52.    var color = '#acd7bb'; // color of play button (hex)
  53.    $('.soundcloud_audio_player').each(function(){
  54.        $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  55.    });
  56. });
  57. </script>
  58.  
  59. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  60. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  61.  
  62. <link href="https://file.myfontastic.com/fERqfvcDPyuMM9v8BqjjLC/icons.css" rel="stylesheet">
  63.  
  64. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  65. <meta charset="UTF-8">
  66. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  67. <meta name="color:background" content="#ffffff"/>
  68. <meta name="color:text" content="#9d9d9d"/>
  69. <meta name="color:links" content="#686868"/>
  70. <meta name="color:accent1" content="#f0bfb6"/>
  71. <meta name="color:accent2" content="#c09992"/>
  72. <meta name="color:accent3" content="#ffffff"/>
  73. <meta name="text:info1 title" content=""/>
  74. <meta name="text:info1" content=""/>
  75. <meta name="text:info2 title" content=""/>
  76. <meta name="text:info2" content=""/>
  77. <meta name="text:info3 title" content=""/>
  78. <meta name="text:info3" content=""/>
  79. <meta name="text:info4 title" content=""/>
  80. <meta name="text:info4" content=""/>
  81. <meta name="text:info5 title" content=""/>
  82. <meta name="text:info5" content=""/>
  83. <meta name="text:info6 title" content=""/>
  84. <meta name="text:info6" content=""/>
  85. <meta name="text:posts number" content=""/>
  86. <meta name="text:followers number" content=""/>
  87. <meta name="text:following number" content=""/>
  88. <meta name="image:camera1" content=""/>
  89. <meta name="image:camera2" content=""/>
  90. <meta name="image:camera3" content=""/>
  91. <meta name="image:camera4" content=""/>
  92. <meta name="if:vertical photosets" content=""/>
  93. <meta name="if:traditional photosets" content=""/>
  94. <meta name="if:hide tags" content=""/>
  95. <meta name="if:hide captions" content=""/>
  96.  
  97. <style>
  98.  
  99. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  100.     transform: scale(0.5,0.5);
  101. }
  102.    
  103. #s-m-t-tooltip {
  104.     max-width: 200px;
  105.     font-size: 8px;
  106.     background-color: {color:accent1};
  107.     color: #ffffff;
  108.     z-index: 999;
  109.     margin: 10px;
  110.     text-transform: uppercase;
  111.     padding: 2px 7px 3px;
  112. }
  113.  
  114. ::-moz-selection {
  115.     background-color: {color:accent1};
  116.     color: {color:accent3};
  117. }
  118.  
  119. ::selection {
  120.     background-color: {color:accent1};
  121.     color: {color:accent3};
  122. }
  123.  
  124. ::-webkit-scrollbar {
  125.     width: 2px;
  126.     height: 2px;
  127. }
  128.  
  129. ::-webkit-scrollbar-thumb {
  130.     background-color: {color:accent2};
  131. }
  132.        
  133. ::-webkit-scrollbar-track {
  134.     background-color: {color:accent1};
  135. }
  136.  
  137. * {
  138.     padding: 0;
  139.     margin: 0;
  140. }
  141.        
  142. body {
  143.     background-color: {color:background};
  144.     font-family: 'Noto Sans', sans-serif;
  145.     font-size: 10px;
  146.     line-height: 150%;
  147.     color: {color:text};
  148. }
  149.  
  150. img, #youtube_iframe {
  151.    max-width: 100%;
  152.    height: auto;
  153. }
  154.  
  155. #container {
  156.     width: 100%;
  157.     height: 100%;
  158. }
  159.        
  160. .bar {
  161.     width: inherit;
  162.     z-index: 999;
  163.     margin: 0 auto;
  164.     text-align:center;
  165. }
  166.  
  167. .title {
  168.     font-weight: bold;
  169.     font-size: 11px;
  170.     text-transform: uppercase;
  171.     color: {color:accent2};
  172. }        
  173.  
  174. #bartop {
  175.     font-size: 12px;
  176.     padding-top: 12px;
  177.     height: 24px;
  178.     text-transform: uppercase;
  179.     background-color: {color:accent1};
  180.     color: {color:accent3};
  181.     top: 0;
  182.     display: inline-block;
  183. }
  184.        
  185. #bartop a {
  186.     color: {color:accent3};
  187. }
  188.  
  189. #barbot {
  190.     position: absolute;
  191.     background-color: {color:accent1};
  192.     bottom: 0;
  193. }
  194.        
  195. #barbot img {
  196.     width: 20px;
  197. }
  198.  
  199. #dm {
  200.     margin: -19px 19px 0 0;
  201.     float: right;
  202. }
  203.  
  204. #dm li {
  205.     list-style: none;
  206.     font-size: 17px;
  207. }
  208.        
  209. #dmlink {
  210.     float: right;
  211. }
  212.  
  213. #dmlink a {
  214.     border: none;
  215.     padding: 0;
  216. }
  217.        
  218. #navbar {
  219.     display: inline-block;
  220.     text-align: center;
  221. }
  222.        
  223. #cont {
  224.     width: 270px;
  225.     height: 423px;
  226.     position: absolute;
  227.     margin: auto;
  228.     top: 0;
  229.     right: 0;
  230.     bottom: 0;
  231.     left: 0;
  232. }      
  233.  
  234. #content {
  235.     background-color: #ffffff;
  236.     width: 270px;
  237.     height: 351px;
  238.     position: absolute;
  239.     margin: auto;
  240.     top: 0;
  241.     right: 0;
  242.     bottom: 0;
  243.     left: 0;
  244.     overflow-y: auto;
  245. }
  246.            
  247. .tabcontent {
  248.     margin: 0 auto;
  249.     width: 270px;
  250.     margin-bottom: 10px;
  251. }
  252.        
  253. .tabcontent h2 {
  254.     text-transform: uppercase;
  255.     text-align: center;
  256.     color: {color:accent2};
  257.     margin: 15px 0;
  258. }
  259.        
  260. #postcol {
  261.     margin: 0 auto;
  262.     width: 250px;
  263.     margin-top: 10px;
  264. }
  265.        
  266. #posts {
  267.     margin: 0 auto;
  268.     background-color: #ffffff;
  269.     width: 250px;
  270.     margin-bottom: 50px;
  271. }
  272.  
  273. #posttop {
  274.     margin: 7px 0;
  275. }
  276.  
  277. #posttop img {
  278.     vertical-align: middle;
  279.     margin-right: 7px;
  280.     border-radius: 100%;
  281.     -moz-border-radius: 100%;
  282.     -webkit-border-radius: 100%;
  283. }
  284.        
  285. #postinfo {
  286.     text-transform: uppercase;
  287.     font-size: 8px;
  288.     margin-top: 5px;
  289. }
  290.  
  291. #postinfo a {
  292.     color: {color:accent2};
  293.     -webkit-transition: all 0.8s ease;
  294.     -moz-transition: all 0.8s ease;
  295.     -o-transition: all 0.8s ease;
  296.     transition: all 0.8s ease;
  297. }
  298.  
  299. #postinfo a:hover {
  300.     color: {color:accent1};
  301.     -webkit-transition: all 0.8s ease;
  302.     -moz-transition: all 0.8s ease;
  303.     -o-transition: all 0.8s ease;
  304.     transition: all 0.8s ease;
  305. }
  306.  
  307. #tags {
  308.     font-size: 8px;
  309.     {block:ifhidetags}
  310.     display: none;
  311.     {/block:ifhidetags}
  312. }
  313.  
  314. #tags a {
  315.     margin-right: 5px;
  316. }
  317.        
  318. #postleft {
  319.     float: left;
  320. }
  321.  
  322. #postright {
  323.     float: right;
  324. }
  325.  
  326. #postright i {
  327.     font-size: 6px;
  328. }      
  329.  
  330. #pagination {
  331.     margin: 0 auto;
  332.     text-align: center;
  333.     position: absolute;
  334.     margin-left: 9px;
  335. }
  336.        
  337. #notes {
  338.     font-size: 8px;
  339.     text-transform: uppercase;
  340.     font-weight: bold;
  341.     height: 150px;
  342.     margin: 20px 0 0 -10px;
  343.     overflow-y: scroll;
  344. }
  345.        
  346. #notes a {
  347.     color: {color:accent1};
  348. }
  349.        
  350. #notes ol {
  351.     list-style: none;
  352. }
  353.  
  354. #notes li {
  355.     padding: 3px 0;
  356. }
  357.        
  358. #notes img {
  359.     display: none;
  360. }
  361.        
  362. #quote {
  363.     margin-top: 5px;
  364.     font-family: 'Times New Roman', serif;
  365.     font-size: 12px;
  366.     font-style: italic;
  367. }
  368.  
  369. #source {
  370.     margin-top: -7px;
  371. }
  372.  
  373. #label {
  374.     text-transform: uppercase;
  375.     font-weight: normal;
  376.     display: inline-block;
  377. }
  378.        
  379. #line {
  380.     padding: 5px;
  381.     font-style: none;
  382. }
  383.  
  384. #navigation {
  385.     margin: 0 auto;
  386.     width: calc(100%-50px);
  387.     padding: 0 15px;
  388.     display: inline-block;
  389.     margin-top: -3px;
  390. }
  391.  
  392. #navlinks {
  393.     margin: 0 auto;
  394.     padding: 5px;
  395.     height: 285px;
  396. }
  397.  
  398. #navigation li {
  399.     text-align: center;
  400.     list-style: none;
  401.     margin-bottom: 15px;
  402.     padding: 10px;
  403.     border: 2px solid {color:accent1};
  404.     font-size: 9px;
  405.     text-transform: uppercase;
  406. }
  407.  
  408. #navigation a {
  409.     color: {color:accent1};
  410. }
  411.  
  412. #navigation a:hover {
  413.     color: {color:accent2};
  414.     -webkit-transition: all 0.8s ease;
  415.     -moz-transition: all 0.8s ease;
  416.     -o-transition: all 0.8s ease;
  417.     transition: all 0.8s ease;
  418. }
  419.  
  420. #navleft {
  421.     width: 110px;
  422.     float: left;
  423. }
  424.  
  425. #navright {
  426.     width: 110px;
  427.     float: right;
  428. }
  429.  
  430. #camera {
  431.     margin: 0 auto;
  432.     width: calc(100%-50px);
  433.     padding: 5px 15px 0;
  434. }
  435.  
  436. #top {
  437.     width: 240px;
  438.     height: 240px;
  439.     position: fixed;
  440. }
  441.  
  442. #bot {
  443.     margin-top: 263px;
  444.     width: 240px;
  445.     height: 75px;
  446.     position: fixed;
  447.     text-align: center;
  448. }
  449.  
  450. #big1, #big2, #big3, #big4 {
  451.     display: none;
  452.     max-width: 240px;
  453.     max-height: 240px;
  454.     position: fixed;
  455. }
  456.  
  457. #big1 {
  458.     display: block;
  459. }
  460.  
  461. #small1 img, #small2 img, #small3 img, #small4 img {
  462.     width: 50px;
  463.     height: 50px;
  464.     margin: -2px 3px 0;
  465. }
  466.  
  467. #small1 img:hover, #small2 img:hover, #small3 img:hover, #small4 img:hover {
  468.     cursor: pointer;
  469. }
  470.  
  471. #activity {
  472.     margin: 0 auto;
  473.     width: calc(100%-50px);
  474.     padding: 0 15px;
  475. }
  476.  
  477. #activity ul {
  478.     padding-top: 15px;
  479.     height: 270px;
  480.     overflow-y: scroll;
  481. }
  482.  
  483. #activity li {
  484.     list-style: none;
  485.     margin-bottom: 25px;
  486. }
  487.  
  488. #activity span {
  489.     font-weight: bold;
  490.     text-transform: uppercase;
  491.     font-size: 8px;
  492.     padding: 8px;
  493.     color: {color:accent1};
  494.     border: 2px solid {color:accent1};
  495.     margin-right: 10px;
  496. }
  497.  
  498. #user {
  499.     margin: 0 auto;
  500.     width: calc(100%-50px);
  501.     padding: 0 15px;
  502. }
  503.  
  504. #user p {  
  505.     padding: 15px 0;
  506.     border-bottom: 1px solid {color:accent1};
  507. }
  508.  
  509. #usertop {
  510.     display: inline-block;
  511. }
  512.  
  513. #userimg {
  514.     float: left;
  515. }
  516.  
  517. #userimg img {
  518.     border-radius: 100%;
  519.     -moz-border-radius: 100%;
  520.     -webkit-border-radius: 100%;
  521. }
  522.  
  523. #userstats {
  524.     margin-top: -7px;
  525.     float: right;
  526. }
  527.  
  528. #userstats li {
  529.     text-align: center;
  530.     display: inline-block;
  531.     font-weight: bold;
  532.     margin: 0 5px;
  533. }
  534.  
  535. #userstats span {
  536.     display: block;
  537.     font-weight: normal;
  538. }
  539.  
  540. #userstats h2 {
  541.     margin: 10px 0 0 17px;
  542.     font-size: 10px;
  543. }
  544.  
  545. #userstats a {
  546.     padding: 3px 47px;
  547.     text-transform: uppercase;
  548.     color: {color:accent1};
  549.     border: 1px solid {color:accent1};
  550.     -webkit-transition: all 0.8s ease;
  551.     -moz-transition: all 0.8s ease;
  552.     -o-transition: all 0.8s ease;
  553.     transition: all 0.8s ease;
  554. }
  555.  
  556. #userstats a:hover {
  557.     padding: 3px 47px;
  558.     text-transform: uppercase;
  559.     color: {color:accent2};
  560.     border: 1px solid {color:accent2};
  561.     -webkit-transition: all 0.8s ease;
  562.     -moz-transition: all 0.8s ease;
  563.     -o-transition: all 0.8s ease;
  564.     transition: all 0.8s ease;
  565. }
  566.  
  567. #userbot {
  568.     margin-left: -15px;
  569. }
  570.  
  571. #userbot li {
  572.     list-style: none;
  573.     margin: 13px 0;
  574. }
  575.  
  576. #userbot span {
  577.     text-transform: uppercase;
  578.     font-weight: bold;
  579.     color: {color:accent2};
  580. }
  581.  
  582. #askbox {
  583.     padding-left: 10px;
  584. }
  585.  
  586. #asker {
  587.     font-size: 10px;
  588.     margin: 9px 0;
  589.     text-transform: lowercase;
  590. }
  591.  
  592. #asker a {
  593.     font-weight: normal;
  594. }
  595.  
  596. #question {
  597.     margin: 0 auto;
  598.     background-color: {color:accent1};
  599.     color: {color:accent3};
  600.     padding: 10px;
  601.     width: 230px;
  602.     position: relative;
  603.     border-radius: 3px;
  604.     -moz-border-radius: 3px;
  605.     -webkit-border-radius: 3px;
  606. }
  607.  
  608. #question:after {
  609.     bottom: 100%;
  610.     left: 14px;
  611.     border: solid transparent;
  612.     content: " ";
  613.     height: 0;
  614.     width: 0;
  615.     position: absolute;
  616.     pointer-events: none;
  617.     border-bottom-color: {color:accent1};
  618.     border-width: 4px;
  619.     margin-left: -10px;  
  620. }
  621.    
  622. #question h1 {
  623.     font-size: 11px;
  624. }
  625.    
  626. #answer {
  627.     margin-top: 5px;
  628. }
  629.  
  630. #label {
  631.     text-transform: uppercase;
  632.     font-weight: bold;
  633. }
  634.        
  635. #line {
  636.     max-width: 75%;
  637.     padding: 5px;
  638.     margin: 10px 0;
  639.     font-style: none;
  640.     border-radius: 3px;
  641.     -moz-border-radius: 3px;
  642.     -webkit-border-radius: 3px;
  643. }
  644.        
  645. #line:nth-of-type(even) {
  646.     position: relative;
  647.     float: right;
  648.     clear: both;
  649.     background-color: {color:accent2};
  650.     color: {color:accent3};
  651. }
  652.  
  653. #line:nth-of-type(even):after {
  654.     left: 100%;
  655.     top: 90%;
  656.     border: solid transparent;
  657.     content: " ";
  658.     height: 0;
  659.     width: 0;
  660.     position: absolute;
  661.     pointer-events: none;
  662.     border-left-color: {color:accent2};
  663.     border-width: 4px;
  664.     margin-top: -10px;
  665. }
  666.  
  667. #line:nth-of-type(odd) {
  668.     position: relative;
  669.     float: left;
  670.     clear: both;
  671.     background-color: {color:accent1};
  672.     color: {color:accent3};
  673. }
  674.  
  675. #line:nth-of-type(odd):after {
  676.     right: 100%;
  677.     top: 90%;
  678.     border: solid transparent;
  679.     content: " ";
  680.     height: 0;
  681.     width: 0;
  682.     position: absolute;
  683.     pointer-events: none;
  684.     border-right-color: {color:accent1};
  685.     border-width: 4px;
  686.     margin-top: -10px;    
  687. }
  688.  
  689. #caption {
  690.     {block:ifhidecaptions}
  691.     display: none;
  692.     {/block:ifhidecaptions}
  693. }
  694.  
  695. a {
  696.     font-weight: bold;
  697.     text-decoration: none;
  698.     color: {color:links};
  699.     -webkit-transition: all 0.8s ease;
  700.     -moz-transition: all 0.8s ease;
  701.     -o-transition: all 0.8s ease;
  702.     transition: all 0.8s ease;
  703. }
  704.        
  705. a:hover {
  706.     color: {color:accent1};
  707.     -webkit-transition: all 0.8s ease;
  708.     -moz-transition: all 0.8s ease;
  709.     -o-transition: all 0.8s ease;
  710.     transition: all 0.8s ease;
  711. }
  712.  
  713. big, small, sub, pre, blockquote {
  714.     font-size: 10px;
  715. }
  716.  
  717. blockquote {
  718.     border-left: 1px solid {color:accent1};
  719.     padding-left: 7px;
  720.     margin: 3px 0;
  721. }
  722.        
  723. ul, ol {
  724.     padding-left: 15px;
  725. }
  726.  
  727. .text p, ul {
  728.     margin-top: 10px;
  729. }  
  730.  
  731. .tabs {
  732.     width: 100%;
  733.     height: 42px;
  734.     margin-left: 0px;
  735.     display: inline-block;
  736. }
  737.    
  738. .tab-links {
  739.     width: 270px;
  740.     margin: 0 auto;
  741. }
  742.    
  743. .tab-links:after {
  744.     display: block;
  745.     clear: both;
  746.     content: '';
  747. }
  748.  
  749. .tab-links li {
  750.     list-style: none;
  751.     font-size: 25px;
  752.     display: inline-block;
  753.     margin: 4px 5px 0 5px;
  754. }
  755.  
  756. .tab-links a {
  757.     color:{color:accent3};
  758.     padding: 7px;
  759.     display: inline-block;
  760.     transition: all linear 0.15s;
  761.     border-bottom: 1px solid transparent;
  762. }
  763.  
  764. .tab-links a:hover {
  765.     text-decoration: none;
  766.     cursor: pointer;
  767. }
  768.  
  769. li.active a, li.active a:hover {
  770.     background-color: transparent;
  771.     color: {color:accent2};
  772.     -webkit-transition: all .8s;
  773.     -moz-transition: all .8s;
  774.     -o-transition: all .8s;
  775.     -ms-transition: all .8s;    
  776.     transition: all .8s;
  777. }
  778.  
  779. .tab-content {
  780.     margin-top: 10px;
  781. }
  782.  
  783. .tab {
  784.     display: none;
  785. }
  786.  
  787. .tab.active {
  788.     display: block;
  789. }
  790.  
  791. .clear {
  792.     clear: both;
  793. }
  794.  
  795. #credit {
  796.     text-transform: uppercase;
  797.     font-size: 8px;
  798.     letter-spacing: 2px;
  799.     bottom: 15px;
  800.     right: 15px;
  801.     position: fixed;
  802. }
  803.  
  804. #credit a {
  805.     color: {color:accent1};
  806.     text-decoration: none;
  807. }
  808.  
  809. #credit a:hover {
  810.     color: {color:accent2};
  811.     -webkit-transition: all .8s;
  812.     -moz-transition: all .8s;
  813.     -o-transition: all .8s;
  814.     -ms-transition: all .8s;    
  815.     transition: all .8s;
  816. }
  817.  
  818. </style>
  819. </head>
  820. <body>
  821. <div id="container">
  822.  
  823.  
  824. <div id="cont">
  825.  
  826. <div class="bar" id="bartop">
  827.  
  828.     {block:Pagination}
  829.     <div id="pagination">
  830.     {block:PreviousPage}<a href="{PreviousPage}" title="previous"><i class="fa fa-chevron-left" aria-hidden="true"></i></i></a>{/block:PreviousPage}
  831.     {block:NextPage}<a href="{NextPage}" title="forward"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>{/block:NextPage}
  832.     </div>
  833.     {/block:Pagination}
  834.  
  835.     <a href="/">@{name}</a>
  836.    
  837.     <div id="dm" class="tabs">
  838.         <ul class="tab-links">
  839.             <li class="active" id="dmlink">
  840.             <a href="#tab6" title="{AskLabel}"><i class="i-dm"></i></a><li>
  841.         </ul>
  842.     </div>
  843.    
  844. <div class="clear"></div>
  845. </div>
  846.  
  847. <div id="content">
  848.  
  849.  
  850.  
  851.  
  852.  
  853. <!-- --------------------------- TABS -------------------------- -->
  854.  
  855.  
  856. <div class="tabs">
  857.  
  858.  
  859. <!-- --------------------------- TAB 1 -------------------------- -->
  860.  
  861. <div class="tab-content">
  862. <div id="tab1" class="tab active">
  863.            
  864. <div id="postcol">
  865.        
  866. {block:Posts}
  867.  
  868. {block:ContentSource}<!-- {SourceURL}
  869. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  870. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  871. {/block:ContentSource}
  872. <!-- {block:NoRebloggedFrom}
  873. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  874. {/block:NoRebloggedFrom} -->
  875.  
  876. <div id="posts">
  877.  
  878. <div id="posttop">
  879.     {block:RebloggedFrom}
  880.     <img src="{ReblogParentPortraitURL-24}"> <a href="{ReblogParentURL}">{ReblogParentName}</a>
  881.     {/block:RebloggedFrom}
  882.    
  883.     {block:NotReblog}
  884.     <img src="{PortraitURL-24}"> <a href="{ReblogParentURL}">{Name}</a>
  885.     {/block:NotReblog}
  886. </div>
  887.  
  888. {block:Text}
  889. {block:Title}<div class="title">{Title}</div>{/block:Title}
  890. <div class="text">{Body}</div>
  891. {/block:Text}
  892.                                    
  893. {block:Photo}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a>
  894. {/block:Photo}
  895.  
  896. {block:ifverticalphotosets}
  897. {block:Photoset}
  898. {block:Photos}
  899. <img src="{PhotoURL-250}" width="250" />
  900. {/block:Photos}
  901. {/block:Photoset}
  902. {/block:ifverticalphotosets}
  903.  
  904. {block:iftraditionalphotosets}
  905. {block:Photoset}
  906. {Photoset}
  907. {/block:Photoset}
  908. {/block:iftraditionalphotosets}
  909.  
  910. {block:Video}
  911. <div class="video">
  912. {Video-250}
  913. </div>
  914. {/block:Video}
  915.                                    
  916. {block:Quote}
  917. <div id="quote">"{Quote}"</div>
  918. {block:Source}<div id="source"><br>- {Source}</div>{/block:Source}
  919. {/block:Quote}
  920.                                    
  921. {block:Link}
  922. <div class="title"><a href="{URL}">{Name}</a></div>
  923. {block:Description}<div class="text">{Description}</div>{/block:Description}
  924. {/block:Link}
  925.                                    
  926. {block:Chat}
  927. {block:Title}<h1>{Title}</h1>{/block:Title}
  928. {block:Lines}<div id="line">
  929. {block:Label}<div id="label">{Label}</div>{/block:Label}
  930. <span>{Line}<br></span></div>{/block:Lines}
  931. <div class="clear"></div>
  932. {/block:Chat}
  933.                                    
  934. {block:Audio}
  935. {AudioPlayer}
  936. {block:TrackName}Track: {TrackName}<br>{/block:TrackName}
  937. {block:Artist}Artist: {Artist}<br>{/block:Artist}
  938. {block:Album}Album: {Album}<br>{/block:Album}
  939. {/block:Audio}
  940.  
  941. {block:Answer}
  942. <div id="ask">
  943. <div id="asker">{Asker} sent a message!</div>
  944. <div id="question">{Question}</div></div>
  945. <div id="answer">{Answer}</div>
  946. {/block:Answer}
  947.  
  948. {block:Caption}
  949. <div id="caption">{Caption}</div>
  950. {/block:Caption}
  951.                                    
  952.                                    
  953. <div id="postinfo">
  954.                                    
  955. <div id="postleft">
  956. {block:Date}<a href="{Permalink}" title="{DayOfMonthWithZero} {ShortMonth}">{TimeAgo}</a>{/block:Date}
  957.  
  958. <div id="tags">
  959. {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}
  960. </div>
  961.  
  962. </div>
  963.                                        
  964. {block:Date}
  965. <div id="postright">
  966. {block:NoteCount}<a href="{Permalink}"><i class="i-heart"></i> {NoteCount}</a>{/block:NoteCount}
  967. </div>
  968. {/block:Date}
  969.                                        
  970. </div>
  971.  
  972. <div class="clear"></div>
  973.  
  974. {block:PostNotes}
  975. <div id="notes">{PostNotes}</div>
  976. {/block:PostNotes}
  977.                                    
  978. </div>
  979.                    
  980. {/block:Posts}
  981.  
  982.  
  983.  
  984. </div>
  985.  
  986. </div>
  987.            
  988. <!-- -------------------------- TAB 2 -------------------------- -->
  989.  
  990. <div id="tab2" class="tab">
  991.     <div class="tabcontent">
  992.        
  993.         <h2>explore</h2>
  994.        
  995.         <div id="navigation">
  996.        
  997.             <!--
  998.            to add more links
  999.            copy and paste
  1000.            <li><a href="#">link</a></a>
  1001.            it will automatically scroll if you
  1002.            exceed five links on each side
  1003.            
  1004.            make sure to keep everything between <ul> and </ul>
  1005.            
  1006.            -->
  1007.            
  1008.             <div id="navlinks">
  1009.                 <div id="navleft">
  1010.                 <ul>
  1011.                     <li><a href="#">link</a></a>
  1012.                     <li><a href="#">link</a></a>
  1013.                     <li><a href="#">link</a></a>
  1014.                     <li><a href="#">link</a></a>
  1015.                     <li><a href="#">link</a></a>
  1016.                 </ul>
  1017.             </div>
  1018.            
  1019.             <div id="navright">
  1020.                 <ul>
  1021.                     <li><a href="#">link</a></a>
  1022.                     <li><a href="#">link</a></a>
  1023.                     <li><a href="#">link</a></a>
  1024.                     <li><a href="#">link</a></a>
  1025.                     <li><a href="#">link</a></a>
  1026.                 </ul>
  1027.             </div>
  1028.             </div>
  1029. <div class="clear"></div>
  1030.         </div>
  1031.     </div>
  1032. </div>
  1033.        
  1034.        
  1035. <!-- -------------------------- TAB 3 -------------------------- -->
  1036.  
  1037. <div id="tab3" class="tab">
  1038.     <div class="tabcontent">
  1039.        
  1040.         <div id="camera">
  1041.            
  1042.             <div id="top">
  1043.                 <img id="big1" src="{image:camera1}">
  1044.                 <img id="big2" src="{image:camera2}">
  1045.                 <img id="big3" src="{image:camera3}">
  1046.                 <img id="big4" src="{image:camera4}">
  1047.             </div>
  1048.            
  1049.             <div id="bot">
  1050.                 <a id="small1"><img src="{image:camera1}"></a>
  1051.                 <a id="small2"><img src="{image:camera2}"></a>
  1052.                 <a id="small3"><img src="{image:camera3}"></a>
  1053.                 <a id="small4"><img src="{image:camera4}"></a>
  1054.             </div>
  1055.  
  1056.         </div>
  1057.     </div>
  1058. </div>
  1059.  
  1060.        
  1061. <!-- -------------------------- TAB 4 -------------------------- -->
  1062.  
  1063. <div id="tab4" class="tab">
  1064.     <div class="tabcontent">
  1065.         <h2>activity</h2>
  1066.         <div id="activity">
  1067.             <!--
  1068.            to add more links just copy and paste
  1069.            <li><span>date</span> update</li>
  1070.            
  1071.            you can use this space for updates/to do lists/wips/etc
  1072.            whatever you can think of!
  1073.            
  1074.            make sure to keep everything between <ul> and </ul>
  1075.            
  1076.            -->
  1077.             <ul>
  1078.                 <li><span>date</span> update</li>
  1079.                 <li><span>date</span> update</li>
  1080.                 <li><span>date</span> update</li>
  1081.                 <li><span>date</span> update</li>
  1082.                 <li><span>date</span> update</li>
  1083.                 <li><span>date</span> update</li>
  1084.                 <li><span>date</span> update</li>
  1085.                 <li><span>date</span> update</li>
  1086.                 <li><span>date</span> update</li>
  1087.             </ul>
  1088.            
  1089.         </div>
  1090.        
  1091.     </div>
  1092. </div>
  1093.  
  1094.  
  1095. <!-- -------------------------- TAB 5 -------------------------- -->
  1096.  
  1097. <div id="tab5" class="tab">
  1098.     <div class="tabcontent">
  1099.        
  1100.         <div id="user">
  1101.             <div id="usertop">
  1102.                 <div id="userimg">
  1103.                     <img src="{PortraitURL-64}">
  1104.                 </div>
  1105.                
  1106.                 <div id="userstats">
  1107.                     <ul>
  1108.                         <li>{text:posts number}<span>posts</span></li>
  1109.                         <li>{text:followers number}<span>followers</span></li>
  1110.                         <li>{text:following number}<span>following</span></li>
  1111.                     </ul>
  1112.                    
  1113.                     <h2><a href="http://tumblr.com/follow/{Name}">+ follow</a></h2>
  1114.                    
  1115.                 </div>
  1116.                
  1117.                 <div class="clear"></div>
  1118.                
  1119.  
  1120.             </div>
  1121.            
  1122.             <p>{Description}</p>
  1123.            
  1124.             <div id="userbot">
  1125.                 <ul>
  1126.                     <li><span>{text:info1 title}: </span> {text:info1}</li>
  1127.                     <li><span>{text:info2 title}:</span> {text:info2}</li>
  1128.                     <li><span>{text:info3 title}:</span> {text:info3}</li>
  1129.                     <li><span>{text:info4 title}:</span> {text:info4}</li>
  1130.                     <li><span>{text:info5 title}:</span> {text:info5}</li>
  1131.                     <li><span>{text:info6 title}:</span> {text:info6}</li>
  1132.                 </ul>
  1133.             </div>
  1134.         </div>
  1135.        
  1136.     </div>
  1137. </div>
  1138.  
  1139. <!-- -------------------------- TAB 6 -------------------------- -->
  1140.  
  1141. <div id="tab6" class="tab">
  1142.     <div class="tabcontent">
  1143.     <h2>{AskLabel}</h2>
  1144.     <div id="askbox">
  1145.     <iframe frameborder="0" scrolling="no" width="250px" height="230" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  1146.     </div>
  1147.     </div>
  1148. </div>
  1149.  
  1150.  
  1151.        
  1152. <!-- END OF TABS -->
  1153.  
  1154. </div>
  1155. </div>
  1156. </div>
  1157.  
  1158.  
  1159. <div class="bar" id="barbot">
  1160.        
  1161.     <div id="navbar">
  1162.         <div class="tabs">
  1163.             <ul class="tab-links">
  1164.                 <li class="active" style="margin-left:-30px">
  1165.                 <a href="#tab1"><i class="i-home"></i></a></li>
  1166.                 <li><a href="#tab2"><i class="i-search"></i></a></li>
  1167.                 <li><a href="#tab3"><i class="i-post"></i></a></li>
  1168.                 <li><a href="#tab4"><i class="i-heart"></i></a></li>
  1169.                 <li><a href="#tab5"><i class="i-user"></i></a></li>
  1170.             </ul>
  1171.         </div>
  1172.     </div>    
  1173.        
  1174. </div>
  1175.  
  1176.  
  1177. </div>
  1178. </div>
  1179. </div>
  1180. </div>
  1181.  
  1182.  
  1183. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1184.  
  1185. <script>
  1186. $(document).ready(function() {
  1187.     $('.tabs .tab-links a').on('click', function(e)  {
  1188.         var currentAttrValue = $(this).attr('href');
  1189.  
  1190.         // Show/Hide Tabs
  1191.         $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1192.  
  1193.         // Change/remove current tab to active
  1194.         $(this).parent('li').addClass('active').siblings().removeClass('active');
  1195.  
  1196.         e.preventDefault();
  1197.     });
  1198. });
  1199. </script>
  1200.  
  1201. <script>
  1202. $(document).ready(function() {
  1203.   $('#filterOptions li a').click(function() {
  1204.     // fetch the class of the clicked item
  1205.     var ourClass = $(this).attr('class');
  1206.  
  1207.     // reset the active class on all the buttons
  1208.     $('#filterOptions li').removeClass('active');
  1209.     // update the active state on our clicked button
  1210.     $(this).parent().addClass('active');
  1211.  
  1212.     if(ourClass == 'all') {
  1213.       // show all our items
  1214.       $('#ourHolder').children('div.item').show();
  1215.     }
  1216.     else {
  1217.       // hide all elements that don't share ourClass
  1218.       $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1219.       // show all elements that do share ourClass
  1220.       $('#ourHolder').children('div.' + ourClass).show();
  1221.     }
  1222.     return false;
  1223.   });
  1224. });
  1225. </script>
  1226.  
  1227.  
  1228.  
  1229.    
  1230. </div>
  1231.  
  1232. <script type="text/javascript">
  1233.  
  1234. document.getElementById("small1").onclick = function() {
  1235.     document.getElementById("big1").style.display = "block";
  1236.     document.getElementById("big2").style.display = "none";
  1237.     document.getElementById("big3").style.display = "none";
  1238.     document.getElementById("big4").style.display = "none";
  1239. }
  1240.  
  1241. document.getElementById("small2").onclick = function() {
  1242.     document.getElementById("big1").style.display = "none";
  1243.     document.getElementById("big2").style.display = "block";
  1244.     document.getElementById("big3").style.display = "none";
  1245.     document.getElementById("big4").style.display = "none";
  1246. }
  1247.  
  1248. document.getElementById("small3").onclick = function() {
  1249.     document.getElementById("big1").style.display = "none";
  1250.     document.getElementById("big2").style.display = "none";
  1251.     document.getElementById("big3").style.display = "block";
  1252.     document.getElementById("big4").style.display = "none";
  1253. }
  1254.  
  1255. document.getElementById("small4").onclick = function() {
  1256.     document.getElementById("big1").style.display = "none";
  1257.     document.getElementById("big2").style.display = "none";
  1258.     document.getElementById("big3").style.display = "none";
  1259.     document.getElementById("big4").style.display = "block";
  1260. }
  1261.    
  1262. </script>
  1263.  
  1264. <div id="credit">
  1265. <a href="http://peachthms.tumblr.com" title="theme by peachthms">< / ></a>
  1266. </div>
  1267.  
  1268.  
  1269. </body>
  1270. </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!