API tools faq
paste
glam0urkills

theme「HEALER」by imjaebumx

glam0urkills
Mar 6th, 2016
851
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 28.13 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. theme by @imjaebumx
  8.     heavy editing is allowed
  9.             as long as all credits are kept intact.
  10.            
  11.    
  12.     base theme kindly provided by @neonbikethemes
  13. -->
  14.  
  15. {block:Description}
  16. <meta name="description" content="{MetaDescription}" />
  17. {/block:Description}
  18. <meta charset="utf-8">
  19. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  20. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. <meta name="image:sidebar image" content=""/>
  25.  
  26. <meta name="color:Background" content="#ffffff" />
  27. <meta name="color:links" content="#000000" />
  28. <meta name="color:links hover" content="#fad7e1" />
  29. <meta name="color:text" content="#000000" />
  30. <meta name="color:posts" content="#ffffff" />
  31. <meta name="color:borders" content="#f8f8f8" />
  32.  
  33. <meta name="text:about tab title" content="about me" />
  34. <meta name="text:about me" content="this is the text of your about me section. feel free to write whatever you want." />
  35. <meta name="text:askbox tab title" content="ask away" />
  36. <meta name="text:your url" content="your url here, without .tumblr.com. ex: jbxthemes" />
  37. <meta name="text:navigate tab title" content="links" />
  38. <meta name="text:askbox tab title" content="ask away" />
  39.  
  40. <meta name="text:Tab 1 Title" content="home" />
  41. <meta name="text:Tab 2 Title" content="about" />
  42. <meta name="text:Tab 3 Title" content="message" />
  43. <meta name="text:Tab 4 Title" content="navigate" />
  44. <meta name="text:Tab 5 Title" content="archive" />
  45.  
  46. <meta name="text:Link1" content="/" />
  47. <meta name="text:Link1 Title" content="link" />
  48. <meta name="text:Link2" content="/" />
  49. <meta name="text:Link2 Title" content="link" />
  50. <meta name="text:Link3" content="/" />
  51. <meta name="text:Link3 Title" content="link" />
  52. <meta name="text:Link4" content="/" />
  53. <meta name="text:Link4 Title" content="link" />
  54. <meta name="text:Link5" content="/" />
  55. <meta name="text:Link5 Title" content="link" />
  56. <meta name="text:Link6" content="/" />
  57. <meta name="text:Link6 Title" content="link" />
  58.  
  59. <meta name="if:lazy load" content="0"/>
  60. <meta name="if:hide captions" content="1"/>
  61. <meta name="if:back to top" content="0"/>
  62.  
  63.  
  64.  
  65. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  66.  
  67. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  68.  
  69. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  70.  
  71. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  72.  
  73. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  74.  
  75. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  76.    <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  77.    <script>
  78.    (function($){
  79.    $(document).ready(function(){
  80.    $("a[title]").style_my_tooltips({
  81.    tip_follows_cursor:true,
  82.    tip_delay_time:90,
  83.    tip_fade_speed:600,
  84.    attribute:"title"
  85.    });
  86.    });
  87.    })(jQuery);
  88.    </script>
  89.    
  90.    
  91. <!------ LAZY LOAD ------>
  92.  
  93. {block:Iflazyload}<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  94. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  95. <script type="text/javascript" charset="utf-8">
  96. var $j = jQuery.noConflict();
  97. $j(function() {
  98. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  99. $j("img").lazyload({
  100. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  101. effect: "fadeIn",
  102. });
  103. });
  104. </script>{/block:Iflazyload}
  105.  
  106. <!------ HIDE POST NOTES ----->
  107.  
  108. <script>$(document).ready(function(){
  109.    $(".postnotes").hide();
  110.        $(".viewnotes").show();$('.viewnotes').toggle(function(){
  111.            $(".postnotes").slideDown(function(){});
  112.                },function(){
  113.            $(".postnotes").slideUp(function(){});
  114.        });
  115.    });</script>
  116.    
  117. <!---- SMOOTH SCROLL SCRIPT BY KRYOGENIX.ORG ----->
  118.  
  119. {block:ifbacktotop}<script type="text/javascript" src="http://kryogenix.org/code/browser/smoothscroll/smoothscroll.js"></script>{/block:ifbacktotop}
  120.  
  121.  
  122.  
  123.  
  124. <style type="text/css">
  125.  
  126. /* ---------------------------- GENERAL ----------------------------- */
  127.  
  128. /* -------- TUMBLR CONTROLS ------ */
  129.  
  130.  
  131. iframe#tumblr_controls {
  132.    position:fixed !important;
  133.    margin-top:10px !important;
  134.    margin-right:10px !important;
  135.    opacity:0.4 !important;
  136.    z-index:99999;
  137.    filter: invert(1);
  138.    -webkit-filter: invert(1);
  139.    -moz-filter: invert(1);
  140.    -o-filter: invert(1);
  141.    -ms-filter: invert(1);
  142. }
  143.  
  144. .tmblr-iframe, #tumblr_controls, tmblr-iframe tmblr-iframe--desktop-logged-in-controls, .iframe-controls--desktop{
  145.    position:fixed !important;
  146.    top:10px !important;
  147.    right:10px !important;
  148.    opacity:0.4 !important;
  149.    z-index:9999999 !important;
  150.    -webkit-filter:invert(70%);
  151.    -moz-filter:invert(70%);
  152.    -o-filter:invert(70%);
  153.    -ms-filter:invert(70%);
  154.    filter:invert(70%);
  155. }
  156.  
  157.  
  158. /* -------- SELECTION TOOL ------- */
  159.  
  160. ::-moz-selection {
  161.    background: {color:borders};
  162.    color: {color:text};
  163. }
  164.  
  165. ::selection {
  166.    background: {color:borders};
  167.    color: {color:text};
  168. }
  169.  
  170. /* -------- SCROLLBAR ------- */
  171.  
  172. ::-webkit-scrollbar {width:11px;height:11px;background:{color:borders};}
  173. ::-webkit-scrollbar-thumb {background:{color:links hover};}
  174. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {border:5px solid {color:background}; }
  175.  
  176. /* ------- TOOLTIPS ------ */
  177.  
  178. #s-m-t-tooltip {
  179.    max-width:300px;
  180.    margin:10px 0px 0px 10px;
  181.    background-color:{color:bakground};
  182.    font:8px 'Calibri';
  183.    text-transform:uppercase;
  184.    letter-spacing:2px;
  185.    color:{color:text};
  186.    z-index:999999999999999999999999999999999999;
  187.    }
  188.  
  189. /* -------- BASICS ------- */
  190.  
  191. body {
  192.    background:{color:Background};
  193.    color: {color:text};
  194.    font-family: calibri, helvetica, arial;
  195.    font-size: 11px;
  196.    margin: 0;
  197.    padding: 0;
  198.    word-wrap: break-word;
  199.    line-height:150%;
  200. }
  201.  
  202. a {
  203.    color: {color:links};
  204.    text-decoration: none;
  205.    -webkit-transition: all .8s;
  206.    -moz-transition: all .8s;
  207.    -o-transition: all .8s;
  208.    -ms-transition: all .8s;    
  209.    transition: all .8s;
  210. }
  211.  
  212. a:hover{
  213.    color:{color:links hover};
  214.    cursor:help;
  215.    -webkit-transition: all .8s;
  216.    -moz-transition: all .8s;
  217.    -o-transition: all .8s;
  218.    -ms-transition: all .8s;    
  219.    transition: all .8s;
  220. }
  221.  
  222. blockquote {
  223.    border-left: 1px solid {color:borders};
  224.    margin: 10px;
  225.    padding-left:25px;
  226.    padding-top:3px;
  227.    padding-bottom:3px;
  228. }
  229.  
  230. blockquote blockquote {
  231.    border-left:1px solid {color:links hover};
  232. }
  233.  
  234. blockquote blockquote blockquote {
  235.    border-left:1px solid {color:borders};
  236. }
  237.  
  238. blockquote blockquote blockquote blockquote{
  239.    border-left:1px solid {color:links hover};
  240. }
  241.  
  242. iframe, img, embed, object, video {
  243.    max-width: 100%;
  244. }
  245.  
  246. p{
  247.    margin-bottom:10px;
  248. }
  249.  
  250. img {
  251.    height: auto;
  252.    width:auto;
  253.    max-width:100%;
  254. }
  255.  
  256. h1{
  257.    text-transform:uppercase;
  258.    font-size:10px;
  259.    letter-spacing:2px;
  260.    font-weight:bold;
  261. }
  262.  
  263. ul{
  264.    list-style-type:square;
  265. }
  266.  
  267. ol{
  268.    list-style-type:;
  269. }
  270.  
  271. #bigcon{
  272.    width:520px;
  273.    margin-left:auto;
  274.    margin-right:auto;
  275. }
  276.  
  277. .tabcontent {
  278.    position:static;
  279.    margin-left:auto;
  280.    margin-right:auto;
  281.    width: 520px;
  282.    text-align:center;
  283.    margin-bottom:200px;
  284. }
  285.  
  286. #postcontainer {
  287.    margin-left:auto;
  288.    margin-right:auto;
  289.    width:430px;
  290.    overflow:hidden;
  291.    text-align:center;
  292.    {block:IndexPage}margin-bottom:50px;{/block:IndexPage}
  293.    {block:PermalinkPage}margin-bottom:20px;{/block:PermalinkPage}
  294. }
  295.  
  296.  
  297.  
  298. /* ----------------------------- HEADER STUFF ---------------------------*/
  299.  
  300. #topbar{
  301.    position:static;
  302.    margin-top:80px;
  303.    margin-bottom:50px;
  304.    text-align:center;
  305. }
  306.  
  307. .blogtitle{
  308.    margin-bottom:20px;
  309.    text-transform:uppercase;
  310.    font-size:10px;
  311.    letter-spacing:2px;
  312.    font-weight:bold;
  313. }
  314.  
  315. .blogtitle a {
  316.    border-bottom:1px solid {color:links hover};
  317.    padding-bottom:2px;
  318. }
  319.  
  320. .description{
  321.    width:100px;
  322.    margin-left:auto;
  323.    margin-right:auto;
  324.    margin-bottom:20px;
  325.    text-align:center;
  326. }
  327.  
  328. #navbar{
  329.    display:inline-block;
  330.    text-align:center;
  331. }
  332.  
  333. #linkage a {
  334. margin-right:6px;
  335. display:inline-block;
  336. margin-bottom:7px;
  337. width:170px;
  338. font:8px 'Calibri';
  339. color:{color:links};
  340. padding:10px;
  341. text-transform:uppercase;
  342. letter-spacing:1px;
  343. text-align:left;
  344. border-bottom:1px solid {color:borders};
  345. -moz-transition-duration:0.6s;
  346. -webkit-transition-duration:0.6s;
  347. -o-transition-duration:0.6s;
  348. }
  349.  
  350. #linkage a:hover {
  351. text-decoration:none;
  352. color:{color:links hover};
  353. border-bottom:1px solid {color:borders};
  354. -moz-transition-duration:0.6s;
  355. -webkit-transition-duration:0.6s;
  356. -o-transition-duration:0.6s;
  357. }
  358.  
  359. /* ------------------------------ TABS ------------------------------ */
  360.  
  361. #t {
  362.    border-bottom:1px solid {color:borders};
  363.    border-top:1px solid {color:borders};
  364.    padding:7px;
  365.    width:100%;
  366. }
  367. .tabs {
  368.    width:100%;
  369.    margin-left:0px;
  370.    display:inline-block;
  371. }
  372.  
  373. .icon img {
  374.    border-radius:50px;
  375.    width:64px;
  376.    height:64px;
  377.    background-color:{color:borders};
  378.    padding:3px;
  379. }
  380.  
  381.    /*----- Tab Links -----*/
  382.    
  383.    /* Clearfix */
  384.    .tab-links:after {
  385.        display:block;
  386.        clear:both;
  387.        content:'';
  388.    }
  389.  
  390.    .tab-links li {
  391.        margin-right:5px;
  392.        display:inline-block;
  393.        list-style:none;
  394.        font-size:10px;
  395.        text-transform:uppercase;
  396.    }
  397.  
  398.        .tab-links a {
  399.            padding:2px;
  400.            display:inline-block;
  401.            color:{color:links};
  402.            transition:all linear 0.5s;
  403.            border-bottom:1px solid transparent;
  404.        }
  405.  
  406.        .tab-links a:hover {
  407.            color:{color:links hover};
  408.            border-bottom:1px solid {color:text};
  409.            text-decoration:none;
  410.        }
  411.  
  412.    li.active a, li.active a:hover {
  413.        background:transparent;
  414.        color:{color:links};
  415.        border-bottom:1px solid {color:links hover};
  416.        border-top:1px solid {color:links hover};
  417.        -webkit-transition: all .8s;
  418.        -moz-transition: all .8s;
  419.        -o-transition: all .8s;
  420.        -ms-transition: all .8s;    
  421.        transition: all .8s;
  422.    }
  423.    
  424. .nav-wrap { margin-left:-40px; background-color: {color:borders}; width:250px;}
  425. #example-one { margin: 0 auto; list-style: none; position: relative; width: 250px; }
  426. #example-one li { display: inline; }
  427. #example-one li a { color: {color:text}; font:8px 'Calibri'; display: block; float:left; padding: 6px 10px 6px 10px;  text-decoration: none; text-transform: uppercase;     -webkit-transition: all 0.6s linear;
  428. -moz-transition: all 0.6s linear;
  429. -o-transition: all 0.6s linear; }
  430. #example-one li a:hover { color: {color:linkage hover};     -webkit-transition: all 0.6s linear;
  431. -moz-transition: all 0.6s linear;
  432. -o-transition: all 0.6s linear; }
  433. #magic-line { position: absolute; bottom: -2px; width: 100px; height: 2px; background: {color:title}; }
  434.  
  435. .line {
  436.    border-bottom: 1px solid {color:selection};
  437. }
  438.  
  439.    /*----- Content of Tabs -----*/
  440.    .stuff {
  441.        text-align:justify;
  442.        width:400px;
  443.        margin-left:auto;
  444.        margin-right:auto;
  445.        padding: 10px;
  446.        border:1px solid {color:borders};
  447.    }
  448.    .tab-content {
  449.    }
  450.  
  451.        .tab {
  452.            display:none;
  453.        }
  454.  
  455.        .tab.active {
  456.            display:block;
  457.        }
  458.  
  459. /* --------------------------- POSTS (articles)  --------------------- */
  460.  
  461. article {
  462.    float:left;
  463.    background:{color:posts};
  464.    padding: 10px;
  465.    width:400px;
  466.    text-align:left;
  467.    border:1px solid {color:borders};
  468.    margin-bottom:10px;
  469. }
  470.  
  471. /* ---------------------------- POST INFO -----------------------------*/
  472.  
  473. .postinfo{
  474.    font-size:8px;
  475.    text-transform:uppercase;
  476.    margin-top:5px;
  477.    font-weight:bold;
  478.    margin-bottom:30px;
  479.    margin-right:10px;
  480.    text-align:right;
  481. }
  482.  
  483. .postinfo a {
  484.    color:{color:text};
  485. }
  486.  
  487. .postinfo a:hover {
  488.    color:{color:links hover};
  489. }
  490.  
  491. .infoperma {
  492.    text-align:right;
  493. }
  494.  
  495. .tags {
  496.    margin-top:0px;
  497.    font-weight:normal;
  498.    
  499. }
  500.  
  501. .permalinkview {
  502.    font:8px 'Calibri';
  503.    text-transform:uppercase;
  504.    letter-spacing:1px;
  505. }
  506.  
  507. .permalinkview a {
  508.    border-bottom:1px solid {color:links hover};
  509.    padding-bottom:2px;
  510. }
  511.  
  512. /* ---------------------------- POST NOTES  ------------------------- */
  513.  
  514. ol.notes {
  515.    display:block;
  516.    text-align:left;
  517.    list-style-type:none;
  518.    margin-left:-40px;
  519. }
  520.  
  521. ol.notes li.note{
  522.    margin-bottom:5px;
  523. }
  524.  
  525.  
  526. .pagenotes {
  527.    border-top:1px solid {color:borders};
  528.    font:8px 'Calibri';
  529.    text-transform:uppercase;
  530.    text-align:justify;
  531.    width:300px;
  532.    letter-spacing:1px;
  533.    text-align:left;
  534.    margin-top:15px;
  535. }
  536.  
  537. .pagenotes img{
  538.    padding-right:5px;
  539.    padding-top:5px;
  540.    margin-bottom:-5px;
  541. }
  542.  
  543.  
  544. /* -------------------------- POST TYPES -------------------------- */
  545.  
  546. /* CHAT */
  547.  
  548. .chat {
  549.     line-height: 12px;
  550.     list-style: none }
  551.  
  552. .chat ul {
  553.     line-height: 15px;
  554.     list-style: none;
  555.     padding: 0px;
  556.     line-height:20px;}
  557.    
  558.  
  559. .person1 {
  560.     background-color:{color:borders};
  561.     color: {color:Text};}
  562.  
  563. .person1 .label {
  564.     font:8px 'Calibri';
  565.     font-weight:bold;
  566.     text-transform:uppercase;
  567.     padding: 0px;
  568.     margin-left: 5px;
  569.     letter-spacing:2px;
  570.     color:{color:links};}
  571.  
  572. .person2 {
  573. background-color:{color:background};
  574. color: {color:text}; }
  575.  
  576. .person2 .label {
  577.     font:8px 'Calibri';
  578.     font-weight:bold;
  579.     text-transform:uppercase;
  580.     padding: 0px;
  581.     margin-left: 5px;
  582.     letter-spacing:2px;
  583.     color:{color:links hover};}
  584.  
  585. .quotesource{
  586.    text-align:right;
  587.    margin-bottom:10px;
  588. }
  589.  
  590. /* QUESTIONS */
  591.  
  592. .question {
  593. background:{color:borders};
  594. padding:15px;
  595. }
  596.  
  597. .asker {
  598. text-transform:lowercase;
  599. }
  600.  
  601. .asker a {
  602.    font-size:8px;
  603.    letter-spacing:1px;
  604.    text-transform:uppercase;
  605.    border-bottom:1px solid {color:links hover};
  606.    padding-bottom:2px;
  607. }
  608.  
  609. .answer {
  610. padding:11px;
  611. background:{color:background};
  612. border-top:1px solid {color:borders};
  613. border-bottom:1px solid {color:links hover};
  614. margin-top:5px;
  615. }
  616.  
  617. .avatarask {
  618. border:1px solid {color:links hover};
  619. background:{color:background};
  620. padding:3px;
  621. float:left;
  622. margin-left:0px;
  623. margin-right:10px;
  624. border-radius:50px;
  625. display:inline-block;
  626. position:relative;
  627. }
  628.  
  629. .avatarask img {
  630. width:30px;
  631. height:30px;
  632. border-radius:50px;
  633. vertical-align:middle;
  634. position:relative;
  635. }
  636.  
  637. /* AUDIO */
  638.  
  639. .playerbuttonbg {
  640.                position: absolute;
  641.                left: 20px;
  642.                top: 20px;
  643.                width: 19px;
  644.                height: 19px;
  645.                background-color: {color:background};
  646.                padding: 10px;
  647.                -webkit-border-radius: 40px;
  648.                -moz-border-radius: 40px;
  649.                border-radius: 40px;
  650.                opacity: .4;
  651.                    filter: alpha(opacity=40);
  652.                    -moz-opacity: 0.4;
  653.                    -khtml-opacity: 0.4;
  654.                transition: opacity .7s ease-in-out;
  655.                -moz-transition: opacity .7s ease-in-out;
  656.                -webkit-transition: opacity .7s ease-in-out;
  657.            }
  658.          
  659.            .playerbuttonbg:hover {
  660.                opacity: .7;
  661.                    filter: alpha(opacity=50);
  662.                    -moz-opacity: 1;
  663.                    -khtml-opacity: 1;
  664.            }
  665.      
  666.            .newplayerbutton {
  667.                position: relative;
  668.                width: 40px;
  669.                height: 20px;
  670.                overflow: hidden;
  671.            }
  672.          
  673.            .playerbuttonhug {
  674.                position: absolute;
  675.                top: -18px;
  676.                left: 0px;
  677.            }
  678.      
  679.            .tumblr_audio_player {
  680.                height: 90px;
  681.                width: 270px;
  682.                -moz-transform: scale(0.60, 0.60);
  683.                -webkit-transform: scale(0.60, 0.60);
  684.                -o-transform: scale(0.60, 0.60);
  685.                -ms-transform: scale(0.60, 0.60);
  686.                transform: scale(0.60, 0.60);
  687.                -moz-transform-origin: top left;
  688.                -webkit-transform-origin: top left;
  689.                -o-transform-origin: top left;
  690.                -ms-transform-origin: top left;
  691.                transform-origin: top left;
  692.            }
  693.          
  694.            .audioimgwrapper {
  695.                position: absolute;
  696.                left: 0px;
  697.                top: 0px;
  698.                -webkit-border-radius: 40px;
  699.                -moz-border-radius: 40px;
  700.                border-radius: 40px;
  701.                overflow: hidden;
  702.                width: 79px;
  703.                height: 79px;
  704.            }
  705.          
  706.            .audioimgwrapper img {
  707.                width: 100%;
  708.                height: auto;
  709.                -webkit-border-radius: 40px;
  710.                -moz-border-radius: 40px;
  711.                border-radius: 40px;                
  712.            }
  713.          
  714.            .trackdetails {
  715.                width: auto;
  716.                display:inline-block;
  717.                margin-left: 90px;
  718.                border-bottom:1px solid {color:borders};
  719.                min-height: 85px;
  720.            }
  721.          
  722.            .infoaudio {
  723.                padding:5px;
  724.                text-align:justify;
  725.            }
  726.          
  727.            .audiowrapper {
  728.                position: relative;
  729.                display:inline-block;
  730.            }
  731.        .chat {
  732.     line-height: 12px;
  733.     list-style: none }
  734.  
  735. .chat ul {
  736.     line-height: 15px;
  737.     list-style: none;
  738.     padding: 0px;
  739.     line-height:20px;}
  740.  
  741. /* ------------------------- PAGINATION ------------------------- */
  742.  
  743. .pagination {
  744.      width: 260px;
  745.      font-size:10px;
  746.      letter-spacing:2px;
  747.      text-align: center;
  748.      margin-left:auto;
  749.      margin-right:auto;
  750.      color:{color:text};
  751.      margin-bottom:20px;
  752. }
  753.  
  754. .pagination a {
  755.    color:{color:text};
  756. }
  757.  
  758. .pagination a:hover {
  759.    color:{color:links hover};
  760. }
  761. /* ------------------- CREDITS --------------------- */
  762.  
  763. #cred a {
  764.    color:{color:links};
  765.    font-family:'Calibri';
  766.    font-size:10px;
  767.    letter-spacing:1px;
  768.    text-transform:uppercase;
  769.    padding:4px;
  770. }
  771.  
  772. #cred a:hover {
  773.    color:{color:links hover};
  774.    padding:4px;
  775. }
  776.  
  777. #cred {
  778. width:auto;
  779. height:auto;
  780. bottom:15px;
  781. right:15px;
  782. padding:4px;
  783. z-index:1000000;
  784. font-size:8px;
  785. letter-spacing:1px;
  786. position:fixed;
  787. text-align:center;
  788. text-transform:uppercase;
  789.    -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;
  790. }
  791.  
  792.  
  793.  
  794. /* --------------------------- Custom CSS -------------------------- */
  795. {CustomCSS}
  796. </style>
  797. </head>
  798. <body>
  799.  
  800. <div id="cred"><a title="theme @imjaebumx" href="http://imjaebumx.tumblr.com">IJX</a></div>
  801.  
  802.  
  803. <div id="bigcon">
  804.  
  805.  
  806. <!--TOPBAR-->
  807.  
  808. <div id="topbar">
  809.    
  810.    <div class="blogtitle">
  811.    <center><div class="icon"><img src="{image:sidebar image}"></div></center>
  812.        <a href="/" title="refresh" target="_self">{Title}</a>
  813.    </div>
  814.    
  815.    <div class="description">{description}</div>
  816.    
  817.        
  818.    <div id="navbar">
  819.        <div id="t"><div class="tabs">
  820.            <ul class="tab-links">
  821.                <li class="active" style="margin-left:-30px">
  822.                <a href="#tab1">{text:Tab 1 Title}</a></li>
  823.                <li><a href="#tab2">{text:Tab 2 Title}</a></li>
  824.                <li><a href="#tab3">{text:Tab 3 Title}</a></li>
  825.                <li><a href="#tab4">{text:Tab 4 Title}</a></li>
  826.                <li><a href="/archive">{text:Tab 5 Title}</a></li>
  827.            </ul>
  828.        </div></div>
  829.    </div>    
  830.        
  831. </div>
  832.  
  833.  
  834. <!-- --------------------------- TABS -------------------------- -->
  835.  
  836.  
  837. <div class="tabs">
  838.  
  839.  
  840. <!-- --------------------------- TAB 1 -------------------------- -->
  841.  
  842. <div class="tab-content">
  843. <div id="tab1" class="tab active">
  844.            
  845. <div id="postcontainer">
  846.        
  847. {block:Posts}
  848. <article>
  849.  
  850. <!--TEXT POST-->
  851. {block:Text}
  852.    {block:Title}
  853.    <h1 class="title">
  854.    <a href="{Permalink}">{Title}</a></h1>
  855.    {/block:Title}
  856.    {Body}
  857. {/block:Text}
  858.  
  859.  
  860. <!--PHOTO POST-->
  861. {block:Photo}
  862.    {block:IndexPage}
  863.    {LinkOpenTag}
  864.    <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
  865.    {LinkCloseTag}
  866.    {/block:IndexPage}
  867.    {block:PermalinkPage}
  868.    {LinkOpenTag}
  869.    <img src="{PhotoURL-400}" alt="{PhotoAlt}" />
  870.    {LinkCloseTag}{/block:PermalinkPage}
  871. {/block:Photo}
  872.  
  873.  
  874. <!--PHOTOSET POST-->
  875. {block:Photoset}
  876.    {block:IndexPage}{Photoset-400}{/block:IndexPage}
  877.    {block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}
  878. {/block:Photoset}
  879.  
  880.  
  881. <!--QUOTE POST-->
  882. {block:Quote}
  883.    <div class="quote">{Quote}</div>
  884.    {block:Source}
  885.    <div class="quotesource">{Source}</div>
  886.    {/block:Source}
  887. {/block:Quote}
  888.  
  889.  
  890. <!--LINK POST-->
  891. {block:Link}
  892.    <h1 class="title"><a href="{URL}">{Name}</a></h1>
  893.    {block:Description}{Description}{/block:Description}
  894. {/block:Link}
  895.  
  896.  
  897. <!--CHAT POST-->
  898. {block:Chat}
  899. {block:Title}
  900. <h1>{Title}</h1>
  901. {/block:Title}
  902. <div class="chat"><ul>{block:Lines}
  903. <li class="person{UserNumber}">{block:Label}
  904. <span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul></div>
  905.  
  906. {/block:Chat}
  907.  
  908.  
  909. <!--AUDIO POST-->
  910. {block:AudioPlayer}
  911.        <div class="audiowrapper">
  912.        {block:AlbumArt}
  913.            <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  914.        {/block:AlbumArt}
  915.      
  916.        <div class="playerbuttonbg">
  917.            <div class="newplayerbutton">
  918.                <div class="playerbuttonhug">
  919.          
  920.                    {AudioPlayerWhite}
  921.          
  922.                </div>
  923.            </div>
  924.        </div>
  925.      
  926.        <div class="trackdetails">
  927.          
  928.                <div class="infoaudio">{block:TrackName}<i>{TrackName}</i>{/block:TrackName}<br>
  929.                {block:Artist}<b>{Artist}</b>{/block:Artist}<br>
  930.                {block:Album}{Album}{/block:Album}<br>
  931.                <i>{PlayCountWithLabel}</i></div>
  932.              
  933.  
  934.        </div>
  935.        </div>
  936.        {/block:AudioPlayer}
  937.  
  938.  
  939. <!--VIDEO POST-->
  940. {block:Video}
  941. <div class="video">
  942.    <div class="video-player">{Video-250}</div>
  943. {/block:Video}
  944.  
  945.  
  946. <!--ANSWER POST-->
  947. {block:Answer}
  948. <div class="question">
  949. <div class="avatarask"><a href="{AskerURL}"><img src="{AskerPortraitURL-30}" /></a></div>
  950. <div class="asker"><b>{Asker} asked:</b></div>
  951. {Question}</div><p>
  952. <div class="answer">
  953. {Answer}</div>
  954. {/block:Answer}
  955.  
  956. <!--CAPTIONS-->
  957. {block:Ifhidecaptions}
  958.    {block:permalink}
  959.        {block:Caption}
  960.            {Caption}
  961.        {/block:Caption}
  962.    {/block:permalink}
  963. {/block:Ifhidecaptions}
  964. {block:Ifnothidecaptions}
  965.    {block:Caption}
  966.        {Caption}
  967.    {/block:Caption}
  968. {/block:Ifnothidecaptions}
  969.  
  970.  
  971. </article>
  972. <!--POST INFORMATION-->
  973. <div class="postinfo">
  974.  
  975. <!--PERMALINK-->
  976.  
  977.    <a href="{Permalink}">
  978.        {block:Date}
  979.        {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount} ON {ShortDayOfWeek}, {ShortMonth} {DayOfMonth}
  980.        {/block:Date}
  981.        {block:PermalinkPage}{block:RebloggedFrom}<br>
  982.        <a href="{ReblogParentURL}" title="{ReblogParentTitle}">Via</a>
  983.    {/block:RebloggedFrom}
  984.    {block:ContentSource}
  985.        <a href="{SourceURL}" title="{SourceTitle}">Source</a>
  986.    {/block:ContentSource}{/block:PermalinkPage}
  987.    </a>
  988.    
  989.    
  990.    <!--TAGS-->
  991.    {block:PermalinkPage}{block:HasTags}
  992.        <div class="tags">
  993.            {block:Tags}
  994.            <a href="{TagURL}">#{Tag} </a>
  995.            {/block:Tags}
  996.        </div>
  997.    {/block:HasTags}{/block:PermalinkPage}
  998.        
  999. </div>
  1000.  
  1001. <!--POST NOTES-->
  1002. {block:PermalinkPage}<center><a href="#" class="viewnotes"><div class="permalinkview">View {NoteCountWithLabel}</div></div></a></center>
  1003.  
  1004. <center>{block:PostNotes}
  1005. <div class="postnotes"><div class="pagenotes">{PostNotes}</div></div>
  1006. {/block:PostNotes}</center>{block:PermalinkPage}
  1007.  
  1008. {/block:Posts}
  1009. <!--Close of article-->
  1010.  
  1011. <!--PAGINATION-->
  1012. {block:Pagination}
  1013. <div class="pagination">
  1014.      <center>{block:PreviousPage}
  1015.            <a href="{PreviousPage}">« PREVIOUS</a>
  1016.      {/block:PreviousPage}
  1017.  
  1018.      {block:JumpPagination}
  1019.            {block:CurrentPage}
  1020.                  {CurrentPage} OF {TotalPages}
  1021.            {/block:CurrentPage}
  1022.      {/block:JumpPagination}
  1023.  
  1024.      {block:NextPage}
  1025.            <a href="{NextPage}"> NEXT»</a>
  1026.      {/block:NextPage}</center>
  1027. </div>
  1028. {/block:Pagination}
  1029.  
  1030.  
  1031. </div>
  1032.  
  1033. </div>
  1034.            
  1035. <!-- -------------------------- TAB 2 -------------------------- -->
  1036.  
  1037. <div id="tab2" class="tab">
  1038.    <div class="tabcontent">
  1039.        <div class="stuff"><h1>{text:about tab title}</h1>{text:about me}</div>
  1040.    </div>
  1041. </div>
  1042.        
  1043.        
  1044. <!-- -------------------------- TAB 3 -------------------------- -->
  1045.  
  1046. <div id="tab3" class="tab">
  1047.    <div class="tabcontent">
  1048.        <div class="stuff"><h1>{text:askbox tab title}</h1><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/{text:your url}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></div>
  1049.    </div>
  1050. </div>
  1051.  
  1052.        
  1053. <!-- -------------------------- TAB 4 -------------------------- -->
  1054.  
  1055. <div id="tab4" class="tab">
  1056.    <div class="tabcontent">
  1057.        <div class="stuff"><h1>{text:navigate tab title}</h1><div id="linkage">{block:ifLink1}<a href="{text:Link1}">{text:Link1 Title}</a>{/block:ifLink1}
  1058. {block:ifLink2}<a href="{text:Link2}">{text:Link2 Title}</a>{/block:ifLink2}
  1059. {block:ifLink3}<a href="{text:Link3}">{text:Link3 Title}</a>{/block:ifLink3}
  1060. {block:ifLink4}<a href="{text:Link4}">{text:Link4 Title}</a>{/block:ifLink4}
  1061. {block:ifLink5}<a href="{text:Link5}">{text:Link5 Title}</a>{/block:ifLink5}
  1062. {block:ifLink6}<a href="{text:Link6}">{text:Link6 Title}</a>{/block:ifLink6}
  1063. </div></div>
  1064.    </div>
  1065. </div>
  1066.  
  1067.  
  1068. <!-- -------------------------- TAB 5 -------------------------- -->
  1069.  
  1070. <div id="tab5" class="tab">
  1071.    <div class="tabcontent">
  1072.        Tab five content here
  1073.    </div>
  1074. </div>
  1075.  
  1076.  
  1077.        
  1078. <!-- END OF TABS -->
  1079.  
  1080. </div>
  1081. </div>
  1082. </div>
  1083. </div>
  1084. </div>
  1085.  
  1086.  
  1087. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1088.  
  1089. <script>
  1090. $(document).ready(function() {
  1091.    $('.tabs .tab-links a').on('click', function(e)  {
  1092.        var currentAttrValue = $(this).attr('href');
  1093.  
  1094.        // Show/Hide Tabs
  1095.        $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1096.  
  1097.        // Change/remove current tab to active
  1098.        $(this).parent('li').addClass('active').siblings().removeClass('active');
  1099.  
  1100.        e.preventDefault();
  1101.    });
  1102. });
  1103. </script>
  1104.  
  1105. <script>
  1106. $(document).ready(function() {
  1107.  $('#filterOptions li a').click(function() {
  1108.    // fetch the class of the clicked item
  1109.    var ourClass = $(this).attr('class');
  1110.  
  1111.    // reset the active class on all the buttons
  1112.    $('#filterOptions li').removeClass('active');
  1113.    // update the active state on our clicked button
  1114.    $(this).parent().addClass('active');
  1115.  
  1116.    if(ourClass == 'all') {
  1117.      // show all our items
  1118.      $('#ourHolder').children('div.item').show();
  1119.    }
  1120.    else {
  1121.      // hide all elements that don't share ourClass
  1122.       $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1123.       // show all elements that do share ourClass
  1124.       $('#ourHolder').children('div.' + ourClass).show();
  1125.     }
  1126.     return false;
  1127.   });
  1128. });
  1129. </script>
  1130.  
  1131.  
  1132. {block:ifbacktotop}<a style="position:fixed;bottom:50px;right:10px; text-transform:uppercase; letter-spacing:1px; font-size:8px; background-color:{color:borders}; padding:5px; border-bottom:1px solid {color:links hover}" href="#top">back to top</a>{/block:ifbacktotop}
  1133.  
  1134. </body>
  1135. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!