Advertisement
striaton-city

Float

Jun 11th, 2014
530
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.59 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.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <head>
  6.  
  7.                 <!----- [3] Float --------------------
  8.                
  9.                + Theme by SANYOUCITY.TUMBLR.COM
  10.                                
  11.                Feel free to do whatever you want with
  12.                the  code  as long as you don't remove
  13.                the  credit!! If  you  have any quest-
  14.                ions or comments please don't hesitate
  15.                to  hmu.  I  apologize  in  advance to
  16.                anyone trying  to  find  something  in
  17.                the  code because I'm very unorganized
  18.                
  19.                Thank you so much for using my theme!!
  20.                
  21.                -------------------------ver 1.1------>
  22.  <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
  23. <title>{Title}</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27.  
  28.  
  29. <!--TOOLTIP-->
  30. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  31. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  32. <script>
  33.     (function($){
  34.         $(document).ready(function(){
  35.             $("[title]").style_my_tooltips();
  36.         });
  37.     })(jQuery);
  38. </script>
  39.  
  40.  
  41. <meta name="image:Sidebar" content="http://static.tumblr.com/6760fcd7c9e999b1064e3402e3f52665/wrjqiql/CQOn6z5vl/tumblr_static_4tnw8i7woi684480488o0kkwk.png"/>
  42. <meta name="image:Side Image" content="http://static.tumblr.com/b13a80b28dc03db13d4f026ecaefc87d/wrjqiql/aqwn6yz2o/tumblr_static_9p1mt96d818oc844oockkkoc0.png"/>
  43. <meta name="color:Background" content="#dbdbdb"/>
  44. <meta name="color:scroll" content="#dbdbdb"/>
  45. <meta name="color:posts" content="#c1e7ee"/>
  46. <meta name="color:post border" content="#d4d2ff"/>
  47. <meta name="color:post entries" content="#ffffff"/>
  48. <meta name="color:sidebar" content="#c1e7ee"/>
  49. <meta name="color:Title" content="#abd3df"/>
  50. <meta name="color:Title" content="#abd3df"/>
  51. <meta name="color:Title Hover" content="#abd3df"/>
  52. <meta name="color:Blockquote" content="#1564cd"/>
  53. <meta name="color:Text" content="#c1c1c1"/>
  54.  
  55. <meta name="color:Border" content="#04070c"/>
  56. <meta name="color:Link" content="#42daf4"/>
  57. <meta name="color:Link Hover" content="#2f81c3"/>
  58. <meta name="color:ask bubble 1" content="#378bc7"/>
  59. <meta name="color:ask bubble 2" content="#378bc7"/>
  60.  
  61. <meta name="image:background" content="http://37.media.tumblr.com/818ed3e33430bd4b3028f4d506fdc347/tumblr_mt67noIbPl1ru3nbdo5_r1_100.png"/>
  62. <meta name="color:post shadow" content="#04070c"/>
  63. <meta name="color:sidebar" content="#c1e7ee"/>
  64. <meta name="color:bold" content=""/>
  65. <meta name="color:italics" content=""/>
  66.  
  67. <meta name="text:home sprite url" content="http://cdn.bulbagarden.net/upload/1/19/516MS.png"/>
  68. <meta name="text:ask sprite url" content="http://cdn.bulbagarden.net/upload/9/99/503MS.png"/>
  69. <meta name="text:archive sprite url" content="http://cdn.bulbagarden.net/upload/8/80/199MS.png"/>
  70. <meta name="text:submit sprite url" content="http://cdn.bulbagarden.net/upload/8/89/184MS.png"/>
  71. <meta name="text:perm sprite url" content="http://cdn.bulbagarden.net/upload/a/a9/Ani515MS.png"/>
  72.  
  73.  
  74. <meta name="text:link 1 title" content="LINK 1"/>
  75. <meta name="text:link 1" content="/"/>
  76. <meta name="text:link 2 title" content="LINK 2"/>
  77. <meta name="text:link 2" content="/"/>
  78. <meta name="text:link 3 title" content="LINK 3"/>
  79. <meta name="text:link 3" content="/"/>
  80. <meta name="text:link 4 title" content="LINK 4"/>
  81. <meta name="text:link 4" content="/"/>
  82. <meta name="text:link 5 title" content="LINK 5"/>
  83. <meta name="text:link 5" content="/"/>
  84.  
  85.  
  86. <meta name="color:tooltip text" content="#ffffff"/>
  87. <meta name="color:tooltip" content="#a3d8f3"/>
  88.  
  89.  
  90.  
  91.  
  92. <style type="text/css">
  93. /*
  94. ::-webkit-scrollbar { z-index: 99999; width: 6px; height: 4px; background: #ffffff; }
  95. ::-webkit-scrollbar-thumb {  z-index: 99999; background-color: #000000; -webkit-border-radius: 1ex; } */
  96.  
  97.  
  98.  
  99.  
  100. #s-m-t-tooltip {
  101.     display: block;
  102.     background: {color:tooltip};
  103.     font-size: 10px;
  104.     text-transform: uppercase;
  105.     color: {color:tooltip text};
  106.     text-align: center;
  107.     font-family:  calibri, sans-serif;
  108.     letter-spacing: 0px;
  109.     margin-left: 18px;
  110.     padding: 1px 2px;
  111.     min-width: 30px;
  112.     max-width: 200px;
  113.     z-index: 9999999999999999999999999;
  114. }
  115.  
  116. ::-webkit-scrollbar{
  117. width:2px;
  118. height:4px;
  119. background:none;}
  120.  
  121. ::-webkit-scrollbar-thumb{
  122. background-color:{color:scroll};}
  123.  
  124.  
  125.  
  126. body {
  127.     background: {color:Background};
  128.     font-family: 'Inconsolata', courier, sans-serif;
  129.     font-size: 12px;
  130.     color: {color:Text};
  131.     text-align: justify;
  132.     background-image: url('{image:background}');
  133.     cursor: url(http://media.tumblr.com/tumblr_m2ukzoEPNZ1qfamg6.gif), auto;
  134.      
  135.  
  136.    
  137. }
  138. #pagination {
  139.     position: relative;
  140.     padding: 2px;
  141.     margin-top: 10px;
  142. }
  143.  
  144. #pagination a {
  145.     display: inline-block;
  146.     padding: 3px 6px 3px 6px;
  147.     margin: 4px;
  148.     text-align: center;
  149. }
  150.  
  151.  
  152. blockquote {
  153.     padding-left:5px;
  154.     border-left:1px solid;
  155.     color: {color:Blockquote};
  156.    
  157. }
  158.  
  159. a {
  160.     text-decoration: none;
  161.     color: {color:Link};
  162.     transition:1s;
  163. }
  164. a:hover {
  165.     color: {color:Link Hover};
  166.     transition: 2s;
  167. }
  168.  
  169. #sidebar {
  170.      z-index: 99999;
  171.     position: fixed;
  172.     margin-left:1000px;
  173.     margin-top: 200px;
  174.     width: 22px;
  175.     padding: 10px;
  176.     border: none;
  177.    
  178.     /*box-shadow: 4px 4px 0px {color:post shadow}; */
  179.     background-color: {color:sidebar};
  180.  
  181.     opacity: .8;
  182.     overflow-y:hidden;
  183.     overflow-x:hidden;
  184. }
  185.  
  186. #side {
  187.     position:left;
  188.     width:auto;
  189.     height:auto;
  190.    
  191. }
  192.  
  193. #title a {
  194.     z-index: 99999;
  195.     position: fixed;
  196.     margin-top: 30px;
  197.     margin-left: 580px;
  198.     font-size: 55px;
  199.     text-align: center;
  200.     font-variant:small-caps;
  201.     color: {color:Title};
  202.     transition:1s;
  203. }
  204. #title a:hover {
  205.     color: {color:Title Hover};
  206.     text-shadow:  -4px 0 .9px {color:Title}, 4px 0 .9px {color:Title};
  207.     transition: .5s;
  208.    
  209. }
  210. #description {
  211.     position: relative;
  212.     margin: 0px;
  213.     padding: 10px;
  214.     width: 200px;
  215.     text-align: justify;
  216.     font-family: 'Inconsolata', ;
  217. }
  218. #around {
  219.     width: 20px;
  220. }
  221.  
  222. #container {
  223.     margin-top: 20px;
  224.     margin-bottom: 20px;
  225.     margin-left: 520px;
  226.     width: 500px;
  227. }
  228.  
  229. .entry {
  230.     margin-top:100px;
  231.     margin-left: -200px;
  232.     float:left;
  233.     position: relative;
  234.     width:430px;
  235.     padding: 10px;
  236.     margin-bottom:20px;
  237.     border: 1px solid {color:Border};
  238.     background-color: {color:background};
  239.    
  240.     opacity:.7;
  241.     /*box-shadow: 4px 4px 0px {color:post shadow}; */
  242.     transition: 2s;
  243. }
  244. .entry:hover {
  245.     opacity: .9;
  246.     transition:1s;
  247. }
  248.  
  249.  
  250.  img {
  251.     max-width: 100%; /*
  252.     -webkit-filter: Grayscale(50%);
  253.     -webkit-transition-duration: 2s;
  254.     -moz-transition-duration:2s;
  255.     transition-duration:2s;
  256.     -o-transition-duration:2s; */
  257.    
  258. } /*
  259.  
  260. img:hover{
  261.     -webkit-filter: Grayscale(0%);
  262.     -webkit-transition: all 1s ease-out;
  263.     -moz-transition: all 1s ease-out;
  264.     transition: all 1s ease-out;
  265.    
  266. } */
  267.  
  268. h1 {
  269.     text-align: center;
  270.     font-size: 15px;
  271.     color: {color:Title};
  272.     font-variant:small-caps;
  273. }
  274.  
  275. #pagination {
  276.     position: relative;
  277.     padding: 2px;
  278.     margin-top: 10px;
  279. }
  280.  
  281. #pagination a {
  282.     display: inline-block;
  283.     padding: 3px 6px 3px 6px;
  284.     margin: 4px;
  285.     text-align: center;
  286. }
  287.  
  288. #portrait img {
  289.     float: left;
  290.     margin-right: 5px;
  291. }
  292.  
  293. #permalink {
  294.     text-align: center;
  295.     border-top: 1px solid {color:Border};
  296.     position: relative;
  297.     margin-top: 5px;
  298.     padding-top: 5px;
  299.    
  300. }
  301.  
  302. #credit {
  303.     position:fixed;
  304.     color: #FF6699;
  305.     font-size:30px;
  306.     position: fixed;
  307.     margin-top:-20px;
  308.     font-family: 'Inconsolata', ;
  309.    
  310. }
  311.  
  312. #credit span {
  313.     opacity:.1;
  314.     transition:2s;
  315.     color: #FF6699;
  316. }
  317. #credit span:hover {
  318.     opacity:3;
  319.     transition:1s;
  320.     color: #FF6699;
  321. }
  322.  
  323. strong, b {
  324.     color: {color:bold};
  325. }
  326.  
  327. em, i {
  328.     color: {color:italics};
  329. }
  330.  
  331.    
  332. #permalink #notecontainer ol.notes {
  333.       list-style-type: none;
  334.       text-align:left;
  335.       padding: 0;
  336.       margin-top:100;
  337. }
  338. #permalink #notecontainer img.avatar {
  339.       margin-right: 10px;
  340.       width: 16px;
  341.       height: 16px;
  342.      
  343. }
  344.  
  345. #nav {
  346.     text-align:center;
  347. }
  348.      
  349.  
  350. .wrapper{
  351. position:fixed;
  352. margin-top:120px;
  353. margin-left:330px;
  354. width:723px;
  355. height:450px;
  356. background:#fff;
  357. border:1px solid {color:post shadow};
  358. box-shadow: -10px 8px 0px {color:post shadow};
  359. overflow:hidden;
  360. }
  361.  
  362. .left{float:left; margin-right:20px; width:802px;}
  363.  
  364. #posts{
  365. float:left;
  366. margin-top:20px;
  367. margin-left:255px;
  368. width:400px;
  369. height:390px;
  370. padding:10px;
  371. background:{color:posts};
  372. border:none;
  373. overflow-x:hidden;
  374. overflow-y: scroll;
  375.  
  376. }
  377.  
  378. /*div.scroll ::-webkit-scrollbar {
  379.     width: 5px;
  380.     height: 4px;
  381. }
  382.  
  383. div.scroll ::-webkit-scrollbar-thumb {
  384.     background-color: {color:Scrollbar};
  385. } */
  386.  
  387. .title{
  388.     font-size:20px; line-height:22px; color:{color:Title};}
  389. img{max-width:250px;}
  390.  
  391. .entry{
  392. margin:2px;
  393. margin-bottom:12px;
  394. margin-left:68px;
  395. width:250px;
  396. padding:5px;
  397. background:{color:post entries};
  398. border:2px solid {color:post border};
  399. }
  400.  
  401. .permatext {
  402.     display:block;
  403.     line-height:15px;
  404.     text-align:center;
  405.    
  406. }
  407.  
  408. #sidebar{
  409.     position:fixed;
  410.     margin-top:20px;
  411.     margin-left:40px;
  412.     width:185px;
  413.     height:390px;
  414.     padding:10px;
  415.     text-align:justify;
  416.     background:{color:sidebar};
  417.     overflow-y:scroll;
  418.     overflow-x:hidden;
  419.    
  420. }
  421.  
  422.  
  423. .album {
  424.     position:absolute;
  425.     width:100px;
  426.     height:100px;
  427.    
  428. }
  429. .album img {
  430.     width:100px;
  431.     height:100px;
  432.     z-index:1;
  433.    
  434. }
  435. .audio {
  436.     display:block;
  437.     position:absolute;
  438.     width:30px;
  439.     height:30px;
  440.    
  441. }
  442. .play {
  443.     width:27px;
  444.     height:80px;
  445.     opacity:.5;
  446.     padding-top:40px;
  447.     padding-left:35px;
  448.     overflow:hidden;
  449.    
  450. }
  451. .cap {
  452.     height:100px;
  453.    
  454. }
  455. .capp {
  456.     margin-left:100px;
  457.     width:150px;
  458.     padding-top:35px; text-align:center;
  459.    
  460. }
  461.  
  462. .bubble {
  463.     position:relative;
  464.     margin:5px 0px 0px 50px;
  465.     text-align:left; padding:10px;
  466.     background:{color:ask bubble 1};
  467.     border:3px
  468.     double {color:ask bubble 2};
  469.    
  470. }
  471. .bubble p {
  472.     margin:1px 0px;
  473.    
  474. }
  475. .bubble span {
  476.     position:absolute;
  477.     display:block;
  478.     top:7px;
  479.     left:-10px;
  480.     width:1px;
  481.     height:1px;
  482.     font-size:0;
  483.     line-height:1px;
  484.     border-top:7px
  485.     solid transparent;
  486.     border-right:10px
  487.     solid {color:ask bubble 2};
  488.     border-bottom:7px
  489.     solid transparent;
  490.    
  491. }
  492.  
  493.  
  494. #sidebarimga img{
  495.     width:150px;
  496.     text-align:center;
  497.     margin-top:-15px;
  498.     margin-left:15px;
  499.    
  500. }
  501.  
  502. #thing {width: 100%;height:100%;position:fixed;z-index:-1;}
  503.  
  504. #swagmoney {
  505.     position:fixed;
  506.     font-weight:700;
  507.     font-size:20px;
  508.     line-height:20px;
  509.     width: 100px;
  510.     height:21px;
  511.     overflow:hidden;
  512.     z-index:9999999;
  513.     inline:block;
  514.     color:{color:Title Hover};
  515.     margin-top:2px;
  516.     margin-left:0px;
  517.     text-align:center;
  518.     font-family:calibri;
  519.    
  520. }
  521. .swag {margin-top:0px;position:relative;transition:.3s;}
  522. .swag:hover {margin-top:-21px;transition:.3s;}
  523. .swag a {color:{color:Title Hover}; letter-spacing:1px;transition:0s;}
  524. .swag a:hover {text-decoration:none;color:#FF3399; transition:0s;}  
  525. </style>
  526.  
  527. </head>
  528.  
  529. <body>
  530.  
  531. <div id="swagmoney">
  532. <div class="swag"><span style="margin-left:0px;font-size:20px"></span><br><a  style="font-size:11px" href="http://sanyoucity.tumblr.com/">&nbsp;SANYOUCITY</a>
  533. </div>
  534. </div>
  535.  
  536.  
  537. <div id="thing"></div>
  538.  
  539.  
  540. <div id="sideb"><div style="position:fixed;  bottom:0px; right:6px;  ">
  541. <img src= "{image:Side Image}" /> <br></div></div>
  542.  
  543.  
  544.  
  545.  
  546. <div id="title"><a href="/">{Title}</a></div>
  547.  
  548.  
  549. <div class="wrapper">
  550.  
  551.  
  552.  
  553. <div id="sidebar"><br><br>
  554. <!--<a href="/"><div style="font-size:20px; color:#fff; font-weight:bold;"><{Title}</div></a><br><br> -->
  555. <div id="sidebarimga"><img src= "{image:Sidebar}" /></div>
  556. <br><br>
  557. <div id="nav">
  558. <a title="home" href="/"><img src="{text:home sprite url}"></a>
  559. <a title="ask" href="/ask"><img src="{text:ask sprite url}"></a>
  560. <a title="past" href="/archive"><img src="{text:archive sprite url}"></a>
  561. <a title="submit" href="/submit"><img src="{text:submit sprite url}"></a>
  562.     </div>
  563. </p>
  564. {Description}
  565.  <div id="pagination">
  566.       {block:PreviousPage}<a href="{PreviousPage}">Previous Page</a>{/block:PreviousPage}
  567.       {block:NextPage}/ <a href="{NextPage}">Next Page</a>{/block:NextPage}
  568.       </div>
  569.    <p> <select style="font-family:lucida console;color:#696969;background:#fff;width:180px;font-size:9px;letter-spacing:1px;border:2px solid #ccc;" onChange="location.href=this.options[this.selectedIndex].value;">
  570.  
  571. <option value=''>NAVIGATION</option>
  572.  
  573. <option value="{text:link 1}">{text:link 1 title}</option>
  574.  
  575. <option value="{text:link 2}">{text:link 2 title}</option>
  576.  
  577. <option value="{text:link 3}">{text:link 3 title}</option>
  578.  
  579. <option value="{text:link 4}">{text:link 4 title}</option>
  580.  
  581. <option value="{text:link 5}">{text:link 5 title}</option>
  582.  
  583. </select>
  584.  
  585. </div>
  586.  
  587. <!--<div id="sidebar2">
  588. <div class="links"><a href="/">Home</a></div>
  589. {block:ifLink1}<div class="links"><a href="{text:Link1}">{text:Link1 Title}</a></div>{/block:ifLink1}
  590. {block:ifLink2}<div class="links"><a href="{text:Link2}">{text:Link2 Title}</a></div>{/block:ifLink2}
  591. {block:ifLink3}<div class="links"><a href="{text:Link3}">{text:Link3 Title}</a></div>{/block:ifLink3}
  592. {block:ifLink4}<div class="links"><a href="{text:Link4}"{text:Link4}>{text:Link4 Title}</a></div>{/block:ifLink4}
  593. <div class="links"><a href="/ask">Ask</a></div>
  594. </div> -->
  595.  
  596. <div id="bottom"></div>
  597.  
  598. <div class="left">
  599.  
  600. <div id="posts">
  601. <div class="scroll">
  602. {block:Posts}
  603.  
  604. <div class="entry">
  605.  
  606. {block:Answer}
  607. <img src="{AskerPortraitURL-40}" width="49" align="left">
  608. <div class="bubble"><span></span><b>{Asker}</b>: {Question}</div>{Answer}
  609. {/block:Answer}
  610.  
  611. {block:Text}
  612. {block:Title}<span class="title">{Title}</span>{/block:Title}
  613. {Body}
  614. {/block:Text}
  615.  
  616. {block:Link}
  617. <a href="{URL}" class="title">{Name}</a>
  618. {block:Description}{Description}{/block:Description}
  619. {block:Link}
  620.  
  621. {block:Photo}
  622. {LinkOpenTag}
  623. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%">
  624. {LinkCloseTag}
  625. {/block:Photo}
  626.  
  627. {block:Photoset}
  628. <center>{Photoset-250}</center>
  629. {/block:Photoset}
  630.  
  631. {block:Quote}
  632. "{Quote}"<br>
  633. <div align="right">{block:Source}- {Source}{/block:Source}</div>
  634. {/block:Quote}
  635.  
  636. {block:Chat}
  637. {block:Title}<span class="title">{Title}</span>{/block:Title}
  638. <ul class="chat">{block:Lines}<li class="user_{UserNumber}">
  639. {block:Label}<span class="label">{Label}</span>{/block:Label}
  640. {Line}</li>{/block:Lines}</ul>
  641. {/block:Chat}
  642.  
  643. {block:Audio}
  644. {block:AlbumArt}
  645. <div class="album"><img src="{AlbumArtURL}"></div>
  646. {/block:AlbumArt}
  647. <div class="audio"><div class="play">{AudioPlayerBlack}</div></div>
  648. <div class="cap"><div class="capp">{block:TrackName}<b><font size="2">{TrackName}</font></b>{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}</div></div>
  649. {block:Caption}{Caption}{/block:Caption}
  650. {/block:Audio}
  651.  
  652. {block:Video}
  653. <center>{Video-250}</center>
  654. {block:Video}
  655.  
  656. <!--PERMATEXT: Panpour-->
  657.  
  658. {block:IndexPage}
  659. <div class="permatext"><a href="{Permalink}">{NoteCountWithLabel}</a> <img src="{text:perm sprite url}"> <a href="{ReblogURL}" target="_blank">reblog</a></div>
  660. {block:IndexPage}
  661.  
  662. {block:PermalinkPage}
  663.  
  664. {block:Caption}{Caption}{/block:Caption}<br>
  665.  
  666. {block:NoteCount}►{NoteCountWithLabel}{/block:NoteCount}<br>
  667.  
  668. {block:Date}
  669. ► {DayOfWeek}, {Month} {DayOfMonthWithZero}, {Year} ► {12Hour}:{Minutes}{AmPm}<br>
  670. {/block:Date}
  671.  
  672. {block:RebloggedFrom}
  673. Reblogged From <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  674. Posted By <a href="{ReblogRootURL}">{ReblogRootName}</a><br>
  675. {/block:RebloggedFrom}
  676.  
  677. {block:HasTags}
  678. Tags {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}<br><br>
  679. {/block:hasTags}
  680.  
  681. <!--IMG: Heart Divider-->
  682. <center><img src="http://media.tumblr.com/tumblr_m50a00XYiX1qb1380.gif"></center>
  683.  
  684. {/block:PermalinkPage}
  685.  
  686. {block:PostNotes}{PostNotes}{/block:PostNotes}</div>
  687.  
  688. {/block:Posts}</div></div></div></div>
  689.  
  690.  
  691.  
  692. </body>
  693.  
  694. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement