API tools faq
paste
Advertisement
felinum

el psy ko

felinum
Sep 3rd, 2016
26,319
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 53.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!--
  7.  
  8. Theme «El Psy Ko» by felinum
  9.  
  10. Updated 06.04.2017
  11.  
  12. Rules:
  13.  
  14. 1. Don't claim any part of the code as your own.
  15. 2. Don't redistribute it on other sites.
  16. 3. Don't implement parts of my code into your themes w/o permission.
  17. 4. Leave the credit intact and visible (don't move it to secondary pages).
  18. 5. You may edit the theme, but not beyond recognition.
  19.  
  20.  
  21. Notes:
  22.  
  23. 1. Infinite Scroll: enable only the "Infinite Scroll" option;
  24.   Manual Load: enable both "Infinite Scroll" and "Manually Load Content";
  25.   Pagination: disable both "Infinite Scroll" and "Manually Load Content".
  26. 1. To edit the Links blocks, go to line 934 and follow the instructions / gray comments.
  27. 2. To edit the Updates Tab, go to line 1006 and follow the instructions / gray comments.
  28. 3. If you enable the "Post Info Right" option, make sure to disable "Post Info Left" and vice versa.
  29.  
  30.  
  31. Credits:
  32.  
  33.   - Unnest Tumblr Captions: @neothm & @magnusthemes (http://neothm.com/post/148902138319/)
  34.   - Pixel Union Photoset: Pixel Union (https://github.com/PixelUnion/Extended-Tumblr-Photoset)
  35.   - Infinite Scroll: Paul Irish (https://github.com/infinite-scroll/infinite-scroll)
  36.   - Video Resizing: @ shythemes (http://shythemes.tumblr.com/post/134536748863/)
  37.   - Photo Lightbox: @ shythemes (http://shythemes.tumblr.com/post/140444996328/)
  38.   - Styled Tooltips: Manos Malihutsakis (http://manos.malihu.gr/tuts/style-my-tooltips.html)
  39.  
  40. -->
  41.                    
  42.                    
  43.        
  44.     <title>{Title}</title>
  45.     <link rel="shortcut icon" href="{Favicon}">
  46.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  47.     {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  48.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  49.     <link href='https://fonts.googleapis.com/css?family=Chivo|Karla|Muli:400, 400:italic|Roboto:400,400italic,500,500italic|Cardo:400,400italic' rel='stylesheet' type='text/css'>
  50.     <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  51.     <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  52.  
  53.  
  54.     <meta name="image:Background" content=""/>
  55.     <meta name="image:Sidebar Image" content="http://static.tumblr.com/0cdn90j/spco7mpj1/untitled-1_copy.png"/>
  56.     <meta name="color:Background" content="#fff"/>
  57.     <meta name="color:Text" content="#bebebe"/>
  58.     <meta name="color:Link" content="#ccb5b5"/>
  59.     <meta name="color:Link BG" content="#fff"/>
  60.     <meta name="color:Link Hover" content="#eee"/>
  61.     <meta name="color:Link BG Hover" content="#f3f3f3"/>
  62.     <meta name="color:Posts BG" content="#fff"/>
  63.     <meta name="color:Posts Border" content="#fff"/>
  64.     <meta name="color:Italic" content="#c9a0ab"/>
  65.     <meta name="color:Bold" content="#56585b"/>
  66.     <meta name="color:Blockquote Border" content="#edeef0"/>
  67.    
  68.     <meta name="color:Post Icons" content="#000"/>
  69.     <meta name="color:Post Icons Hover" content="#8f8f8f"/>
  70.     <meta name="color:Post Icons BG" content="#f8e4e4"/>
  71.     <meta name="color:Post Icons BG Hover" content="#fbf1f1"/>
  72.     <meta name="color:Post Info Border" content="#fef5f5"/>
  73.     <meta name="color:Post Info" content="#bbb"/>
  74.     <meta name="color:Post Info Hover" content="#e5e5e5"/>
  75.    
  76.     <meta name="color:Sidebar BG" content="#fff"/>
  77.     <meta name="color:Sidebar Icon Hover BG" content="#edc6c6"/>
  78.     <meta name="color:Sidebar Icon Hover Lines" content="#fff"/>
  79.     <meta name="color:Sidebar Icon Hover Text" content="#fff"/>
  80.     <meta name="color:Sidebar Links" content="#ccb5b5"/>
  81.     <meta name="color:Sidebar Links Hover" content="#dadada"/>
  82.     <meta name="color:Sidebar Links Block Title" content="#bebebe"/>
  83.     <meta name="color:Search Icon" content="#929292"/>
  84.     <meta name="color:Search Input" content="#ccc"/>
  85.    
  86.     <meta name="color:Updates Tab Icons BG" content="#f8e4e4"/>
  87.     <meta name="color:Updates Tab Icons BG Hover" content="#fbecec"/>
  88.     <meta name="color:Updates Tab Icons" content="#000"/>
  89.     <meta name="color:Updates Tab Icons Hover" content="#aaaaaa"/>
  90.     <meta name="color:Updates Tab Title" content="#d1c3c0"/>
  91.     <meta name="color:Updates Tab Content" content="#c1c1c1"/>
  92.     <meta name="color:Updates Tab Link" content="#ccb5b5"/>
  93.     <meta name="color:Updates Tab Link Hover" content="#e2dad9"/>
  94.     <meta name="color:Updates Tab Link Border" content="#f8edea"/>
  95.     <meta name="color:Updates Tab Stars" content="#ffdd62"/>
  96.    
  97.     <meta name="color:Text Post Title" content="#a8a8a8"/>
  98.     <meta name="color:Post Accent" content="#f8f8f8"/>
  99.     <meta name="color:Question" content="#898989"/>
  100.     <meta name="color:Asker" content="#ceb5af"/>
  101.     <meta name="color:Asker Icon BG" content="#f3e9e7"/>
  102.     <meta name="color:Track Info" content="#a8a8a8"/>
  103.     <meta name="color:First Quote Letter" content="#494949"/>
  104.     <meta name="color:First Quote Letter BG" content="#f3e9e7"/>
  105.     <meta name="color:Quote" content="#cec2c0"/>
  106.     <meta name="color:Quote Source" content="#000"/>
  107.     <meta name="color:Chat Label" content="#b6a3a6"/>
  108.    
  109.     <meta name="color:Load More" content="#9a9a9a"/>
  110.     <meta name="color:Load More Hover" content="#e5e5e5"/>
  111.     <meta name="color:Scroll to Top" content="#2e2e2e"/>
  112.     <meta name="color:Scroll to Top Hover" content="#e5e5e5"/>
  113.     <meta name="color:Selection BG" content="#ede2de"/>
  114.     <meta name="color:Selection Text" content="#000"/>
  115.     <meta name="color:Tooltip Text" content="#9d9d9d"/>
  116.     <meta name="color:Tooltip BG" content="#fff"/>
  117.     <meta name="color:Tooltip Border" content="#fff"/>
  118.    
  119.     <meta name="select:Body Font Size" content="10" title="10px"/>
  120.     <meta name="select:Body Font Size" content="11" title="11px"/>
  121.     <meta name="select:Body Font Size" content="12" title="12px"/>
  122.     <meta name="select:Body Font Family" content="Karla" title="Karla">
  123.     <meta name="select:Body Font Family" content="Chivo" title="Chivo">
  124.     <meta name="select:Body Font Family" content="Roboto" title="Roboto"/>
  125.     <meta name="select:Body Font Family" content="Muli" title="Muli"/>
  126.     <meta name="select:Body Font Family" content="Cardo" title="Cardo"/>
  127.     <meta name="select:Photoset Gutter" content="2" title="2px"/>
  128.     <meta name="select:Photoset Gutter" content="1" title="1px"/>
  129.     <meta name="select:Photoset Gutter" content="3" title="3px"/>
  130.     <meta name="select:Photoset Gutter" content="4" title="4px"/>
  131.     <meta name="select:Sidebar Icon Shape" content="32" title="round"/>
  132.     <meta name="select:Sidebar Icon Shape" content="4" title="rounded corners"/>
  133.     <meta name="select:Sidebar Icon Shape" content="0" title="square"/>
  134.     <meta name="select:Caption Image Size" content="24" title="24px"/>
  135.     <meta name="select:Caption Image Size" content="18" title="18px"/>
  136.     <meta name="select:Caption Image Size" content="30" title="30px"/>
  137.     <meta name="select:Caption Image Shape" content="9" title="rounded corners"/>
  138.     <meta name="select:Caption Image Shape" content="50" title="round"/>
  139.     <meta name="select:Caption Image Shape" content="0" title="square"/>
  140.     <meta name="select:Controls" content=".3" title="gray"/>
  141.     <meta name="select:Controls" content="1" title="black"/>
  142.     <meta name="select:Tiny Cursor" content="http://cur.cursors-4u.net/cursors/cur-9/cur817.cur" title="white"/>
  143.     <meta name="select:Tiny Cursor" content="http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png" title="black"/>
  144.    
  145.     <meta name="if:Infinite Scroll" content="1"/>
  146.     <meta name="if:Manually Load Content" content="1"/>
  147.     <meta name="if:Rounded Post Corners" content="0"/>
  148.     <meta name="if:Post Info Left" content="1"/>
  149.     <meta name="if:Post Info Right" content="0"/>
  150.     <meta name="if:Reveal Post Info On Hover" content="0"/>
  151.     <meta name="if:Reveal Nav On Click" content="1"/>
  152.     <meta name="if:Updates Tab" content="1"/>
  153.     <meta name="if:Reveal Updates On Click" content="1"/>
  154.     <meta name="if:Updates Tab Top Left" content="1"/>
  155.     <meta name="if:Updates Tab Top Right" content="0"/>
  156.     <meta name="if:Updates Tab Bottom Left" content="0"/>
  157.     <meta name="if:Updates Tab Bottom Right" content="0"/>
  158.     <meta name="if:Caption" content="1"/>
  159.     <meta name="if:Unnest Caption" content="1"/>
  160.     <meta name="if:Fade In On Refresh" content="1"/>
  161.    
  162.     <meta name="text:Post Size" content="300"/>
  163.     <meta name="text:Permalink Post Size" content="540"/>
  164.     <meta name="text:Post Padding" content="0"/>
  165.     <meta name="text:Post Bottom Margin" content="100"/>
  166.     <meta name="text:Link 1" content="home"/>
  167.     <meta name="text:Link 1 Url" content="/"/>
  168.     <meta name="text:Link 2" content="mssg"/>
  169.     <meta name="text:Link 2 Url" content="/ask"/>
  170.     <meta name="text:Link 3" content="archive"/>
  171.     <meta name="text:Link 3 Url" content="/archive"/>
  172.     <meta name="text:Sliding Link 4" content="nav"/>
  173.  
  174.    
  175.     <style type="text/css">
  176.    
  177.    
  178.     ::-webkit-scrollbar-track {border:5px solid {color:Background}; background-color:#eee;}
  179.     ::-webkit-scrollbar {width:11px; height:11px;}
  180.     ::-webkit-scrollbar-thumb {
  181.         border:5px solid rgba(0, 0, 0, 0);
  182.         background-clip:padding-box;
  183.         background-color:rgba(0, 0, 0, 1);
  184.     }
  185.    
  186.     .tmblr-iframe {
  187.         position:fixed;
  188.         top:10px !important;
  189.         right:4px !important;
  190.         opacity:{select:Controls};
  191.         z-index:900000000000000000000;
  192.         -webkit-filter: invert(100%);
  193.             -moz-filter:invert(100%);
  194.              -ms-filter:invert(100%);
  195.               -o-filter:invert(100%);
  196.                  filter:invert(100%);
  197.     }
  198.    
  199.     .tmblr-iframe:hover {opacity:.7;}
  200.  
  201.     body {
  202.         opacity:1;
  203.         transition:.5s opacity;
  204.         overflow-wrap:break-word;  
  205.         word-wrap:break-word;
  206.         font:{select:Body Font Size}px {select:Body Font Family}, calibri, sans-serif;
  207.         color:{color:Text};
  208.         background:{color:Background} url('{image:Background}') repeat fixed center;
  209.     }
  210.    
  211.     body.fade-out {opacity:0; transition:none;}
  212.    
  213.     body, a, a:hover {cursor:url({select:Tiny Cursor}), auto}
  214.    
  215.     a {text-decoration:none;}
  216.     a:link, a:visited {color:{color:Link};}
  217.     a:hover {color:{color:Link Hover};}
  218.     a:active {color:{color:Link};}
  219.    
  220.     i, em {color:{color:Italic};}
  221.     b, strong {color:{color:Bold};}
  222.     pre {
  223.         font-family:inherit !important;
  224.         white-space:pre-wrap;      
  225.         white-space:-moz-pre-wrap;  
  226.         white-space:-pre-wrap;      
  227.         white-space:-o-pre-wrap;  
  228.         word-wrap:break-word;      
  229.     }
  230.    
  231.     h6, small, big, sup, sub {font-size:1em;}
  232.     h4, h5, h6 {margin:6px 0;}
  233.     h5 {font-size:1.1em;}
  234.     h4 {font-size:1.2em;}
  235.     h3 {font-size:1.3em;}
  236.     h2 {font-size:1.4em;}
  237.     h1 {font-size:1.5em;}
  238.    
  239.     blockquote {
  240.         margin:0;
  241.         padding:0 10px;
  242.         border-left:1px solid {color:Blockquote Border};
  243.     }
  244.    
  245.     ul:not(#sublinks_container) {margin:0 0 0 -35px; list-style-type:none;}
  246.     ol {margin-left:-25px;}
  247.     ul li:before {content:'—'; margin-right:5px;}
  248.    
  249.     img {max-width:100%; height:auto;}
  250.    
  251.     hr {border:1px solid {color:Blockquote Border};}
  252.    
  253.     /*    posts    */
  254.    
  255.     #posts_container {
  256.         margin:0 auto;
  257.         left:auto;
  258.         right:auto;
  259.         margin-top:100px;
  260.         {block:IndexPage}width:calc({text:Post Size}px - 4px + 2 * {text:Post Padding}px);{/block:IndexPage}
  261.         {block:Permalink}width:calc({text:Permalink Post Size}px - 4px + 2 * {text:Post Padding}px);{/block:Permalink}
  262.     }
  263.  
  264.     .posts {
  265.         position:relative;
  266.         {block:IndexPage}margin-bottom:{text:Post Bottom Margin}px;{/block:IndexPage}
  267.         padding:{text:Post Padding}px;
  268.         min-height:80px;
  269.         z-index:1;
  270.         text-align:justify;
  271.         background-color:{color:Posts BG};
  272.         {block:ifRoundedPostCorners}border-radius:5px;{/block:ifRoundedPostCorners}
  273.     }
  274.    
  275.     .vertebrae {
  276.         margin:auto;
  277.         overflow:hidden;
  278.         {block:Permalink}width:calc({text:Permalink Post Size}px - 4px);{/block:Permalink}
  279.         {block:IndexPage}width:calc({text:Post Size}px - 4px);{/block:IndexPage}
  280.         {block:ifRoundedPostCorners}border-radius:5px;{/block:ifRoundedPostCorners}
  281.     }
  282.    
  283.     .photo-slideshow .count-1, .pancake {
  284.         {block:Permalink}width:{text:Permalink Post Size}px;{/block:Permalink}
  285.         {block:IndexPage}width:{text:Post Size}px;{/block:IndexPage}
  286.     }
  287.    
  288.     .photo-slideshow {position:relative;}
  289.     .photo-slideshow .count-3 {max-width:177px; margin-bottom:calc({select:Photoset Gutter}px + 2px);}
  290.     .photo-slideshow .row:last-of-type .count-3 {margin-bottom:0 !important;}
  291.     .photo-slideshow .count-3:last-child {float:right;}
  292.     .photo-slideshow .count-3:nth-child(2) {
  293.         max-width:178px;
  294.         position:absolute;
  295.         left:50%;
  296.         transform: translateX(-50%);
  297.         -webkit-transform: translateX(-50%)
  298.     }
  299.    
  300.     /* photoset lightbox */
  301.    
  302.     .vignette, #vignette {opacity:0;}
  303.    
  304.     .lightbox-image, #tumblr_lightbox img {
  305.         box-shadow:none !important;
  306.         max-width:none;
  307.         padding:4px;
  308.         border:1px solid #eee!important;
  309.         border-radius:4px;
  310.     }
  311.    
  312.     .tmblr-lightbox, #tumblr_lightbox {
  313.         position:absolute;
  314.         z-index:99999999999999999999999999999 !important;
  315.         background-color:rgba(255,255,255,.9) !important;        
  316.     }
  317.    
  318.     /*    caption / text   */
  319.    
  320.     .caption {margin:0 5px;}
  321.    
  322.     a.read_more:hover {border-bottom:1px solid #f0f0f0;}
  323.    
  324.     img.tumblr_avatar {
  325.         vertical-align:middle;
  326.         width:{select:Caption Image Size}px;
  327.         border-radius:{select:Caption Image Shape}%;
  328.     }
  329.    
  330.     .caption a.tumblr_blog:hover {color:{color:Link Hover};}
  331.     .caption a.tumblr_blog, .caption a.tumblr_blog:hover {margin-left:7px; border:none;}
  332.    
  333.     .tumblr_parent p {padding-left:2px;}
  334.    
  335.     blockquote.tumblr_parent {padding:3px 3px 0px 3px; padding-top:10px; border:none;}
  336.    
  337.     .caption p a, #answer a, .notes .action a {
  338.         margin:1px;
  339.         padding:0 3px;
  340.         background-color:{color:Link BG};
  341.     }
  342.    
  343.     .caption p a:hover, #answer a:hover, .notes .action a:hover {background-color:{color:Link BG Hover};}
  344.    
  345.     .audio {padding-bottom:10px;}
  346.  
  347.     /*    text / link title    */
  348.    
  349.     .text_post_title a {color:{color:Text Post Title};}
  350.     .text_post_title a:hover {color:{color:Link Hover};}
  351.     .text_post_title, h1 {
  352.         padding:5px 10px;
  353.         text-transform:lowercase;
  354.         font-weight:bold;
  355.         font-size:12px;
  356.         color:{color:Text Post Title};
  357.     }
  358.    
  359.     /*    question    */
  360.    
  361.     #question_post {padding:5px;}
  362.    
  363.     #asker_icon {
  364.         display:inline-block;
  365.         padding:8px;
  366.         background-color:{color:Asker Icon BG};
  367.         border-radius:20px;
  368.     }
  369.    
  370.     #asker_icon img {vertical-align:top; opacity:.4;}
  371.    
  372.     #que {
  373.         position:relative;
  374.         display:inline-block;
  375.         margin-left:10px;
  376.         padding:7px;
  377.         width:calc({text:Post Size}px - 73px);
  378.         {block:Permalink}width:calc({text:Permalink Post Size}px - 73px);{/block:Permalink}
  379.         vertical-align:middle;
  380.         background-color:{color:Post Accent};
  381.     }
  382.    
  383.     #que:after {
  384.         right:100%;
  385.         top:50%;
  386.         border:solid transparent;
  387.         content:" ";
  388.         height:0;
  389.         width:0;
  390.         position:absolute;
  391.         pointer-events:none;
  392.         border-right-color:{color:Post Accent};
  393.         border-width:5px;
  394.         margin-top:-5px;
  395.     }
  396.  
  397.     #asker {padding-bottom:2px; color:{color:Asker};}
  398.     #asker a:link, #asker a:visited {color:{color:Asker};}
  399.     #asker a:hover {color:{color:Link Hover};}
  400.    
  401.     #question {color:{color:Question};}
  402.    
  403.     #answer {padding:3px 7px;}
  404.  
  405.     /*    quote    */
  406.    
  407.     #quote {padding:5px; color:{color:Quote};}
  408.     #quote::first-letter {
  409.         float:left;
  410.         margin-right:4px;
  411.         padding:6px 10px;
  412.         font-weight:bold;
  413.         font-size:15px;
  414.         color:{color:First Quote Letter};
  415.         background-color:{color:First Quote Letter BG};
  416.     }
  417.    
  418.     #source {
  419.         padding:4px 10px;
  420.         text-align:right;
  421.         text-transform:uppercase;
  422.         font-weight:bold;
  423.         font-size:8px;
  424.         color:{color:Quote Source};
  425.         clear:both;
  426.     }
  427.    
  428.     /*    chat    */
  429.  
  430.     #chat {padding:7px 6px 10px 5px;}
  431.    
  432.     #line #label {color:{color:Chat Label};}
  433.  
  434.     /*    audio player    */
  435.    
  436.     #audio_post {background-color:{color:Post Accent};}
  437.    
  438.     #album_art {
  439.         position:absolute;
  440.         width:64px;
  441.         height:64px;
  442.         z-index:1;
  443.         border-radius:4px;
  444.     }
  445.    
  446.     #album_art img {max-width:100%; border-radius:4px;}
  447.    
  448.     #audio_player_container {
  449.         position:absolute;
  450.         width:62px;
  451.         height:62px;
  452.         margin-top:1px;
  453.         margin-left:1px;
  454.         z-index:9;
  455.         overflow:hidden;
  456.         opacity:0;
  457.         background-color:white;
  458.         border-radius:4px;
  459.     }
  460.    
  461.     #audio_post:hover #audio_player_container {opacity:1;}
  462.    
  463.     #audio_player_bg {
  464.         margin-top:20px;
  465.         margin-left:-6px;
  466.     }
  467.    
  468.     #track_details_container {
  469.         display:table;
  470.         margin-left:74px;
  471.         padding:0 5px;
  472.         height:64px;
  473.         font-weight:bold;
  474.     }
  475.    
  476.     #track_details {display:table-cell; vertical-align:middle;}
  477.    
  478.     #track_name {
  479.         text-transform:lowercase;
  480.         font-size:14px;
  481.         color:{color:Track Info};
  482.     }
  483.    
  484.     #artist_name {
  485.         text-transform:uppercase;
  486.         letter-spacing:1px;
  487.         font-size:7px;
  488.         color:{color:Track Info};
  489.     }
  490.  
  491.     .tumblr_audio_player {
  492.         -moz-transform:scale(0.90, 0.90);
  493.         -webkit-transform:scale(0.90, 0.90);
  494.         -o-transform:scale(0.90, 0.90);
  495.         -ms-transform:scale(0.90, 0.90);
  496.         transform:scale(0.90, 0.90);
  497.         -moz-transform-origin:top left;
  498.         -webkit-transform-origin:top left;
  499.         -o-transform-origin:top left;
  500.         -ms-transform-origin:top left;
  501.         transform-origin:top left;
  502.     }
  503.    
  504.     /*    post notes    */
  505.  
  506.     .notes {
  507.         {block:Permalink}
  508.             overflow-wrap:break-word;  
  509.             word-wrap:break-word;
  510.             background-color:{color:Posts BG};
  511.         {/block:Permalink}
  512.     }
  513.  
  514.     ol.notes {margin:67px 0 0 0; padding:2px; list-style-type:none;}
  515.    
  516.     li.note {margin:1px 0; padding:5px 10px;}
  517.    
  518.     .note .action a:visited {color:{color:Link};}
  519.    
  520.     ol.notes img.avatar {display:none;}
  521.    
  522.     #notecontainer .retags {
  523.         margin:2px 0 5px 10px;
  524.         text-transform:uppercase;
  525.         letter-spacing:2px;
  526.         font-weight:bold;
  527.         font-size:7px;
  528.     }
  529.    
  530.     #notecontainer .retags.error {color:{color:Italic} !important;}
  531.    
  532.     #notecontainer .retags a:hover {color:{color:Link Hover} !important;}
  533.    
  534.     ol.notes li.note .answer_content {font-style:italic; color:{color:Italic};}
  535.  
  536.     ol.notes li.note blockquote {
  537.         margin:7px 0px 5px 15px;
  538.         padding:0px 10px;
  539.         border-color:{color:Blockquote Border};
  540.     }
  541.    
  542.     /* post info */
  543.  
  544.     #post_info {
  545.         position:absolute;
  546.         top:0;
  547.         {block:ifPostInfoLeft}right:100%;{/block:ifPostInfoLeft}
  548.         {block:ifPostInfoRight}left:100%;{/block:ifPostInfoRight}
  549.         width:60px;
  550.         height:100%;
  551.         text-align:center;
  552.     }
  553.    
  554.     #gap1, #gap2, #gap3 {
  555.         position:absolute;
  556.         {block:ifPostInfoLeft}right:29px;{/block:ifPostInfoLeft}
  557.         {block:ifPostInfoRight}left:29px;{/block:ifPostInfoRight}
  558.         border:1px solid {color:Post Info Border};
  559.         z-index:9;
  560.     }
  561.    
  562.     #gap1, #gap2 {height:calc((100% - 45px) / 2);}
  563.     #gap1 {position:absolute; top:19px;}
  564.     #gap2 {position:absolute; top:calc(50% + 9px);}
  565.     #gap3 {top:100%; height:69px;}
  566.    
  567.     #un, #deux, #trois, #quatre {position:relative; z-index:99;}
  568.     #un {top:5px;}
  569.     #deux {top:calc(50% - 17px);}
  570.     #trois {top:calc(100% - 38px);}
  571.     #quatre {top:calc(100% + 40px);}
  572.  
  573.     #post_info .lnr {
  574.         margin-left:1px;
  575.         padding:6px;
  576.         font-size:10px;
  577.         color:{color:Post Icons};
  578.         background:{color:Post Icons BG};
  579.         border-radius:40px;
  580.     }
  581.    
  582.     #post_info .lnr:hover {color:{color:Post Icons Hover}; background:{color:Post Icons BG Hover};}
  583.    
  584.     .post_reveal {
  585.         position:absolute;
  586.         {block:ifPostInfoLeft}right:50px; text-align:right;{/block:ifPostInfoLeft}
  587.         {block:ifPostInfoRight}left:50px; text-align:left;{/block:ifPostInfoRight}
  588.         top:0;
  589.         width:110px;
  590.         {block:IndexPage}{block:ifRevealPostInfoOnHover}opacity:0;{/block:ifRevealPostInfoOnHover}{/block:IndexPage}
  591.        
  592.         color:{color:Post Info};
  593.     }
  594.    
  595.     #post_info i:hover + .post_reveal {opacity:1;}
  596.    
  597.     .tags {
  598.         height:{text:Post Bottom Margin}px;
  599.         {block:Permalink}width:180px; height:69px;{/block:Permalink}
  600.         overflow-y:auto;
  601.     }
  602.    
  603.     .tags, .noteq {top:-1px;}
  604.    
  605.     .post_reveal a:link, .post_reveal a:visited {color:{color:Post Info}; border-bottom:1px solid transparent;}
  606.     .post_reveal a:hover {color:{color:Post Info Hover}; border-bottom:1px solid {color:Post Icons BG};}
  607.    
  608.     /* sidebar */
  609.    
  610.     #sidebar {
  611.         position:fixed;
  612.         {block:IndexPage}{block:ifPostInfoLeft}left{/block:ifPostInfoLeft}{block:ifPostInfoRight}right{/block:ifPostInfoRight}:calc(50% + {text:Post Size}px / 2 + {text:Post Padding}px + 48px);{/block:IndexPage}
  613.         {block:Permalink}{block:ifPostInfoLeft}left{/block:ifPostInfoLeft}{block:ifPostInfoRight}right{/block:ifPostInfoRight}:calc(50% + {text:Permalink Post Size}px / 2 + {text:Post Padding}px + 48px);{/block:Permalink}
  614.         padding:5px;
  615.         width:170px;
  616.         height:auto;
  617.         text-align:center;
  618.         z-index:9999999999;
  619.         background:{color:Sidebar BG};
  620.     }
  621.    
  622.     #sidebar a:link, #sidebar a:visited {padding:2px; color:{color:Sidebar Links};}
  623.    
  624.     #sidebar a:hover {color:{color:Sidebar Links Hover};}
  625.    
  626.     #sideimg {margin:0 auto; width:64px; height:64px;}
  627.    
  628.     #curtain {margin:0 auto; width:64px; height:64px;}
  629.    
  630.     #sideimg img {max-width:100%; border-radius:{select:Sidebar Icon Shape}px;}
  631.    
  632.     #curtain {
  633.         position:absolute;
  634.         display:table;
  635.         top:5px;
  636.         opacity:0;
  637.         background:{color:Sidebar Icon Hover BG};
  638.         border-radius:{select:Sidebar Icon Shape}px;
  639.         transition-delay:.3s;
  640.         word-break:break-all;
  641.     }
  642.    
  643.     #sideimg:hover > #curtain {opacity:.9; transition-delay:0s;}
  644.  
  645.     #diagonal {
  646.         position:absolute;
  647.         top:-7px;
  648.         left:15px;
  649.         width:0px;
  650.         height:46px;
  651.         border-bottom:1px solid {color:Sidebar Icon Hover Lines};
  652.         transform:rotate(-45deg);
  653.     }
  654.  
  655.     #curtain:hover #diagonal {left:-3px; width:36px; transition-delay:.2s;}
  656.    
  657.     #username {display:table-cell; vertical-align:middle;}
  658.    
  659.     #username a:link, #username a:visited {color:{color:Sidebar Icon Hover Text};}
  660.    
  661.     #description {padding:10px 0;}
  662.    
  663.     #links_container li {display:inline-block; color:{color:Sidebar Links};}
  664.    
  665.     #search {position:relative; right:4px;}
  666.    
  667.     form {display:inline-block; background:{color:Sidebar BG};}
  668.    
  669.     #sfm input {
  670.         width:50px;
  671.         {block:ifRevealNavOnClick}width:0;{block:ifRevealNavOnClick}
  672.         border:none;
  673.         border-bottom:1px solid #ccc;
  674.         outline:none;
  675.         color:{color:Search Input};
  676.         font:10px {select:Body Font Family};
  677.     }
  678.    
  679.     .lnr-magnifier {
  680.         position:relative;
  681.         display:inline-block;
  682.         top:4px;
  683.         left:6px;
  684.         margin-left:2px;
  685.         padding:6px;
  686.         font-weight:bold;
  687.         font-size:8px;
  688.         color:{color:Search Icon};
  689.     }
  690.    
  691.     .lnr-magnifier:hover {color:{color:Post Icons Hover};}
  692.    
  693.     #sublinks_container {
  694.         {block:ifRevealNavOnClick}display:none;{/block:ifRevealNavOnClick}
  695.         position:absolute;
  696.         margin:0;
  697.         left:calc(50% - 90px);
  698.         padding:5px;
  699.         width:170px;
  700.         background:{color:Sidebar BG};
  701.     }
  702.    
  703.     .sublinks_block {
  704.         display:inline-block;
  705.         margin-top:25px;
  706.         width:80px;
  707.         vertical-align:top;
  708.     }
  709.    
  710.     .sublinks_block a {display:block;}
  711.    
  712.     .sublinks_block .sublinks_title {
  713.         margin-left:1px;
  714.         margin-bottom:3px;
  715.         font-weight:bold;
  716.         color:{color:Sidebar Links Block Title};
  717.     }
  718.    
  719.     .left {text-align:left;}
  720.     .right {text-align:right;}
  721.    
  722.     .center1 {margin-left:20px;}
  723.     .center2 {margin-right:20px;}
  724.    
  725.     /*    pagination    */
  726.    
  727.     #footer {
  728.         position:relative;
  729.         margin:0 auto;
  730.         bottom:50px;
  731.         width:200px;
  732.         height:30px;
  733.         text-align:center;
  734.         font-size:11px;
  735.     }
  736.    
  737.     #pagination {
  738.         padding:15px 5px;
  739.         font:11px karla;
  740.         background:{color:Posts BG};
  741.     }
  742.    
  743.     #pagination i {
  744.         padding:0 10px;
  745.         font-weight:bold;
  746.         font-size:10px;
  747.     }
  748.    
  749.     #pagination a {padding:5px;}
  750.  
  751.     .current_page {padding:5px; color:{color:Link};}
  752.    
  753.     .jump_page a, #pagination i {color:{color:Load More};}
  754.     .jump_page a:hover, #pagination i:hover {color:{color:Link};}
  755.    
  756.     #manual a, #manual i {color:{color:Load More};}
  757.     #manual:hover a, #manual:hover i {color:{color:Link};}
  758.    
  759.     #manual i {
  760.         display:block;
  761.         margin-top:5px;
  762.         font-size:12px;
  763.     }
  764.    
  765.     #c img {height:100%; opacity:.8;}
  766.     #c img:hover {opacity:.4;}
  767.     #c {
  768.         position:fixed;
  769.         z-index:9999999999999999999999999999;
  770.         bottom:7px;
  771.         right:7px;
  772.         height:24px;
  773.     }
  774.    
  775.     /*    updates tab    */
  776.      
  777.     #updates {
  778.         position:fixed;
  779.         width:200px;
  780.         {block:ifUpdatesTabTopLeft}top:10px; left:15px; text-align:justify;{/block:ifUpdatesTabTopLeft}
  781.         {block:ifUpdatesTabTopRight}top:10px; right:15px; text-align:right;{/block:ifUpdatesTabTopRight}
  782.         {block:ifUpdatesTabBottomLeft}bottom:30px; left:15px; text-align:justify;{/block:ifUpdatesTabBottomLeft}
  783.         {block:ifUpdatesTabBottomRight}bottom:70px; right:10px; text-align:right;{/block:ifUpdatesTabBottomRight}
  784.         padding:5px;
  785.         z-index:99999999999;
  786.         font-family:{select:Updates Tab Font Family};
  787.         font-size:10px;
  788.     }
  789.  
  790.     .updates_icon {position:relative; z-index:99;}
  791.  
  792.     #updates a:link, #updates a:visited {color:{color:Updates Tab Link}; border-bottom:1px solid {color:Updates Tab Link Border};}
  793.    
  794.     #updates a:hover {color:{color:Updates Tab Link Hover};}
  795.    
  796.     .uparent {padding-top:5px;}
  797.  
  798.     .ui {display:inline-block; padding:5px 0; vertical-align:middle;}
  799.    
  800.     .ui .lnr {
  801.         padding:6px;
  802.         font-size:10px;
  803.         color:{color:Updates Tab Icons};
  804.         background:{color:Updates Tab Icons BG};
  805.         border-radius:40px;
  806.     }
  807.    
  808.     .ui .lnr:hover {color:{color:Updates Tab Icons Hover}; background:{color:Updates Tab Icons BG Hover};}
  809.    
  810.     .ui:hover ~ .lino {border-bottom:1px solid {color:Updates Tab Icons BG Hover};}
  811.     .ui:hover ~ .lino:after {background-color:{color:Updates Tab Icons BG Hover};}
  812.  
  813.     .lino {
  814.         display:inline-block;
  815.         position:relative;
  816.         top:-2px;
  817.         width:170px;
  818.         {block:ifUpdatesTabTopLeft}left:-2px;{/block:ifUpdatesTabTopLeft}
  819.         {block:ifUpdatesTabTopRight}right:-2px;{/block:ifUpdatesTabTopRight}
  820.         {block:ifUpdatesTabBottomLeft}left:-2px;{/block:ifUpdatesTabBottomLeft}
  821.         {block:ifUpdatesTabBottomRight}right:-2px;{/block:ifUpdatesTabBottomRight}
  822.         {block:ifRevealUpdatesOnClick}width:0px;{/block:ifRevealUpdatesOnClick}
  823.         height:1px;
  824.         border-bottom:1px solid {color:Updates Tab Icons BG};
  825.     }
  826.    
  827.     .lino:after {
  828.         position:absolute;
  829.         {block:ifUpdatesTabTopLeft}right:0;{/block:ifUpdatesTabTopLeft}
  830.         {block:ifUpdatesTabTopRight}left:0;{/block:ifUpdatesTabTopRight}
  831.         {block:ifUpdatesTabBottomLeft}right:0;{/block:ifUpdatesTabBottomLeft}
  832.         {block:ifUpdatesTabBottomRight}left:0;{/block:ifUpdatesTabBottomRight}
  833.         top:-2px;
  834.         content:'';
  835.         width:6px;
  836.         height:6px;
  837.         background-color:{color:Updates Tab Icons BG};
  838.         border-radius:20px;
  839.     }
  840.    
  841.     .updates_title {
  842.         margin-top:-3px;
  843.         padding-bottom:5px;
  844.         text-transform:lowercase;
  845.         font-weight:bold;
  846.         font-size:12px;
  847.         color:{color:Updates Tab Title};
  848.         clear:both;
  849.     }
  850.    
  851.     .container_content {
  852.         display:block;
  853.         margin-left:14px;
  854.         {block:ifUpdatesTabTopLeft}margin-top:-6px;{/block:ifUpdatesTabTopLeft}
  855.         {block:ifUpdatesTabTopRight}margin-right:15px;{/block:ifUpdatesTabTopRight}
  856.         {block:ifUpdatesTabBottomLeft}margin-top:-6px;{/block:ifUpdatesTabBottomLeft}
  857.         {block:ifUpdatesTabBottomRight}margin-right:15px;{/block:ifUpdatesTabBottomRight}
  858.         padding:8px 6px 2px 7px;
  859.         color:{color:Updates Tab Content};
  860.     }
  861.  
  862.     .container_content li {margin-left:-5px;}
  863.  
  864.     .container_content .lnr-star {
  865.         background:none;
  866.         padding:0;
  867.         font-size:8px;
  868.         color:{color:Updates Tab Stars};
  869.     }
  870.  
  871.     ::selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  872.     ::-moz-selection {background-color:{color:Selection BG}; color:{color:Selection Text};}
  873.    
  874.     a, a:hover, .tmblr-iframe, .tmblr-iframe:hover, #audio_player_container, #audio_post:hover #audio_player_container, #icon, #icon:hover, #post_info i:hover + .post_reveal, .post_reveal, #scrolltotop, #scrolltotop:hover, #c img, #c img:hover {transition-duration:.4s;}
  875.    
  876.     #sideimg:hover > #curtain, #curtain, #curtain:hover #diagonal, #diagonal, .ui:hover ~ .lino:after, .ui:hover ~ .lino, .lino, .lnr:hover, .lnr {transition-duration: .5s;}
  877.    
  878.     #s-m-t-tooltip {
  879.         margin:24px 14px 7px 12px;
  880.         padding:5px;
  881.         max-width:300px;
  882.         z-index:999999999999999999;
  883.         text-shadow:none;
  884.         color:{color:Tooltip Text};
  885.         background-color:{color:Tooltip BG};
  886.         border:1px solid {color:Tooltip Border};
  887.     }
  888.    
  889.     #scrolltotop {
  890.         position:fixed;
  891.         bottom:30px;
  892.         right:-30px;
  893.         padding:10px;
  894.         width:20px;
  895.         z-index:99999;
  896.         text-align:center;
  897.         cursor:pointer;
  898.     }
  899.    
  900.     .lnr-chevron-up {color:{color:Scroll to top};}
  901.    
  902.     #scrolltotop:hover, #scrolltotop:hover .lnr-chevron-up {color:{color:Scroll to top Hover};}
  903.  
  904.     </style>
  905.    
  906. </head>
  907.  
  908. <body>
  909.  
  910. {block:ifFadeInOnRefresh}<script>document.body.className += ' fade-out';</script>{/block:ifFadeInOnRefresh}
  911.  
  912.  
  913. <!-- sidebar -->
  914.  
  915. <div id="sidebar">
  916.     <div id="sideimg">
  917.         <img src="{image:Sidebar Image}">
  918.         <div id="curtain">
  919.             <div id="diagonal"></div>
  920.             <div id="username"><a href="http://{name}.tumblr.com">{name}</a></div>
  921.         </div>
  922.     </div>
  923.    
  924.     <div id="description">{Description}</div>
  925.    
  926.     <div id="links_container">
  927.         <li><a href="{text:Link 1 Url}">{text:Link 1}</a></li>
  928.         <li><a href="{text:Link 2 Url}">{text:Link 2}</a></li>
  929.         <li><a href="{text:Link 3 Url}">{text:Link 3}</a></li>
  930.         <li id="nav_link">{block:ifRevealNavOnClick}<a>{text:Sliding Link 4}</a>{/block:ifRevealNavOnClick}
  931.             <ul id="sublinks_container">
  932.            
  933.                 <!-- FIRST LINKS BLOCK -->
  934.                
  935.                 <div class="sublinks_block left">
  936.                     <div class="center1">
  937.                         <div class="sublinks_title">
  938.                             title <!-- enter your link block title here -->
  939.                         </div>
  940.                         <a href="/">link 1 <!-- link 1 --></a>
  941.                         <a href="/">link 2 <!-- link 2 --></a>
  942.                         <a href="/">link 3 <!-- link 3 --></a>
  943.                     </div>
  944.                 </div>
  945.                
  946.                 <!-- SECOND LINKS BLOCK -->
  947.                
  948.                 <div class="sublinks_block right">
  949.                     <div class="center2">
  950.                         <div class="sublinks_title">
  951.                             title <!-- enter your link block title here -->
  952.                         </div>
  953.                         <a href="/">link 4 <!-- link 4 --></a>
  954.                         <a href="/">link 5 <!-- link 5 --></a>
  955.                         <a href="/">link 6 <!-- link 6 --></a>
  956.                 </div></div>
  957.                
  958.                 <!-- THIRD LINKS BLOCK -->
  959.                
  960.                 <div class="sublinks_block left">
  961.                     <div class="center1">
  962.                         <div class="sublinks_title">
  963.                             title <!-- enter your link block title here -->
  964.                         </div>
  965.                         <a href="/">link 7 <!-- link 7 --></a>
  966.                         <a href="/">link 8 <!-- link 8 --></a>
  967.                         <a href="/">link 9 <!-- link 9 --></a>
  968.                     </div>
  969.                 </div>
  970.                
  971.                 <!-- FOURTH LINKS BLOCK -->
  972.                
  973.                 <div class="sublinks_block right">
  974.                     <div class="center2">
  975.                         <div class="sublinks_title">
  976.                             title <!-- enter your link block title here -->
  977.                         </div>
  978.                         <a href="/">link 10 <!-- link 10 --></a>
  979.                         <a href="/">link 11 <!-- link 11 --></a>
  980.                         <a href="/">link 12 <!-- link 12 --></a>
  981.                 </div></div>
  982.             </ul>
  983.         </li>
  984.        
  985.         <div id="search">
  986.             <script language="javascript">function send(){document.searchf.submit()}</script>
  987.             <i class="lnr lnr-magnifier" aria-hidden="true"></i>
  988.             <form action="/search" method="get" id="sfm" name="searchf">
  989.                 <input type="text" name="q" value=""/>
  990.             </form>  
  991.         </div>
  992.     </div>
  993. </div>
  994.  
  995.  
  996. <!--------------------- updates tab  --------------------->
  997.  
  998. {block:ifUpdatesTab}
  999. <div id="updates">
  1000.  
  1001.     <!-- Tip: you can change the icons by visiting https://linearicons.com/free#cheat-sheet and pasting your desired icon title (e.g.:home, user, dice, etc.) over the existing icon titles below -->
  1002.  
  1003.  
  1004.  
  1005.    
  1006.     <!-- section 1 -->
  1007.     <div class="uparent">
  1008.         {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
  1009.         {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
  1010.         <div class="ui"><div class="updates_icon">
  1011.             <!-- paste your new selected icon title over "moon" -->
  1012.             <i class="lnr lnr-moon" aria-hidden="true"></i>
  1013.         </div></div>
  1014.         {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
  1015.         {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
  1016.         <div class="container_content">
  1017.             <div class="updates_title">
  1018.                 status <!-- your title here -->
  1019.             </div>
  1020.             To edit the Updates Tab, open your HTML Editor, go to line 1006 and follow the instructions / gray comments. <!-- your text here -->
  1021.         </div>
  1022.     </div>
  1023.     <!-- end section 1 -->
  1024.    
  1025.    
  1026.    
  1027.    
  1028.    
  1029.     <!-- section 2 -->
  1030.     <div class="uparent">
  1031.         {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
  1032.         {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
  1033.         <div class="ui"><div class="updates_icon">
  1034.             <!-- paste your new selected icon title over "magic-wand" -->
  1035.             <i class="lnr lnr-magic-wand" aria-hidden="true"></i>
  1036.         </div></div>
  1037.         {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
  1038.         {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
  1039.         <div class="container_content">
  1040.             <div class="updates_title">
  1041.                 title 2 <!-- your title here -->
  1042.             </div>
  1043.             <!--  you can create lists like so: -->
  1044.             <ul>
  1045.                 <li>update 1</li> <!-- 1st list item -->
  1046.                 <li>update 2</li> <!-- 2nd list item -->
  1047.                 <li>update 3</li> <!-- 3rd list item -->
  1048.             </ul>
  1049.             <!-- end list -->
  1050.         </div>
  1051.     </div>
  1052.     <!-- end section 2 -->
  1053.    
  1054.    
  1055.    
  1056.    
  1057.     <!-- section 3 -->
  1058.     <div class="uparent">
  1059.         {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
  1060.         {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
  1061.         <div class="ui"><div class="updates_icon">
  1062.             <!-- paste your new selected icon title over "star" -->
  1063.             <i class="lnr lnr-star" aria-hidden="true"></i>
  1064.         </div></div>
  1065.         {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
  1066.         {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
  1067.         <div class="container_content">
  1068.             <div class="updates_title">
  1069.                 activity <!-- your title here -->
  1070.             </div>
  1071.             <!-- for watching / reading / rec lists, you can add a rating system with star icons inside the <li>...</li> tags like so: -->
  1072.             <ul>
  1073.                 <li>TV Show
  1074.                     <!-- 5 stars -->
  1075.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1076.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1077.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1078.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1079.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1080.                 </li>
  1081.                    
  1082.                 <li>Book
  1083.                     <!-- 4 stars -->
  1084.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1085.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1086.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1087.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1088.                 </li>
  1089.                    
  1090.                 <li>Anime
  1091.                     <!-- 3 stars -->
  1092.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1093.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1094.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1095.                     <i class="lnr lnr-star" aria-hidden="true"></i>
  1096.                 </li>
  1097.             </ul>
  1098.             <!-- end lists -->
  1099.         </div>
  1100.     </div>
  1101.     <!-- end section 3 -->
  1102.  
  1103.  
  1104.    
  1105.    
  1106.     <!-- section 4 -->
  1107.     <div class="uparent">
  1108.         {block:ifUpdatesTabTopRight}<div class="lino"></div>{/block:ifUpdatesTabTopRight}
  1109.         {block:ifUpdatesTabBottomRight}<div class="lino"></div>{/block:ifUpdatesTabBottomRight}
  1110.         <div class="ui"><div class="updates_icon">
  1111.             <!-- paste your new selected icon title over "rocket" -->
  1112.             <i class="lnr lnr-rocket" aria-hidden="true"></i>
  1113.         </div></div>
  1114.         {block:ifUpdatesTabTopLeft}<div class="lino"></div>{/block:ifUpdatesTabTopLeft}
  1115.         {block:ifUpdatesTabBottomLeft}<div class="lino"></div>{/block:ifUpdatesTabBottomLeft}
  1116.         <div class="container_content">
  1117.             <div class="updates_title">
  1118.                 extra <!-- your title here -->
  1119.             </div>
  1120.             <!-- you can insert links like so: -->
  1121.             <a href="http://{name}.tumblr.com">link example</a>
  1122.             <!-- end link -->
  1123.         </div>
  1124.     </div>
  1125.     <!-- end section 4 -->
  1126.  
  1127.    
  1128. </div>
  1129. {/block:ifUpdatesTab}
  1130. <!---------------------  end updates tab  --------------------->
  1131.  
  1132.  
  1133. <!-- posts container -->
  1134.      
  1135. <div id="posts_container">
  1136.  
  1137.     <!-- posts -->
  1138.     {block:Posts}
  1139.     <div class="posts">
  1140.  
  1141.         {block:Text}
  1142.         <div class="vertebrae">
  1143.             {block:Title}<div class="text_post_title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1144.             <div class="caption">{Body}</div>
  1145.         </div>
  1146.         {/block:Text}
  1147.  
  1148.         {block:Link}
  1149.         <div class="vertebrae">
  1150.             <div class="text_post_title"><a href="{URL}">{Name}</a></div>
  1151.             <div class="caption">{block:Description}{Description}{/block:Description}</div>
  1152.         </div>
  1153.         {/block:Link}
  1154.  
  1155.         {block:Quote}
  1156.         <div class="vertebrae">
  1157.             <div id="quote">{Quote}</div>
  1158.             {block:Source}<div id="source">&mdash;&nbsp;{Source}</div>{/block:Source}
  1159.         </div>
  1160.         {/block:Quote}
  1161.  
  1162.         {block:Chat}
  1163.         <div class="vertebrae">
  1164.             {block:Title}<div class="text_post_title">{Title}</div>{/block:Title}
  1165.             <div id="chat"><ul>{block:Lines}<li id="line">{block:Label}<span id="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul></div>
  1166.         </div>
  1167.         {/block:Chat}
  1168.  
  1169.         {block:Answer}
  1170.         <div class="vertebrae">
  1171.             <div id="question_post">
  1172.                 <div id="asker_icon"><img src="http://static.tumblr.com/0cdn90j/YAso8odg6/user__1_.png"></div>
  1173.                 <div id="que">
  1174.                     <div id="asker">{Asker}:</div>
  1175.                     <div id="question">{Question}</div>
  1176.                 </div>
  1177.                 <div id="answer">{Answer}</div>
  1178.             </div>
  1179.         {block:ifCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaption}
  1180.         </div>
  1181.         {/block:Answer}
  1182.  
  1183.         {block:AudioPlayer}
  1184.         <div class="vertebrae">
  1185.             <div id="audio_post">
  1186.                 <div id="album_art">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1187.                 <div id="audio_player_container"><div id="audio_player_bg">{AudioPlayer}</div></div>
  1188.                 <div id="track_details_container">
  1189.                     <div id="track_details">
  1190.                         {block:TrackName}<span id="track_name">{TrackName}</span>{/block:TrackName}<br />
  1191.                         {block:Artist}<span id="artist_name">{Artist}</span>{/block:Artist}<br />
  1192.                     </div>
  1193.                 </div>
  1194.             </div>
  1195.             {block:ifCaption}<div class="caption audio">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaption}
  1196.         </div>
  1197.         {/block:AudioPlayer}
  1198.  
  1199.         {block:Photo}
  1200.         <div class="vertebrae">
  1201.             <div class="pancake">
  1202.                 {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="540"></a>{LinkCloseTag}
  1203.             {block:ifCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaption}
  1204.             </div>
  1205.         </div>
  1206.         {/block:Photo}
  1207.  
  1208.         {block:Photoset}
  1209.         <div class="vertebrae">
  1210.             <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1211.                 {block:Photos}
  1212.                 <div class="photo-data">
  1213.                     <div class="pxu-photo">
  1214.                         <img src="{PhotoURL-500}"  width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  1215.                     </div>
  1216.                     <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1217.                 </div>
  1218.                 {/block:Photos}
  1219.             </div>
  1220.             {block:ifCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaption}
  1221.         </div>
  1222.         {/block:Photoset}
  1223.  
  1224.         {block:Video}
  1225.         <div class="vertebrae">
  1226.             <div class="video">{Video-500}</div>
  1227.             {block:ifCaption}<div class="caption">{block:Caption}{Caption}{/block:Caption}</div>{/block:ifCaption}
  1228.         </div>
  1229.         {/block:Video}
  1230.        
  1231.         <!-- post info -->
  1232.  
  1233.         {block:Date}
  1234.         <div id="post_info">
  1235.             <div id="un">
  1236.                 <i class="lnr lnr-user"></i>
  1237.                 <div class="post_reveal">
  1238.                     {block:RebloggedFrom}
  1239.                         src: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a><br>
  1240.                         <!--<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a><br>-->
  1241.                     {/block:RebloggedFrom}
  1242.                 </div>
  1243.             </div>
  1244.                
  1245.             <div id="gap1"></div>
  1246.            
  1247.             <div id="deux">
  1248.                 <i class="lnr lnr-bookmark"></i>
  1249.                 <div class="post_reveal noteq">
  1250.                     {block:IndexPage}{block:NoteCount}<a href="{Permalink}">{NoteCount}</a>{/block:NoteCount} · <a href="{Permalink}" title="{24HourWithZero}:{Minutes}:{Seconds}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear}</a>{/block:IndexPage}
  1251.                     {block:Permalink}<a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{ShortYear} · {24HourWithZero}:{Minutes}:{Seconds}</a>{/block:Permalink}
  1252.                 </div>
  1253.             </div>
  1254.                
  1255.             <div id="gap2"></div>
  1256.                
  1257.             <div id="trois">
  1258.                 <i class="lnr lnr-tag"></i>
  1259.                 {block:HasTags}<div class="post_reveal tags">{block:Tags}&nbsp;<a href="{TagURL}">{Tag};</a>{/block:Tags}</div>{/block:HasTags}
  1260.             </div>
  1261.                
  1262.             {block:Permalink}
  1263.             <div id="gap3"></div>
  1264.             <div id="quatre">
  1265.                 <i class="lnr lnr-star"></i>
  1266.                 <div class="post_reveal">{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</div>
  1267.             </div>
  1268.             {/block:Permalink}
  1269.  
  1270.         </div>
  1271.         {/block:Date}
  1272.        
  1273.         <!-- post info -->
  1274.            
  1275.     </div>
  1276.     <!-- end posts -->
  1277.  
  1278.     {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}
  1279.    
  1280.     <div id="notecontainer">{PostNotes}</div>
  1281.    
  1282. {/block:Posts}
  1283.  
  1284. </div>
  1285. <!-- end posts container -->
  1286.  
  1287. {block:IndexPage}
  1288.     {block:ifNotInfiniteScroll}
  1289.     <div id="footer">
  1290.         {block:Pagination}
  1291.         <div id="pagination">
  1292.             {block:PreviousPage}<a href="{PreviousPage}"><i class="lnr lnr-chevron-left"></i></a>{/block:PreviousPage}
  1293.             {block:JumpPagination length="4"}
  1294.                 {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  1295.                 {block:JumpPage}<span class="jump_page"><a href="{URL}">{PageNumber}</a></span>{/block:JumpPage}
  1296.             {/block:JumpPagination}
  1297.             {block:NextPage}<a href="{NextPage}"><i class="lnr lnr-chevron-right"></i></a>{/block:NextPage}
  1298.         </div>
  1299.         {/block:Pagination}
  1300.     </div>
  1301.     {/block:ifNotInfiniteScroll}
  1302.  
  1303.     {block:ifInfiniteScroll}
  1304.         <div class="navigation" id="navigation">
  1305.             {block:Pagination}
  1306.                 {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  1307.                 {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}
  1308.             {/block:Pagination}
  1309.         </div>
  1310.        
  1311.         {block:ifManuallyLoadContent}
  1312.             <div id="footer"><div id="manual"><a id="loadmore">Load More<i class="lnr lnr-chevron-down"></i></a></div></div>
  1313.         {/block:ifManuallyLoadContent}
  1314.     {/block:ifInfiniteScroll}
  1315. {/block:IndexPage}
  1316.  
  1317. <div id="scrolltotop"><i class="lnr lnr-chevron-up" aria-hidden="true"></i></div><div id="c"><a href="http://felinum.tumblr.com" title="theme by felinum"><img src="http://static.tumblr.com/0cdn90j/ZjQobhv98/snowshoe-cat.png"></a></div>
  1318.  
  1319. <!-- scripts -->
  1320.  
  1321. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script><script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script><script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>{block:ifUnnestCaption}<script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>{/block:ifUnnestCaption}{block:IndexPage}{block:ifInfiniteScroll}<script src="http://static.tumblr.com/0cdn90j/vsOo9wcfa/infinitescroll.js"></script>{/block:ifInfiniteScroll}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>{/block:IndexPage}
  1322. <script>
  1323.     $(document).ready(function(){
  1324.         $('.photo-slideshow').pxuPhotoset({
  1325.             lightbox:true,
  1326.             rounded:false,
  1327.             gutter:'{select:Photoset Gutter}px',
  1328.             photoset:'.photo-slideshow',
  1329.             photoWrap:'.photo-data',
  1330.             photo:'.pxu-photo'
  1331.         });
  1332.         {block:ifUnnestCaption}
  1333.         $('.posts').unnest({
  1334.             yourCaption:'.caption',
  1335.             newCaptionUsername:false,
  1336.             originalPostCaptionUsername:false,
  1337.             tumblrAvatars:true,
  1338.             tumblrAvatarClass:'.tumblr_avatar',
  1339.             usernameColon:false
  1340.         });
  1341.         {/block:ifUnnestCaption}
  1342.         var $container = $('#posts_container');
  1343.         {block:IndexPage}
  1344.         {block:ifInfiniteScroll}
  1345.         $container.infinitescroll({
  1346.             navSelector:'#navigation',
  1347.             nextSelector:'#navigation a#nextPage',
  1348.             itemSelector:'.posts',
  1349.             loadingImg:'',
  1350.             loadingText:'<em>.</em>',
  1351.             bufferPx:2000,
  1352.             errorCallback: function(){$('#loadmore').delay(100).fadeOut();}
  1353.         },
  1354.             function(newElements){
  1355.                 var $newElems = $(newElements).css('opacity', 0);
  1356.                 resizeVideos();
  1357.                 $newElems.find('.photo-slideshow').pxuPhotoset({
  1358.                     lightbox:true,
  1359.                     rounded:false,
  1360.                     gutter:'{select:Photoset Gutter}px',
  1361.                     photoset:'.photo-slideshow',
  1362.                     photoWrap:'.photo-data',
  1363.                     photo:'.pxu-photo'
  1364.                 });
  1365.                 {block:ifUnnestCaption}
  1366.                 $newElems.unnest({
  1367.                     yourCaption:'.caption',
  1368.                     newCaptionUsername:false,
  1369.                     originalPostCaptionUsername:false,
  1370.                     tumblrAvatars:true,
  1371.                     tumblrAvatarClass:'.tumblr_avatar',
  1372.                     usernameColon:false
  1373.                 });
  1374.                 {/block:ifUnnestCaption}
  1375.                 $newElems.imagesLoaded(function(){
  1376.                     $newElems.animate({opacity: 1});
  1377.                 });
  1378.             }
  1379.         );
  1380.         {block:ifManuallyLoadContent}
  1381.         $(window).unbind('.infscr');
  1382.         $("#loadmore").click(function(){
  1383.             $container.infinitescroll('retrieve');
  1384.             return false;
  1385.         });
  1386.         {/block:ifManuallyLoadContent}
  1387.         {/block:ifInfiniteScroll}
  1388.         {/block:IndexPage}
  1389.     });
  1390. </script>
  1391. <script>
  1392.     $(function() {
  1393.         $('body').removeClass('fade-out');
  1394.     });
  1395. </script>
  1396. <script type="text/javascript">
  1397.     $(document).ready(function(){
  1398.         $(window).scroll(function(){
  1399.             if ($(this).scrollTop() > 200){
  1400.                 $('#scrolltotop').stop().animate({right:'-2px'});
  1401.             }
  1402.             else {
  1403.                 $('#scrolltotop').stop().animate({right:'-30px'});
  1404.             }
  1405.         });
  1406.         $('#scrolltotop').click(function(){
  1407.             $("html, body").animate({scrollTop:0}, 800);
  1408.                 return false;
  1409.             });
  1410.         $('.lnr-magnifier').click( function() {
  1411.             var toggleWidth = $("#sfm input").width() == 0 ? "50px" : "0px";
  1412.             $('#sfm input').animate({width:toggleWidth});
  1413.         });
  1414.     });
  1415.     {block:ifRevealNavOnClick}
  1416.     $('#nav_link').live('click',function(){
  1417.         $('#sublinks_container').fadeToggle('slow');
  1418.         var toggleWidth = $("#sfm input").width() == 0 ? "50px" : "50px";
  1419.         $('#sfm input').animate({width:toggleWidth});
  1420.     });
  1421.     {/block:ifRevealNavOnClick}
  1422. </script>
  1423. <script>
  1424.     $(function(){
  1425.         {block:ifRevealUpdatesOnClick}
  1426.         $(".container_content").hide();
  1427.         $(".ui").each(function(){  
  1428.             $(this).click(function(){
  1429.                 $(this).parent().find('.container_content').stop(true, true).delay(200).slideToggle("slow");
  1430.             });
  1431.         })
  1432.         {/block:ifRevealUpdatesOnClick}
  1433.        
  1434.         $(".ui").each(function(){  
  1435.             $(this).click(function(){
  1436.                 var lea = $(this).parent().find(".lino").width() == 0 ? "175px" : "0px";
  1437.                 $(this).parent().find(".lino").stop(true, true).animate({width:lea});
  1438.                
  1439.             });
  1440.         })
  1441.     });
  1442. </script>
  1443. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script><script src="http://static.tumblr.com/0cdn90j/glvnidntk/jquery.style-my-tooltips.js"></script>
  1444. <script>
  1445.     (function($){
  1446.         $(document).ready(function(){
  1447.             $("[title]").style_my_tooltips({
  1448.                 tip_follows_cursor:true,
  1449.                 tip_delay_time:0,
  1450.                 tip_fade_speed:0,
  1451.                 attribute:"title"
  1452.             });
  1453.         });
  1454. })(jQuery);
  1455. </script>
  1456.  
  1457. </body>
  1458. </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!