<html> <!--- page 5: redirect / cryothemes ---> <head> <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> <meta name="description" content="{MetaDescription}" /> <!--- COLORS + TEXT + LINKS ---> <meta name="color:Background Color" content="#ffffff"> <meta name="color:Accent Color" content="#000000"> <meta name="color:Text" content="#000000"> <meta name="text:What" content="moved"> <meta name="text:Where" content="new blog"> <meta name="text:Where URL" content="/"> <meta name="text:Show Blurb" content="more"> <meta name="text:Back Button" content="go back"> <!--- FONTS ---> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'> <!--- SCRIPTS ---> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript" src="http://static.tumblr.com/ko1mcho/PMbmlkh9e/jquery.style-my-tooltips.js"></script> <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <!--- style my tooltips ---> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:"true", tip_delay_time:100, tip_fade_speed:100, attribute:"title" }); }); })(jQuery); </script> <!--- "go back" button ---> <script> function goBack() { window.history.back() } </script> <!--- toggle info blurb ---> <script> $(document).ready(function(){ $(".show").click(function(){ $(".info").toggle(); }); }); </script> </head> <style type="text/css"> /* scrollbar */ ::-webkit-scrollbar{ width: 11px; height: 11px; } ::-webkit-scrollbar-track { background-color: {color:Background Color}; } ::-webkit-scrollbar-thumb{ border: 5px solid {color:Background Color}; background-color: {color:Color}; } ::-webkit-scrollbar-track-piece { height: 30px; width: 30px; } /* scrollbar */ body { background-color: {color:Background Color}; color: {color:Text}; font-family: Lato; margin: 0; } a { text-decoration: none; color:black; } /* redirect box */ #box { width:500px; height:250px; margin:200px auto 0 auto; background-color: transparent; border:1px solid {color:Accent Color}; font-size:15px; font-weight:300; text-transform: uppercase; } .info { display:none; position:absolute; width:400px; background-color:{color:Background Color}; height:150px; overflow:auto; margin:50px; font-size:11px; line-height:160%; padding-right:10px; text-align:justify; text-transform:none; z-index:9999; } .redirect { display:block; margin:105px 53px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } .redirect:after { content:""; position:absolute; display:block; height:1px; background-color:{color:Accent Color}; margin-top:30px; width:50px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s;} #box:hover .redirect:after { content:""; display:block; height:1px; background-color:{color:Accent Color}; margin-top:30px; width:380px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } .old { position:absolute; opacity:1; width:350px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } .new { position:absolute; opacity:0; width:350px; font-weight:900; font-size:14px; letter-spacing:1px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } #box:hover .new { opacity:1; padding-left:290px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } #box:hover .old { opacity:0; padding-left:260px; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } /* navigation */ #nav { width:500px; margin:10px auto; position:relative; text-align:right; } #nav a { width:30px; height:30px; margin:0 0 0 5px; cursor:default; display:inline-block; border:1px solid {color:Accent Color}; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } #nav a:hover { background-color: {color:Accent Color}; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; } /* style my tooltips */ #s-m-t-tooltip{ font-size:8px; text-align:center; letter-spacing: 1px; width:auto; padding:3px 7px; text-transform: uppercase; color:{color:Text}; margin-top:20px; margin-left:10px; background-color: transparent; position:absolute; z-index:1000; } </style> <body> <div id="box"> <div class="info"> <!--- your info/text starts here --> {Description} <!--- your info/text ends here --> </div> <div class="redirect"> <span class="old">{text:What}</span> <span class="new"><a href="{text:Where URL}">{text:Where}</a></span> </div> </div> <div id="nav"> <a class="show" href="#" title="{text:Show Blurb}"></a> <a onclick="goBack()" title="{text:Back Button}"></a> <a href="http://cryothemes.tumblr.com/" title="credit"></a> </div> </body> </html>