Advertisement
RubySolar

Windows XP Tumblr

Aug 20th, 2013 (edited)
1,365
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 22.45 KB | None | 1 0
  1. <!--Untitled Theme version 1.1 designed by MisterTiger (www.mistertiger.tumblr.com) for Tumblr-->
  2.  
  3. <html>
  4.      
  5.         <head>
  6.             <title>{text:BrowserTitle}</title>
  7.             <link rel="shortcut icon" href="{Favicon}">
  8.             <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.             {block:Description}
  10.                 <meta name="description" content="{MetaDescription}" />
  11.             {/block:Description}
  12.                
  13.         <meta charset="utf-8" />
  14.    
  15.     <meta name="image:Background" content="" />
  16.     <meta name="color:BackGround Color" content="" />
  17.     <meta name="font:Body Text" content="" />
  18.    
  19.     <meta name="text:My Computer" content="" />
  20.     <meta name="text:BrowserTitle" content="" />
  21.    
  22.     <meta name="if:Archive Link" content="1" />
  23.    
  24.     <meta name="color:Link Color" content="#0645AD" />
  25.     <meta name="color:Link Hover" content="#3366BB" />
  26.     <meta name="color:Label Color" content="#FFFFFF" />
  27.     <meta name="color:Text Color" content="#3e423d" />
  28.     <meta name="color:Border Color" content="#084fbe" />
  29.    
  30.     <meta name="text:HyperLink 1" content="" />
  31.     <meta name="text:LinkTitle 1" content"" />
  32.     <meta name="text:HyperLink 2" content="" />
  33.     <meta name="text:LinkTitle 2" content"" />
  34.     <meta name="text:HyperLink 3" content="" />
  35.     <meta name="text:LinkTitle 3" content"" />
  36.     <meta name="text:HyperLink 4" content="" />
  37.     <meta name="text:LinkTitle 4" content"" />
  38.     <meta name="text:HyperLink 5" content="" />
  39.     <meta name="text:LinkTitle 5" content"" />
  40.  
  41.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  42.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  43.  
  44.         <style type="text/css">
  45.      
  46.         body {
  47.             font-size: 14px;
  48.             height:100%;
  49.             line-height: 125%;
  50.             padding: 0;
  51.             margin: 0;
  52.             background-size: 100% 100%;
  53.             background-attachment:fixed;
  54.             background-image: url('{image:Background}');
  55.             background-repeat:no-repeat;
  56.             background-color: {color:BackGround Color};
  57.             color: {color:Text Color};
  58.             font-family: {font:Body Text}, 'MS Sans Serif';
  59.            
  60.         }
  61.        
  62.         a:link {text-decoration: none; color: {color:Link Color};
  63.         } /* unvisited link */
  64.         a:visited {text-decoration: none; color: {color:Link Color} ;
  65.         } /* visited link */
  66.         a:hover {text-decoration: underline; color: {color:Link Hover};
  67.         }   /* mouse over link */
  68.         a:active {text-decoration: underline; color: {color:Link Color};
  69.         }  /* selected link */
  70.        
  71.         /*Image Sprite used for Icons, Start button, and Start Menu*/
  72.         .myComputer, .askImage, .submitImage, .pageImage, .archiveImage, .start, .start:hover, .quick-start, .time, .start-menu, .caption-index, .arrow-up, .arrow-right, .arrow-left, #profile {
  73.             background-image: url("https://static.tumblr.com/7ca5bgd/JuTmz6clp/xp_icons.png");
  74.         }
  75.        
  76.        
  77.         #menu {
  78.             display: block;
  79.             width: 100px;
  80.             position: absolute;
  81.             padding: 0px;
  82.             top: 10px;
  83.             left: 10px;  
  84.         }
  85.         .icon {z-index: 4; word-wrap:break-word;}
  86.         .myComputer, .askImage, .submitImage, .pageImage, .archiveImage
  87.         {
  88.             margin: auto;
  89.             display: block;
  90.             margin-top: 10px;
  91.         }
  92.         .label, .label a, .label a:hover{
  93.             text-align: center;
  94.             text-decoration: none;
  95.             text-shadow: 1px 1px #000000;
  96.             color: {color:Label Color};
  97.         }
  98.         .myComputer {
  99.             height: 40px;
  100.             width: 40px;
  101.             background-position: 0px 0px;
  102.         }
  103.         .askImage {
  104.             height: 40px;
  105.             width: 40px;
  106.             background-position: 0px -120px;
  107.         }
  108.         .submitImage{
  109.             height: 40px;
  110.             width: 40px;
  111.             background-position: 0px -40px;
  112.         }
  113.         .pageImage {
  114.             height: 40px;
  115.             width: 40px;
  116.             background-position: 0px -160px;
  117.         }
  118.         .archiveImage {
  119.             height: 40px;
  120.             width: 40px;
  121.             background-position: 0px -80px;
  122.         }
  123.         /*----------------------------------------------*/
  124.         #wrapper-posts {
  125.             display: block;
  126.             position: absolute;
  127.             top: 20px;
  128.             left: 200px;
  129.             width: 600px;
  130.             padding-bottom: 40px;
  131.         }
  132.         .posts {
  133.             display: block;
  134.             -moz-box-sizing: border-box;
  135.             -webkit-box-sizing: border-box;
  136.             box-sizing: border-box;
  137.             overflow: auto;
  138.             position: relative;
  139.             width: 600px;
  140.             margin: 0px 0px 20px 0px;
  141.             padding: 25px;
  142.             border-width: 4px;
  143.             border-style: none solid solid solid;
  144.             background-color: white;
  145.             border-color: {color:Border Color};
  146.         }
  147.         .caption-index {
  148.             display: block;
  149.             margin: 0; padding: 0;
  150.             width: 600px;
  151.             height: 76px;
  152.             background-position: -41px 0px;
  153.         }
  154.         .caption {
  155.             display: block;
  156.             position: relative;
  157.             top: 56px;
  158.             width: 580px;
  159.             margin-left: 10px;
  160.         }
  161.         .caption a, .caption a:hover, .caption {
  162.             color: #3e423d; font-size: 12px; text-decoration: none;
  163.         }
  164.         .tags {
  165.             margin: -30px 0px 20px 0px;
  166.         }
  167.         /*----------------------------------------------*/
  168.         .posts .copy {
  169.             padding: 0;
  170.             margin: 0;
  171.         }
  172.         .posts blockquote {
  173.             margin-left: 20px;
  174.             padding-left: 4px;
  175.             border-left: 3px solid {color:Border Color};
  176.             min-width: 150px;
  177.         }
  178.         .posts .photo {
  179.             min-width:540px;
  180.             max-width: 545px;
  181.         }
  182.         .posts .text-title {
  183.             font-weight: bold;
  184.             font-size: 1.8em;
  185.             margin-bottom: 15px;
  186.             line-height: 105%;
  187.         }
  188.         .quote.short {
  189.             font-size: 30px;
  190.             line-height: 110%;
  191.         }
  192.         .quote.medium {
  193.             font-size: 25px;
  194.             line-height: 110%;
  195.         }
  196.         .quote.long {
  197.             font-size: 18px;
  198.             line-height: 110%;
  199.         }
  200.         .posts table, .posts table tr td {
  201.             border: 1px solid  {color:Border Color};
  202.         }
  203.         .posts .ask {
  204.             border-radius: 5px;
  205.             -moz-border-radius: 10px;
  206.             padding: 2px;
  207.             background-color: rgba(0,0,0,0.5);
  208.             color: white;
  209.             border: 2px dashed {color:Border Color};
  210.         }
  211.         /*----------------------------------------------*/
  212.         #profile {
  213.             display: block;
  214.             position: absolute;
  215.             top: 150px; left: 850px;
  216.             height: 216px; width: 300px;
  217.             margin-right: 50px;
  218.             background-position: -336px -238px;
  219.         }
  220.         .pro-title {
  221.             display: block;
  222.             position: absolute;
  223.             top: 8px;
  224.             left: 30px;
  225.             color: rgb(255,255,255);
  226.         }
  227.         .pro-title img {
  228.             padding: 0; margin: 0;
  229.             position: absolute;
  230.             left: -24px; top: -3px;
  231.         }
  232.         .pro-description {
  233.             display: block;
  234.             position: absolute;
  235.             width: 220px; height:125px;
  236.             top: 45px; left: 60px;
  237.             overflow: auto;
  238.             word-wrap:break-word;
  239.         }
  240.         #hide {
  241.             position: absolute;
  242.             display: block;
  243.             top: 175px; left: 111px;
  244.             width: 80px; height: 23px;
  245.             background-image: url("https://static.tumblr.com/7ca5bgd/kQvmznvtl/button_ok.png");
  246.             background-position: 0px -23px;
  247.         }
  248.         #hide:hover {
  249.             background-position: 0px 0px;
  250.         }
  251.         /*---------------------------------------------*/
  252.         .notes {
  253.             display: block;
  254.             position: relative;
  255.             left: 0px;
  256.             top: -15px;
  257.             width: 500px;
  258.         }
  259.         .notes ol{
  260.             background-color: #FFF;
  261.             margin: 0; padding: 10px 46px 50px 46px;
  262.             border-width: 4px;
  263.             border-style: none solid solid solid;
  264.             border-color: {color:Border Color};
  265.         }
  266.         .arrow-up, .arrow-right, .arrow-left {
  267.             display: block;
  268.             margin: 1px;
  269.             width: 25px;
  270.             height: 25px;
  271.             float: left;
  272.         }
  273.         .arrow-left {
  274.             background-position: -616px -76px;
  275.         }
  276.         .arrow-up {
  277.             background-position: -616px -126px;
  278.         }
  279.         .arrow-right {
  280.             background-position: -616px -101px;
  281.         }
  282.         /*---------------------------------------------*/
  283.         #submenu {
  284.             display: block;
  285.             position: fixed;
  286.             bottom: 0;
  287.             left: 0;
  288.             min-width: 100%;
  289.             width: 500px;
  290.             height: 30px;
  291.             background-image: url('https://static.tumblr.com/7ca5bgd/3Rrms4bv0/blue_menu.png');
  292.             background-repeat: repeat-x;
  293.             z-index: 5;
  294.         }
  295.         .start {
  296.             position: absolute;
  297.             top: 0;
  298.             left: 0;
  299.             width: 100px;
  300.             height: 30px;
  301.             background-position: -41px -172px;
  302.         }
  303.         .start:hover {
  304.             background-position: -41px -206px;
  305.         }
  306.         .start-menu {
  307.             display: none;
  308.             position: absolute;
  309.             bottom: 30px;
  310.             width: 334px;
  311.             height: 420px;
  312.             background-position: 0px -239px;
  313.         }
  314.         .start:hover .start-menu {display: block;}
  315.         .avi {
  316.             display: block;
  317.             position: absolute;
  318.             left: 9px;
  319.             top: 9px;
  320.         }
  321.         .start-title {
  322.             display: block;
  323.             position: absolute;
  324.             top: 18px;
  325.             left: 60px;
  326.             overflow: hidden;
  327.             width: 260px;
  328.             height: 30px;
  329.         }
  330.         .start-title a, .start-title a:hover {
  331.             color: #FFFFFF;
  332.             font-size: 20px;
  333.             text-shadow: 1px 1px #000000;
  334.             text-decoration: none;
  335.         }
  336.         .program {
  337.             display: block;
  338.             width: 160px;
  339.             height: 31px;
  340.             position: absolute;
  341.             top: 353px;
  342.             left: 2px;
  343.         }  
  344.         .program:hover {background-color:rgba(12,95,203,0.3);}
  345.         .program:hover .custlinks {
  346.             display: block;
  347.         }
  348.         .custlinks {
  349.             display: none;
  350.             position: absolute;
  351.             bottom: 0px;
  352.             left: 126px;
  353.             height: 150px;
  354.             width: 200px;
  355.             background-color: #FFF;
  356.             z-index: 7;
  357.             border-left: 4px solid #4488EE;
  358.            
  359.             font-size: 12px;
  360.             list-style: none;
  361.             margin: 0;
  362.             padding: 0;
  363.         }
  364.         .custlinks a {
  365.             display:block;
  366.             padding: 10px 0px 0px 10px;
  367.             height: 20px;
  368.         }
  369.         .custlinks a:hover {
  370.             background-color:rgba(12,95,203,0.5);
  371.             color:#FFF;
  372.             text-decoration: none;
  373.         }
  374.         .log-off {
  375.             display: block;
  376.             width: 65px;
  377.             height: 30px;
  378.             position: absolute;
  379.             top: 387px;
  380.             left: 152px;
  381.         }
  382.         .log-off:hover {background-color:rgba(12,95,203,0.3);}
  383.         .search {
  384.             display: block;
  385.             background-color: red;
  386.             position: absolute;
  387.             top: 350px;
  388.             left: 175px;
  389.         }
  390.         .input {
  391.             width: 150px;
  392.         }
  393.         .searchbox_submit {
  394.             position: absolute;
  395.             top: 0;
  396.             right: 0;
  397.         }
  398.        
  399.         .quick-start {
  400.             position: absolute;
  401.             top: 0;
  402.             left: 100px;
  403.             width:125px;
  404.             height: 30px;
  405.             background-position: -41px -138px;
  406.         }
  407.         .time {
  408.             position: absolute;
  409.             top: 0;
  410.             right: 0px;
  411.             width:88px;
  412.             height: 30px;
  413.             background-position: -41px -102px;  
  414.         }
  415.         #clock {
  416.             display: block;
  417.             color: white;
  418.             font-size: 11px;
  419.             position: relative;
  420.             top: 7px;
  421.             left: 30px;
  422.         }
  423.        
  424.         {CustomCSS}
  425.         </style>
  426.                
  427.              
  428.         </head>
  429.    
  430.      
  431.      
  432.     <body>
  433.    
  434.    
  435.     <div id="menu">
  436.         <div class="icon">
  437.             <a href="/" class="myComputer" title="Home"></a>
  438.             <div class="label"><a href="/">{text:My Computer}</a></div>
  439.         </div>
  440.         {block:AskEnabled}
  441.         <div class="icon">
  442.             <a href="/ask/" title="Ask" class="askImage"></a>
  443.             <div class="label"><a href="/ask/">{AskLabel}</a></div>
  444.         </div>
  445.         {/block:AskEnabled}
  446.         {block:SubmissionsEnabled}
  447.         <div class="icon">
  448.             <a href="/submit/" title="Submit" class="submitImage"></a>
  449.             <div class="label"><a href="/submit/">{SubmitLabel}</a></div>
  450.         </div>
  451.         {/block:SubmissionsEnabled}
  452.         {block:HasPages}
  453.             {block:Pages}
  454.             <div class="icon">
  455.                 <a href="{URL}/" class="pageImage"></a>
  456.                 <div class="label"><a href="{URL}/">{Label}</a></div>
  457.             </div>
  458.             {/block:Pages}
  459.         {/block:HasPages}
  460.         {block:IfArchiveLink}
  461.         <div class="icon">
  462.             <a href="/archive/" class="archiveImage"></a>
  463.             <div class="label"><a href="/archive/">Archive</a></div>
  464.         </div>
  465.         {/block:IfArchiveLink}
  466.     </div>    
  467.    <!--End of [icon] Menu-->
  468.    
  469.    
  470.    
  471.  
  472.     <div id="wrapper-posts">
  473.     {block:Posts}
  474.    
  475.    
  476.         {block:IndexPage}
  477.             <div class="caption-index">  
  478.                 <span class="caption">
  479.                     <a href="{Permalink}">
  480.                      Posted on {block:Date}{DayOfWeek}, {Month} {DayOfMonthWithZero}, {Year} {/block:Date}  
  481.                      {block:NoteCount}
  482.                         with
  483.                         {NoteCount}
  484.                         Notes
  485.                      {/block:NoteCount}
  486.                     </a>
  487.                 </span>
  488.             </div>
  489.         {/block:IndexPage}
  490.    
  491.    
  492.         {block:PermalinkPage}                    
  493.             <div class="caption-index">
  494.                 <span class="caption">
  495.                     <a href="{PhotoURL-HighRes}">&nbsp;High Res </a>
  496.                     {block:ContentSource}
  497.                         <a href="{SourceURL}">&nbsp;Source</a>
  498.                     {/block:ContentSource}
  499.                     {block:RebloggedFrom}
  500.                     &nbsp;VIA:<a href="{ReblogParentURL}">{ReblogParentName}  </a>
  501.                     &nbsp;Original:<a href="{ReblogRootURL}">{ReblogRootName} </a>
  502.                     {/block:RebloggedFrom}
  503.                     <a href="{ReblogURL}">&nbsp;Reblog</a>
  504.                     &nbsp;{NoteCount} Notes
  505.                 </span>
  506.             </div>
  507.         {/block:PermalinkPage}
  508.    
  509.    
  510.    
  511.    
  512.    
  513.         {block:Text}
  514.             <div class="posts">
  515.                 {block:Title}
  516.                     <div class="text-title"><a href="{Permalink}">{Title}</a></div>
  517.                 {/block:Title}
  518.                 <div class="text">{Body}</div>
  519.             </div>
  520.         {/block:Text}
  521.          
  522.          
  523.         {block:Photo}
  524.              <div class="posts">
  525.                 <a href="{Permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
  526.                 {block:Caption}
  527.                     <div class="copy">{Caption}</div>
  528.                 {/block:Caption}
  529.              </div>
  530.         {/block:Photo}
  531.        
  532.        
  533.         {block:Photoset}
  534.              <div class="posts">
  535.              {Photoset-500}
  536.              
  537.              {block:Caption}
  538.                 <div class="copy">{Caption}</div>
  539.              {/block:Caption}
  540.              </div>
  541.         {/block:PhotoSet}
  542.        
  543.        
  544.         {block:Quote}
  545.             <div class="posts">
  546.                 <div class="quote {Length}">"{Quote}"</div>
  547.                 {block:Source}
  548.                     <br />- {Source}
  549.                 {/block:Source}
  550.             </div>
  551.         {/block:Quote}
  552.        
  553.        
  554.         {block:Link}
  555.             <div class="posts">
  556.                 <div class="text-title">
  557.                 <a href="{URL}" {Target}>{Name}</a>
  558.                 </div>
  559.                 {block:Description}
  560.                 <div class="copy">{Description}</div>
  561.                 {/block:Description}
  562.             </div>
  563.         {/block:Link}
  564.        
  565.        
  566.         {block:Chat}
  567.             <div class="posts">
  568.                 {block:Title}
  569.                 <div class="text-title">{Title}</div>
  570.                 {/block:Title}
  571.                
  572.                 <table>
  573.                     {block:Lines}
  574.                              <tr>
  575.                              {block:Label}
  576.                                 <td>{Label}</td>
  577.                              {/block:Label}
  578.                                 <td>{Line}</td>
  579.                             </tr>
  580.                     {/block:Lines}
  581.                 </table>
  582.             </div>
  583.         {/block:Chat}
  584.        
  585.        
  586.         {block:Audio}
  587.             <div class="posts">
  588.                 {AudioPlayerBlack}
  589.  
  590.                 {block:Caption}
  591.                     <div class="copy">{Caption}</div>
  592.                 {/block:Caption}
  593.             </div>
  594.         {/block:Audio}
  595.  
  596.  
  597.         {block:Video}
  598.             <div class="posts">
  599.                 {Video-500}
  600.  
  601.                 {block:Caption}
  602.                     <div class="copy">{Caption}</div>
  603.                 {/block:Caption}
  604.             </div>
  605.         {/block:Video}
  606.  
  607.  
  608.         {block:Answer}
  609.             <div class="posts">
  610.                     <div class="ask">
  611.                         {Question}
  612.                     </div>
  613.                     - <span style="font-size: 11px;">{Asker}</span>
  614.                 <div class="answer">
  615.                 <blockquote>{Answer}</blockquote>
  616.                 </div>
  617.                
  618.             </div>
  619.         {/block:Answer}
  620.        
  621.         {block:Panorama}
  622.             <div class="posts">
  623.                 {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
  624.            
  625.                 {block:Caption}
  626.                     {Caption}
  627.                 {/block:Caption}
  628.                
  629.              
  630.             </div>
  631.         {/block:Panorama}
  632.  
  633.  
  634.         {block:PostNotes}
  635.             <div class="notes">
  636.                 {PostNotes}
  637.             </div>
  638.         {/block:PostNotes}
  639.        
  640.         {block:HasTags}
  641.             <span class="posts tags">
  642.                 {block:Tags}
  643.                   #<a href="{TagURL}">{Tag}</a>
  644.                 {/block:Tags}
  645.             </span>
  646.         {/block:HasTags}
  647.     {/block:Posts}
  648.    
  649.    
  650.    
  651.         {block:PreviousPage}
  652.             <a href="{PreviousPage}" class="arrow-left"></a>
  653.         {/block:PreviousPage}
  654.         <a href="#" class="arrow-up"></a>
  655.         {block:NextPage}
  656.         <a href="{NextPage}" class="arrow-right"></a>
  657.         {/block:NextPage}
  658.        
  659.     </div>
  660.     <!--End of Posts-->
  661.  
  662.     <div id="profile">
  663.         <div class="pro-title">
  664.             <img src="{PortraitURL-24}" alt="icon" width="20"/> {Title}
  665.         </div>
  666.         <div class="pro-description">
  667.             {Description}
  668.         </div>
  669.        
  670.         <div id="hide"></div>
  671.     </div>
  672.    
  673.     <script>
  674.     $(document).ready(function(){
  675.         $("#hide").click(function(){
  676.             $("#profile").hide();
  677.             });
  678.     });
  679.    
  680.       $( function() {
  681.         $(".icon").draggable();
  682.       } );
  683.     </script>
  684.  
  685. <!------------------------------------------------------ -->
  686.     <div id="submenu">
  687.    
  688.         <div class="start">
  689.             <div class="start-menu">
  690.                 <a href="/">
  691.                 <img src="{PortraitURL-40}" class="avi" alt="{Title}"/>
  692.                 </a>
  693.                 <span class="start-title"><a href="/">{Title}</a></span>
  694.                 <div class="program">
  695.                     <div class="custlinks">
  696.                    
  697.                     <a href="{text:HyperLink 1}">{text:LinkTitle 1}</a>
  698.                     <a href="{text:HyperLink 2}">{text:LinkTitle 2}</a>
  699.                     <a href="{text:HyperLink 3}">{text:LinkTitle 3}</a>
  700.                     <a href="{text:HyperLink 4}">{text:LinkTitle 4}</a>
  701.                     <a href="{text:HyperLink 5}">{text:LinkTitle 5}</a>
  702.                    
  703.                     </div>
  704.                 </div>
  705.                
  706.                 <a class="log-off" href="https://www.tumblr.com/dashboard">
  707.                 </a>
  708.                 <div class="search">
  709.                     <form action="/search" method="get">
  710.                     <input type="text" name="q" value="{SearchQuery}" class="input"/>
  711.                     </form>
  712.                 </div>
  713.             </div>  
  714.         </div>
  715.        
  716.         <div class="quick-start"></div>
  717.         <div class="time"><span id="clock">&nbsp;</span></div>
  718.         <script type="text/javascript">
  719.         <!--function updateClock ( )
  720.        {var currentTime = new Date ( );
  721.        var currentHours = currentTime.getHours ( );
  722.        var currentMinutes = currentTime.getMinutes ( );
  723.        currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  724.        var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
  725.        currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
  726.        currentHours = ( currentHours == 0 ) ? 12 : currentHours;
  727.        var currentTimeString = currentHours + ":" + currentMinutes + "" + timeOfDay;
  728.        document.getElementById("clock").firstChild.nodeValue = currentTimeString;
  729.        }
  730.        </script>
  731.    </div>
  732.    <!--End of Sub Menu-->
  733.    
  734.     </body>
  735.     </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement