Advertisement
Cliffedgeoftheworld

Devil Theme v.1

Apr 15th, 2013
1,127
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.72 KB | None | 0 0
  1. <!--
  2.  
  3. Devil Theme v.1
  4. Created by Cliffedgeoftheworld (cliffedgeoftheworld.tumblr.com)
  5. Please do not delete credit link or this box.
  6.  
  7. Theme is best viewed on Google Chrome, with a resolution of 1280x800.
  8.  
  9. *~*~HOW TO INSTALL~*~*
  10. 1) Copy this entire code.
  11. 2) Open up the customise.
  12. 3) Click on Edit HTML
  13. 4) Delete the code already in there.
  14. 5) Replace it with this code.
  15. 6) Hit Update Preview, and then Save.
  16. 7) Refresh the page, and press Save again.
  17. 8) If it wont let you paste in the box, or if it still does not work, use classic customize. (http://tumblr.com/customize-classic/)
  18.  
  19. Thank you for using my theme!!! <3
  20. -->
  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  22.  
  23.  
  24.  
  25.  
  26. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  27. <head><title>{Title}</title>
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  31.  
  32.  
  33. <meta name="text:Button Width" content="" />
  34. <meta name="text:Font Size" content="9px" />
  35. <meta name="text:Message Link Name" content="" />
  36. <meta name="if:Sidebar Background" content="1" />
  37. <meta name="if:Sidebar2 Background" content="1" />
  38. <meta name="color:Background" content="#ffffff"/>
  39. <meta name="color:Sidebar" content="#ffffff"/>
  40. <meta name="color:Sidebar2text" content="#ffffff"/>
  41. <meta name="color:description" content="#a8a8a8"/>
  42. <meta name="color:Text" content="#a8a8a8"/>
  43. <meta name="color:Link" content="#b8b8b8"/>
  44. <meta name="color:Tags" content="f0f0f0"/>
  45. <meta name="color:Hover" content="#f2f2f2"/>
  46. <meta name="color:Line" content="#f2f2f2"/>
  47. <meta name="color:Border" content="#e4e4e4"/>
  48. <meta name="color:Post" content="#ffffff"/>
  49. <meta name="color:Answer" content="#f8f8f8"/>
  50. <meta name="image:sidebar" content=""/>
  51. <meta name="image:background" content=""/>
  52. <meta name="text:Link 1" content="" />
  53. <meta name="text:Link 1 Text" content="" />
  54. <meta name="text:Link 2" content="" />
  55. <meta name="text:Link 2 Text" content="" />
  56. <meta name="text:Link 3" content="" />
  57. <meta name="text:Link 3 Text" content="" />
  58. <meta name="text:Link 4" content="" />
  59. <meta name="text:Link 4 Text" content="" />
  60. <meta name="text:Link Hover" content="Hover for Links" />
  61. <meta name="if:RainbowLinks" content="1" />
  62. <meta name="if:Show Link 1" content="1" />
  63. <meta name="if:Show Link 2" content="1" />
  64. <meta name="if:Show Link 3" content="1" />
  65. <meta name="if:Show Link 4" content="1" />
  66. <meta name="if:Caption" content="1" />
  67. <meta name="if:Tags" content="1" />
  68. <meta name="color:scrollbar" content="#ffffff"/>
  69. <meta name="color:scrollbarbackground" content="#ffffff"/>
  70. <meta name="text:Description2" content="" />
  71. <meta name="text:Link 5" content="" />
  72. <meta name="text:Link 5 Text" content="" />
  73. <meta name="text:Link 6" content="" />
  74. <meta name="text:Link 6 Text" content="" />
  75. <meta name="text:Link 7" content="" />
  76. <meta name="text:Link 7 Text" content="" />
  77. <meta name="text:Link 8" content="" />
  78. <meta name="text:Link 8 Text" content="" />
  79. <meta name="text:Link 9" content="" />
  80. <meta name="text:Link 9 Text" content="" />
  81. <meta name="text:Link 10" content="" />
  82. <meta name="text:Link 10 Text" content="" />
  83. <meta name="if:Show Link 5" content="1" />
  84. <meta name="if:Show Link 6" content="1" />
  85. <meta name="if:Show Link 7" content="1" />
  86. <meta name="if:Show Link 8" content="1" />
  87. <meta name="if:Show Link 9" content="1" />
  88. <meta name="if:Show Link 10" content="1" />
  89. <meta name="color:sidebarx" content="#ffffff"/>
  90. <meta name="color:sidebar2" content="#ffffff"/>
  91.  
  92. <style type="text/css">
  93.  
  94. /* --- SCROLLBAR ---*/
  95.  
  96. ::-webkit-scrollbar {width: 9px; height: 3px; background:{color:scrollbarbackground};}
  97.  
  98. ::-webkit-scrollbar-thumb {background-color:{color:scrollbar} ; }
  99. * {
  100. font-family: {font:body};
  101. {block:ifanimation}
  102. -webkit-transition: all 0.3s ease;
  103. -moz-transition: all 0.3s ease;
  104. transition: all 0.3s ease;
  105. -o-transition: all 0.3s ease;
  106. {/block:ifanimation}
  107. }
  108.  
  109.  
  110.  
  111. /* --- BODY ---*/
  112.  
  113. body {
  114. background:{color:background};
  115. background-image:url('{image:Background}');
  116. background-repeat: repeat;
  117. background-position: top center;
  118. background-attachment: fixed;
  119. margin:0px;
  120. color:{color:text};
  121. font-family:Calibri;
  122. font-size:{text:Font Size};
  123. line-height:100%;
  124. }
  125.  
  126. a {
  127. text-decoration:none;
  128. outline:none;
  129. -moz-outline-style:none;
  130. color:{color:link};
  131. }
  132.  
  133. img {
  134. border:none;
  135. }
  136.  
  137. blockquote {
  138. padding-left:5px;
  139. border-left:2px solid;
  140. }
  141.  
  142. blockquote blockquote {
  143. padding-left:5px;
  144. border-left:2px solid;
  145. }
  146.  
  147. h1 {
  148. font-size:{text:Font Size};
  149. text-transform:uppercase;
  150. }
  151.  
  152. a:hover {
  153. opacity:10;
  154. color:{color:hover};
  155. -webkit-transition: all 0.7s ease;
  156. -moz-transition: all 0.7s ease;
  157. -o-transition: all 0.7s ease
  158. }
  159.  
  160. /* --- POST ENTRIES ---*/
  161.  
  162.  
  163. #entries {
  164. padding:10px;
  165. width:400px;
  166. margin-left:450px;
  167. margin-top:0px;
  168. font-size:{text:font size};
  169. }
  170.  
  171. /* --- BODY: POSTS ---*/
  172.  
  173.  
  174. #post {
  175. width:400px;
  176. padding-bottom:20px;
  177. padding:10px;
  178. margin-top:10px;
  179. background-color:{color:Post};
  180. }
  181.  
  182. /* --- SIDEBAR IMAGE ---*/
  183. #sidebar2 {
  184. margin-top:-4px;
  185. margin-left: 977px;
  186. position:fixed;
  187. width:100px;
  188. height:100%;
  189. border: 4px double {color:border} ;
  190. opacity:.8;
  191. {block:IfSidebar2Background}
  192. background-color:{color:sidebar2};
  193. {/block:IfSidebar2Background}
  194.  
  195. }
  196.  
  197. #sidebar {
  198. width:120px;
  199. position:fixed;
  200. margin-left:260px;
  201. margin-top:150px;
  202. opacity:.8;
  203. {block:IfSidebarBackground}
  204. background-color:{color:sidebarx};
  205. {/block:IfSidebarBackground}
  206. }
  207.  
  208. #sidebarimage {
  209. width 100px;
  210. margin-top: 7px;
  211. }
  212.  
  213. #sidebarimage img {
  214. width:100px;
  215. border:double 4px;
  216. padding:6px;
  217. border-color: {color:border};
  218. background-color:{color:Sidebar};
  219. }
  220.  
  221.  
  222. /* --- SIDEBAR LINKS ---*/
  223. #linksys{
  224. width:{text:button width};
  225. font-size:16px;
  226. text-align:center;
  227.  
  228. margin-top:30px;
  229. border: 4px double {color:border};
  230. }
  231.  
  232. .links {
  233. width:105px;
  234. height:5px;
  235. padding-left:6px;
  236. padding-top:1px;
  237. font-size:8px;
  238. font-family:'calibri';
  239. text-align:left;
  240. margin-top:-2px;
  241. margin-left:-5px;
  242. text-align:left;
  243. text-transform:uppercase;
  244. word-spacing:2px;
  245. position:fixed;
  246. padding-bottom:7px;
  247. }
  248.  
  249. .links a {
  250. font-size: 8px;
  251. }
  252.  
  253. .links a:hover {
  254. color:{color:Hover}
  255. }
  256.  
  257.  
  258. /* --- DESCRIPTION ---*/
  259. #description2 {
  260.  
  261. font-family:cambria;
  262. line-height:90%;
  263. font-size:9px;
  264. font-style:italic;
  265. width:100px;
  266.  
  267.  
  268. padding-left:1px;
  269. padding-top:70px;
  270. margin-left:0px;
  271. text-align:left;
  272. color:{color:sidebar2text};
  273. }
  274.  
  275. #description2 a {color:{color:text}; -moz-transition-duration:0.4s;
  276. -webkit-transition-duration:0.4s; -o-transition-duration:0.4s;}
  277.  
  278.  
  279. #description {
  280.  
  281. font-family:cambria;
  282. line-height:90%;
  283. font-size:9px;
  284. font-style:italic;
  285. width:100px;
  286.  
  287. padding-left:1px;
  288. padding-top:7px;
  289. margin-left:0px;
  290. text-align:left;
  291. color:{color:description};
  292. }
  293.  
  294. #description a {color:{color:text}; -moz-transition-duration:0.4s;
  295. -webkit-transition-duration:0.4s; -o-transition-duration:0.4s;}
  296.  
  297. /* --- PAGINATION & LINKS---*/
  298. #meow a {
  299. display:block;
  300. width:auto;
  301. }
  302.  
  303. #meow .cat {
  304. margin-top:-10px;
  305. filter: alpha(opacity = 0);
  306. opacity:0;
  307. -webkit-transition: all 1s ease-out;
  308. -moz-transition: all 1s ease-out;transition: all 1s ease-out;
  309. line-height:15px;
  310. }
  311.  
  312. #meow:hover .cat {
  313. margin-top:5px;line-height:15px;
  314. -webkit-transition: all s ease-out;
  315. -moz-transition: all 1s ease-out;transition: all 1s ease-out;
  316. filter: alpha(opacity = 80);
  317. filter: alpha(opacity = 100);
  318. opacity:100;
  319. }
  320.  
  321. #pagination {
  322. width:100px;
  323. font-size:8px;
  324. text-align:center;
  325. margin-left:0px;
  326. margin-top:60px;
  327. position:fixed;
  328. font-family:consolas;
  329. letter-spacing:0px;
  330. }
  331.  
  332. /* --- POST INFO ---*/
  333.  
  334.  
  335. #info {
  336. text-align:left;
  337. margin-top:10px;
  338. text-transform:uppercase;
  339. font-size:8px;
  340. font-style:none;
  341. border-top:1px solid {color:Line}
  342. }
  343.  
  344. /* --- POST TAGS---*/
  345.  
  346.  
  347. #tags {
  348. font-family:cambria;
  349. letter-spacing:0px;
  350. text-transform:lowercase;
  351. font-size:10px;
  352. font-style:italic;
  353. width: 400px;
  354. height: auto;
  355. font-size: 7px;
  356. margin-left: 0px;
  357. position: relative;
  358. line-height:10px;
  359. padding: 10px;
  360. letter-spacing: 0px;
  361.  
  362.  
  363. z-index:9999;
  364. text-align: left;
  365.  
  366.  
  367.  
  368.  
  369.  
  370.  
  371.  
  372. }
  373.  
  374. #tags
  375. a {display:inline;background-color:{color:Tags};padding:-3px;text-align:left;
  376. -webkit-transition: all 0.6s ease-in-out;
  377. -moz-transition: all 0.6s ease-in-out;
  378. -o-transition: all 0.6s ease-in-out;
  379. -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
  380.  
  381.  
  382. /* --- QUESTIONS ---*/
  383.  
  384. #asker {
  385. padding:5px;
  386. font-family:cambria;
  387. letter-spacing:1px;
  388. text-align:left;
  389. font-style:italic;
  390. margin-left:10px;
  391. border-left:3px #eee solid;
  392. background-color:{color:background}
  393. }
  394.  
  395. {CustomCSS}
  396.  
  397. </style>
  398. {block:IfRainbowLinks}
  399. <script type='text/javascript'>
  400. //<![CDATA[
  401. var rate = 50;
  402. if (document.getElementById)
  403. window.onerror=new Function("return true")
  404.  
  405. var objActive; // The object which event occured in
  406. var act = 0; // Flag during the action
  407. var elmH = 0; // Hue
  408. var elmS = 128; // Saturation
  409. var elmV = 255; // Value
  410. var clrOrg; // A color before the change
  411. var TimerID; // Timer ID
  412. if (document.all) {
  413. document.onmouseover = doRainbowAnchor;
  414. document.onmouseout = stopRainbowAnchor;
  415. }
  416. else if (document.getElementById) {
  417. document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  418. document.onmouseover = Mozilla_doRainbowAnchor;
  419. document.onmouseout = Mozilla_stopRainbowAnchor;
  420. }
  421. function doRainbow(obj)
  422. {
  423. if (act == 0) {
  424. act = 1;
  425. if (obj)
  426. objActive = obj;
  427. else
  428. objActive = event.srcElement;
  429. clrOrg = objActive.style.color;
  430. TimerID = setInterval("ChangeColor()",100);
  431. }
  432. }
  433. function stopRainbow()
  434. {
  435. if (act) {
  436. objActive.style.color = clrOrg;
  437. clearInterval(TimerID);
  438. act = 0;
  439. }
  440. }
  441. function doRainbowAnchor()
  442. {
  443. if (act == 0) {
  444. var obj = event.srcElement;
  445. while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  446. obj = obj.parentElement;
  447. if (obj.tagName == 'A' || obj.tagName == 'BODY')
  448. break;
  449. }
  450. if (obj.tagName == 'A' && obj.href != '') {
  451. objActive = obj;
  452. act = 1;
  453. clrOrg = objActive.style.color;
  454. TimerID = setInterval("ChangeColor()",100);
  455. }
  456. }
  457. }
  458. function stopRainbowAnchor()
  459. {
  460. if (act) {
  461. if (objActive.tagName == 'A') {
  462. objActive.style.color = clrOrg;
  463. clearInterval(TimerID);
  464. act = 0;
  465. }
  466. }
  467. }
  468. function Mozilla_doRainbowAnchor(e)
  469. {
  470. if (act == 0) {
  471. obj = e.target;
  472. while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  473. obj = obj.parentNode;
  474. if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  475. break;
  476. }
  477. if (obj.nodeName == 'A' && obj.href != '') {
  478. objActive = obj;
  479. act = 1;
  480. clrOrg = obj.style.color;
  481. TimerID = setInterval("ChangeColor()",100);
  482. }
  483. }
  484. }
  485. function Mozilla_stopRainbowAnchor(e)
  486. {
  487. if (act) {
  488. if (objActive.nodeName == 'A') {
  489. objActive.style.color = clrOrg;
  490. clearInterval(TimerID);
  491. act = 0;
  492. }
  493. }
  494. }
  495. function ChangeColor()
  496. {
  497. objActive.style.color = makeColor();
  498. }
  499. function makeColor()
  500. {
  501. // Don't you think Color Gamut to look like Rainbow?
  502. // HSVtoRGB
  503. if (elmS == 0) {
  504. elmR = elmV; elmG = elmV; elmB = elmV;
  505. }
  506. else {
  507. t1 = elmV;
  508. t2 = (255 - elmS) * elmV / 255;
  509. t3 = elmH % 60;
  510. t3 = (t1 - t2) * t3 / 60;
  511. if (elmH < 60) {
  512. elmR = t1; elmB = t2; elmG = t2 + t3;
  513. }
  514. else if (elmH < 120) {
  515. elmG = t1; elmB = t2; elmR = t1 - t3;
  516. }
  517. else if (elmH < 180) {
  518. elmG = t1; elmR = t2; elmB = t2 + t3;
  519. }
  520. else if (elmH < 240) {
  521. elmB = t1; elmR = t2; elmG = t1 - t3;
  522. }
  523. else if (elmH < 300) {
  524. elmB = t1; elmG = t2; elmR = t2 + t3;
  525. }
  526. else if (elmH < 360) {
  527. elmR = t1; elmG = t2; elmB = t1 - t3;
  528. }
  529. else {
  530. elmR = 0; elmG = 0; elmB = 0;
  531. }
  532. }
  533. elmR = Math.floor(elmR).toString(16);
  534. elmG = Math.floor(elmG).toString(16);
  535. elmB = Math.floor(elmB).toString(16);
  536. if (elmR.length == 1) elmR = "0" + elmR;
  537. if (elmG.length == 1) elmG = "0" + elmG;
  538. if (elmB.length == 1) elmB = "0" + elmB
  539. elmH = elmH + rate;
  540. if (elmH >= 360)
  541. elmH = 0;
  542. return '#' + elmR + elmG + elmB;
  543. }
  544. //]]>
  545. </script>
  546. {/block:IfRainbowLinks}
  547. </head>
  548. <body>
  549.  
  550. <div id="sidebar">
  551. <a href="/">{Title}</a>
  552.  
  553.  
  554. <div id="sidebarimage"><a href="/"><img src="{image:sidebar}"></a></div>
  555.  
  556. <div id="description">
  557. {Description}
  558. </div>
  559.  
  560.  
  561.  
  562. <br>
  563. <div id="meow">
  564. <div class="links">
  565. {text:Link Hover}
  566. <div class="cat" >
  567.  
  568. <a href="/">home</a>
  569. <a href="/ask">{text:Message Link Name}</a>
  570. {block:IfShowLink1}<a href="{text:Link 1}">{text:Link 1 Text}</a>{/block:IfShowLink1}
  571. {block:IfShowLink2}<a href="{text:Link 2}">{text:Link 2 Text}</a>{/block:IfShowLink2}
  572. {block:IfShowLink3}<a href="{text:Link 3}">{text:Link 3 Text}</a>{/block:IfShowLink3}
  573. {block:IfShowLink4}<a href="{text:Link 4}">{text:Link 4 Text}</a>{/block:IfShowLink4}
  574. </div>
  575. </div>
  576. </div>
  577. </div>
  578. <div id="sidebar2">
  579. <div id="description2">
  580. <center>{text:Description2}</center>
  581. <br>
  582. <center>{block:IfShowLink5}<a href="{text:Link 5}"><div id="linksys">{text:Link 5 Text}</div></a>{/block:IfShowLink5}
  583. {block:IfShowLink6}<a href="{text:Link 6}"><div id="linksys">{text:Link 6 Text}</div></a>{/block:IfShowLink6}
  584. {block:IfShowLink7}<a href="{text:Link 7}"><div id="linksys">{text:Link 7 Text}</div></a>{/block:IfShowLink7}
  585. {block:IfShowLink8}<a href="{text:Link 8}"><div id="linksys">{text:Link 8 Text}</div></a>{/block:IfShowLink8}
  586. {block:IfShowLink9}<a href="{text:Link 9}"><div id="linksys">{text:Link 9 Text}</div></a>{/block:IfShowLink9}
  587. {block:IfShowLink10}<a href="{text:Link 10}"><div id="linksys">{text:Link 10 Text}</div></a>{/block:IfShowLink10}
  588. <a href="http://cliffedgeoftheworld.tumblr.com"><div id="linksys">Theme</div></a>
  589. {block:Pagination}<div id="pagination">
  590. {block:PreviousPage}<a href="{PreviousPage}">previous</a>&nbsp;&nbsp;{/block:PreviousPage}
  591. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  592. </div>{/block:Pagination}
  593. </center>
  594. </div>
  595. </div>
  596.  
  597.  
  598. <div id="entries">{block:Posts}<div id="post">
  599.  
  600. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  601.  
  602. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:IfCaption}{Caption}{/block:IfCaption}{/block:Photo}
  603.  
  604. {block:Photoset}{Photoset-400}{block:IfCaption}{Caption}{/block:IfCaption}{/block:Photoset}
  605.  
  606. {block:Quote}{Quote}{/block:Quote}
  607.  
  608. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  609.  
  610. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  611.  
  612. {block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="80px" height="80px" align="left" style="margin-right:10px" />{/block:AlbumArt}<span class="audio">{AudioPlayerWhite}</left></span>
  613. <br>{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  614. <br>{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  615. {/block:ExternalAudio}<br><b>Played:</b> {PlayCount} times
  616. {/block:Audio}
  617.  
  618. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  619.  
  620. {block:Answer}<div id="asker"><span style="font-family:cambria;font-size:{text:Font size};font-style:italic;">✎ {Asker}: </span>{Question}</div><left><font face="cambria">{Answer}</font>{/block:Answer}
  621.  
  622. <div id="info">
  623. <br>posted <a href="{Permalink}">{TimeAgo}</a> {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource}(<a href="{SourceURL}">© <a href="{SourceURL}">{SourceLink}</a>){/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom} with <a href="{Permalink}">{NoteCountWithLabel}</a>
  624.  
  625.  
  626. <div id="tags"> {block:IfTags} {block:HasTags}{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}{/block:IfTags}</div>
  627. </div></div>
  628.  
  629.  
  630. {/block:Posts}
  631.  
  632.  
  633.  
  634.  
  635.  
  636.  
  637.  
  638.  
  639.  
  640. {/block:Posts}
  641. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  642. {/block:Posts}</div></div></div>
  643. <br></br>
  644.  
  645.  
  646. <!--
  647. DO NOT DELETE ANYTHING BELOW
  648. -->
  649.  
  650. <div style="position:fixed;bottom:3px; right:3px; font-size:7px; letter-spacing:1px; font-family:cambria;"><a href="http://cliffedgeoftheworld.tumblr.com/">©</a></center></div>
  651.  
  652.  
  653. </body>
  654.  
  655. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement