Advertisement
Mikaela

Fandom Hearts

Nov 13th, 2013
148
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.68 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-- THEME #7 'FANDOM HEARTS' BY HRRYS
  4. I WORKED HARD ON THIS SO IF YOU REMOVE THE CREDIT OR EDIT AND CLAIM IT AS YOUR OWN, I'LL GET HARRY TO STRANGLE YOU.
  5. BUT SERIOUSLY I'LL REPORT YOU
  6. OKAY ENJOY NOW
  7. -->
  8.  
  9. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  10.  
  11.  
  12. <head>
  13.  
  14.  
  15.  
  16. <title>{Title}</title>
  17.  
  18. {block:Description}<meta name="description" content="{MetaDescription}"/>
  19. {/block:Description}
  20. <link rel="shortcut icon" href="{Favicon}" />
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  22.  
  23. <meta name="color:bg" content="#ffffff">
  24. <meta name="color:link" content="#bbb8b8">
  25. <meta name="color:text" content="#838282">
  26. <meta name="color:tags" content="#ededed">
  27. <meta name="color:hover" content="#454545">
  28. <meta name="color:border" content="#fafafa">
  29. <meta name="color:scrollbar" content="#d6d5d5">
  30. <meta name="color:PopUpBG" content="#fff"/>
  31. <meta name="color:PopUpBorder" content="#ddd"/>
  32. <meta name="color:PopUpFade" content="#000"/>
  33.  
  34.  
  35. <meta name="image:sidebar" content=""/>
  36.  
  37. <meta name="text:link 1" content="">
  38. <meta name="text:link 1 url" content="/">
  39. <meta name="text:link 3" content="">
  40. <meta name="text:link 3 url" content="/">
  41. <meta name="text:link 4" content="">
  42. <meta name="text:link 4 url" content="/">
  43. <meta name="text:link 5" content="">
  44. <meta name="text:link 5 url" content="/">
  45.  
  46. <meta name="if:Cursor" content="1">
  47.  
  48. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/blpgwiz/ZUlm8f7u4/online.css"/>
  49. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  50.  
  51.  
  52. <script type="text/javascript"
  53. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  54. <script>
  55. $(document).ready(function() {
  56. //
  57. $('a.poplight[href^=#]').click(function() {
  58. var popID = $(this).attr('rel'); //Get Popup Name
  59. var popURL = $(this).attr('href'); //Get Popup href to define size
  60. var query= popURL.split('?');
  61. var dim= query[1].split('&');
  62. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  63. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
  64. var popMargTop = ($('#' + popID).height() + 80) / 2;
  65. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  66. //Apply Margin to Popup
  67. $('#' + popID).css({
  68. 'margin-top' : -popMargTop,
  69. 'margin-left' : -popMargLeft
  70. });
  71. $('body').append('<div id="fade"></div>');
  72. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  73. return false;
  74. });
  75. $('a.close, #fade').live('click', function() {
  76. $('#fade , .popup_block').fadeOut(function() {
  77. $('#fade, a.close').remove(); //fade them both out
  78. });
  79. return false;
  80. });
  81. });
  82. </script>
  83.  
  84. <style type="text/css">
  85.  
  86. /*Pop ups*/
  87.  
  88.  
  89. #fade { /*--Transparent background layer--*/
  90. display: none; /*--hidden by default--*/
  91. background: #000;
  92. position: fixed; left: 0; top: 0;
  93. width: 100%; height: 100%;
  94. opacity: .80;
  95. z-index: 9999;
  96. }
  97. .popup_block{
  98. display: none; /*--hidden by default--*/
  99. background: #FFFFFF;
  100. padding: -10px;
  101. border: 5px solid #F8F8F8;
  102. float: left;
  103. margin-top:10px;
  104. font-size: 10px;
  105. position: fixed;
  106. top: 55%; left: 50%;
  107. z-index: 99999;
  108. /*--CSS3 Box Shadows--*/
  109. -webkit-box-shadow: 0px 0px 20px #000;
  110. -moz-box-shadow: 0px 0px 20px #000;
  111. box-shadow: 0px 0px 20px #000;
  112. /*--CSS3 Square Corners--*/
  113. -webkit-border-radius: 0px;
  114. -moz-border-radius: 0px;
  115. border-radius: 0px;
  116. }
  117. img.btn_close {
  118. float: right;
  119. margin: -20 -20px 0 0;
  120. }
  121. /*--Making IE6 Understand Fixed Positioning--*/
  122. *html #fade {
  123. position: absolute;
  124. }
  125. *html .popup_block {
  126. position: absolute;
  127. }
  128.  
  129. /*Sidebar image*/
  130. .darla{
  131. position: fixed;
  132. top: 180px;
  133. left: 90px;
  134. -moz-transition-duration:1s;
  135. -webkit-transition-duration:1s;
  136. -o-transition-duration:1s;
  137. }
  138.  
  139. .darla img{
  140. -webkit-mask-image: url('http://static.tumblr.com/blpgwiz/5kZmi2d40/heart-2.png');
  141. width: 300px;
  142. height: 300px;
  143. }
  144.  
  145. #sidebar:hover .darla{
  146. opacity:0;
  147. z-index:-1;
  148. -moz-transition-duration:0.5s;
  149. -webkit-transition-duration:0.5s;
  150. -o-transition-duration:0.5s;
  151. }
  152. /*--scrollbar--*/
  153.  
  154. ::-webkit-scrollbar-thumb:vertical {border:3px solid #fff;height:12px; background-color:{color:scrollbar};}
  155. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
  156. ::-webkit-scrollbar {background-color:{color:scrollbar};height:7px;width:12px;border:5px solid #fff;}
  157. ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{background-color:{color:scrollbar};display:block;height:8px;border-right:2px solid #fff;border-left:2px solid #fff;
  158. }
  159. /*--body--*/
  160.  
  161.  
  162. body {
  163. font-style:none;
  164. background-color:{color:bg};
  165. font-family:calibri;
  166. color:{color:text};
  167. font-size:9px;
  168. }
  169.  
  170.  
  171. a {
  172. color:{color:link};
  173. text-decoration:none;
  174. -webkit-transition: all 0.5s ease-out;
  175. -moz-transition: all 0.5s ease-out;
  176. transition: all 0.5s ease-out;
  177. }
  178.  
  179. a:hover {
  180. color:{color:hover};
  181. text-decoration:none;
  182. -webkit-transition: all 0.8s ease-out;
  183. -moz-transition: all 0.8s ease-out;
  184. transition: all 0.8s ease-out;
  185. }
  186.  
  187. img {
  188. border:none;
  189. }
  190.  
  191. blockquote {
  192. padding-left:5px;
  193. border-left:2px solid {color:border};
  194. }
  195.  
  196. h1 {
  197. font-size:10px;
  198. }
  199.  
  200. /*--Cursor code--*/
  201.  
  202. {block:ifCursor}
  203.  
  204. *, body, a, a:hover {cursor: url("http://www.totallylayouts.com/cursors/random/tiny_cursor.png"), auto }
  205.  
  206. {/block:ifCursor}
  207.  
  208. /*Links*/
  209. #heartone {
  210. width:auto;
  211. height:auto;
  212. }
  213.  
  214. #heartone img {
  215. position:fixed;
  216. width:150px;
  217. height:150px;
  218. opacity:0;
  219. margin-top:-60px;
  220. margin-left:-45px;
  221. z-index:-4;
  222. -webkit-transition: all 1s ease;
  223. -moz-transition: all 1s ease;
  224. -o-transition: all 1s ease;
  225. }
  226.  
  227. #sidebar:hover #heartone img{
  228. opacity:1;
  229. margin-top:-200px;
  230. margin-left:-200px;
  231. }
  232.  
  233. #hearttwo {
  234. width:auto;
  235. height:auto;
  236. }
  237.  
  238. #hearttwo img {
  239. position:fixed;
  240. width:150px;
  241. opacity:0;
  242. height:150px;
  243. margin-top:-60px;
  244. margin-left:-45px;
  245. z-index:-4;
  246. -webkit-transition: all 1s ease;
  247. -moz-transition: all 1s ease;
  248. -o-transition: all 1s ease;
  249. }
  250.  
  251. #sidebar:hover #hearttwo img{
  252. opacity:1;
  253. margin-top:-200px;
  254. margin-left:120px;
  255. }
  256.  
  257. #heartthree {
  258. width:auto;
  259. height:auto;
  260. }
  261.  
  262. #heartthree img {
  263. position:fixed;
  264. width:150px;
  265. height:150px;
  266. opacity:0;
  267. margin-top:-60px;
  268. margin-left:-45px;
  269. z-index:-4;
  270. -webkit-transition: all 1s ease;
  271. -moz-transition: all 1s ease;
  272. -o-transition: all 1s ease;
  273. }
  274.  
  275. #sidebar:hover #heartthree img{
  276. opacity:1;
  277. margin-top:90px;
  278. margin-left:-200px;
  279. }
  280.  
  281. #heartfour {
  282. width:auto;
  283. height:auto;
  284. }
  285.  
  286. #heartfour img {
  287. position:fixed;
  288. width:150px;
  289. height:150px;
  290. opacity:0;
  291. margin-top:-60px;
  292. margin-left:-45px;
  293. z-index:-4;
  294. -webkit-transition: all 1s ease;
  295. -moz-transition: all 1s ease;
  296. -o-transition: all 1s ease;
  297. }
  298.  
  299. #sidebar:hover #heartfour img{
  300. opacity:1;
  301. margin-top:90px;
  302. margin-left:120px;
  303. }
  304.  
  305. #heartfive {
  306. width:auto;
  307. height:auto;
  308. }
  309.  
  310. #heartfive img {
  311. position:fixed;
  312. width:150px;
  313. opacity:0;
  314. height:110px;
  315. margin-top:-20px;
  316. margin-left:-45px;
  317. z-index:9;
  318. -webkit-transition: all 1s ease;
  319. -moz-transition: all 1s ease;
  320. -o-transition: all 1s ease;
  321. }
  322. #sidebar:hover #heartfive img{
  323. opacity:1;
  324. }
  325.  
  326. #title {
  327. font-size:42px;
  328. font-weight:bold;
  329. padding-top:68px;
  330. font-family:Edwardian Script ITC;
  331. letter-spacing:1px;
  332. margin-top:-170px;
  333. margin-left:-120px;
  334. z-index:999999;
  335. width:300px;
  336. color:{color:text};
  337. text-align:center;
  338. -webkit-transition: all 1s ease;
  339. -moz-transition: all 1s ease;
  340. -o-transition: all 1s ease;
  341. }
  342. /*--sidebar--*/
  343.  
  344. #sidebar {
  345. position:fixed;
  346. width:140px;
  347. margin-left:200px;
  348. margin-top:200px;
  349. }
  350.  
  351. /*--description--*/
  352.  
  353. #description {
  354. margin-top:145px;
  355. margin-left:-35px;
  356. width:140px;
  357. opacity:0;
  358. font-family:'calibri';
  359. font-size:9px;
  360. text-align:center;
  361. -webkit-transition: all 1s ease;
  362. -moz-transition: all 1s ease;
  363. -o-transition: all 1s ease;
  364. }
  365.  
  366. #sidebar:hover #description{
  367. opacity:1;
  368. }
  369.  
  370. /*--pagination--*/
  371.  
  372. #pagination {
  373. margin-top:0px;
  374. margin-left:-75px;
  375. font-style:italic;
  376. text-align:center;
  377. font-size:9px;
  378. opacity:0;
  379. font-family:calibri;
  380. color:{color:link};
  381. -webkit-transition: all 1s ease;
  382. -moz-transition: all 1s ease;
  383. -o-transition: all 1s ease;
  384. }
  385.  
  386. #pagination a{
  387. color:{color:link};
  388. }
  389.  
  390. #sidebar:hover #pagination{
  391. opacity:1;
  392. }
  393.  
  394. /*--posts--*/
  395.  
  396. #posts {
  397. width:500px;
  398. margin-bottom:10px;
  399. padding:1px;
  400. font-size:11px;
  401. color:{color:text};
  402. line-height:90%;
  403. text-align:justify;
  404. }
  405.  
  406. #postscontainer {
  407. margin-bottom:20px;
  408. padding:1px;
  409. margin-left:470px;
  410. margin-top:55px;
  411. }
  412.  
  413. /*Info*/
  414.  
  415. #info {
  416. margin-bottom:10px;
  417. font-size:8px;
  418. margin-top:10px;
  419. text-align:left;
  420. padding:5px;
  421. color:{color:link};
  422. border-top:1px solid {color:border};
  423. }
  424.  
  425.  
  426. #reblog {
  427. text-transform:uppercase;
  428. font-family:trebuchet ms;
  429. margin-left:-5px;
  430. margin-top:-5px;
  431. text-align:center;
  432. color:white;
  433. background-color:#cfcece;
  434. width:35px;
  435. padding:3px;
  436. }
  437.  
  438. #reblog a {
  439. color:white;
  440. }
  441.  
  442. #notes {
  443. margin-left:40px;
  444. margin-top:-12px;
  445. }
  446.  
  447. #rightinfo {
  448. text-transform:uppercase;
  449. font-family:trebuchet ms;
  450. margin-left:370px;
  451. text-align:justify;
  452. float:right;
  453. background-color:#cfcece;
  454. padding:3px;
  455. margin-top:-12px;
  456. color:white;
  457. }
  458.  
  459. #rightinfo a {
  460. color:white;
  461. }
  462.  
  463. /*--tags--*/
  464.  
  465. #tags {
  466. width:490px;
  467. margin-left:-4px;
  468. margin-top:7px;
  469. font-size:10px;
  470. color:{color:tags}:
  471. }
  472.  
  473. #tags a {
  474. color:{color:tags};
  475. }
  476.  
  477. #tags a:hover {
  478. color:{color:hover}
  479. }
  480.  
  481. /*--asks--*/
  482.  
  483. #askbg {
  484. padding:12px;
  485. line-height:180%;
  486. background-color:{color:#fff};
  487. border-bottom: 3px solid;
  488. border-color:{color:border}
  489. }
  490.  
  491. #ask {
  492. margin-top:-5px;
  493. line-height:180%;
  494. font-family:calibri;
  495. text-align:left;
  496. }
  497.  
  498. /*--credit--*/
  499.  
  500. #credit {
  501. right:0px;
  502. bottom:0px;
  503. color:{color:text};
  504. position:fixed;
  505. -webkit-transition: all 0.5s ease-out;
  506. -moz-transition: all 0.5s ease-out;
  507. transition: all 0.5s ease-out;
  508. }
  509.  
  510.  
  511.  
  512.  
  513. {CustomCSS}
  514. </style>
  515. </head>
  516.  
  517.  
  518. <body>
  519.  
  520. <div id="sidebar">
  521. <div class="darla"><img src="{image:sidebar}"></div>
  522. <div id= "heartone">
  523. <a title="{text:Link 1}" href="{text:Link 1 url}"><img src="http://i.imgur.com/5jsaQbR.gif" ></a> </div>
  524. <div id= "hearttwo">
  525. <a title="MAIL"href="#?w=500" rel="letters" class="poplight"><img src="http://i.imgur.com/DK9Rz7D.gif" ></a> </div>
  526. <div id= "heartthree">
  527. <a title="{text:Link 3}" href="{text:Link 3 url}"><img src="http://i.imgur.com/t0KS86T.gif" ></a> </div>
  528. <div id= "heartfour">
  529. <a title="{text:Link 4}" href="{text:Link 4 url}"><img src="http://i.imgur.com/0NSjAIs.gif" ></a> </div>
  530. <div id= "heartfive">
  531. <a title="{text:Link 5}" href="{text:Link 5 url}"><img src="http://i.imgur.com/gSR0Wnl.gif" ></a>
  532. </div>
  533. <div id="title">{Title}</div>
  534. <div id="description">{description}</div>
  535. {block:Pagination}
  536. <div id="pagination">
  537. {block:PreviousPage}<a href="{PreviousPage}">Prev</a>{/block:PreviousPage}<br>
  538. {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  539. </div>{/block:Pagination}</div></div></div>
  540. </div></div>
  541. </div></div></div>
  542.  
  543.  
  544. <div id="postscontainer">
  545. {block:Posts}
  546.  
  547. <div id="posts">
  548.  
  549.  
  550. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  551.  
  552.  
  553. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  554.  
  555. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  556.  
  557. {block:Quote}{Quote}{block:Source} &#8212;{Source}{/block:Source}{/block:Quote}
  558.  
  559. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  560.  
  561. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  562.  
  563. {block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  564.  
  565. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  566.  
  567. {block:Answer}<div id="askbg"><div id="ask"></div><br><font face="Edwardian Script ITC"><big><big><big><big><big><big><big>{Asker} </font></big></big></big></big></big></big></big>asked: {Question}</div> {Answer}{/block:Answer}
  568.  
  569. <div id="info"><div id="reblog"><a href="{ReblogURL}" target="_blank" class="details">Reblog</a></div><div id="notes"><a href="{Permalink}">
  570. {NoteCountWithLabel}</a></div>
  571. <div id="rightinfo">{block:Date}<a href="{Permalink}">
  572. {TimeAgo}</a></a>{/block:Date} |{block:RebloggedFrom}<a href="{ReblogParentURL}"
  573. title="{ReblogParenttitle}">Via</a> | <a href="{ReblogRootURL}"title="{ReblogRoottitle}">Source</a>{/block:RebloggedFrom}</div>
  574. {block:HasTags} <div id="tags">Tags:{block:Tags} #<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div>
  575.  
  576.  
  577. </div>
  578.  
  579. {/block:Posts}
  580. {block:PostNotes}{PostNotes}</div>{/block:PostNotes}
  581. {/block:Posts}
  582.  
  583. </div>
  584.  
  585.  
  586. <div id="credit"><a href="http://hrrys.tumblr.com"><img src="http://i.imgur.com/o7oww2G.png"></a>
  587. </div>
  588. </div>
  589. </body><div id="letters" class="popup_block"><center>
  590. <!--REMEMBER REMEMBER REMEMBER TO CHANGE THE 'YOURURLHERE' TO YOUR URL OTHERWISE THE FAQ WONT WORK-->
  591. FAQ HERE
  592. <Center><iframe frameborder="0" scrolling="yes" width="100%" height="200" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  593. </center></div>
  594. </div></div></div></div></div></div></div></div></div></div>
  595. </body>
  596. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement