- <!-----
- metamorphos theme by noctos.
- I'm sorry this is a crappy code. and I'm sorry if something doesn't work but i tried OTL
- good luck :)
- -------
- how to install:
- copy the code.
- go to the customize page for your blog.
- click the "custom HTML" button. Delete everything there.
- paste this code.
- press save.
- close the page. and then go back.
- customize.
- ------
- ---->
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <html>
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
- <meta name="image:Background" content="http://media.tumblr.com/tumblr_ly0tgqeREA1qklwal.png"/>
- <meta name="image:perma background" content="http://media.tumblr.com/tumblr_ly0t3dZ6Fm1qklwal.jpg"/>
- <meta name="image:Sidebar" content=""/>
- <meta name="image:side background" content="http://media.tumblr.com/tumblr_ly0t0nli921qklwal.jpg"/>
- <meta name="image:Side backgroundbar" content="http://media.tumblr.com/tumblr_ly0szww1te1qklwal.png"/>
- <meta name="color:Background" content="#ffffff" />
- <meta name="color:top bar" content="#000000"/>
- <meta name="color:menu hover" content="#ffffff"/>
- <meta name="color:menu" content="#ffffff" />
- <meta name="color:menu border" content="#727070" />
- <meta name="color:menu border hover" content="#a7a3a3" />
- <meta name="color:Blockquote Background" content="#f7f7f7" />
- <meta name="color:Link" content="#4b4848" />
- <meta name="color:Link Hover" content="#4d4b4b" />
- <meta name="color:Text" content="#000000" />
- <meta name="color:Entry Background" content="#ffffff" />
- <meta name="color:Title" content="#9ea8a8" />
- <meta name="color:askcolor" content="#f5f3f3" />
- <meta name="if:Endless Scroll" content="1"/>
- <meta name="if:Show Captions" content="0"/>
- <meta name="if:Show Hover Notes" content="1" />
- <meta name="if:Picture Fade" content="1" />
- <meta name="if:Infinite Scroll" content="1" />
- <meta name="if:Lazy Load" content="1" />
- <meta name="if:Links1" content="0" />
- <meta name="if:Links2" content="0" />
- <meta name="if:Links3" content="0" />
- <meta name="if:Links4" content="0" />
- <meta name="text:custom title" content="" />
- <meta name="text:back to top" content="back to top" />
- <meta name="text:Link 1" content="" />
- <meta name="text:Link 1 title" content="" />
- <meta name="text:Link 2" content="" />
- <meta name="text:Link 2 title" content="" />
- <meta name="text:Link 3" content="" />
- <meta name="text:Link 3 title" content="" />
- <meta name="text:Link 4" content="" />
- <meta name="text:Link 4 title" content="" />
- <style type="text/css">
- iframe#tumblr_controls {right:3px !important;
- position: fixed !important;
- opacity: 0.5;
- filter:alpha(opacity=50);
- -moz-opacity: 0.5;
- -khtml-opacity: 0.5;
- -webkit-transition: all 0.9s ease;
- -moz-transition: all 0.9s ease;
- -o-transition: all 0.9s ease;}
- iframe#tumblr_controls:hover{
- opacity: 1;
- filter:alpha(opacity=100);
- -moz-opacity: 1;
- -khtml-opacity: 1;
- -webkit-transition: all 0.9s ease;
- -moz-transition: all 0.9s ease;
- -o-transition: all 0.9s ease;}
- @font-face {font-family: "silkscreen";src: url('http://static.tumblr.com/qbwrk8v/zmWlpdkl0/slkscr.ttf');}
- #eden {
- font-family: consolas minor;
- border-bottom: 1px dotted {color:text};
- font-size:14px;
- text-transform:uppercase;
- color:{color:title};
- padding-bottom:5px;
- letter-spacing:-1.5px;
- text-align:left;}
- #hope {
- position:fixed;left:0px; top:55px;
- font-size: 35px;
- font-family:georgia;
- color:{color:maintitle};
- font-style:italic;
- width:300px;
- letter-spacing:1px;
- font-weight:normal;
- text-align:center;
- z-index:1;}
- #pulser {
- text-align:center;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;}
- #pulse {
- color: #737373;
- font-style: italic;
- padding:5px;
- text-align: center;
- background-color:{color:askcolor};
- font-family: georgia;
- font-size: 10px;
- text-transform:uppercase;}
- #pulse a{
- color: {color:link};}
- #pulse a:hover{
- color: {color:link hover};}
- #oerba {
- padding: 5px;
- font-size:12px;
- font-family:georgia;
- letter-spacing: -1px;}
- blockquote{
- padding:3px;
- color: {color:text};
- border-left: 1px dotted {color:text};
- background-color:{color:blockquote background};
- font: 8px georgia;
- margin-right: 50px;}
- #sazh {
- width:400px;
- float:left;
- text-align:justify;
- margin-top:7px;
- background:{color:entry background};
- color: {color:text};
- padding:10px;
- font-family: georgia;
- font-size:9px;
- height: auto;
- margin-left:360px;
- overflow:hidden;}
- #sazh img {max-width:400px;}
- #text {font-family:arial;
- padding:5px; font-size:9px;}
- #jihl {max-width:400px; min-width:400px;overflow:hidden;}
- #jihl img
- {max-width:400px; min-width:400px; overflow:hidden; padding-bottom:3px; }
- {block:IfPictureFade}
- #sazh img {
- opacity: 0.8;
- filter: alpha:(opacity=80);
- -moz-opacity: 0.8;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;}
- #sazh img:hover {
- opacity: 1;
- filter: alpha:(opacity=100);
- -moz-opacity: 1;
- -webkit-transition: all 1.8s ease;
- -moz-transition: all 1.8s ease;
- -o-transition: all 1.8s ease;}
- {/block:IfPictureFade}
- .cid {
- float: right;
- width:20px;
- height:3px;
- font-size: 7px;
- padding:0px;
- margin-top:-20px;
- padding-bottom:7px;
- padding-left:15px;
- background-image: url('{image:perma background}') ;opacity:0.2;
- margin-left:370px;
- position: absolute;
- text-align: left;
- overflow:hidden;
- -webkit-transition: all 0.4s ease-in;
- -moz-transition: all 0.4s ease-in;
- -o-transition: all 0.4s ease-in;opacity:0;
- z-index:999;-webkit-border-bottom-left-radius: 10px;
- -moz-border-radius-bottomleft: 10px;
- border-bottom-left-radius: 10px; }
- .cid a {color:{color:text}; padding-right:0px; padding-left:0px; font-size: 8px; letter-spacing: 1px;
- font-family: consolas ; text-transform: uppercase; z-index:-1;}
- #sazh:hover .cid {width:440px;margin-left:-47px;opacity: 1; filter: alpha(opacity = 100); zoom: 0; margin-bottom:0px; z-index:999;}
- body {
- background-image: url('{image:background}');
- background-attachment:fixed;
- background-color:{color:background};
- font-family: silkscreen;
- font-size: 9px;-webkit-transition: all 0.6s ease-in;
- -moz-transition: all 0.6s ease-in;
- -o-transition: all 0.6s ease-in;}
- a {font-weight:normal; color:{color:link}; text-decoration:none;-webkit-transition: all 0.6s ease-in;
- -moz-transition: all 0.6s ease-in;
- -o-transition: all 0.6s ease-in;}
- a:hover {color:{color:link hover};-webkit-transition: all 0.6s ease-in;
- -moz-transition: all 0.6s ease-in;
- -o-transition: all 0.6s ease-in;}
- #snowdiv {
- width:380px;
- padding:4px;
- border-bottom: 1px dotted {color:text};
- }
- #snow {
- width:375px;
- padding:10px;
- color: {color:text};
- margin-left:370px;
- line-height: 15px;
- letter-spacing: 0px;
- text-transform:lowercase;
- font-family: georgia; font-size: 10px; z-index:-9999999999;}
- li.snow {
- list-style:decimal;
- padding: 2px;
- margin: 2px;
- letter-spacing: 0px;
- text-transform:lowercase;}
- #snow a{
- color: {color:maintitle};
- letter-spacing: 0px;
- text-transform:lowercase;
- font-family: georgia; font-size: 10px;}
- #yun {font-size:10px; font-family:consolas;text-align:center;}
- #source a, #caption a, #quotesource a {
- font: normal 8px arial;
- font-weight:bold;
- letter-spacing: 0px;
- color: {color:text};
- letter-spacing: 1px;
- background:none ;
- text-transform:lowercase;
- padding: 1px 3px;}
- #quotesource {
- display: block;
- text-align: center;}
- #cocoon {
- font-style: normal;
- font-family:arial;}
- ul {
- list-style:square;}
- #dajh {
- width: 100%px;
- background: #000000;
- }
- #dajhtext {
- text-transform: uppercase;
- padding: 0px;
- text-align:center;}
- .label {
- font: 8px arial;
- text-transform:uppercase;
- letter-spacing: 0px;
- padding-right: 5px;}
- #vanille{
- color: {color:text};
- opacity:1;
- text-align:center;
- font-family: georgia;
- font-size:9px;
- padding:5px;
- margin-top:3px;
- width:auto; height:auto; z-index:999;
- overflow:hidden;-webkit-transition: all 1.0s ease-in;
- -moz-transition: all 1.0s ease-in;
- -o-transition: all 1.0s ease-in;}
- #lightningbackground {
- background-color: {color: background}; position:fixed; left:70px; width: 165px; height:110%; background: url({image:side background}) repeat; margin-top:-20px; z-index:-9;}
- #lightningbackgroundbar {
- background-color: {color: background}; position:fixed; left:50px; width: 20px; height:110%; background: url({image:side backgroundbar}) repeat; margin-top:-20px; z-index:-9;}
- #lightningbackground2 {
- position:fixed; left:178px; width: 150px; height:0px; margin-top:190px; opacity:1; z-index:99999;
- padding-right:5px; border-left:0px solid {color:text};
- -webkit-transition: all 0.8s ease-in;
- -moz-transition: all 0.8s ease-in;
- -o-transition: all 0.8s ease-in;}
- #lightning {
- height:auto; text-align:right ;font-size: 11px;
- margin-top:50px; width:155px;
- position:fixed; left:75px;
- border: 0px solid {color: entry background};
- -webkit-transition: all 1.4s ease-in;
- -moz-transition: all 1.4s ease-in;
- -o-transition: all 1.4s ease-in;z-index:999;}
- #lightning img {
- width:140px;
- opacity: 1;
- filter: alpha:(opacity=100;)
- -moz-opacity: 1;
- -webkit-transition: all 0.8s ease;
- -moz-transition: all 0.8s ease;
- -o-transition: all 0.8s ease;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;}
- #lightning img:hover {{block:IfPictureFade}
- opacity: 0.7;
- filter: alpha:(opacity=70);
- -moz-opacity: 0.7;
- {/block:IfPictureFade}
- -webkit-transition: all 1.8s ease;
- -moz-transition: all 1.8s ease;
- -o-transition: all 0.8s ease;}
- #fangtext {
- font-size:8px;
- text-align:right;
- margin-right:48px;
- z-index:99;}
- #fang {
- background-color: {color:menu};
- text-color: {color:text};
- width:110px;
- height:10px;
- font-family:arial;
- margin-left:5px;
- font-size:7.5px;
- margin-top:2px;
- border:1px solid {color:menu border};
- border-left: 30px solid {color:menu border};
- letter-spacing:1px;
- text-align:center;
- z-index:1;}
- #fang:hover {
- background-color:{color:menu hover};
- width:130px;
- border:1px solid {color:menu border hover};
- border-left: 10px solid {color:menu border hover};
- }
- #invisible { height:35px; width:100%;}
- #topbar {position:fixed; height:60px; width:110%; background-color: {color:top bar}; margin-top:-60px; margin-left:-30px; z-index:10;}
- #toptitle { width:405px;font-size:30px; font-family:georgia; color:#ffffff; padding-top: 15px; font-style:italic; margin-left:390px; margin-top:5px; text-align:center;}
- #top-link{ display:none; position:fixed; right:10px; bottom:10px;color:#000;font-family: arial;text-decoration:none;background:none;font-size:8px;}
- #credit{ position:fixed; left:10px; bottom:10px;color:#000;font-family: arial;font-size:10px; opacity:0.2;}
- #credit:hover {opacity:1;}
- </style>
- <script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
- <script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery-1.3.2.js"></script>
- <script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery.scrollTo-1.4.0-min.js"></script>
- <script type="text/javascript">
- jQuery.fn.topLink = function(settings) {
- settings = jQuery.extend({
- min: 1,
- fadeSpeed: 200,
- ieOffset: 50
- }, settings);
- return this.each(function() {
- //listen for scroll
- var el = $(this);
- el.css('display','none'); //in case the user forgot
- $(window).scroll(function() {
- if(!jQuery.support.hrefNormalized) {
- el.css({
- 'position': 'absolute',
- 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
- });
- }
- if($(window).scrollTop() >= settings.min)
- {
- el.fadeIn(settings.fadeSpeed);
- }
- else
- {
- el.fadeOut(settings.fadeSpeed);
- }
- });
- });
- };
- $(document).ready(function() {
- $('#top-link').topLink({
- min: 400,
- fadeSpeed: 500
- });
- //smoothscroll
- $('#top-link').click(function(e) {
- e.preventDefault();
- $.scrollTo(0,300);
- });
- });
- </script>
- <script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery-1.3.2.js"></script>
- <script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery.scrollTo-1.4.0-min.js"></script>
- <script type="text/javascript">
- jQuery.fn.topLink = function(settings) {
- settings = jQuery.extend({
- min: 1,
- fadeSpeed: 200,
- ieOffset: 50
- }, settings);
- return this.each(function() {
- //listen for scroll
- var el = $(this);
- el.css('display','none'); //in case the user forgot
- $(window).scroll(function() {
- if(!jQuery.support.hrefNormalized) {
- el.css({
- 'position': 'absolute',
- 'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
- });
- }
- if($(window).scrollTop() >= settings.min)
- {
- el.fadeIn(settings.fadeSpeed);
- }
- else
- {
- el.fadeOut(settings.fadeSpeed);
- }
- });
- });
- };
- $(document).ready(function() {
- $('#top-link').topLink({
- min: 400,
- fadeSpeed: 500
- });
- //smoothscroll
- $('#top-link').click(function(e) {
- e.preventDefault();
- $.scrollTo(0,300);
- });
- });
- </script>
- {block:IfLazyLoad}
- <script type="text/javascript" src="http://static.tumblr.com/yauabn1/dTzlwknnj/jquery.js"></script>
- <script type="text/javascript" src="http://static.tumblr.com/yauabn1/erElwknoc/lazyload.js"></script>
- <script type="text/javascript" charset="utf-0">
- var $j = jQuery.noConflict();
- $j(function() {
- if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
- $j("img").lazyload({
- placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
- effect: "fadeIn",
- });
- });
- </script>
- {/block:IfLazyLoad}
- </head>
- <body>
- <!---- please don't remove this credit ---->
- <div id="credit"><a href="http://noctos.tumblr.com" title="theme by noctos">☂</a></div>
- <!---- please don't remove this credit ---->
- <div id ="invisible"></div>
- <div id ="topbar"><div id="toptitle">{title}</div></div>
- <div id="top"></div>
- <div id="top-link"><a style="border:none;" href="#top">{text:back to top}</a></div>
- <div id = "lightningbackground"></div>
- <div id = "lightningbackgroundbar"></div>
- <div id="hope"><a href="/" title="{title}">{text:custom title}</a></div>
- <div id = "lightning">
- <center> <a href="/" title="{title}"> <img src="{image:Sidebar}"></a></center>
- <div id ="vanille">{description}</div>
- <a href="/" title="index"><div id="fang">home</div></a>
- <a href="/ask" title="message"><div id="fang">message</div></a>
- {block:IfLinks1}
- <a href="{text:Link 1}" title="{text:Link 1 title}"><div id="fang">{text:Link 1 title}</div></a>{/block:IfLinks1}
- {block:IfLinks2}
- <a href="{text:Link 2}" title="{text:Link 2 title}"><div id="fang">{text:Link 2 title}</div></a>{/block:IfLinks2}
- {block:IfLinks3}
- <a href="{text:Link 3}" title="{text:Link 3 title}"><div id="fang">{text:Link 3 title}</div></a>{/block:IfLinks3}
- {block:IfLinks4}
- <a href="{text:Link 4}" title="{text:Link 4 title}"><div id="fang">{text:Link 4 title}</div></a>{/block:IfLinks4}
- <a href="http://noctos.tumblr.com" title="theme by noctos ~"><div id="fang">credit</div></a>
- {block:IfNotEndlessScroll}
- <div id="yun">
- {block:PreviousPage}<a href="{PreviousPage}">◁ </a>{/block:PreviousPage}
- {block:NextPage}<a href="{NextPage}">▷</a>{/block:NextPage}</div>
- {/block:IfNotEndlessScroll}
- </div>
- {block:IfEndlessScroll}
- <div class="autopagerize_page_element">
- {/block:IfEndlessScroll}
- {block:Posts}
- <table width="0" border="0" align="center" cellspacing="0px" cellpadding="0px">
- <tr>
- {block:Text}
- <div id="sazh">
- <div id="cid">
- {block:Title}<div id="eden"><big>『 </big><a href="{Permalink}">{Title}</a></div>{/block:Title}
- <div id="text">{Body}</div>{block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes} </div> </div>
- {/block:Text}
- {block:Quote}
- <div id="sazh">
- <div id="oerba" align="center">“{Quote}”</div>
- <div id="quotesource">{block:Source}— {Source}{/block:Source}</div>
- <span class="cid"><a href="{Permalink}">{TimeAgo}{block:IfShowHoverNotes} {block:NoteCount}{NoteCountWithLabel}{/block:Notecount} {/block:IfShowHoverNotes}</a></span></div>
- {/block:Quote}
- {block:Link}
- <div id="sazh">{/block:ShowHoverTags}
- <div id="eden"><big>『 </big><a href="{URL}" {Target}>{Name}</a></div>
- {block:Description}<div id="text">{Description}</div>{/block:Description}{block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes}</div> {/block:Link}
- {block:Chat}<div id="sazh">{/block:ShowHoverTags}{block:Title}
- <div id="eden"><big>『 </big><a href="{Permalink}">{Title}</a></div>
- {/block:Title}
- <div id="cocoon">
- <ul>
- {block:Lines}
- <li class="person{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</li>
- {/block:Lines}
- </ul>
- {block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes}</div> </div> {/block:Chat}
- {block:Audio}
- <div id="sazh">{/block:ShowHoverTags}
- <div id="dajh">{AudioPlayerBlack}</div>
- <div id="dajhtext">
- <div id="dajhtext">{PlayCountWithLabel}</div>
- {block:PermalinkPage}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:PermalinkPage}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes}</div></div> {/block:Caption}
- {/block:Audio}
- {block:Answer}
- <div id="sazh">
- <div id="pulse">{Asker} whispered: {Question}</div>
- <div id="pulser">{Answer}{block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes}</div></div>
- {/block:Answer}
- {block:Photo} <div id="sazh">{LinkOpenTag}<a href="{Permalink}"><img src="{PhotoURL-500}"/></a>{LinkCloseTag}
- {block:IfNotShowCaptions}{block:PermalinkPage}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:PermalinkPage}{/block:IfNotShowCaptions}
- {block:IfShowCaptions}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:IfShowCaptions}
- {block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} | {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes}
- </div></div>{/block:Caption} {/block:Photo}
- {block:Photoset}<div id="sazh">{/block:ShowHoverTags}
- <div id="jihl"><div style="width:400px !important;">{Photoset-400}</div></div>
- {block:IfNotShowCaptions}{block:PermalinkPage}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:PermalinkPage}{/block:IfNotShowCaptions}
- {block:IfShowCaptions}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:IfShowCaptions}
- {block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} | {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes}</div></div> {/block:Caption}
- {/block:Photoset}
- {block:Video}<div id="sazh">{/block:ShowHoverTags}{Video-400}
- {block:IfNotShowCaptions}{block:PermalinkPage}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:PermalinkPage}{/block:IfNotShowCaptions}
- {block:IfShowCaptions}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:IfShowCaptions}
- {block:IfShowHoverNotes} <span class="cid"><a href="{Permalink}">{TimeAgo} {block:NoteCount}{NoteCountWithLabel}{/block:Notecount}</a></span>{/block:IfShowHoverNotes} </div></div> {/block:Caption}{/block:Video}
- </div> </div>
- </div>
- <div id="snow"><br>{block:PermalinkPage}<center> {TimeAgo} {NoteCountWithLabel} {block:RebloggedFrom} reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> (source <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>){/block:RebloggedFrom}
- <br> {block:HasTags}tagged {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</center><div id="snowdiv"></div>
- {block:PostNotes}{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}
- </td>
- </tr></table> {/block:Posts}</div></div></div>
- </div></div>
- </body> </html>