API tools faq
paste
Advertisement
mogimochi

Redirect Theme [03] Henko

mogimochi
Dec 14th, 2012
7,588
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!----------------------------------------------------------------------------
  6.  
  7. Redirect Page 02 変更 [ h e n k o ]
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14.  
  15. -------------------------------------------------------------- VER 211115 -->
  16.  
  17. <meta name="color:background" content="#ffffff">
  18. <meta name="color:tooltip background" content="#000000">
  19. <meta name="color:tooltip text" content="#ffffff">
  20. <meta name="color:tooltip border" content="#ffffff">
  21. <meta name="color:old url colour" content="#000000">
  22. <meta name="color:url container bg 1" content="#ffffff">
  23. <meta name="color:url container text 1" content="#000000">
  24. <meta name="color:url container shadow 1" content="#000000">
  25. <meta name="color:new url colour" content="#000000">
  26. <meta name="color:url container bg 2" content="#ffffff">
  27. <meta name="color:url container text 2" content="#000000">
  28. <meta name="color:url container shadow 2" content="#000000">
  29. <meta name="image:background" content="">
  30. <meta name="image:previous url icon" content="">
  31. <meta name="image:new url icon" content="">
  32. <meta name="text:old url" content="old url">
  33. <meta name="text:new url" content="new url">
  34.  
  35. <title>{title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  36. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  37. <link rel="shortcut icon" href="{Favicon}" />
  38.  
  39. <!-- script for tooltips -->
  40. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  41. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  42. <script>
  43. (function($){
  44. $(document).ready(function(){
  45. $("a[title]").style_my_tooltips({
  46. tip_follows_cursor:true,
  47. tip_delay_time:0,
  48. tip_fade_speed:0,
  49. attribute:"title"
  50. });
  51. });
  52. })(jQuery);
  53. </script>
  54. <!-- end script for tooltips -->
  55.  
  56. <style type="text/css">
  57.  
  58. @font-face { font-family: "ebit"; src: url('https://dl.dropboxusercontent.com/s/n9ry4w2f8tl60t3/8bitoperator.ttf'); }
  59.  
  60. iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:0.9; }
  61.  
  62. #s-m-t-tooltip {
  63. z-index: 1000;
  64. max-width: 300px;
  65. background-color: {color:tooltip background};
  66. color: {color:tooltip text};
  67. border: 1px solid {color:tooltip border};
  68. text-transform: uppercase;
  69. letter-spacing: 1px;
  70. font-family: ebit;
  71. font-size: 8px;
  72. padding: 6px 8px;
  73. margin: 20px 0 0 20px;
  74. }
  75.  
  76. body {
  77. background-color: {color:background};
  78. background-image: url({image:background});
  79. background-attachment: fixed;
  80. margin: 0;
  81. word-wrap: break-word;
  82. }
  83. a { text-decoration:none; }
  84.  
  85. #con {width: 100%;height: 100%;}
  86.  
  87. #smolcon {
  88. position: relative;
  89. top: 50%;
  90. bottom: 50%;
  91. margin-top: 270px;
  92. width: 240px;
  93. margin-left: 120px;
  94. transition: 1s;
  95. }
  96.  
  97. .previmgbg {
  98. box-shadow: 6px 6px 0 {color:url container shadow 1};
  99. background-color: {color:url container bg 1};
  100. width: 120px;
  101. height: 120px;
  102. display: block;
  103. border-radius: 2000px;
  104. padding: 14px;
  105. position: absolute;
  106. margin-left: -140px;
  107. margin-top: -41px;
  108. z-index: 9;
  109. transition: 1s;
  110. }
  111.  
  112. .previmg, .nextimg {
  113. width: 120px;
  114. height: 120px;
  115. display: block;
  116. border-radius: 2000px;
  117. padding: 14px;
  118. position: absolute;
  119. margin-left: -140px;
  120. margin-top: -41px;
  121. z-index: 11;
  122. transition: 1s;
  123. }
  124.  
  125. .previmg {position: absolute;}
  126. .nextimg {opacity:0;}
  127.  
  128. .urlcon {
  129. background-color: {color:url container bg 1};
  130. box-shadow: 6px 6px 0 {color:url container shadow 1};
  131. color: {color:url container text 1};
  132. width: 240px;
  133. padding: 24px 0;
  134. margin-top: 20px;
  135. font-family: ebit;
  136. font-size: 12px;
  137. text-transform: uppercase;
  138. position: relative;
  139. z-index: 10;
  140. border-radius: 0 10px 10px 0;
  141. transition: 1s;
  142. height: 18px;
  143. }
  144.  
  145. #smolcon:hover .previmgbg {
  146. box-shadow: 6px 6px 0 {color:url container shadow 2};
  147. background-color: {color:url container bg 2};
  148. }
  149.  
  150. #smolcon:hover .urlcon {
  151. background-color: {color:url container bg 2};
  152. box-shadow: 6px 6px 0 {color:url container shadow 2};
  153. color: {color:url container text 2};
  154. }
  155.  
  156. #smolcon:hover .previmg {
  157. margin-left: 232px;
  158. opacity: 0;
  159. }
  160. #smolcon:hover .nextimg {
  161. margin-left: 232px;
  162. opacity: 1;
  163. }
  164. #smolcon:hover .previmgbg {
  165. margin-left: 232px;
  166. z-index: 11;
  167. }
  168. #smolcon:hover .urlcon {
  169. border-radius: 10px 0 0 10px;
  170. }
  171. #smolcon:hover {margin-left: -140px;}
  172.  
  173. .nucov {
  174. width: 0;
  175. position: absolute;
  176. overflow: hidden;
  177. color: {color:url container text 2};
  178. transition: 1s;
  179. }
  180.  
  181. .oucov {
  182. width: 240px;
  183. position: absolute;
  184. overflow: hidden;
  185. color: {color:url container text 1};
  186. transition: 1s;
  187. }
  188.  
  189. .newurl, .oldurl {
  190. width: 240px;
  191. transition: 1s;
  192. }
  193.  
  194. #smolcon:hover .nucov {
  195. width: 240px;
  196. }
  197.  
  198. #smolcon:hover .oucov {
  199. width: 0;
  200. margin-left: 160px;
  201. }
  202.  
  203. .dog {
  204. position: fixed;
  205. bottom: 6px;
  206. right: 6px;
  207. font-family: ebit;
  208. font-size: 8px;
  209. text-transform: uppercase;
  210. padding: 4px 6px;
  211. background-color: rgba(0,0,0,0.4);
  212. color: #fff;
  213. transition: 0.6s;
  214. }
  215.  
  216. .dog:hover {background-color: rgba(0,0,0,1);}
  217.  
  218. {CustomCSS}
  219.  
  220. </style>
  221. </head>
  222. <body>
  223.  
  224. <center>
  225. <div id="con">
  226. <div id="smolcon">
  227. <div class="previmgbg"></div>
  228. <img class="previmg" src="{image:previous url icon}">
  229. <a title="click to be redirected" href="http://{text:new url}.tumblr.com"><img class="nextimg" src="{image:new url icon}"></a>
  230. <a title="click to be redirected" href="http://{text:new url}.tumblr.com"><div class="urlcon">
  231. <div class="nucov"><div class="newurl">... to <span style="color:{color:new url colour}">{text:new url}</span></div></div>
  232. <div class="oucov"><div class="oldurl"><span style="color:{color:old url colour}">{text:old url}</span> has moved ...</div></div>
  233. </div><!--urlcon--></a>
  234. </div><!--smolcon-->
  235. </div><!--con-->
  236. </center>
  237.  
  238. <a href="http://yukoki.tumblr.com"><div class="dog">* yukoki</div></a>
  239.  
  240. </body>
  241. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!