Advertisement
andieanjos

Star Theme

Apr 18th, 2014
396
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 22.16 KB | None | 0 0
  1. <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  2. +++++++++++++++++++++ STAR THEME BY TATA ++++++++++++++++++++
  3. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  4. ++++++ please don't remove credits ++++++++++++++++++++++++++
  5. ++++++ don't use it as a base code ++++++++++++++++++++++++++
  6. ++++++ don't redistribute +++++++++++++++++++++++++++++++++++
  7. ++++++ you can customize it however you want ++++++++++++++++
  8. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  9. ++++++++++++++++ tanharu.tumblr.com ++++++++++++++++++++++-->
  10. <!DOCTYPE html>
  11. <html>
  12.     <head>
  13.         <title>{Title}{block:PostTitle}โ€ƒยทโ€ƒ{PostTitle}{/block:PostTitle}</title>
  14.        
  15.         <link rel="shortcut icon" href="{Favicon}"/>
  16.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  17.         <meta name="author" content="Andressa Anjos @ tanharu.tumblr.com">
  18.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19.         {block:Description}
  20.             <meta name="description" content="{MetaDescription}" />
  21.         {/block:Description}
  22.         <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700' rel='stylesheet' type='text/css'>
  23.         <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,300,300italic' rel='stylesheet' type='text/css'>
  24.        
  25.         <meta name="color:Background" content="#fefefe" />
  26.         <meta name="color:Text" content="#c6c3c4" />
  27.         <meta name="color:Link" content="#f07fbc" />
  28.         <meta name="color:Link Hover" content="#f743a4" />
  29.         <meta name="color:Text 2" content="#e3dada" />
  30.         <meta name="color:Sidebar BG" content="#010101" />
  31.         <meta name="color:Menu Border" content="#0a0a0a" />
  32.         <meta name="color:Menu Hover" content="#ffc8e6" />
  33.         <meta name="color:Second Quote D" content="#f4dde9" />
  34.         <meta name="color:Post Title" content="#f5cee2" />
  35.         <meta name="color:Ask Text" content="#f07fbc" />
  36.         <meta name="color:Ask Balloon" content="#fef6fa" />
  37.        
  38.         <meta name="text:Link 1" content="" />
  39.         <meta name="text:Link 1 URL" content="" />
  40.         <meta name="text:Link 2" content="" />
  41.         <meta name="text:Link 2 URL" content="" />
  42.         <meta name="text:Link 3" content="" />
  43.         <meta name="text:Link 3 URL" content="" />
  44.         <meta name="text:Link 4" content="" />
  45.         <meta name="text:Link 4 URL" content="" />
  46.         <meta name="text:Link 5" content="" />
  47.         <meta name="text:Link 5 URL" content="" />
  48.         <meta name="text:Link 6" content="" />
  49.         <meta name="text:Link 6 URL" content="" />
  50.        
  51.         <meta name="text:Second Quote" content="Why won't you pick up the phone?" />
  52.         <meta name="text:First Quote" content="empty heart, lonely nights." />
  53.        
  54.         <meta name="if:Sidebar Closed" content="1" />
  55.         <meta name="if:Show Caption" content="1" />
  56.        
  57.         <meta name="image:Icon" content="{PortraitURL-64}"/>
  58.         <meta name="image:Sidebar Img" content="http://static.tumblr.com/jbarb2y/bmln48z84/th.jpg" />
  59.        
  60.         <style type="text/css">
  61.             #tumblr_controls {
  62.                 position:fixed;
  63.                 top:0px;
  64.                 right:20px;
  65.                 opacity:.3;
  66.                 -webkit-transition: all 1s;
  67.                 transition: all 1s;
  68.             }
  69.             #tumblr_controls:hover {
  70.                 opacity:1;
  71.             }
  72.             body {
  73.                 font-family: 'Roboto', sans-serif;
  74.                 font-size: 8pt;
  75.                 color:{color:Text};
  76.                 background-color:{color:Background};
  77.             }
  78.             a {
  79.                 text-decoration: none;
  80.                 -webkit-transition: all 1s;
  81.                 transition: all 1s;
  82.                 color:{color:Link};
  83.             }
  84.             a:hover {
  85.                 color:{color:Link Hover};
  86.             }
  87.             #tata {
  88.                 position:fixed;
  89.                 bottom:0px; right:15px;
  90.                 padding:10px;
  91.                 font-size:10pt;
  92.                 font-family: monospace;
  93.                 font-weight: bold;
  94.                 background-color: {color:Background};
  95.             }
  96.             #sideB {
  97.                 width:250px;
  98.                 position:fixed;
  99.                 top:0; bottom:0;
  100.                 {block:IfSidebarClosed}
  101.                 left:-240px;
  102.                 {/block:IfSidebarClosed}
  103.                 {block:IfNotSidebarClosed}
  104.                 left:0;
  105.                 {/block:IfNotSidebarClosed}
  106.                 background-color:{color:Sidebar BG};
  107.                 font-family: 'Roboto Slab', serif;
  108.                 -webkit-transition: all 1s;
  109.                 transition: all 1s;
  110.                 background-image:url({image:Sidebar Img});
  111.                 background-position:bottom center;
  112.                 background-repeat:no-repeat;
  113.             }
  114.             #sideB #iconInfo {
  115.                 float:right;
  116.                 width:100px;
  117.                 margin-right:-130px;
  118.                 padding:15px;
  119.                 text-align: left;
  120.                 font-size: 8pt;
  121.                 line-height: 18pt;
  122.                 -webkit-transition: all 1s;
  123.                 transition: all 1s;
  124.             }
  125.             #sideB #iconInfo>img {
  126.                 width:50px;
  127.                 height: 50px;
  128.                 border-radius: 50px;
  129.                 display: block;
  130.                 margin:15px 0;
  131.             }
  132.             #sideB #iconInfo>p:first-letter {
  133.                 background-color: {color:Sidebar BG};
  134.                 padding: 0 3px;
  135.                 margin: 2px;
  136.                 color: {color:Background};
  137.                 font-weight: bold;
  138.                 text-transform: uppercase;
  139.             }
  140.             #sideB #iconInfo>p {
  141.                 {block:IfSidebarClosed}
  142.                 opacity: 0;
  143.                 {/block:IfSidebarClosed}
  144.                 -webkit-transition: all 1s;
  145.                 transition: all 1s;
  146.             }
  147.             {block:IfSidebarClosed}
  148.             #sideB:hover #iconInfo>p {
  149.                 opacity: 1;
  150.             }
  151.             {/block:IfSidebarClosed}
  152.             #navi {
  153.                 position: fixed;
  154.                 bottom: 15px;
  155.                 {block:IfSidebarClosed}
  156.                 left:25px;
  157.                 {/block:IfSidebarClosed}
  158.                 {block:IfNotSidebarClosed}
  159.                 left:260px;
  160.                 {/block:IfNotSidebarClosed}
  161.                 line-height: 18pt;
  162.                 width:50px;
  163.             }
  164.             #navi>a {
  165.                 font-style: italic;
  166.             }
  167.             {block:IfSidebarClosed}
  168.             #sideB:hover {
  169.                 left:0;
  170.             }
  171.             {/block:IfSidebarClosed}
  172.             #sideB #blogInfo {
  173.                 float: left;
  174.                 width: 220px;
  175.                 color:{color:Background};
  176.                 margin-left: 15px;
  177.                 margin-top: 25px;
  178.                 font-size: 8pt;
  179.             }
  180.             #blogInfo>p {
  181.                 margin-bottom: 50px;
  182.                 text-align:justify;
  183.             }
  184.             #blogInfo p:first-letter {
  185.                 background-color: {color:Background};
  186.                 padding: 0 3px;
  187.                 margin: 2px;
  188.                 color: {color:Sidebar BG};
  189.                 font-weight: bold;
  190.                 text-transform: uppercase;
  191.             }
  192.             #blogInfo ul {
  193.                 width:100px;
  194.                 margin: 0; padding: 0;
  195.                 list-style: none;
  196.             }
  197.             #blogInfo ul li {
  198.                 padding: 0; margin: 3px 0;
  199.                 border-bottom: 1px solid {color:Menu Border};
  200.                 -webkit-transition: all 1s;
  201.                 transition: all 1s;
  202.             }
  203.             #blogInfo ul li a {
  204.                 text-transform: lowercase;
  205.                 font-variant: small-caps;
  206.                 font-size: 8pt;
  207.                 letter-spacing: 2px;
  208.                 color: {color:Background};
  209.                 font-family: 'Roboto', sans-serif;
  210.                 display: block;
  211.                 -webkit-transition: all 1s;
  212.                 transition: all 1s;
  213.             }
  214.             #blogInfo ul li:hover a {
  215.                 color:{color:Menu Hover};
  216.             }
  217.             #blogInfo ul li:hover {
  218.                 border-bottom:1px solid {color:Menu Hover};
  219.             }
  220.             #blogInfo ul.rM {
  221.                 float: right;
  222.                 text-align: right;
  223.             }
  224.             #blogInfo ul.lM {
  225.                 float: left;
  226.                 text-align: left;
  227.             }
  228.             #secondQuote {
  229.                 position: fixed;
  230.                 top:280px;
  231.                 left:40px;
  232.                 width:100px;
  233.                 font-family: 'Roboto Slab', serif;
  234.                 font-weight: 700;
  235.                 color:{color:Text 2};
  236.                 font-size: 16pt;
  237.                 line-height: 10pt;
  238.                 text-align: center;
  239.                 cursor:default;
  240.                 opacity: .3;
  241.                 -webkit-transition: all 1s;
  242.                 transition: all 1s;
  243.             }
  244.             #secondQuote:first-letter {
  245.                 color:{color:Second Quote D};
  246.             }
  247.             #secondQuote:hover {
  248.                 opacity: 1;
  249.             }
  250.             #postArea {
  251.                 position: absolute;
  252.                 top:0; left: 0px; right: 0; bottom: 0;
  253.                 padding-left:250px;
  254.                 margin:0;
  255.                 overflow: auto;
  256.             }
  257.             #postArea .post {
  258.                 width: 500px;
  259.                 margin:100px auto;
  260.                 padding:20px 10px;
  261.             }
  262.             #postArea .post:first-child {
  263.                 margin-top: 25px;
  264.             }
  265.             .post>.postInfo {
  266.                 font-family: 'Roboto Slab', serif;
  267.                 color:{color:Text 2};
  268.                 margin: 20px auto;
  269.                 font-size: 8pt;
  270.             }
  271.             .post>.postInfo a {
  272.                 color:{color:Second Quote D};
  273.             }
  274.             .post>.postDate {
  275.                 display: block;
  276.                 font-size: 11pt;
  277.                 letter-spacing: -1px;
  278.                 text-align: center;
  279.                 font-family: 'Roboto Slab', serif;
  280.                 font-weight: 700;
  281.                 margin-top: 35px;
  282.                 margin-bottom: 10px;
  283.             }
  284.             .post>.postDate>a {
  285.                 color:{color:Text 2};
  286.             }
  287.             .post>.postDate>a:hover {
  288.                 color:{color:Link};
  289.             }
  290.             .post>.postTags {
  291.                 text-align: center;
  292.             }
  293.             .post>.postTags>a {
  294.                 color:{color:Text 2};
  295.             }
  296.             .post>.postTags>a:hover {
  297.                 color:{color:Link};
  298.             }
  299.             .post h2 {
  300.                 font-family: 'Roboto Slab', serif;
  301.                 font-weight: 700;
  302.                 color:{color:Post Title};
  303.             }
  304.             .post blockquote {
  305.                 padding-left: 5px;
  306.                 border-left: 1px solid {color:Text 2};
  307.                 margin-left: 15px;
  308.             }
  309.            
  310.             .post img.mainPhoto {
  311.                 width: 500px;
  312.             }
  313.             .post img:not(.mainPhoto) {
  314.                 max-width: 200px;
  315.             }
  316.             .post .postBody {
  317.                 margin-top:20px;
  318.             }
  319.             .linkTable {
  320.                 background-color:{color:Second Quote D};
  321.             }
  322.             .linkTable .thumb {
  323.                 width:80px;
  324.                 height:80px;
  325.                 background-size:cover;
  326.                 background-image:url(https://cdn0.iconfinder.com/data/icons/typicons-2/24/link-outline-128.png);
  327.                 background-color:{color:Background};
  328.                 background-position:center;
  329.             }
  330.             .postBody ul {
  331.                 padding:0; margin:0;
  332.                 list-style:none;
  333.             }
  334.             .postBody li {
  335.                 padding:5px;
  336.             }
  337.             .audioTable {
  338.                 width:100%;
  339.             }
  340.             .audioTable .art {
  341.                 width:80px;
  342.                 height:80px;
  343.                 background-size:cover;
  344.                 background-image:url(https://cdn0.iconfinder.com/data/icons/typicons-2/24/link-outline-128.png);
  345.                 background-color:{color:Background};
  346.                 background-position:center;
  347.                 border-right:5px solid {color:Second Quote D};
  348.             }
  349.             .tumblr_audio_player {
  350.                 width:15px;
  351.                 height:15px;
  352.             }
  353.             .playerCont {
  354.                 width:15px;
  355.                 height:15px;
  356.                 margin:0 auto;
  357.                 overflow:hidden;
  358.                 opacity:.6;
  359.                 border:5px solid #FFFFFF;
  360.                 text-align:center;
  361.             }
  362.             .askBalloon {
  363.                 width:100%;
  364.                 padding:10px 0 10px 10px;
  365.                 background-color:{color:Ask Balloon};
  366.                 margin:0;
  367.                 border-radius:20px;
  368.                 color:{color:Ask Text};
  369.             }
  370.             .arrBalloon {
  371.                 color:{color:Ask Balloon};
  372.                 float:right;
  373.                 margin-top:-13px;
  374.                 font-size:18pt;
  375.                 margin-right:5px;
  376.             }
  377.             .askerBalloon {
  378.                 float:right;
  379.                 color:{color:Link};
  380.                 font-variant:small-caps;
  381.                 margin-right:5px;
  382.                 margin-top:-4px;
  383.             }
  384.             ol.notes {
  385.                 list-style:none;
  386.             }
  387.             .note {
  388.                 padding:10px 0 !important;
  389.             }
  390.             ol.notes li img {
  391.                 display:none;
  392.             }
  393.            
  394.             {CustomCSS}
  395.         </style>
  396.     </head>
  397.     <body>
  398.         <div id="postArea">
  399.             {block:Posts}
  400.             <div class="post">
  401.                
  402.                
  403.                 {block:Photo}
  404.                     {LinkOpenTag}<img src="{PhotoURL-500}" class="mainPhoto" width="{PhotoWidth-500}" height="{PhotoHeight-500}" />{LinkCloseTag}
  405.                     {block:IfShowCaption}
  406.                     <div class="postBody">
  407.                         {block:Caption}{Caption}{/block:Caption}
  408.                     </div>
  409.                     {/block:IfShowCaption}
  410.                 {/block:Photo}
  411.                
  412.                 {block:Photoset}
  413.                     {Photoset-500}
  414.                     {block:IfShowCaption}
  415.                     <div class="postBody">
  416.                         {block:Caption}{Caption}{/block:Caption}
  417.                     </div>
  418.                     {/block:IfShowCaption}
  419.                 {/block:Photoset}
  420.                
  421.                 {block:Text}
  422.                     {block:Title}<h2>{Title}</h2>{/block:Title}
  423.                     <div class="postBody">
  424.                         {Body}
  425.                     </div>
  426.                 {/block:Text}
  427.                
  428.                 {block:Quote}
  429.                     <h2>&ldquo; {Quote}</h2>
  430.                     <div class="postBody">
  431.                         {block:Source}{Source}{/block:Source}
  432.                     </div>
  433.                 {/block:Quote}
  434.                
  435.                 {block:Link}
  436.                    
  437.                     <table width="100%" cellpadding="0" cellspacing="0" class="linkTable">
  438.                         <tr>
  439.                             <td style="vertical-align:middle; height:80px; overflow:auto; padding:0 10px;">
  440.                                 <h2><a href="{URL}" {Target}>{Name} &#8594;</a></h2>
  441.                                 {block:Host}{Host}{/block:Host}
  442.                             </td>
  443.                             <td class="thumb" style="{block:Thumbnail}background-image:url('{Thumbnail}');{/block:Thumbnail}"></td>
  444.                         </tr>
  445.                     </table>
  446.                     {block:IfShowCaption}
  447.                     <div class="postBody">
  448.                         {block:Description}{Description}{/block:Description}
  449.                     </div>
  450.                     {/block:IfShowCaption}
  451.                 {/block:Link}
  452.                
  453.                 {block:Chat}
  454.                     {block:Title}<h2>{Title}</h2>{/block:Title}
  455.                     <div class="postBody">
  456.                         <ul>
  457.                             {block:Lines}
  458.                             <li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
  459.                             {/block:Lines}
  460.                         </ul>
  461.                     </div>
  462.                 {/block:Chat}
  463.                
  464.                 {block:Audio}
  465.                    
  466.                     <table class="audioTable">
  467.                         <tr>
  468.                             <td rowspan="4" style="background-image:url({block:AlbumArt}{AlbumArtURL}{/block:AlbumArt});" class="art">
  469.                                
  470.                                 <div class="playerCont">
  471.                                     {AudioPlayer}
  472.                                 </div>
  473.                             </td>
  474.                             <td><strong>Title:</strong> {block:TrackName}{TrackName}{/block:TrackName}</td>
  475.                         </tr>
  476.                         <tr><td><strong>Album:</strong> {block:Album}{Album}{/block:Album}</td></tr>
  477.                         <tr><td><strong>Artist:</strong> {block:Artist}{Artist}{/block:Artist}</td></tr>
  478.                         <tr><td><strong>Plays:</strong> {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount} <span style="float:right;">{block:ExternalAudio}<a href="{ExternalAudioURL}">&#8595;</a>{/block:ExternalAudio}</span></td></tr>
  479.                     </table>
  480.                    
  481.                     {block:IfShowCaption}
  482.                     <div class="postBody">
  483.                         {block:Caption}{Caption}{/block:Caption}
  484.                     </div>
  485.                     {/block:IfShowCaption}
  486.                 {/block:Audio}
  487.                
  488.                 {block:Video}
  489.                     {Video-500}
  490.                     {block:IfShowCaption}
  491.                     <div class="postBody">
  492.                         {block:Caption}{Caption}{/block:Caption}
  493.                     </div>
  494.                     {/block:IfShowCaption}
  495.                 {/block:Video}
  496.                
  497.                 {block:Answer}
  498.                     <div class="askBalloon">{Question}</div>
  499.                     <span class="arrBalloon">&#9662;</span><br style="clear:both;" />
  500.                     <span class="askerBalloon">{Asker}</span><br style="clear:both;" />
  501.                    
  502.                     <div class="postBody">
  503.                         {Answer}
  504.                     </div>
  505.                 {/block:Answer}
  506.                
  507.                
  508.                
  509.                
  510.                 <div class="postDate"><a href="{Permalink}">{block:Date}{TimeAgo}{/block:Date}{block:NoteCount}&emsp;&middot;&emsp;{NoteCountWithLabel}{/block:NoteCount}</a></div>
  511.                 {block:HasTags}<div class="postTags">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  512.                
  513.                 {block:PermalinkPage}
  514.                 <div class="postInfo">
  515.                     {block:Date}<strong>Posted on</strong> {Month} {DayOfMonth}{DayOfMonthSuffix} {Year} at {12Hour}:{Minutes}{AmPm}.{/block:Date}<br />
  516.                     {block:RebloggedFrom}
  517.                     <strong>Via:</strong> <a href="{ReblogParentURL}">{ReblogParentName}</a><br />
  518.                     <strong>Source:</strong> <a href="{ReblogRootURL}">{ReblogRootName}</a>
  519.                     {/block:RebloggedFrom}
  520.                     {block:NotReblog}<strong>Originally posted by me.</strong>{/block:NotReblog}
  521.                 </div>
  522.                 {/block:PermalinkPage}
  523.                
  524.                 {block:PostNotes}{PostNotes}{/block:PostNotes}
  525.                
  526.                 {block:ContentSource}
  527.                 <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  528.                width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  529.                {/block:SourceLogo}
  530.                {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  531.                 {/block:ContentSource}
  532.             </div>
  533.             {/block:Posts}
  534.        
  535.            
  536.         </div>
  537.         {block:Pagination}
  538.         <div id="navi">
  539.             {block:NextPage}<a href="{NextPage}" style="float:right;">forth</a><br>{/block:NextPage}
  540.             {block:PreviousPage}<a href="{PreviousPage}" style="float:left;">back</a>{/block:PreviousPage}
  541.         </div>
  542.         {/block:Pagination}
  543.        
  544.         <a href="/">
  545.         <div id="secondQuote">
  546.             {text:Second Quote}
  547.         </div></a>
  548.        
  549.         <div id="sideB">
  550.             <div id="blogInfo">
  551.                 <p>{Description}</p>
  552.                 <ul class="lM">
  553.                     <li><a href="/">home</a></li>
  554.                     {block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
  555.                     {block:IfLink1URL}<li><a href="{text:Link 1 URL}">{text:Link 1}</a></li>{/block:IfLink1URL}
  556.                     {block:IfLink2URL}<li><a href="{text:Link 2 URL}">{text:Link 2}</a></li>{/block:IfLink2URL}
  557.                 </ul>
  558.                 <ul class="rM">
  559.                     {block:IfLink3URL}<li><a href="{text:Link 3 URL}">{text:Link 3}</a></li>{/block:IfLink3URL}
  560.                     {block:IfLink4URL}<li><a href="{text:Link 4 URL}">{text:Link 4}</a></li>{/block:IfLink4URL}
  561.                     {block:IfLink5URL}<li><a href="{text:Link 5 URL}">{text:Link 5}</a></li>{/block:IfLink5URL}
  562.                     {block:IfLink6URL}<li><a href="{text:Link 6 URL}">{text:Link 6}</a></li>{/block:IfLink6URL}
  563.                 </ul>
  564.             </div>
  565.             <div id="iconInfo">
  566.                 <img src="{image:Icon}" />
  567.                 <p>{text:First Quote}</p>
  568.             </div>
  569.         </div>
  570.        
  571.         <div id="tata"><a href="http://tanharu.tumblr.com/">&#7789;</a></div>
  572.     </body>
  573. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement