Advertisement
ladyvicky

THEME #2 BY LV

Dec 3rd, 2013
224
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.98 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <!--
  6. -----------------------------------------------------------------------
  7.                   THEME #2 by @Kamikaze-Love
  8. -----------------------------------------------------------------------
  9. don't think just because I am relatively invisible that I won't find you if you steal these codes ;D
  10. -----------------------------------------------------------------------
  11. ------------------------------CREDITS----------------------------------
  12. ICON FONTS: generated by fontello (http://fontello.com/)
  13. -----------------------------------------------------------------------
  14.  
  15. -->
  16.  
  17. <!-- SCRIPTS -->
  18.  
  19. <title>{Title}</title>
  20.  
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24. <link href='http://fonts.googleapis.com/css?family=Croissant+One' rel='stylesheet' type='text/css'>
  25.  
  26. <!-- METATAG THINGS -->
  27.  
  28. <meta name="color:Text" content="black" />
  29. <meta name="color:Background" content="white" />
  30. <meta name="color:Post BG" content="#FAFAFA" />
  31. <meta name="color:Links" content="gray" />
  32. <meta name="color:Label" content="black" />
  33.  
  34. <meta name="image:Navibar BG" content="http://static.tumblr.com/8di24cd/KoSmwxmft/tumblr_lsdjv9k5e21r2gm7fo2_250-edit.png" />
  35. <meta name="image:Background" content="" />
  36.  
  37. <meta name="text:Link 1" content="Link 1" />
  38. <meta name="text:Link 1 URL" content="/" />
  39. <meta name="text:Link 2" content="Link 2" />
  40. <meta name="text:Link 2 URL" content="/" />
  41. <meta name="text:Link 3" content="Link 3" />
  42. <meta name="text:Link 3 URL" content="/" />
  43. <meta name="text:Link 4" content="Link 4" />
  44. <meta name="text:Link 4 URL" content="/" />
  45. <meta name="text:Link 5" content="Link 5" />
  46. <meta name="text:Link 5 URL" content="/" />
  47. <meta name="text:Title" content="" />
  48.  
  49. <style type="text/CSS">
  50.  
  51. /* FONTS */
  52. @font-face {font-family: "tinytots"; src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
  53.  
  54. @font-face {font-family:"kittyfont"; src: url('https://googledrive.com/host/0B1LOqmbUyH_GYTZwT2hPTHAtVkU/kittyfont.ttf');}
  55.  
  56.  
  57. /*  TUMBLR CONTROLS */
  58.  
  59.  iframe#tumblr_controls {
  60.     -webkit-filter:invert(100%);
  61.     -moz-filter:invert(100%);
  62.     -o-filter:invert(100%);
  63.     -ms-filter:invert(100%);
  64.     filter:invert(100%);
  65. }
  66.    
  67. /*  SCROLLBAR */
  68.    
  69. ::-webkit-scrollbar {
  70.     height: 12px;
  71.     width: 5px;
  72.     background: black;
  73. }
  74.  
  75. ::-webkit-scrollbar-thumb {
  76.     background-color:white;
  77. }
  78.  
  79. ::-webkit-scrollbar-corner {
  80.     background: transparent;
  81. }
  82.  
  83. ::selection {
  84.     background: black; /* Safari */
  85.     color:white;
  86. }
  87.    
  88. ::-moz-selection {
  89.     background: black; /* Firefox */
  90.     color:white;   
  91. }
  92.  
  93. /*  GENERAL */
  94.  
  95. body {
  96.     margin:0px;
  97.     padding:0px;
  98.     color:{color:Text};
  99.     background:url('{image:Background}') fixed top right;
  100.     background-color:{color:background};
  101.     font-family:calibri, SANS-SERIF;
  102.     font-size:11px;
  103. }
  104.  
  105. a {
  106.     font-size:12px;
  107.     text-decoration:none;
  108.     color:{color:links};
  109.     -webkit-transition:all 0.5s ease;
  110.     -moz-transition:all 0.5s ease;
  111.     -o-transition:all 0.5s ease;
  112.     transition:all 0.5s ease-in-out;
  113. }
  114.  
  115. a:hover {
  116.     color:white;
  117.     text-shadow:1px 1px black;
  118.     -webkit-transition:all 0.5s ease;
  119.     -moz-transition:all 0.5s ease;
  120.     -o-transition:all 0.5s ease;
  121.     transition:all 0.5s ease-in-out;
  122. }
  123.  
  124. /*  NAVIBAR */
  125.  
  126. #beepboop {
  127.     font-size:8px;
  128.     padding:10px;
  129.     position:fixed;
  130.     background:url('{image:Navibar BG}') fixed top right;
  131.     background-color:black;
  132.     color:white;
  133.     bottom:0px;
  134.     width:100%;
  135.     height:30px;
  136.     z-index:99999;
  137. }
  138.  
  139. #disc {
  140.     position:absolute;
  141.     margin-left:650px;
  142.     margin-bottom:-600px;
  143.     bottom:0;
  144.     padding:10px;
  145.     height:200px;
  146.     width:135px;
  147.     color:{color:text};
  148.     background:white;
  149.     font-size:10px;
  150.     text-align:justify;
  151.     font-style:none;
  152.     font-weight:normal;
  153.     overflow-y:scroll;
  154.     overflow-x:hidden;
  155.     opacity:0;
  156.     -webkit-transition:all 0.5s ease;
  157.     -moz-transition:all 0.5s ease;
  158.     -o-transition:all 0.5s ease;
  159.     transition:all 0.5s ease-in-out;
  160. }
  161.  
  162. #beepboop img {
  163.     float:left;
  164.     border-radius:100px;
  165.     width:40px;
  166.     margin-top:-5px;
  167.     opacity:0.4;
  168.     -webkit-transition: all 0.3s linear;
  169.     -moz-transition: all 0.3s linear;
  170.     transition: all 0.3s linear;
  171. }
  172.  
  173. #beepboop:hover img {
  174.     opacity:1;
  175.     -webkit-transition: all 0.3s linear;
  176.     -moz-transition: all 0.3s linear;
  177.     transition: all 0.3s linear;
  178. }
  179.  
  180. #beepboop:hover #disc {
  181.     opacity:1;
  182.     margin-bottom:80px;
  183.     -webkit-transition:all 0.5s ease;
  184.     -moz-transition:all 0.5s ease;
  185.     -o-transition:all 0.5s ease;
  186.     transition:all 0.5s ease-in-out;
  187. }
  188.  
  189. #eye {
  190.     margin-left:50px;
  191.     margin-right:10px;
  192.     display:inline-block;
  193.     font-family:'kittyfont';
  194.     font-size:12px;
  195.     letter-spacing:10px;
  196. }
  197.  
  198. #eye a {
  199.     color:#111;
  200. }
  201.  
  202. #beepboop:hover #eye a:hover {
  203.     color:white;
  204. }
  205.  
  206. #beepboop:hover #eye a {
  207.     color:#888;
  208. }
  209.  
  210.  
  211. #linkz {
  212.  
  213.     padding:10px;
  214.     display:inline-block;
  215.     letter-spacing:1px;
  216. }
  217.  
  218. #linkz a {
  219.     font-family:tinytots;
  220.     font-size:8px;
  221.     margin-left:10px;
  222.     margin-right:10px;
  223.     padding:1px 15px 1px 15px;
  224.     background:#333;
  225.     color:white;
  226.     border-radius:10px;
  227.     opacity:0.4;
  228. }
  229.  
  230. #linkz a:hover {
  231.     color:black;
  232.     background:white;
  233.     text-shadow:none;
  234.     opacity:1;
  235. }
  236.  
  237. #beepboop:hover #linkz a {
  238.     opacity:1;
  239. }
  240.  
  241. /*  TITLE  */
  242.  
  243. #blogtitle {
  244.     top:0;
  245.     position:fixed;
  246.     text-align:center;
  247.     width:640px;
  248.     height:40px;
  249.     background:rgba(255, 255, 255, .3);
  250.     padding:10px;
  251.     z-index:99999;
  252. }
  253.  
  254. #blogtitle a {
  255.     color:{color:text};
  256. }
  257.  
  258. #blogtitle a:hover {
  259.     color:white;
  260. }
  261.  
  262. h2 {
  263.     margin-top:-5px;
  264.     font-family: 'Croissant One', sans serif;
  265.     font-size:30px;
  266.     letter-spacing:-4px;
  267.     font-style:italic;
  268. }
  269.  
  270.  
  271. /*  BIG CONTENT THINGS */
  272.  
  273. #content {
  274.     position:relative;
  275.     margin-left:50px;
  276.     margin-bottom:110px;
  277.     width:500px;
  278. }
  279.  
  280. /*BABY POST THINGS */
  281.  
  282. #potato {
  283.     position:relative;
  284.     width:500px;
  285.     padding:10px;
  286.     z-index:1;
  287.     margin:100px 0px 0px 0px;
  288.     background-color:{color:Post bg};
  289. }
  290.  
  291. img {
  292.     max-width:100%;
  293.     float:center;
  294. }
  295.  
  296. h1 {
  297.     font-family: 'Croissant One', sans serif;
  298.     font-size:26px;
  299.     text-align:center;
  300.     color:{color:text}
  301.     background-color:transparent;
  302.     padding-bottom:12px;
  303. }
  304.  
  305. h1 a {
  306.     font-size:26px;
  307.     color:{color:Links};
  308.     text-decoration: none;
  309. }
  310.  
  311.  a:hover {
  312.     text-shadow:1px 1px gray;
  313.     -webkit-transition: all 0.3s linear;
  314.     -moz-transition: all 0.3s linear;
  315.     transition: all 0.3s linear;
  316.     color:white;
  317. }
  318.  
  319.  
  320. /* INDEX INFO DISPLAY */
  321.  
  322. #infoh{
  323.     position:absolute;
  324.     margin-left:510px;
  325.     margin-top:-10px;
  326.     height:100%;
  327.     width:50px;
  328.     font-style:normal;
  329.     font-family:calibri;
  330.     font-size:11px;
  331.     font-weight:bold;
  332.     letter-spacing:-1px;
  333.     text-align:center;
  334.     background-color:{color:label};
  335.     color:#555;
  336.     -webkit-filter:invert(100%);
  337.     -moz-filter:invert(100%);
  338.     -o-filter:invert(100%);
  339.     -ms-filter:invert(100%);
  340.     filter:invert(100%);
  341.     -webkit-transition: all 0.3s linear;
  342.     -moz-transition: all 0.3s linear;
  343.     transition: all 0.3s linear;
  344. }
  345.  
  346. #infoh a {
  347.     font-size:8px;
  348.     color:#555;
  349. }
  350.  
  351. #infoh a:hover {
  352.     color:#888;
  353.     text-shadow:none;
  354.  
  355. }
  356.  
  357. #potato:hover #infoh {
  358.     opacity:1;
  359.     margin-left:530px;
  360.     -webkit-transition: all 0.3s linear;
  361.     -moz-transition: all 0.3s linear;
  362.     transition: all 0.3s linear;
  363.     -webkit-filter:invert(0%);
  364.     -moz-filter:invert(0%);
  365.     -o-filter:invert(0%);
  366.     -ms-filter:invert(0%);
  367.     filter:invert(0%);
  368.    
  369. }
  370.  
  371. /* QUOTES */
  372.  
  373. #quo {
  374.     font-family:'Croissant One', sans serif;;
  375.     padding:10px;
  376.     line-height:20px;
  377.     font-size:20px;
  378. }
  379.  
  380. blockquote {
  381.     margin-left:10px;
  382.     border-left:1px solid black;
  383.     padding-left:6px;
  384. }
  385.  
  386.  
  387. /*  CHAT */
  388.  
  389. #chitchat {
  390.     padding:5px;
  391. }
  392.  
  393. /* ASK POSTS */
  394.  
  395. h3, h3 a {
  396.     margin-top:0px;
  397.     font-family: 'Croissant One', sans serif;
  398.     text-align:left;
  399.     font-size:16px;
  400. }
  401.  
  402. #asker {
  403.     margin-top:-10px;
  404.     line-height:15px;
  405.     padding:30px 0px 0px 10px;
  406.     background-color:{color:label};
  407.     text-align:left;
  408.     color:white;
  409.     height:auto;
  410. }
  411.  
  412.  
  413. #Q img {
  414.     width:50px;
  415.     margin-right:15px;
  416.     margin-top:-15px;
  417.     float:left;
  418.     border-radius:100px;
  419. }
  420.  
  421. /* AUDIO POSTS */
  422.  
  423. #audi {
  424.    height:auto;
  425. }
  426.  
  427. .art {
  428.     border-radius:100px;
  429.     float:left;
  430.     width:105px;
  431.     position: relative;
  432.     z-index: 1;
  433. }
  434.  
  435. .box {
  436.     background-color: #000;
  437.     position: absolute;
  438.     z-index: 1000;
  439.     opacity: 0;
  440.     border-radius:105px;
  441.     -webkit-transition: all 0.3s linear;
  442.     -moz-transition: all 0.3s linear;
  443.     transition: all 0.3s linear;
  444. }
  445.  
  446. .box:hover {
  447.     opacity:0.6;
  448.     -webkit-transition: all 0.3s linear;
  449.     -moz-transition: all 0.3s linear;
  450.     transition: all 0.3s linear;
  451. }
  452.  
  453. .defaultimg {
  454.     width:75px;
  455.     float:left;
  456.     position:absolute;
  457. }
  458.  
  459. .button {
  460.     width: 23px;
  461.     height: 23px;
  462.     overflow: hidden;
  463.     position: relative;
  464.     z-index: 1000;
  465.     margin: 41px;
  466. }
  467.  
  468. h4 {
  469.     display:inline-block;
  470.     font-family: 'Croissant One', sans serif;
  471.     font-size:12px;
  472.     letter-spacing:-1px;
  473.     line-height:0px;
  474.     margin-right:5px;
  475. }
  476.  
  477. #audiinfo {
  478.     margin-top:-5px;
  479.     margin-left:120px;
  480.     padding:5px;
  481.     text-align:left;
  482.     line-height:25px;
  483. }
  484.  
  485.  
  486. /* PERMALINK INFO DISPLAY */
  487.  
  488. ol.notes {
  489.     padding:50px;
  490.     margin:10px 0px;
  491.     list-style-type:none;
  492.     font-size:11px;
  493.     font-style:normal;
  494.     letter-spacing:1px;
  495.     text-transform:lowercase;
  496. }
  497.  
  498. li.note {
  499.     padding:10px;
  500. }
  501.  
  502. #knots img {
  503.     border-radius:100px;
  504.     position:relative;
  505. }
  506.  
  507. #knots {
  508.     margin-top:-50px;
  509. }
  510.  
  511. #perma {
  512.     background-color:{color:label};
  513.     color:white;
  514.     line-height:15px;
  515.     width:520px;
  516. }
  517.  
  518. /* PAGINAGI */
  519.  
  520. .pagi {
  521.     position:fixed;
  522.     margin-top:380px;
  523.     margin-left:700px;
  524.     font-family: 'Croissant One', sans serif;
  525.     font-size:30px;
  526.     font-style:italic;
  527.     text-align:right;
  528.     color:#999;
  529. }
  530.  
  531. .pagi a {
  532.     font-size:30px;
  533.     color:#ddd;
  534.     display:inline-block;
  535.     display:-moz-inline-stack;
  536.     line-height:100%;
  537.     padding:0px 5px 5px 5px;
  538.     letter-spacing:-1px;
  539.     -webkit-transition: all 0.3s linear;
  540.     -moz-transition: all 0.3s linear;
  541.     transition: all 0.3s linear;
  542. }
  543.  
  544. .pagi a:hover {
  545.     color:white;
  546.     -webkit-transition: all 0.3s linear;
  547.     -moz-transition: all 0.3s linear;
  548.     transition: all 0.3s linear;
  549. }
  550.  
  551. </style>
  552.  
  553.  
  554.  
  555. </head>
  556.  
  557.  
  558. <body>
  559.     <div style="position:absolute;top:0;right:0;opacity:0.5;"><a href="http://kamikaze-love.tumblr.com" title="theme credit">©</a></div>
  560.     <div id="blogtitle">
  561.         <a href="/"><h2>{Title}</h2></a>
  562.     </div>
  563.    
  564.     <div id="beepboop">
  565.         <img src="{PortraitURL-96}">
  566.             <div id="eye">
  567.                <a href="/">a</a>
  568.                <a href="/ask">b</a>
  569.                <a href="/archive">j</a>
  570.                <a href="http://kamikaze-love.tumblr.com">z</a>
  571.             </div>
  572.             <div id="linkz">
  573.                 <a href="{text:Link 1 URL}">{text:Link 1}</a>
  574.                 <a href="{text:Link 2 URL}">{text:Link 2}</a>
  575.                 <a href="{text:Link 3 URL}">{text:Link 3}</a>
  576.                 <a href="{text:Link 4 URL}">{text:Link 4}</a>
  577.                 <a href="{text:Link 5 URL}">{text:Link 5}</a>
  578.             </div>
  579.             <div id="disc">
  580.                 {block:description}{description}{/block:description}
  581.             </div>
  582.     </div>
  583.  
  584.     <div class="pagi">
  585.    
  586.         {block:Pagination}
  587.        
  588.             {block:PreviousPage}
  589.                 <a href="{PreviousPage}">previous&laquo;</a>
  590.             {/block:PreviousPage}
  591.            
  592.             {block:NextPage}
  593.                 <a href="{NextPage}">&raquo;next</a>
  594.             {/block:NextPage}
  595.            
  596.         {/block:Pagination}
  597.        
  598.     </div>
  599.  
  600.  
  601.     <div id="content">
  602.        
  603.         {block:Posts}
  604.        
  605.             <div id="potato">
  606.            
  607.                 {block:IndexPage}
  608.                     <div id="infoh">
  609.                         {block:Date}
  610.                             <a href="{Permalink}">
  611.                             <font size="5px" style="font-style:italic;font-weight:normal;">{DayOfMonthWithZero}</font></a><br>{ShortMonth}&nbsp&nbsp&nbsp{ShortYear}<br>
  612.                         {/block:Date}
  613.                            
  614.                         {block:NoteCount}
  615.                             <a href="{Permalink}"><font style="font-family:tinytots;font-weight:normal;">&hearts;&nbsp{NoteCount}</font></a>
  616.                         {/block:NoteCount}<br>
  617.                            
  618.                         <div style="display:block;font-family:tinytots;letter-spacing:0px;margin-top:5px;font-weight:normal;"><a href="{ReblogURL}">REBLOG</a></div>
  619.                     </div>
  620.                 {/block:IndexPage}
  621.                
  622.            
  623.                 {block:Text}
  624.                     {block:Title}<h1>{Title}</h1>{/block:Title}
  625.                     {Body}
  626.                 {/block:Text}
  627.  
  628.                
  629.                 {block:Photo}
  630.                
  631.                     <div id="pics">
  632.                         {block:indexpage}
  633.                             <a href="{Permalink}"><img src="{PhotoURL-highres}" /></a>
  634.                         {/block:indexpage}
  635.                        
  636.                         {block:permalinkpage}
  637.                             {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  638.                         {/block:permalinkpage}
  639.                     </div>
  640.                    
  641.                 {/block:Photo}
  642.                  
  643.                          
  644.                 {block:Photoset}
  645.                         {photoset-500}
  646.                 {/block:Photoset}
  647.                  
  648.                  
  649.                 {block:Quote}
  650.                     <div id="quo">&ldquo;{Quote}&rdquo;</div>
  651.                    
  652.                     {block:Source}<div align="right"><i>- {Source}</i></div>{/block:Source}
  653.                 {/block:Quote}
  654.                  
  655.                  
  656.                 {block:Link}
  657.                     <h1>
  658.                         <a href="{URL}" target="{Target}">{Name}</a>
  659.                     </h1>
  660.                    
  661.                 {block:Description}{Description}{/block:Description}
  662.                 {/block:Link}
  663.                  
  664.                  
  665.                 {block:Chat}
  666.                     {block:Title}<h1>{Title}</h1>{/block:Title}        
  667.                     {block:Lines}
  668.                         <div id="chitchat">
  669.                             {block:Label}
  670.                                 <h4>{Label}</h4>
  671.                             {/block:Label}
  672.                             {Line}<br>
  673.                         </div>
  674.                     {/block:Lines}
  675.                 {/block:Chat}
  676.                  
  677.            
  678.                 {block:Audio}
  679.                     <div style="height:105px;">
  680.                         <div class="box">
  681.                             <div class="button">
  682.                                 {block:AudioPlayer}
  683.                                     {AudioPlayerBlack}
  684.                                 {/block:AudioPlayer}
  685.                             </div>
  686.                         </div>
  687.  
  688.                         <img src="http://static.tumblr.com/8di24cd/UuNmvufy4/100pxtransparent.gif" class="defaultimg">
  689.                        
  690.                         {block:AlbumArt}
  691.                             <img src="{AlbumArtURL}" class="art">
  692.                         {/block:AlbumArt}
  693.  
  694.                         {block:TrackName}
  695.                             <div id="audiinfo"><h4>Name:</h4> {TrackName}</div>
  696.                         {/block:TrackName}
  697.  
  698.                         {block:Artist}
  699.                             <div id="audiinfo"><h4>Artist:</h4> {Artist}</div>
  700.                         {/block:Artist}
  701.  
  702.                         {block:Album}
  703.                             <div id="audiinfo"><h4>Album:</h4> {Album}</div>
  704.                         {/block:Album}
  705.                     </div>
  706.                 {/block:Audio}
  707.            
  708.            
  709.                 {block:Video}
  710.                         {Video-500}
  711.                 {/block:Video}
  712.  
  713.  
  714.                 <div id="Q">
  715.                     {block:Answer}
  716.                         <div id="asker">
  717.                             <img src="{AskerPortraitURL-64}"/>
  718.                             <h3>{Asker} asked:</h3>
  719.                             <b>{Question}</b><br><br>
  720.                         </div>
  721.                         <p>{Answer}</p>
  722.                     {/block:Answer}
  723.                 </div>
  724.                      
  725.  
  726.             </div>
  727.            
  728.             {block:PermalinkPage}
  729.                 <div id="caps">
  730.                     {block:Caption}
  731.                         {Caption}
  732.                     {/block:Caption}
  733.                 </div>
  734.                
  735.                 <div id="perma">
  736.                     <div id="day" style="text-align:center;">
  737.                         {block:Date}
  738.                             <b><i>Posted{lang:TimeAgo} on</i></b> {DayOfWeek}, {DayOfMonth} {Month} {Year}
  739.                         {/block:Date}
  740.                         {block:NoteCount} <b><i>with</i></b> {NoteCountWithLabel}{/block:NoteCount}
  741.                     </div>
  742.                    
  743.                     {block:HasTags}
  744.                         <div id="tags" style="text-align:center;">
  745.                             <b><i>tagged as:</i></b>
  746.                             {block:Tags}
  747.                                 <a href="{TagURL}">{Tag}   </a>
  748.                             {/block:Tags}
  749.                         </div>
  750.                     {/block:HasTags}
  751.                
  752.                     <div id="sauce" style="text-align:center;">
  753.                         {block:RebloggedFrom}
  754.                             <b><i>via:</i></b> <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>
  755.                             <b><i>origin:</i></b> <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  756.                         {/block:RebloggedFrom}
  757.                     </div>
  758.                 </div>
  759.                    
  760.                 {block:PostNotes}
  761.                     <div id="knots">{PostNotes}</div>
  762.                 {/block:PostNotes}
  763.                    
  764.             {block:PermalinkPage}
  765.            
  766.         {/block:Posts}
  767.  
  768.     </div>
  769.  
  770. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement