API tools faq
paste
Advertisement
bakushima

buttonmasher theme

bakushima
Jun 15th, 2017
2,212
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5.  
  6. buttonmasher theme by sam @classroom.tumblr.com
  7. basecode by animecharacter
  8.  
  9. another header theme! enjoy
  10.  
  11. feel free to customize/edit as much as you want, you can change the credit pixel if it's not working right/it doesn't fit your aesthetic BUT otherwise don't touch it thx
  12.  
  13. *DO NOT REMOVE THE CREDIT OR USE AS A BASECODE!!! I WILL CONFRONT YOU*
  14.  
  15. lmk if there are any problems or u have a question
  16.  
  17. ----->
  18.  
  19.  
  20. {block:ifrainbowlink}
  21. <script type='text/javascript'>
  22. //<![CDATA[
  23. var rate = 50;
  24. if (document.getElementById)
  25. window.onerror=new Function("return true")
  26.  
  27. var objActive; // The object which event occured in
  28. var act = 0; // Flag during the action
  29. var elmH = 0; // Hue
  30. var elmS = {text:rainbow saturation}; // Saturation
  31. var elmV = 255; // Value
  32. var clrOrg; // A color before the change
  33. var TimerID; // Timer ID
  34. if (document.all) {
  35. document.onmouseover = doRainbowAnchor;
  36. document.onmouseout = stopRainbowAnchor;
  37. }
  38. else if (document.getElementById) {
  39. document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  40. document.onmouseover = Mozilla_doRainbowAnchor;
  41. document.onmouseout = Mozilla_stopRainbowAnchor;
  42. }
  43. function doRainbow(obj)
  44. {
  45. if (act == 0) {
  46. act = 1;
  47. if (obj)
  48. objActive = obj;
  49. else
  50. objActive = event.srcElement;
  51. clrOrg = objActive.style.color;
  52. TimerID = setInterval("ChangeColor()",100);
  53. }
  54. }
  55. function stopRainbow()
  56. {
  57. if (act) {
  58. objActive.style.color = clrOrg;
  59. clearInterval(TimerID);
  60. act = 0;
  61. }
  62. }
  63. function doRainbowAnchor()
  64. {
  65. if (act == 0) {
  66. var obj = event.srcElement;
  67. while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  68. obj = obj.parentElement;
  69. if (obj.tagName == 'A' || obj.tagName == 'BODY')
  70. break;
  71. }
  72. if (obj.tagName == 'A' && obj.href != '') {
  73. objActive = obj;
  74. act = 1;
  75. clrOrg = objActive.style.color;
  76. TimerID = setInterval("ChangeColor()",100);
  77. }
  78. }
  79. }
  80. function stopRainbowAnchor()
  81. {
  82. if (act) {
  83. if (objActive.tagName == 'A') {
  84. objActive.style.color = clrOrg;
  85. clearInterval(TimerID);
  86. act = 0;
  87. }
  88. }
  89. }
  90. function Mozilla_doRainbowAnchor(e)
  91. {
  92. if (act == 0) {
  93. obj = e.target;
  94. while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  95. obj = obj.parentNode;
  96. if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  97. break;
  98. }
  99. if (obj.nodeName == 'A' && obj.href != '') {
  100. objActive = obj;
  101. act = 1;
  102. clrOrg = obj.style.color;
  103. TimerID = setInterval("ChangeColor()",100);
  104. }
  105. }
  106. }
  107. function Mozilla_stopRainbowAnchor(e)
  108. {
  109. if (act) {
  110. if (objActive.nodeName == 'A') {
  111. objActive.style.color = clrOrg;
  112. clearInterval(TimerID);
  113. act = 0;
  114. }
  115. }
  116. }
  117. function ChangeColor()
  118. {
  119. objActive.style.color = makeColor();
  120. }
  121. function makeColor()
  122. {
  123. // Don't you think Color Gamut to look like Rainbow?
  124. // HSVtoRGB
  125. if (elmS == 0) {
  126. elmR = elmV; elmG = elmV; elmB = elmV;
  127. }
  128. else {
  129. t1 = elmV;
  130. t2 = (255 - elmS) * elmV / 255;
  131. t3 = elmH % 60;
  132. t3 = (t1 - t2) * t3 / 60;
  133. if (elmH < 60) {
  134. elmR = t1; elmB = t2; elmG = t2 + t3;
  135. }
  136. else if (elmH < 120) {
  137. elmG = t1; elmB = t2; elmR = t1 - t3;
  138. }
  139. else if (elmH < 180) {
  140. elmG = t1; elmR = t2; elmB = t2 + t3;
  141. }
  142. else if (elmH < 240) {
  143. elmB = t1; elmR = t2; elmG = t1 - t3;
  144. }
  145. else if (elmH < 300) {
  146. elmB = t1; elmG = t2; elmR = t2 + t3;
  147. }
  148. else if (elmH < 360) {
  149. elmR = t1; elmG = t2; elmB = t1 - t3;
  150. }
  151. else {
  152. elmR = 0; elmG = 0; elmB = 0;
  153. }
  154. }
  155. elmR = Math.floor(elmR).toString(16);
  156. elmG = Math.floor(elmG).toString(16);
  157. elmB = Math.floor(elmB).toString(16);
  158. if (elmR.length == 1) elmR = "0" + elmR;
  159. if (elmG.length == 1) elmG = "0" + elmG;
  160. if (elmB.length == 1) elmB = "0" + elmB
  161. elmH = elmH + rate;
  162. if (elmH >= 360)
  163. elmH = 0;
  164. return '#' + elmR + elmG + elmB;
  165. }
  166. //]]>
  167. </script>
  168. {/block:ifrainbowlink}
  169. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  170.  
  171. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  172.  
  173. <script>
  174.  
  175. (function($){
  176.  
  177. $(document).ready(function(){
  178.  
  179. $("a[title]").style_my_tooltips({
  180.  
  181. tip_follows_cursor:true,
  182.  
  183. tip_delay_time:90,
  184.  
  185. tip_fade_speed:600,
  186.  
  187. attribute:"title"
  188.  
  189. });
  190.  
  191. });
  192.  
  193. })(jQuery);
  194.  
  195. </script>
  196.  
  197. <meta charset="utf-8">
  198. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  199. {block:Description}
  200. <meta name="description" content="{MetaDescription}" />
  201. {/block:Description}
  202.  
  203. <title>{Title}</title>
  204.  
  205. <link rel="shortcut icon" href="{Favicon}">
  206. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  207. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  208.  
  209. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  210.  
  211.  
  212. <meta name="image:header image" content="">
  213. <meta name="image:background image" content="">
  214. <meta name="image:left side image" content="">
  215. <meta name="image:right side image" content="">
  216. <meta name="image:pixel 1" content="">
  217. <meta name="image:pixel 2" content="">
  218. <meta name="image:pixel 3" content="">
  219.  
  220. <meta name="color:background" content="#fff">
  221. <meta name="color:text" content="#000">
  222. <meta name="color:link" content="#ccc">
  223. <meta name="color:link hover" content="#eee">
  224.  
  225. <meta name="if:center align" content="">
  226. <meta name="if:left align" content="">
  227. <meta name="if:description" content="">
  228. <meta name="if:caption" content="">
  229. <meta name="if:cover background" content="">
  230. <meta name="if:rainbow link" content="">
  231. <meta name="if:glow" content="">
  232. <meta name="if:brackets" content="">
  233. <meta name="if:no brackets" content="">
  234.  
  235. <meta name="text:header size" content="200">
  236. <meta name="text:post size" content="400">
  237. <meta name="text:font" content="verdana">
  238. <meta name="text:font size" content="19">
  239. <meta name="text:rainbow saturation" content="128">
  240. <meta name="text:pixel 1" content="home">
  241. <meta name="text:pixel 1 url" content="/">
  242. <meta name="text:pixel 2" content="ask">
  243. <meta name="text:pixel 2 url" content="/ask">
  244. <meta name="text:pixel 3" content="about">
  245. <meta name="text:pixel 3 url" content="/about">
  246.  
  247.  
  248.  
  249. <style type="text/css">
  250.  
  251.  
  252.  
  253.  
  254.  
  255. ::-webkit-scrollbar {width: 0px; height: 3px; background: {color:Background};}
  256. ::-webkit-scrollbar-thumb {background-color:{color:Background} ;}
  257.  
  258. .tooltip{
  259. display: inline;
  260. position: relative;
  261. }
  262. #s-m-t-tooltip {
  263. max-width:300px; /*how big the tooltip can be at most*/
  264. border-radius: 0px; /*change your border radius*/
  265. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  266. margin:20px 7px -2px 20px; /*distance from word*/
  267. background:transparent; /*background color*/
  268. font-family:{text:Font}; /*tooltip font*/
  269. font-size:{text:Font Size}px; /*tooltip font size*/
  270. letter-spacing:1px; /*tooltip letter spacing*/
  271. text-transform:lowercase; /*makes the tooltip title uppercase*/
  272. color:{color:Text}; /*tooltip font color*/
  273. z-index:999999999999999999999999999999999999;
  274. }
  275.  
  276. /*
  277. general text styles, fonts and colours
  278. */
  279.  
  280. body {
  281. margin:0px;
  282. background:{color:background} url({image:background image});
  283. background-image: url('{image:background image}');
  284. background-attachment: fixed;
  285. background-position: top left;
  286. background-size: {block:ifcoverbackground}cover{/block:ifcoverbackground};
  287. font-family: {text:font};
  288. font-size:{text:font size}px;
  289. line-height:140%;
  290. color: {color:text};
  291. {block:ifglow}
  292. text-shadow:0 0 10px;
  293. {/block:ifglow}
  294. }
  295.  
  296. p{
  297. margin:0 0 10px 0;
  298. padding:0;
  299. }
  300.  
  301. pre {
  302. white-space: pre-wrap;
  303. white-space: -moz-pre-wrap;
  304. white-space: -pre-wrap;
  305. white-space: -o-pre-wrap;
  306. word-wrap: break-word;
  307. }
  308.  
  309. a{
  310. text-decoration:none;
  311. color:{color:link};
  312. }
  313.  
  314. a:hover{
  315. text-decoration:none;
  316. color:{color:link hover};
  317. }
  318.  
  319. li{
  320. margin-left:-15px;
  321. }
  322.  
  323. /*
  324. containers etc
  325. */
  326. #wrapper{
  327. width:{text:post size}px;
  328. margin:50px auto;
  329. }
  330.  
  331. #header{
  332. position:float;
  333. {block:ifcenteralign}
  334. text-align:center;
  335. {/block:ifcenteralign}
  336. {block:ifleftalign}
  337. margin-left:-450px;
  338. {/block:ifleftalign}
  339.  
  340. }
  341.  
  342. #header img{
  343. width:{text:header size}px;
  344. }
  345.  
  346. #content{
  347. width:{text:post size}px;
  348. overflow:hidden;
  349. {block:ifcenteralign}
  350. text-align:center;
  351. {/block:ifcenteralign}
  352. {block:ifleftalign}
  353. margin-left:-450px;
  354. {/block:ifleftalign}
  355.  
  356. }
  357.  
  358. #pixel{
  359. {block:ifcenteralign}
  360. text-align:center;
  361. {/block:ifcenteralign}
  362. {block:ifleftalign}
  363. margin-left:-450px;
  364. {/block:ifleftalign}
  365.  
  366. }
  367.  
  368. .post{
  369. width:{text:post size}px;
  370. margin:0 0 50px 0;
  371. overflow:hidden;
  372. margin-top:20px;
  373. {block:ifcenteralign}
  374. text-align:center;
  375. {/block:ifcenteralign}
  376. {block:ifleftalign}
  377. text-align:left;
  378. {/block:ifleftalign}
  379.  
  380. }
  381.  
  382. #header img, .post img{
  383. max-width:100%;
  384. }
  385.  
  386. #nav{
  387. margin:50px 0 0 0;
  388. }
  389.  
  390.  
  391. /*
  392. content in the body of the posts - quotes, asks, etc
  393. "media" contains photos, photosets, videos, audio posts
  394. */
  395. .media{
  396. margin:0 0 10px 0;
  397. }
  398.  
  399. .title{
  400. font-weight:normal;
  401. font-size:18px;
  402. margin:0 0 10px 0;
  403. }
  404.  
  405. .quote{
  406. font-weight:normal;
  407. font-size:16px;
  408. font-style:italic;
  409. margin:0 0 10px 0;
  410. }
  411.  
  412. .question{
  413. margin-bottom:10px;
  414. }
  415.  
  416. blockquote{
  417. margin:0 0 10px 10px;
  418. padding:0 0 0 10px;
  419. border-left:dashed 1px {color:text};
  420. }
  421.  
  422. /*
  423. post footers - date, tags, via and source
  424. */
  425. .post .footer{
  426. margin:0;
  427. {block:ifcenteralign}
  428. text-align:center;
  429. {/block:ifcenteralign}
  430. {block:ifleftalign}
  431. text-align:left;
  432. {/block:ifleftalign}
  433.  
  434. }
  435.  
  436. /*
  437. post notes
  438. */
  439. ol.notes{
  440. list-style-type:none;
  441. padding:0;
  442. margin:0;
  443. }
  444.  
  445. ol.notes li.note img{
  446. width:16px;
  447. height:16px;
  448. }
  449.  
  450. ol.notes li.note{
  451. margin:0px;
  452. }
  453.  
  454. {CustomCSS}
  455. </style>
  456. </head>
  457.  
  458. <body>
  459.  
  460. <div id="side image">
  461. <img style="position: fixed; left: 0; bottom: 0;" src="{image:left side image}">
  462. <img style="position: fixed; right: 0; bottom: 0;" src="{image:right side image}">
  463. </div>
  464.  
  465. <div id="wrapper">
  466.  
  467.  
  468. <div id="header">
  469. <a title="{title}" href="/"> <img src="{image:header image}"> </a>
  470. {block:ifDescription}
  471. <p>{Description}</p>
  472. {/block:ifDescription}
  473. </div>
  474. <p>
  475. <div id="pixel">
  476. <a title="{text:pixel 1}" href="{text:pixel 1 url}"><img src="{image:pixel 1}"></a>
  477. <a title="{text:pixel 2}" href="{text:pixel 2 url}"><img src="{image:pixel 2}"></a>
  478. <a a title="{text:pixel 3}" href="{text:pixel 3 url}"><img src="{image:pixel 3}"></a>
  479. <p>
  480. {block:HasPages}
  481. {block:Pages}
  482. <a href="{URL}">{Label}</a><br>
  483. {/block:Pages}
  484. {/block:HasPages}
  485. </div>
  486.  
  487.  
  488.  
  489. <div id="content">
  490. {block:Posts}
  491. <!-- {block:NoRebloggedFrom}
  492. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  493. {/block:NoRebloggedFrom} -->
  494. {block:ContentSource}<!-- {SourceURL}
  495. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  496. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  497. {/block:ContentSource}
  498.  
  499. <div class="post">
  500.  
  501. {block:Text}
  502. {block:Title}
  503. <div class="title">{Title}</div>
  504. {/block:Title}
  505. {Body}
  506. {/block:Text}
  507.  
  508. {block:Photo}
  509. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  510. {block:ifCaption}<div class="caption">{Caption}</div>{/block:ifCaption}
  511. {/block:Photo}
  512.  
  513. {block:Photoset}
  514. <div class="media">{Photoset-400}</div>
  515. {block:ifCaption}<div class="caption">{Caption}</div>{/block:ifCaption}
  516. {/block:Photoset}
  517.  
  518. {block:Quote}
  519. <div class="quote">"{Quote}"</div>
  520. {block:Source}
  521. <div class="quotesource">{Source}</div>
  522. {/block:Source}
  523. {/block:Quote}
  524.  
  525. {block:Link}
  526. <div class="title"><a href="{URL}">{Name}</a></div>
  527. {block:Description}
  528. <div class="description">{Description}</div>
  529. {/block:Description}
  530. {/block:Link}
  531.  
  532. {block:Chat}
  533. {block:Title}
  534. <div class="title">{Title}</div>
  535. {/block:Title}
  536.  
  537. {block:Lines}
  538. <div class="{Alt} user_{UserNumber}">
  539. {block:Label}
  540. <b>{Label}</b>{/block:Label}
  541. &nbsp;{Line}
  542. </div>
  543. {/block:Lines}
  544. {/block:Chat}
  545.  
  546. {block:Video}
  547. <div class="media">{Video-400}</div>
  548. {block:ifCaption}<div class="caption">{Caption}</div>{/block:ifCaption}
  549. {/block:Video}
  550.  
  551. {block:Audio}
  552. <div class="media">
  553. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
  554. {AudioPlayerWhite}
  555. {block:TrackName}{TrackName}<br>{/block:TrackName}
  556. {block:Artist}{Artist}<br>{/block:Artist}
  557. {block:Album}{Album}{/block:Album}
  558. </div>
  559. {block:ifCaption}{Caption}{/block:ifCaption}
  560. {/block:Audio}
  561.  
  562. {block:Answer}
  563. <div class="question">{Asker}: {Question}</div>
  564. <div class="caption">{Answer}</div>
  565. {/block:Answer}
  566.  
  567.  
  568. {block:Date}
  569. <div class="footer">
  570. {block:ifnobrackets}<a href="{Permalink}">{block:NoteCount} {NoteCountWithLabel}{/block:NoteCount}</a>{/block:ifnobrackets}
  571. {block:ifbrackets}<a href="{Permalink}">{block:NoteCount} [{NoteCountWithLabel}]{/block:NoteCount}</a>{/block:ifbrackets}
  572. {block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  573.  
  574. </div>
  575.  
  576. {block:PermalinkPage}
  577. {block:NoteCount}
  578. {block:PostNotes}{PostNotes}{/block:PostNotes}
  579. {/block:NoteCount}
  580. {/block:PermalinkPage}
  581. {/block:Date}
  582.  
  583. </div>
  584. {/block:Posts}
  585.  
  586. {block:Pagination}
  587. <div id="nav">
  588. {block:PreviousPage}<a href="{PreviousPage}">⇇ prev</a>{/block:PreviousPage}
  589.  
  590. {block:NextPage}<a href="{NextPage}">next ⇉</a>{/block:NextPage}
  591. </div>
  592. {/block:Pagination}
  593. </div>
  594. </div>
  595.  
  596. </div>
  597.  
  598. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  599. <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  600. <!-----
  601. *ONLY CHANGE THE PIXEL! DONT REMOVE I WILL NOTICE*
  602. ------>
  603. <div style="position:fixed;bottom:10px;opacity:1;right:20px;padding:px;font-size:8px;font-weight:normal;"><a title="theme"href="https
  604. ://classroom.tumblr.com/"><img src="https://78.media.tumblr.com/292ed3c97f3cca46180ab84fe1f7d3f2/tumblr_inline_p7tm2v1prp1v2qfml_500.png"></a></div>
  605.  
  606.  
  607.  
  608. </body>
  609. </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!