Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- // Saitama
- by espoirthemes //
- +don't move the credit.
- +edit as much as you like!
- popup tutorial by htmlqueens
- -->
- <html>
- <head>
- <script type="text/javascript"
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:200,
- tip_fade_speed:300
- }
- );
- });
- })(jQuery);
- </script>
- <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="" />
- <meta name="color:background" content="#f7f7f7" />
- <meta name="color:posts" content="#fff" />
- <meta name="color:text" content="#444" />
- <meta name="color:links" content="#C44A3B" />
- <meta name="color:link hover" content="#eee" />
- <meta name="color:italics" content="#777" />
- <meta name="color:bold" content="#111" />
- <meta name="color:border" content="#ddd" />
- <meta name="color:scrollbar" content="#222" />
- <meta name="color:tooltip" content="#222" />
- <meta name="color:tooltip text" content="#fff" />
- <meta name="color:current page" content="#fff" />
- <meta name="color:jump page" content="#fff" />
- <meta name="color:jump page hover" content="#aaa" />
- <meta name="color:jump page hover text" content="#000" />
- <meta name="text:link1" content="un" />
- <meta name="text:url1" content="/url" />
- <meta name="text:link2" content="deux" />
- <meta name="text:url2" content="/url" />
- <meta name="text:link3" content="trois" />
- <meta name="text:url3" content="/url" />
- <meta name="text:link4" content="quatre" />
- <meta name="text:url4" content="/url" />
- <meta name="text:current page" content="X" />
- <meta name="text:about" content="about goes here" />
- <meta name="if:full background" content="" />
- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
- <script type="text/javascript"
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script>
- $(document).ready(function() {
- //
- $('a.poplight[href^=#]').click(function() {
- var popID = $(this).attr('rel'); //Get Popup Name
- var popURL = $(this).attr('href'); //Get Popup href to define size
- var query= popURL.split('?');
- var dim= query[1].split('&');
- var popWidth = dim[0].split('=')[1]; //Gets the first query string value
- $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://38.media.tumblr.com/30853fe6c9b10e246922a5953db4d1a0/tumblr_inline_nl8j0gMXwf1ry72eo.gif" class="btn_close" title="escape" alt="escape" /></a>');
- var popMargTop = ($('#' + popID).height() + 80) / 2;
- var popMargLeft = ($('#' + popID).width() + 80) / 2;
- //Apply Margin to Popup
- $('#' + popID).css({
- 'margin-top' : -popMargTop,
- 'margin-left' : -popMargLeft
- });
- $('body').append('<div id="fade"></div>');
- $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
- return false;
- });
- $('a.close, #fade').live('click', function() {
- $('#fade , .popup_block').fadeOut(function() {
- $('#fade, a.close').remove(); //fade them both out
- });
- return false;
- });
- });
- </script>
- <script>
- $(document).ready(function(){
- tumblrNotesLoaded(notes_html);
- tumblrNotesInserted();
- });
- </script>
- </head>
- <style type="text/css">
- #fade { /*--Transparent background layer--*/
- display: none; /*--hidden by default--*/
- background: #fff;
- background-image: url('');
- position: fixed; left: 0; top: 0;
- width: 100%; height: 100%;
- opacity: .80;
- z-index: 9999;
- }
- .popup_block{
- display: none; /*--hidden by default--*/
- background: #fff;
- padding: 20px;
- border: 2px solid {color:border};
- float: left;
- font-size: 12px;
- position: fixed;
- top: 50%; left: 50%;
- z-index: 99999;
- /*--CSS3 Box Shadows--*/
- box-shadow: 10px 10px 0px rgba(50, 50, 50, .2);
- }
- img.btn_close {
- float: right;
- margin: -5px -5px 0 0;
- }
- /*--Making IE6 Understand Fixed Positioning--*/
- *html #fade {
- position: absolute;
- }
- *html .popup_block {
- position: absolute;
- }
- #pagination { text-align:center; font-size:20px; bottom:20px; position:relative; }
- #pagination a{text-decoration:none}
- .jump_page {margin-top:10px;
- padding: 4px 8px;
- color:{color:Link};
- background:{color:posts};
- font-size:12px;
- text-decoration:none; transition:.6s ease-in-out;
- }
- .chat {
- padding:5px;
- line-height:150%;
- }
- .chat:nth-of-type(odd) {
- color:{color:text};
- -webkit-transition:.5s;
- transition:.5s; }
- .chat:nth-of-type(odd) b {
- color:{color:text};
- -webkit-transition:.5s;
- transition:.5s; }
- .chat:nth-of-type(even) {
- background:#aaa;
- color:{color:text};
- -webkit-transition:.5s;
- transition:.5s; }
- .chat:nth-of-type(even) b{
- color:{color:text};
- -webkit-transition:.5s;
- transition:.5s; }
- .jump_page a{font-size:12px;}
- .jump_page:hover{ background:{color:border};transition:.6s;border-bottom:1px solid {color:link hover};}
- .jump_page:hover a{color:{color:posts}; }
- .current_page{margin-top:10px;
- padding: 4px 8px;
- color: {color:link hover};
- font-size:12px;
- background:{color:posts};
- text-decoration:none;
- }
- .about{border:1px solid {color:border}; width:500px; padding:10px; font-size:16px; height:100px; overflow:auto;}
- .linklist{position:absolute; width:700px; bottom:18px;}
- .linklist li{list-style:none; display:inline-block; margin-left:100px;}
- .linklist li a{padding:4px; border:1px solid {color:border}; font-size:16px;}
- #egg { opacity:.8;left:10px; bottom:10px; position:fixed;bottom:4px;display:block; width: 14px; height: 18px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
- font-family: "bitxmap";
- border:2px solid #aaa;
- }
- #egg:hover { animation-name: egg;
- animation-duration: 1s;
- animation-iteration-count: infinite;}
- @keyframes egg{
- 0%{}
- 10%{transform:rotate(20deg)}
- 80%{transform:rotate(-20deg)}
- 100%{}
- }
- #s-m-t-tooltip{
- max-width:300px;
- margin-top:-50px;
- margin-left:-20px;
- border:2px solid white;
- box-shadow: 0px 0px 0px 2px {color:tooltip};
- font-family:consolas;
- padding:5px 5px;
- background:{color:tooltip}; /*if you're changing the color in the code, make sure this is the same as the s-m-t:after */
- color:{color:tooltip text};
- z-index:9999;
- font-size:12px;
- text-transform:uppercase;
- }
- /* don't touch this, this is the what makes it look like a speech bubble */
- #s-m-t-tooltip:after{
- content: '';
- position: absolute;
- border-style: solid;
- border-width: 8px 10px 0;
- border-color: {color:tooltip} transparent;
- display: block;
- width: 0;
- z-index: 1;
- bottom: -10px;
- left: 50%;}
- ::-webkit-scrollbar {width: 10px; height: 4px; background: #ffffff; border:1px solid {color:border}; }
- ::-webkit-scrollbar-thumb { background-color: {color:scrollbar}; }
- ::selection {color: #000; background: #ddd;}
- ::-moz-selection {color: #000; background: #ddd;}
- body{
- margin:0;
- background:{color:background} url({image:background})
- {block:iffullbackground} no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover; {/block:iffullbackground};
- background-attachment:fixed;
- word-wrap:break-word;
- font-size:16.2px;
- }
- a{color:{color:links};
- text-decoration:none; transition:.4s;
- }
- a:hover{color:{color:link hover}; transition:.4s;}
- b{
- color:{color:bold};
- }
- i{color:{color:italic};
- }
- blockquote{border-left:1px dotted black; margin-left:10px; padding:0px; padding-left:4px; }
- blockquote img{max-width:100%;}
- #container {width:500px; margin:100px auto;}
- #sidebar{position:fixed; top:100px; left:100px; display:block; width: 200px; height: 260px; background-color:#FAE2D1; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; border:2px solid #1b1b1b; transition:.6s; z-index:2;
- box-shadow:4px 4px 0px 0px rgba(50, 50, 50, .2);
- }
- .eye{
- border-bottom-left-radius:60% 80%;
- border-bottom-right-radius:60% 80%;
- border-top-left-radius:50% 40%;
- border-top-right-radius:50% 40%;
- width:50px; height:28px; position:absolute;
- background:white; margin-top:110px;
- margin-left:100px;
- border-width:1px 1px 1px 1px;
- border-style:solid;
- border-color:#1b1b1b;
- }
- .pupil{position:absolute; left:20px; border-radius:100%; height:6px; width:6px; background:#1b1b1b; top:10px;}
- .shine{position:absolute; right:24px; transform:skew(30deg); width:20px; height:40px;background:rgba(255, 255, 255, .5); top:30px; border-radius:100% 70%; }
- .eye.left{margin-left:22px;transform:skew(4deg);}
- .eye.right{right:22px;transform:skew(-4deg);}
- .brow{ border-top-left-radius:50% 50%;
- border-top-right-radius:50% 50%; width:48px; height:8px; top:100px; border-top:1px solid #1b1b1b; position:absolute;}
- .brow.left{margin-left:30px;}
- .nose{left:48%; border-left:1px solid #1b1b1b; height:70px; width:10px; position:absolute; margin-top:110px; border-bottom-left-radius:20px;}
- .brow.right{right:30px;}
- .mouth{
- border-top-left-radius: 70% 10%;
- border-top-right-radius: 70% 10%;
- border-bottom-right-radius: 70% 120%;
- border-bottom-left-radius: 70% 120%;
- position:absolute; border:1px solid #1b1b1b; top:200px; height:18px; width:30px; background:#C44A3B; left:42%;}
- #sidebar:hover .mouth{opacity:0; transition:.6s;}
- #sidebar:hover .eye{opacity:0; transition:.6s;}
- #sidebar:hover .brow{opacity:0; transition:.6s;}
- #sidebar:hover .nose{opacity:0; transition:.6s;}
- .description{opacity:0; width: 150px; padding:2px;margin-left:20px;margin-top:70px;height: 120px; transition:.6s; text-align:center; overflow:auto;}
- #sidebar:hover .description{opacity:1;}
- .posts{margin: 100px 0 100px 0; width: 500px;text-align: justify; background-color:{color:posts}; padding:10px; border:1px solid {color:border};}
- .postmarker{width:500px; height:20px; padding:10px; background:{color:posts}; text-align:left;position:absolute; margin-top:-40px;border:1px solid {color:border}; margin-left:-11px; font-family:consolas; font-size:14px;}
- h3{ padding:10px; font-size:22px; text-align:center; position:relative;}
- .linkcon{bottom:130px; width:200px; height:100px;position:fixed; left:100px;}
- .linkcon li{display:inline-block;margin-left:20px; height:20px; width:20px; background:white; box-shadow:0px 0px 0px 1px #444, 0px 0px 0px 2px #444;transition:.6s;border-radius:100%;}
- .linkcon li:hover{box-shadow:0px 0px 0px 2px #333, 0px 0px 4px 10px rgba(0,0,0,.0);transition:.6s;background:#333;border-radius:0%;}
- .speechbubble {
- width:400px;
- position: relative;
- background:#eee ;
- left:70px;
- color:#a0a0a0;
- margin: 0;
- padding:8px;
- text-align:left;
- box-shadow: 0px 0 1px rgba(0,0,0,0);
- }
- .speechbubble:after {
- position: absolute;
- content: "";
- border-color: #eee transparent transparent transparent;
- border-style: solid;
- border-width: 15px 15px 0px;
- height:0;
- width:0;
- position:absolute;
- left:-15px;
- top:10px;
- }
- .reblog{ margin-left:20px; width:100%; }
- .reblog svg path {
- fill: #000;
- }
- .dinky {
- float:left;
- }
- #albumart{width:150px;height:150px; border-radius:90px; transition:.5s;}
- #albumart img{
- width:150px;
- height:150px;
- padding:0px;
- opacity:.8;
- border-radius:90px;
- border-width:0px; transition:.5s;
- }
- .dinky:hover #albumart img{ -ms-transform: rotate(-300deg); /* IE 9 */
- -webkit-transform: rotate(-300deg); /* Chrome, Safari, Opera */
- transform: rotate(-300deg); transition:.8s;}
- .player {
- width:30px;
- overflow:hidden;
- height:40px;
- padding:0px;
- padding-top:5px;
- padding-left:8px;
- opacity:.8;
- border-radius:90px;
- position:absolute;
- left:50%;
- top:50%;
- margin-top:-20px;
- margin-left:-20px;
- transform:scale(1.2);
- }
- .daplaya {
- background-color:#Fff;
- box-shadow:0px 0px 0px 2px #1b1b1b;
- border:2px solid #aaa;
- width:50px;border-radius:90px;
- height:50px;
- position:absolute;
- margin-top:-100px;
- margin-left:48px;
- -webkit-transition-duration:500ms;
- -moz-transition-duration:500ms;
- -o-transition-duration:500ms;
- -ms-transition-duration:500ms;
- }
- .donkey {
- float:left top;
- margin-left:92px;
- background-color:transparent;
- padding:10px;
- padding-left:20px;
- height:110px;
- text-align:center;
- color:{color:text};
- }
- .track {
- font-size:14px;
- letter-spacing:4px;
- padding:10px;
- padding-left:28px;
- background-color:#eee;
- font-weight:300;
- text-transform:uppercase; transition:.6s;
- font-family:Helvetica;
- color:black;
- }
- .album{padding-left:28px;}
- .artist {
- letter-spacing:1px;
- font-style:italic;
- padding-left:28px;
- }
- .playcount {
- font-size:9px;
- padding-left:28px;
- text-transform:uppercase;
- letter-spacing:3px;
- }
- #audiolo {
- width:500px;
- }
- .info{background:{color:posts}; width:500px; position:absolute; padding:10px; margin-left:-11px; margin-top:10px; border:1px solid {color:border};}
- info a:hover{color: #F58020;}
- ol.notes { background:{color:posts};
- padding: 10px;
- margin: 25px 0px;
- width:500px;
- list-style-type: none;
- border: solid 1px {color:border};
- }
- ol.notes li.note {
- border-bottom: solid 1px {color:border};
- padding: 10px;
- width:480px;
- margin-left:8px;
- }
- ol.notes li.note img.avatar {
- vertical-align: -4px;
- margin-right: 10px;
- width: 16px;
- height: 16px;
- }
- </style>
- <body>
- <div id="sidebar">
- <div class="shine"></div>
- <div class="brow left"></div><div class="brow right"></div>
- <div class="eye left"><div class="pupil"></div></div><div class="eye right"><div class="pupil"></div></div>
- <div class="nose"></div>
- <div class="mouth"></div>
- <div class="description">{description}</div>
- </div>
- <div class="linkcon">
- <a href="/" title="refresh"><li class="link"></li></a>
- <a href="#?w=500" rel="03" class="poplight" title="message"><li class="link"></li></a>
- <a href="/archive" title="archive"><li class="link"></li></a>
- <a href="#?w=700" rel="02" class="poplight" title="more"><li class="link"></li></a>
- </div>
- <a href="http://espoirthemes.tumblr.com" title="credit"><div id="egg"></div></a>
- <div id="container">
- {block:Posts}<div class="posts">
- <div class="postmarker"><div style="position:absolute; margin-left:4px">{likebutton}</div><div style="position:absolute; margin-left:40px;">{reblogbutton}</div>
- <div style="right:10px; text-align:right;">
- {block:date}<a href="{permalink}">{timeago}</a>{/block:date}
- {block:NoteCount}| <a href="{permalink}">{NoteCount} notes</a> {/block:NoteCount}
- </div></div><br>
- <!-- {block:NoRebloggedFrom}
- {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
- {/block:NoRebloggedFrom} -->
- {block:ContentSource}
- <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
- width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
- {/block:SourceLogo}
- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
- {/block:ContentSource}
- {block:Text}
- {block:Title}
- <h3><a href="{Permalink}">{Title}</a></h3>
- {/block:Title}
- <div class="text">{Body}</div>
- {/block:Text}{block:Photo}
- <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
- {block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}
- {/block:Photo}{block:Panorama}
- {LinkOpenTag}
- <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
- {LinkCloseTag}{block:Caption}
- <div class="text">{Caption}</div>
- {/block:Caption}
- {/block:Panorama}{block:Photoset}
- {Photoset-500}{block:Caption}
- {Caption}
- {/block:Caption}
- {/block:Photoset}{block:Quote}
- "{Quote}"
- {block:Source}
- {Source}
- {/block:Source}
- {/block:Quote}{block:Link}
- <big> » <a href="{URL}" class="link" {Target}>{Name}</a> »</big>
- {block:Description}
- {Description}
- {/block:Description}
- {/block:Link}
- {block:Chat}{block:Title}<h1>{title}</h1>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}{/block:Chat}
- {block:Video}
- {Video-500}{block:Caption}
- <div class="caption">{Caption}</div>
- {/block:Caption}
- {/block:Video}{block:Audio}<div id="audiolo">
- <div class="dinky">
- {block:AlbumArt}<div id="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
- <div class="daplaya"><div class="player">{AudioPlayerwhite}</div></div></div>
- <div class="donkey">
- <div class="track"> {block:TrackName}
- {TrackName}
- {/block:TrackName} </div>
- <div class="artist">
- {block:Artist}{Artist}
- {/block:Artist} </div>
- <div class="album">
- {block:Album}
- {Album}
- {/block:Album}
- </div>
- <div class="playcount">
- {block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}</div>
- </div></div><br>
- {caption}
- {/block:Audio}
- {block:Answer}
- <br>
- <div class="askerportrait"><img style=" margin-left:10px" src="{AskerPortraitURL-40}" align="left" /></div><div class="speechbubble">{Asker} shouted: {Question}</div> {answer}
- {/block:Answer}
- <div class="info">{block:HasTags}{block:tags}<a href="{tagURL}">#{tag}</a> {/block:tags}{/block:HasTags}</div>
- </div><br><!--posts end-->{/block:Posts}
- <center>
- {block:Pagination}
- <div id="pagination">
- {block:previousPage} <span class ="jump_page"><a href="{PreviousPage}"> «</a></span>{/block:PreviousPage}
- {block:JumpPagination length="5"}
- {block:CurrentPage}
- <span class="current_page">{text:current page}</span>
- {/block:CurrentPage}
- {block:JumpPage}
- <a class="jump_page" href="{URL}">{PageNumber}</a>
- {/block:JumpPage}
- {/block:JumpPagination}
- {block:NextPage} <span class="jump_page">
- <a href="{NextPage}"> » </a>
- </span>{/block:NextPage}
- </div>
- {/block:Pagination}
- </center>
- {block:PostNotes}{PostNotes}{/block:PostNotes}
- </div><!--container end-->
- </body>
- <div id="02" class="popup_block">
- <table cellpadding="10">
- <tr>
- <td><img src="{portraitURl-96}" style="padding:8px; border:1px solid {color:border}"></td>
- <td> <div class="about">
- {text:about}
- </div></td>
- </tr>
- <tr><td>
- <div class="linklist" >
- <li><a href="{text:url1}">{text:link1}</a></li>
- <li><a href="{text:url2}">{text:link2}</a></li>
- <li><a href="{text:url3}">{text:link3}</a></li>
- <li><a href="{text:url4}">{text:link4}</a></li>
- </div>
- </td></tr>
- </table>
- </div></div>
- <div id="03" class="popup_block">
- <iframe id="ask_form" style="background-color: transparent; overflow: hidden;" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" frameborder="0" scrolling="no" width="100%" height="180"></iframe>
- </div></div>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement