Advertisement
feiinho

Final Fantasy VII Theme 2.0

Aug 11th, 2018
423
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.  
  3.   _______
  4. ===| |─────── /    FINAL FANTASY VII THEME 2.0
  5.    ̄ ̄ ̄ ̄ ̄           [clloudstrife.tumblr.com]
  6.  
  7.  
  8. Last updated: December 15th, 2017
  9.     - 12/15/17 Added high res link to photo posts
  10.     - 10/25/17 Fixed issue with sidebar links + added ask enable / submit enable
  11. --->
  12.  
  13.  
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}
  21.     <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}  
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
  25.  
  26. <meta name="image:Background" content="#ffffff" />
  27.  
  28. <meta name="text:Name" content="Cloud" />
  29. <meta name="text:Level" content="99" />
  30. <meta name="text:HP" content="900" />
  31. <meta name="text:Max HP" content="9999" />
  32. <meta name="text:MP" content="50" />
  33. <meta name="text:Max MP" content="999" />
  34. <meta name="text:Next Level" content="50" />
  35. <meta name="text:Limit Level" content="50" />
  36. <meta name="text:Location" content="7th Heaven" />
  37.  
  38.  
  39.  
  40. <style type="text/css">
  41.  
  42. body {
  43.     background: #000000 url({image:Background}) top fixed repeat;
  44.     color: #ffffff;
  45.     font: 12px 'Maven Pro', verdana;
  46.     line-height: 17px;
  47.     margin: 0;
  48.     text-shadow: 2px 2px #000021;
  49.     word-wrap: break-word;
  50. }
  51.  
  52. .iframe-controls--desktop {
  53.    -webkit-transform:scale(0.8,0.8);
  54.    -webkit-transform-origin: 100% 0%;
  55.    -ms-transform-origin: 100% 0%;
  56.    -ms-transform: scale(0.8,0.8);
  57.    transform: scale(0.8,0.8);
  58.    transform-origin:100% 0%;
  59. }
  60.  
  61. ::-webkit-scrollbar {
  62.     width: 14px;
  63.     height: 0;
  64.     background: transparent;
  65. }
  66.  
  67. ::-webkit-scrollbar-thumb {
  68.     background: #0000ad;
  69.     background: -moz-linear-gradient(top, #0000ad 0%, #0e0d37 100%);
  70.     background: -webkit-linear-gradient(top, #0000ad 0%,#0e0d37 100%);
  71.     background: linear-gradient(to bottom, #0000ad 0%,#0e0d37 100%);
  72.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#0e0d37',GradientType=0 );
  73.     border: 2px ridge #dfdde8;
  74.     border-radius: 6px;
  75. }
  76.  
  77. ::-moz-selection {
  78.     color: #ff0000
  79. }
  80.  
  81. ::selection {
  82.     color: #ff0000
  83. }
  84.  
  85. img {
  86.     max-width: 100%;
  87.     border: 0;
  88. }
  89.  
  90. a {
  91.     color: #00ffff;
  92.     text-decoration: none;
  93. }
  94.  
  95. pre {
  96.     font: 11px calibri;
  97. }
  98.  
  99. b, strong, i, em{
  100.    color: #ffff00;
  101. }
  102.  
  103. h1 {
  104.     font-weight: normal;
  105.     margin: 5px 0 15px 0;
  106. }
  107.  
  108. blockquote {
  109.     margin: 1px 10px 10px 10px;
  110.     padding-left: 7px;
  111.     border-left: 1px solid {color:Borders};
  112. }
  113.  
  114. #s-m-t-tooltip {
  115.     background: #730d96;
  116.     background: -moz-linear-gradient(top, #730d96 0%, #6e1137 100%);
  117.     background: -webkit-linear-gradient(top, #730d96 0%,#6e1137 100%);
  118.     background: linear-gradient(to bottom, #730d96 0%,#6e1137 100%);
  119. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#730d96', endColorstr='#6e1137',GradientType=0 );
  120.     border: 4px ridge #c9c9c9;
  121.     border-radius: 7px;
  122.     margin: -24px 14px 7px 12px;
  123.     padding: 3px;
  124. }
  125.  
  126. #content {
  127.     margin: 50px auto;
  128.     width: 500px;
  129. }
  130.  
  131. .sidebar {
  132.     height: 100%;
  133.     margin: -50px 0 0 -340px;
  134.     position: fixed;
  135.     width: 300px;
  136.     z-index: 500;
  137. }
  138.  
  139. .status, .bio, .navigation, .timer, .location {
  140.     background: #0000ad;
  141.     background: -moz-linear-gradient(-45deg, #0000ad 0%, #000021 100%);
  142.     background: -webkit-linear-gradient(-45deg, #0000ad 0%,#000021 100%);
  143.     background: linear-gradient(135deg, #0000ad 0%,#000021 100%);
  144.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#000021',GradientType=1 );
  145.     border: 4px ridge #c9c9c9;
  146.     border-radius: 7px;
  147.     padding: 10px;
  148. }
  149.  
  150. .status {
  151.     margin-top: 70px;
  152.     padding-top: 14px;
  153.     height: 80px;
  154. }
  155.  
  156. .stats {
  157.     font: 11px consolas;
  158. }
  159.  
  160. .avipoint a:hover {
  161.     position: relative;
  162. }
  163.  
  164. .avipoint a:hover:after {
  165.     content: url(http://static.tumblr.com/gz5o3ld/HFHoy5g0u/linkpointer.png);
  166.     display: block;
  167.     left: -25px;
  168.     position: absolute;
  169.     top: -30px;
  170. }
  171.  
  172. .stats b, .stats strong {
  173.     font-family: lucida console;
  174.     text-transform: uppercase;
  175.     color: #00f0f6;
  176. }
  177.  
  178. .statbar {
  179.     background: #370108;
  180.     width: 50px;
  181.     height: 2px;
  182.     overflow: hidden; }
  183.  
  184. .hpbar, .mpbar {
  185.     display: block;
  186.     border-bottom: 1px solid #370108;
  187.     height: 1px;
  188. }
  189.  
  190. .hpbar {
  191.     background-color: #bedae5;
  192.     width: {text:HP}%;
  193. }
  194.    
  195. .mpbar {
  196.     background-color: #bedae5;
  197.     width: {text:MP}%;
  198. }
  199.    
  200. .level {
  201.     width: 80px;
  202.     height: 4px;
  203.     margin-left: 10px;
  204.     overflow: hidden;
  205.     background: #5b5b5b;
  206.     background: -moz-linear-gradient(top, #5b5b5b 0%, #c7c7d1 100%);
  207.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(100%,#c7c7d1));
  208.     background: -webkit-linear-gradient(top, #5b5b5b 0%,#c7c7d1 100%);
  209.     background: -o-linear-gradient(top, #5b5b5b 0%,#c7c7d1 100%);
  210.     background: -ms-linear-gradient(top, #5b5b5b 0%,#c7c7d1 100%); background: linear-gradient(to bottom, #5b5b5b 0%,#c7c7d1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#c7c7d1',GradientType=0 );
  211.     border: 2px ridge #dfdde8;
  212. }
  213.    
  214. .nextlev, .limitlev {
  215.     display: block; }
  216.    
  217. .nextlev {
  218.     background-color: #f4cbc9;
  219.     width: {text:Next Level}%;
  220.     height: 4px;}
  221.    
  222. .limitlev {
  223.     background-color: #cbe8a5;
  224.     width: {text:Limit Level}%;
  225.     height: 4px; }
  226.  
  227. .bio {
  228.     margin-top: 1px;
  229.     text-align: justify;
  230. }
  231.  
  232. .biodisk {
  233.     max-width: 200px;
  234. }
  235.  
  236. .navicont {
  237.     margin-left: 280px;
  238.     margin-top: 40px;
  239.     position: fixed;
  240.     width: 100px;
  241. }
  242.  
  243. .navigation {
  244.     width: 100px;
  245. }
  246.  
  247. .link {
  248.     line-height: 15px;
  249. }
  250.  
  251. .link a {
  252.     color: #ffffff;
  253.     display: block;
  254.     margin-left: 3px;
  255. }
  256.  
  257. .link a:hover {
  258.     position: relative;
  259. }
  260.  
  261. .link a:hover:after {
  262.     content: url(http://static.tumblr.com/gz5o3ld/HFHoy5g0u/linkpointer.png);
  263.     display: block;
  264.     left: -38px;
  265.     position: absolute;
  266.     top: 6px;
  267. }
  268.  
  269. .save {
  270.     margin-top: 20px;
  271. }
  272.  
  273. .timer {
  274.     margin-top: 20px;
  275.     width: 100px;
  276. }
  277.  
  278. .tinfo {
  279.     float: right;
  280.     font-weight: bold;
  281. }
  282.  
  283. .location {
  284.     color: #ffffff;
  285.     margin-left: -47px;
  286.     margin-top: 0px;
  287.     padding: 3px;
  288.     width: 160px
  289. }
  290.  
  291. .posts {    
  292.     background: #0000ad;
  293.     background: -moz-linear-gradient(-45deg, #0000ad 0%, #000021 100%);
  294.     background: -webkit-linear-gradient(-45deg, #0000ad 0%,#000021 100%);
  295.     background: linear-gradient(135deg, #0000ad 0%,#000021 100%);
  296.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#000021',GradientType=1 );
  297.     border: 4px ridge #c9c9c9;
  298.     border-radius: 7px;
  299.     margin: 0 auto 130px 110px;
  300.     padding: 20px;
  301.     position: relative;
  302.     width: 500px;
  303. }
  304.  
  305. .permalink {    
  306.     background: #0000ad;
  307.     background: -moz-linear-gradient(-45deg, #0000ad 0%, #000021 100%);
  308.     background: -webkit-linear-gradient(-45deg, #0000ad 0%,#000021 100%);
  309.     background: linear-gradient(135deg, #0000ad 0%,#000021 100%);
  310.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#000021',GradientType=1 );
  311.     border: 4px ridge #c9c9c9;
  312.     border-radius: 7px;
  313.     color: #ffffff;
  314.     display: block;
  315.     margin-bottom: 3px;
  316.     margin-left: 110px;
  317.     position: relative;
  318.     padding: 5px 10px 5px 10px;
  319.     width: 520px;
  320. }
  321.  
  322. .permalink a {
  323.     color: #ffffff;
  324. }
  325.  
  326. .viasir {
  327.     float: right;
  328. }
  329.  
  330. .tags {
  331.     background: #0000ad;
  332.     background: -moz-linear-gradient(-45deg, #0000ad 0%, #000021 100%);
  333.     background: -webkit-linear-gradient(-45deg, #0000ad 0%,#000021 100%);
  334.     background: linear-gradient(135deg, #0000ad 0%,#000021 100%);
  335.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#000021',GradientType=1 );
  336.     border: 4px ridge #c9c9c9;
  337.     border-radius: 7px;
  338.     display: block;
  339.     margin-left: 110px;
  340.     margin-top: -126px;
  341.     position: absolute;
  342.     padding: 5px 10px 5px 10px;
  343.     width: 520px;
  344. }
  345.  
  346. .tags a {
  347.     display: inline-block;
  348.     margin-right: 2px;
  349. }
  350.  
  351. .message {
  352.     background: #0000ad;
  353.     background: -moz-linear-gradient(-45deg, #0000ad 0%, #000021 100%);
  354.     background: -webkit-linear-gradient(-45deg, #0000ad 0%,#000021 100%);
  355.     background: linear-gradient(135deg, #0000ad 0%,#000021 100%);
  356.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#000021',GradientType=1 );
  357.     border: 4px ridge #c9c9c9;
  358.     border-radius: 7px;
  359.     padding: 10px;
  360. }
  361.  
  362. .speaker, .speaker a {
  363.     color: #ffffff;
  364.     display: block;
  365.     font-size: 12px;
  366.     margin-bottom: 2px;
  367. }
  368.  
  369. .speaker::first-letter, .speaker a::first-letter {
  370.     text-transform: uppercase;
  371. }
  372.  
  373. .pagination {
  374.     margin-left: 110px;
  375.     padding: 20px;
  376.     text-align: center;
  377.     width: 500px;
  378. }
  379.  
  380. .jump_page {    
  381.     background: #0000ad;
  382.     background: -moz-linear-gradient(-45deg, #0000ad 0%, #000021 100%);
  383.     background: -webkit-linear-gradient(-45deg, #0000ad 0%,#000021 100%);
  384.     background: linear-gradient(135deg, #0000ad 0%,#000021 100%);
  385.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#000021',GradientType=1 );
  386.     border: 4px ridge #c9c9c9;
  387.     border-radius: 7px;
  388.     margin-right: 10px;
  389.     padding: 10px 15px;
  390. }
  391.  
  392. .current_page, .jump_page:hover {
  393.     background: #0000ad;
  394.     background: -moz-linear-gradient(-45deg, #0000ad 0%, #000021 100%);
  395.     background: -webkit-linear-gradient(-45deg, #0000ad 0%,#000021 100%);
  396.     background: linear-gradient(135deg, #0000ad 0%,#000021 100%);
  397.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#000021',GradientType=1 );
  398.     border: 4px ridge #c9c9c9;
  399.     border-radius: 7px;
  400.     margin-right: 10px;
  401.     padding: 10px 15px;
  402. }
  403.  
  404. #scrollToTop {
  405.     display: none;
  406.     position: fixed;
  407.     bottom: 5px;
  408.     right: 5px;
  409. }
  410.  
  411. .donottouch a {
  412.     background: rgba(68,68,68,.4);
  413.     border-radius: 2px;
  414.     color: #fefefe;
  415.     display: block;
  416.     font: 700 11px helvetica;
  417.     padding: 6px 12px;
  418.     position: fixed;
  419.     right: 9px;
  420.     text-shadow: none;
  421.     top: 42px;
  422. }
  423.  
  424. .postmates {    
  425.     margin-top: 20px;
  426.     max-height: 190px;
  427.     overflow: auto;
  428. }
  429.  
  430. .postmates img.avatar {
  431.     display: none;
  432. }
  433.  
  434. .postmates li {
  435.     background: #0000ad;
  436.     background: -moz-linear-gradient(top, #0000ad 0%, #0e0d37 100%);
  437.     background: -webkit-linear-gradient(top, #0000ad 0%,#0e0d37 100%);
  438.     background: linear-gradient(to bottom, #0000ad 0%,#0e0d37 100%);
  439. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ad', endColorstr='#0e0d37',GradientType=0 );
  440.     border: 4px ridge #c9c9c9;
  441.     border-radius: 7px;
  442.     list-style-type: none;
  443.     margin: 0 0 5px -25px;
  444.     padding: 8px;
  445. }
  446.  
  447. </style>
  448. </head>
  449.  
  450.  
  451. <body>
  452.  
  453. <div id="content">
  454.  
  455. <!--Please do not move/remove this link! I'd appreciate it-->
  456. <div class="donottouch">
  457.     <a href="http://clloudstrife.tumblr.com/">Theme</a>
  458. </div>
  459. <!-- -->
  460.  
  461.  
  462.  
  463. <div class="sidebar">
  464.  
  465.            <div class="navicont">
  466.                     <div class="navigation">
  467.                         <div class="link">
  468.                             <a href="/">Home</a>
  469.                             {block:AskEnabled}
  470.                             <a href="/ask">Ask</a>
  471.                             {/block:AskEnabled}
  472.                             {block:SubmissionsEnabled}
  473.                             <a href="/submit">Submit</a>
  474.                             {/block:SubmissionsEnabled}
  475.                             {block:HasPages}
  476.                             {block:Pages}
  477.                             <a href="{URL}">{Label}</a>
  478.                             {/block:Pages}
  479.                             {/block:HasPages}
  480.                             <a href="/archive">Archive</a>
  481.                             <div class="save">
  482.                             <a href="/">Save</a>
  483.                             <a href="https://www.tumblr.com/dashboard">Quit</a>                          </div>
  484.                     </div>
  485.            </div>
  486.            
  487.             <div class="timer">
  488.                 Time <span class="tinfo">10:05:44</span><br>
  489.                 Gil <span class="tinfo">999999</span>
  490.             </div>
  491.             <div class="location">
  492.                 {text:Location}
  493.             </div>
  494.    
  495. </div>
  496.  
  497.  
  498.     <div class="status">
  499.         <table>
  500.         <tr>
  501.             <td>
  502.                 <div class="avipoint">
  503.                 <a href="/"><img src="{PortraitURL-64}"></a>
  504.                 </div>
  505.             </td>
  506.             <td style="padding-left: 10px;">
  507.                 <div class="stats"> {text:Name}<br>
  508.                     <strong>LV</strong> {text:Level}<br>
  509.                         <strong>HP</strong> {text:HP}/{text:Max HP}
  510.                             <div class="statbar">
  511.                                 <span class="hpbar"></span>
  512.                             </div>
  513.                             <strong>MP</strong> {text:MP}/{text:Max MP}
  514.                                 <div class="statbar">
  515.                                 <span class="mpbar"></span>
  516.                                 </div>
  517.                 </div>
  518.                 </td>
  519.     <td style="padding-left: 12px;">
  520.         next level<br>
  521.         <div class="level"><span class="nextlev"></span></div>
  522.         Limit level 1<br>
  523.         <div class="level"><span class="limitlev"></span></div>
  524.     </td>
  525.     </tr>
  526.     </table>
  527.    
  528.                  
  529.     </div>
  530.    
  531.       <div class="bio">
  532.         <div class="biodisk">{Description}</div>
  533.       </div>
  534.    
  535.    
  536.  
  537. </div>
  538.  
  539. {block:Posts}
  540.  
  541. {block:Date}
  542. <div class="permalink">
  543.     <a href="{Permalink}" title="View post">{TimeAgo}</a>
  544.    
  545.         {block:NoteCount} |
  546.         <a href="{Permalink}" title="Notes">{NoteCount}</a>
  547.         {/block:NoteCount}
  548.        
  549.        
  550.         {block:RebloggedFrom} |
  551.             <a href="{ReblogParentURL}" title="Via">V</a>
  552.             {block:ContentSource} |
  553.             <a href="{SourceURL}" title="Source">S</a>
  554.             {/block:ContentSource}
  555.         {/block:RebloggedFrom}
  556.  
  557.        
  558.         <span class="viasir">
  559.         <img src="http://static.tumblr.com/gz5o3ld/aotoy5nk9/materia_summon.png">
  560.         <img src="http://static.tumblr.com/gz5o3ld/yRToy5nmd/materia_magic.png">
  561.         <img src="http://static.tumblr.com/gz5o3ld/MWZoy5nkt/materia_support.png">
  562.         <img src="http://static.tumblr.com/gz5o3ld/46Xoy5nkg/materia_command.png">
  563.         <img src="http://static.tumblr.com/gz5o3ld/ADVoy5nkl/materia_independent.png">
  564.         </span>
  565.        
  566. </div>
  567. {/block:Date}
  568.  
  569. <div class="posts">
  570.  
  571. {block:Text}
  572.     {block:Title}<h1>{Title}</h1>{/block:Title}
  573.     {Body}
  574. {/block:Text}
  575.  
  576. {block:Photo}
  577.     {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%">{LinkCloseTag}
  578.         {block:Caption}
  579.         {Caption}
  580.         {/block:Caption}
  581. {/block:Photo}
  582.  
  583. {block:Photoset}
  584.     {Photoset}
  585.         {block:Caption}
  586.         {Caption}
  587.         {/block:Caption}
  588. {/block:Photoset}
  589.  
  590. {block:Quote}
  591.     <h1>{Quote}</h1>
  592.     {block:Source}– {Source}{/block:Source}
  593. {/block:Quote}
  594.  
  595. {block:Link}
  596.     <a href="{URL}">{Name}</a>
  597.         {block:Description}
  598.         {Description}
  599.         {/block:Description}
  600. {/block:Link}
  601.  
  602. {block:Chat}
  603.     {block:Title}<h1>{Title}</h1>{/block:Title}
  604.     {block:Lines}
  605.     {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br>
  606.     {/block:Lines}
  607. {/block:Chat}
  608.  
  609. {block:Video}
  610.     {Video-500}
  611.         {block:Caption}
  612.         {Caption}
  613.         {/block:Caption}
  614. {/block:Video}
  615.  
  616. {block:Audio}
  617.     {AudioEmbed}
  618.         {block:Caption}
  619.         {Caption}
  620.         {/block:Caption}
  621. {/block:Audio}
  622.  
  623. {block:Answer}
  624.     <div class="message">
  625.         <div class="speaker">{Asker}</div>
  626.             &ldquo; {Question} &rdquo;
  627.     </div>
  628.         {Answer}
  629. {/block:Answer}
  630.  
  631.     {block:PostNotes}
  632.     <div class="postmates">
  633.         {PostNotes}
  634.     </div>
  635.     {/block:PostNotes}
  636.  
  637.  
  638. </div>
  639.  
  640.  
  641.     {block:HasTags}
  642.         <div class="tags">
  643.             {block:Tags}
  644.             <a href="{TagURL}">#{Tag}</a>
  645.             {/block:Tags}
  646.         </div>
  647.     {/block:HasTags}
  648.    
  649.  
  650.        
  651. {/block:Posts}
  652.  
  653. <div class="pagination">      
  654.     {block:Pagination}
  655.     {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">Previous</a>{/block:PreviousPage}
  656.     {block:JumpPagination length="5"}
  657.     {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  658.     {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  659.     {block:NextPage}<a href="{NextPage}" class="jump_page">Next</a>{/block:NextPage}
  660.     {/block:Pagination}
  661. </div>
  662.  
  663.  
  664. </div>
  665.  
  666. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  667. <script type="text/javascript" src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  668. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="Go to Top"><img src="http://static.tumblr.com/gz5o3ld/Iccoy5lmr/save.png" title="Scroll to top" alt="Go to Top"/></a>
  669.  
  670. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  671. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  672. <script>
  673.    (function($){
  674.        $(document).ready(function(){
  675.            $("[title]").style_my_tooltips({
  676.                tip_follows_cursor:true,
  677.                tip_delay_time:10,
  678.                tip_fade_speed:100
  679.            }
  680.                );
  681.        });
  682.    })(jQuery);
  683. </script>
  684.  
  685.  
  686. </body>
  687. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement