API tools faq
paste
Advertisement
seansoo

Oyasumi Punpun Theme

seansoo
Aug 28th, 2015
402
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4.  
  5. theme by yours truly, sean. (seansoo.tumblr.com)
  6.  
  7. if you have any HTML questions, feel free to inbox me off anonymous!
  8.  
  9. you can jack up the theme as much as you want but please don't remove the credit in the bottom right corner or else i'll probably get sad and stop making themes... other than that, enjoy~
  10.  
  11. -->
  12.  
  13. <script>
  14.  
  15. var html5_audiotypes={
  16.    
  17.         "mp3": "audio/mpeg",
  18.         "mp4": "audio/mp4",
  19.         "ogg": "audio/ogg",
  20.         "wav": "audio/wav"
  21. }
  22.  
  23. function createsoundbite(sound){
  24.         var html5audio=document.createElement('audio')
  25.         if (html5audio.canPlayType){ //check support for HTML5 audio
  26.                 for (var i=0; i<arguments.length; i++){
  27.                       var sourceel=document.createElement('source')
  28.                       sourceel.setAttribute('src', arguments[i])
  29.                       if (arguments[i].match(/\.(\w+)$/i))
  30.                               sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
  31.                       html5audio.appendChild(sourceel)
  32.               }
  33.               html5audio.load()
  34.               html5audio.playclip=function(){
  35.                       html5audio.pause()
  36.                       html5audio.currentTime=0
  37.                       html5audio.play()
  38.               }
  39.               return html5audio
  40.       }
  41.       else{
  42.               return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}}
  43.       }
  44. }
  45.  
  46. var clicksound=createsoundbite ("http://noproblo.dayjo.org/ZeldaSounds/MC/MC_Emote_Exclaim.wav")
  47. var mouseoversound=createsoundbite("http://noproblo.dayjo.org/ZeldaSounds/MC/MC_Heart.wav")
  48.  
  49. </script>
  50.  
  51. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  52.  
  53. <head>
  54.  
  55. <title>{Title}</title>
  56.  
  57. <link rel="shortcut icon" href="{Favicon}">
  58.  
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60.  
  61. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  62. <meta name="if:Music" content=""/>
  63. <meta name="text:Billy Code" content=""/>
  64. <meta name="text:Link 1 Url" content=""/>
  65. <meta name="text:Link 1 Title" content=""/>
  66. <meta name="text:Link 2 URL" content=""/>
  67. <meta name="text:Link 2 Title" content=""/>
  68. <meta name="text:Link 3 URL" content=""/>
  69. <meta name="text:Link 3 Title" content=""/>
  70. <meta name="color:Title" content="#ffffff"/>
  71. <meta name="color:Background" content="#ffffff"/>
  72. <meta name="color:Bubble" content="#000000"/>
  73. <meta name="color:Text" content="#838282"/>
  74. <meta name="color:Link" content="#b8b8b8"/>
  75. <meta name="image:Sidebar" content="http://i.imgur.com/BcGpytc.gifg"/>
  76.  
  77. <style type="text/css">
  78.  
  79. #record {
  80. border: 1px solid #bfbfbf;
  81. background-color: #fff;
  82. position: fixed;
  83. width: 16px;
  84. height: 16px;
  85. margin-top: 13.5px;
  86. margin-left: 118.5px;
  87. overflow: hidden;
  88. z-index: 9999;
  89. }
  90.  
  91. #yaoi {
  92. margin-left: -21.5px;
  93. margin-top: 0px;
  94. }
  95.  
  96. #perfume {
  97. margin-left: 80px;
  98. margin-top: 7.5px;
  99. }
  100.  
  101. #magic {
  102. margin-left: 5px;
  103. display: inline-block;
  104. }
  105.  
  106. #dragon {
  107. text-align: right;
  108. margin-top: -7.5px;
  109. white-space: nowrap;
  110. }
  111.  
  112. @font-face { font-family: "bit"; src: url('https://dl.dropboxusercontent.com/s/sq28ejp56rarabs/BitxMap%20Font%20tfb.ttf'); }
  113.  
  114. #boob {
  115. left: 270px;
  116. width: auto;
  117. height: auto;
  118. position: fixed;
  119. margin-top: -45px;
  120. color: #000000;
  121. z-index: 9999999;
  122. }
  123.  
  124. #kirby {
  125. width: 100px;
  126. height: auto;
  127. padding: 2px 15px 2px 5px;
  128. padding: 5px;
  129. font-size: 10px;
  130. letter-spacing: 0px;
  131. font-family: "bit";
  132. letter-spacing: 1px;
  133. text-align: center;
  134. line-height: 16px;
  135. border-radius: 7px;
  136. background-color: {color:bubble};
  137. z-index: 9;
  138. }
  139.  
  140. .zelda {
  141. margin-bottom: -1px;
  142. margin-left: 47.5px;
  143. color: #fff;
  144. position: fixed;
  145. width: 0px;
  146. height: 15px;
  147. border-style: solid;
  148. border-width: 15px 15px 0px 0px;
  149. border-color: {color:bubble} transparent transparent transparent;
  150. z-index: 9;
  151. }
  152.  
  153. ::-webkit-scrollbar {
  154. display: none;
  155. }
  156.  
  157. body {
  158. background: {color:background};
  159. margin: 0px;
  160. color: {color:text};
  161. font-family: "bit";
  162. font-size: 10px;
  163. line-height: 80%;
  164. }
  165.  
  166. a {
  167. text-decoration: none;
  168. outline: none;
  169. -moz-outline-style: none;
  170. color: {color:link};
  171. }
  172.  
  173. img {
  174. border:none;
  175. }
  176.  
  177. blockquote {
  178. padding-left: 5px;
  179. margin-left: 5px;
  180. border-left: 1px solid gray;
  181. }
  182.    
  183. blockquote blockquote {
  184. padding-left: 5px;
  185. border-left: 1px solid gray;
  186. }
  187.  
  188. h1 {
  189. font-size: 15px;
  190. }
  191.  
  192. #entries {
  193. padding: 10px;
  194. margin-top: 40px;
  195. margin-left: 550px;
  196. width: 520px;
  197. }
  198.  
  199. #post {
  200. width: 500px;
  201. padding-bottom: 20px;
  202. }
  203.  
  204. #sidebar {
  205. width: 250px;
  206. position: fixed;
  207. margin-left: 200px;
  208. margin-top: 200px;
  209. }
  210.  
  211. #title {
  212. font-size: 10px;
  213. text-align: center;
  214. margin-bottom: 5px;
  215. }
  216.  
  217. #aesthetic {
  218. margin-left: 75px;
  219. width: 250px;
  220. }
  221.  
  222. #sidebarimage img {
  223. width: 100px;
  224. height: 100px;
  225. }
  226.  
  227. #description {
  228. padding: 5px;
  229. margin-left: 45px;
  230. width: 150px;
  231. text-align: center;
  232. }
  233.  
  234. #paradise {
  235. text-align: left;
  236. margin-top: 10px;
  237. }
  238.  
  239. #asker {
  240. float: left;
  241. margin-right: 5px;
  242. }
  243.  
  244. {CustomCSS}</style></head><body>
  245.  
  246. <div id="sidebar">
  247.  
  248. <div id="boob">
  249. <div id="kirby"><span style="color: {color:title}">{Title}</a>
  250. </div><div class="zelda"></div></div>
  251.  
  252. <div id="aesthetic"><a href="/" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()"><img src="{image:sidebar}" style="max-width:100px; border-radius: 10px;"></a></div>
  253.  
  254. <div id="description">{Description}</div>
  255.  
  256. <div id="perfume"><div id="magic" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()"><a href="/" title="home"><img src="http://static.tumblr.com/ok3wtcv/ruTmzb3ds/005_08.gif"></a></div>
  257.    
  258. <div id="magic" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()"><a href="/ask" title="message"><img src="http://static.tumblr.com/ok3wtcv/ybImzb3gw/005_02.gif"></a></div>
  259.  
  260. <div id="magic" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()"><a href="{text:link 2 url}" title="{text:link 1 title}"><img src="http://static.tumblr.com/ok3wtcv/f9xmzb3ei/005_18.gif"></a></div>
  261.  
  262. <div id="magic" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()"><a href="{text:link 2 url}" title="{text:link 2 title}"><img src="http://static.tumblr.com/ok3wtcv/S5Pmzb3f2/005_43.gif"></a></div>
  263.  
  264. <div id="magic" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()"><a href="{text:link 3 url}" title="{text:link 3 title}"><img src="http://static.tumblr.com/ok3wtcv/kC8mzb3fn/005_06.gif"></a></div></div>
  265.  
  266. {block:ifMusic}<div id="record"><div id="yaoi">{text:Billy Code}</div></div>{/block:ifMusic}
  267.  
  268. </div>
  269.  
  270. </div>
  271.  
  272. <div id="entries">{block:Posts}<div id="post">
  273.  
  274. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  275.  
  276. {block:Photo}{LinkOpenTag}<a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" style="max-width:100%;" width="500px"></a>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  277.  
  278. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  279.  
  280. {block:Quote}{Quote}{block:Source} —{Source}{/block:Source}{/block:Quote}
  281.  
  282. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  283.  
  284. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  285.  
  286. {block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  287.  
  288. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  289. {block:Answer}
  290. <div id="asker">
  291. <img src="{AskerPortraitURL-24}"></div>
  292. {Asker}:<br><i>{Question}</i><br>{Answer}{/block:Answer}
  293.  
  294. <div id="paradise">
  295. <img src="http://31.media.tumblr.com/tumblr_lkl5s8Ay6F1qfamg6.gif">
  296. {block:Date}{TimeAgo}{/block:Date}
  297.  
  298. <div id="dragon"><a href="{Permalink}">{NoteCountWithLabel}</a></div>
  299.  
  300. <br> {block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  301.  
  302. </div>
  303. {block:PostNotes}{PostNotes}{/block:PostNotes}
  304. {/block:Posts}</div>
  305.  
  306. <div style="bottom: 5px; right: 5px; position: fixed; z-index: 99999;"><a href="http://seansoo.tumblr.com/tagged/theme" title="theme"><img src="http://i205.photobucket.com/albums/bb186/mhilkas/Currently/sentindo.gif"></a></div>
  307.  
  308. </body></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!