API tools faq
paste
Advertisement
rianne1103

Perrie Theme

rianne1103
Aug 22nd, 2014
378
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.81 KB | None | 0 0
raw download clone embed print report
  1. <!-- Perrie by: Payns Themes
  2. 1. Please don't remove credit. Like Ever.
  3. 2. Edit as you'd like, and feel free to message me for help.
  4. 3. Message us if there is a problem
  5. 4. Request for the next theme!-->
  6.  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  9.  
  10. <title>{Title}</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. <meta name="description" content="">
  14.  
  15. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  16.  
  17. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  18.  
  19. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type='text/javascript'> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#haz").scrollToTop(); });</script><a id="haz" href='#' style="display:none;">▲</a>
  20.  
  21. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  22. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  23. <script type="text/javascript" charset="utf-8">
  24. var $j = jQuery.noConflict();
  25. $j(function() {
  26. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  27. $j("img").lazyload({
  28. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  29. effect: "fadeIn",
  30. });
  31. });
  32. </script>
  33.  
  34. {block:Ifdisablerightclick}<script type="text/javascript">
  35. <!--
  36.  
  37. // Payns Themes: Disable right click w/o pop-up message
  38.  
  39. function IE(e){if (navigator.appName == "Microsoft Internet Explorer" && (event.button == "2" || event.button == "3")){return false;}}function NS(e){if (document.layers || (document.getElementById && !document.all))
  40. {if (e.which == "2" || e.which == "3"){return false;}}}document.onmousedown=IE;document.onmouseup=NS;document.oncontextmenu=new Function("return false");
  41.  
  42. //-->
  43. </script>{/block:Ifdisablerightclick}
  44.  
  45.  
  46. <meta name="color:bg"content="#fff"/>
  47. <meta name="color:title"content="#ddd"/>
  48. <meta name="color:text"content="#000"/>
  49. <meta name="color:link"content="#000"/>
  50. <meta name="color:hover" content="#fff"/>
  51. <meta name="color:Bold" content="#000"/>
  52. <meta name="color:Italic" content="#000"/>
  53. <meta name="color:scrollbar" content="#000">
  54. <meta name="color:bars"content="#000"/>
  55. <meta name="color:highlight bg" content="#000"/>
  56. <meta name="color:highlight font" content="#fff"/>
  57. <meta name="color:blockquote" content="#eee"/>
  58. <meta name="color:info" content="#fff">
  59. <meta name="color:info bg" content="#eee">
  60. <meta name="color:border" content="#eee">
  61. <meta name="color:blog title" content="#ddd">
  62. <meta name="color:navi" content="#ddd">
  63. <meta name="color:accent" content="#7fffd7">
  64.  
  65. <meta name="image:header" content="">
  66. <meta name="image:bg"content=""/>
  67.  
  68. <meta name="text:Link1"content="Link">
  69. <meta name="text:Link1 url"content="/">
  70. <meta name="text:Link2"content="Link">
  71. <meta name="text:Link2 url"content="/">
  72. <meta name="text:Link3"content="Link">
  73. <meta name="text:Link3 url"content="/">
  74. <meta name="text:Link4"content="Link">
  75. <meta name="text:Link4 url"content="/">
  76. <meta name="text:Link5"content="Link">
  77. <meta name="text:Link5 url"content="/">
  78.  
  79. <meta name="if:cursor" content="1"/>
  80. <meta name="if:disable right click" content=""/>
  81.  
  82. <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
  83. <script type="text/javascript">
  84. WebFontConfig = {
  85. google: { families: [ 'Oswald:700:latin' ] }
  86. };
  87. (function() {
  88. var wf = document.createElement('script');
  89. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  90. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  91. wf.type = 'text/javascript';
  92. wf.async = 'true';
  93. var s = document.getElementsByTagName('script')[0];
  94. s.parentNode.insertBefore(wf, s);
  95. })(); </script>
  96.  
  97.  
  98. <style type="text/css">
  99.  
  100. @import url(http://fonts.googleapis.com/css?family=Oswald:700);
  101.  
  102. ::-webkit-scrollbar-thumb{ background-color: {color:scrollbar}; border: 2px solid {color:bg}; height:auto; }
  103. ::-webkit-scrollbar { height:9px; width:9px; background-color: {color:scrollbar}; border: 4px solid {color:bg}; }
  104.  
  105. ::selection {
  106. background: {color:highlight bg};
  107. color: {color:highlight font};
  108. }
  109.  
  110. iframe#tumblr_controls {right:2px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.5;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  111.  
  112. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 0.8;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  113.  
  114. #tumblr_controls{
  115. position:fixed !important;
  116. -webkit-filter: invert(100%)
  117. }
  118.  
  119. #s-m-t-tooltip {
  120. z-index: 99999999999999999999999999999999999;
  121. background: {color:scrollbar};
  122. font-size: 9px;
  123. line-height: 10px;
  124. font-size:9px;
  125. letter-spacing:2.5px;
  126. border: 1px solid #F0F0F0;
  127. text-transform: uppercase;
  128. font-family:calibri;
  129. color: {color:bg};
  130. padding: 3px;
  131. display: block;
  132. margin: 10px 14px 7px 12px;
  133. -webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.03);
  134. -moz-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.03);
  135. box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.03);
  136. }
  137.  
  138. #brad {
  139. font-size:30px;
  140. font-family:calibri;
  141. text-transform:uppercase;
  142. letter-spacing:2px;
  143. color:{color:text};
  144. -moz-transition-duration:0.7s;
  145. -webkit-transition-duration:0.7s;
  146. -o-transition-duration:0.7s;
  147. }
  148.  
  149. #brad a {
  150. background-color:transparent;
  151. position:fixed;
  152. color:{color:text};
  153. right:10px;
  154. bottom:10px;
  155. }
  156.  
  157. #brad a:hover {
  158. transition-duration: 0.9s;
  159. -moz-transition-duration:0.9s;
  160. -webkit-transition-duration:0.9s;
  161. -o-transition-duration:0.9s;
  162. color: transparent;
  163. text-shadow: #000 0 0 5px;
  164. text-decoration:none;
  165. }
  166.  
  167. #haz{
  168. position:fixed;
  169. z-index:999;
  170. bottom:40px;
  171. right:10px;
  172. width:30px;
  173. line-height:36px;
  174. font-size:45px;
  175. text-align:center;
  176. color:{color:text};
  177. background:transparent;
  178. }
  179.  
  180. {block:ifcursor}*, body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), auto;}{/block:ifcursor}
  181.  
  182. a {
  183. color:{color:link};
  184. text-decoration:none;
  185. transition-duration: 0.9s;
  186. -moz-transition-duration:0.9s;
  187. -webkit-transition-duration:0.9s;
  188. -o-transition-duration:0.9s;
  189. }
  190.  
  191. a:hover {
  192. color:{color:hover};
  193. transition-duration: 0.9s;
  194. -moz-transition-duration:0.9s;
  195. -webkit-transition-duration:0.9s;
  196. -o-transition-duration:0.9s;
  197. }
  198.  
  199. body {
  200. font-family:calibri;
  201. font-size:10px;
  202. color:{color:text};
  203. background: {color:bg} url({image:bg});
  204. background-position: center;
  205. background-attachment: fixed;
  206. -webkit-background-size: cover;
  207. -moz-background-size: cover;
  208. -o-background-size: cover;
  209. background-size: cover;
  210. }
  211.  
  212. small{
  213. font-size:8px;
  214. }
  215.  
  216. big{
  217. font-size:15px;
  218. }
  219.  
  220. b, strong{
  221. }
  222.  
  223. i, em {
  224. }
  225.  
  226. ol {
  227. list-style-type:upper-roman;
  228. font-family:calibri;
  229. }
  230.  
  231. ul {
  232. margin: 6px 0 12px 12px;
  233. list-style: circle;
  234. color:{text:color};
  235. }
  236.  
  237. blockquote{
  238. padding:0px 0px 2px 2px;
  239. margin:0px 0px 2px 5px;
  240. border-left: 1px dotted #555555;
  241. }
  242.  
  243. #container {
  244. background-color:transparent;
  245. width:700px;
  246. margin: 0 auto -12px auto;
  247. text-align: center;
  248. }
  249.  
  250. #entries {
  251. float:center;
  252. width:100%;
  253. margin-left:130px;
  254. margin-top:-50px;
  255. text-align:justify;
  256. background-color:transparent;
  257. color:{color:text};
  258. }
  259.  
  260. .post {
  261. width:500px;
  262. margin-top:65px;
  263. text-align:justify;
  264. font-size:11px;
  265. letter-spacing:0x;
  266. color:{color:text};
  267. background-color:transparent;
  268. outline-offset:20px;
  269. }
  270.  
  271. ol.notes{
  272. list-style-type: none;
  273. padding:0px;}
  274.  
  275. #notes img{
  276. float:left;
  277. margin-right:5px;}
  278.  
  279. #notes{
  280. margin:0;
  281. font: 08px sans-serif;
  282. text-transform:uppercase;}
  283.  
  284. #notes li{
  285. padding:10px;
  286. list-style-type: none;}
  287.  
  288. #info{
  289. padding-left:10px;
  290. padding-right:10px;
  291. text-align:left;
  292. margin-top:5px;
  293. {block:IndexPage}
  294. margin-bottom:120px;
  295. {/block:IndexPage}
  296. {block:PermalinkPage}
  297. margin-bottom:30px;
  298. {/block:PermalinkPage}}
  299.  
  300. #info a{
  301. display:inline-block;
  302. margin-bottom:4px;
  303. padding:5px;
  304. font-family:calibri;
  305. font-size:8px !important;
  306. text-transform:uppercase;
  307. text-align:center;
  308. letter-spacing:2px;
  309. color:{color:bg};
  310. background:{color:info bg};
  311. -moz-transition-duration:0.9s;
  312. -webkit-transition-duration:0.9s;
  313. -o-transition-duration:0.9s;
  314. }
  315.  
  316. #info a:hover{
  317. color:black;
  318. box-shadow:inset 0px -40px 0px white;
  319. -moz-transition-duration:0.9s;
  320. -webkit-transition-duration:0.9s;
  321. -o-transition-duration:0.9s;
  322. }
  323.  
  324. .like_and_reblog_buttons {
  325. border: 1px solid #e8e8e8;
  326. border-radius: 3px;
  327. list-style: none;
  328. }
  329.  
  330. .like_and_reblog_buttons li {
  331. float: right;
  332. margin: 0;
  333. padding: 7px 10px;
  334. height: 10px;
  335. }
  336.  
  337. .like_and_reblog_buttons a:hover {
  338. text-transform:none;
  339. -moz-transition-duration:0.9s;
  340. -webkit-transition-duration:0.9s;
  341. -o-transition-duration:0.9s;
  342. }
  343.  
  344. .like_and_reblog_buttons li:first-child {
  345. border-right: 1px solid #e8e8e8;
  346. }
  347.  
  348. #quote{
  349. font-style:italic;
  350. margin-left:40px;
  351. padding-top:10px;
  352. font-size:15px;
  353. }
  354.  
  355. .quote{
  356. font-family:consolas;
  357. float:left;
  358. font-size:70px;
  359. position:absolute;
  360. color:{color:blockquote};}
  361.  
  362. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  363. .user_7 .label, .user_8 .label, .user_9 .label {color:{color:Title};
  364. }
  365.  
  366. .ask {
  367. float:left;
  368. border:3px solid #fff;
  369. margin-top:-4px;
  370. margin-left:-2px;
  371. }
  372.  
  373. .asker {
  374. margin-left:7px;
  375. padding:1px;
  376. color:{color:scrollbar};
  377. font-size:10px;
  378. text-transform:lowercase;
  379. text-align:left;
  380. font:bold 19px sans-serif;
  381. letter-spacing:-2px;
  382. }
  383.  
  384. .asker a{
  385. color:{color:scrollbar};
  386. }
  387.  
  388. .question {
  389. background-color:{color:info bg};
  390. margin-left:15px;
  391. margin-top:-9px;
  392. font-family:calibri;
  393. font-size:10px;
  394. padding:10px;
  395. color:{color:bg};
  396. text-indent:2px;
  397. text-align:right;
  398. }
  399.  
  400. .answer {
  401. margin-left:1px;
  402. margin-top:-17px;
  403. font-family:calibri;
  404. font-size:10px;
  405. padding:3px;
  406. color:{color:text};
  407. text-indent:7px;
  408. text-align:justify;
  409. width:auto;
  410. }
  411.  
  412. #audio {
  413. margin-bottom:5px;
  414. width:500px;
  415. height:105px;
  416. }
  417.  
  418. .albumart {
  419. width:100px;
  420. height:100px;
  421. position:absolute;
  422. }
  423.  
  424. .albumart img {
  425. width:100px;
  426. height:100px;
  427. float:left;
  428. border-radius:5px;
  429. }
  430.  
  431. .playercontainer {
  432. opacity: .2;
  433. display:block;
  434. width:100px;
  435. height:100px;
  436. background:#fff;
  437. position:absolute;
  438. -webkit-transition:all 0.9s ease-in-out;
  439. -moz-transition:all 0.9s ease-in-out;
  440. -o-transition:all 0.9s ease-in-out;
  441. -ms-transition: all 0.9s ease-in-out;
  442. transition:all 0.9s ease-in-out;
  443. }
  444.  
  445. .playercontainer:hover {
  446. opacity:.7;
  447. position:absolute;
  448. -webkit-transition:all 0.9s ease-in-out;
  449. -moz-transition:all 0.9s ease-in-out;
  450. -o-transition:all 0.9s ease-in-out;
  451. -ms-transition: all 0.9s ease-in-out;
  452. transition:all 0.9s ease-in-out;
  453. }
  454.  
  455. .player {
  456. margin-left:36px;
  457. margin-top:36px;
  458. width:25px;
  459. height:25px;
  460. overflow:hidden;
  461. position:absolute;
  462. background:#fff;
  463. }
  464.  
  465. .audioinfo {
  466. margin-left:110px;
  467. float:left;
  468. color:{color:info};
  469. font-family:calibri;
  470. letter-spacing:1px;
  471. font-size:8px;
  472. text-transform:uppercase;
  473. width:386px;
  474. padding:2px;
  475. margin-top:3px;
  476. }
  477.  
  478. .audioinfo b {
  479. font-family:calibri;
  480. letter-spacing:1px;
  481. font-size:8px;
  482. text-transform:uppercase;
  483. color:{color:info};
  484. background:{color:info bg};
  485. padding:3px 4px 3px 4px;
  486. font-weight:normal;
  487. margin-right:5px;
  488. }
  489.  
  490. .chat{
  491. line-height: 12px;
  492. color:{color:text};
  493. }
  494.  
  495. .chat ul {
  496. line-height: 15px;
  497. list-style: none;
  498. padding: 0px;
  499. line-height: 20px;
  500. }
  501.  
  502. .person1 {
  503. color:{color:Text};
  504. background-color:#eee;
  505. }
  506.  
  507. .person1 .label {
  508. font-weight: bold;
  509. margin-left:5px;
  510. color:{color:Text};
  511. }
  512.  
  513. .person2 {
  514. color:{color:Text};
  515. background-color:#fff;
  516. }
  517.  
  518. .person2 .label {
  519. font-weight: bold;
  520. padding: 0px;
  521. margin-left: 5px;
  522. color: {color:Text};
  523. }
  524.  
  525. h1 {
  526. font-size:10px;
  527. }
  528.  
  529. h2{
  530. text-transform:lowercase;
  531. font-size:20px;
  532. text-align:left;
  533. font:bold 19px sans-serif;
  534. letter-spacing:-2px;
  535. }
  536.  
  537. h3 {
  538. font-family: 'Oswald', sans-serif;
  539. text-transform:uppercase;
  540. font-size:50px;
  541. color:{color:blog title};
  542. text-align:left;
  543. }
  544.  
  545. .header{
  546. width:1000px;
  547. height:300px;
  548. margin-top:50px;
  549. margin-left:-150px;
  550. display:block;
  551. position:relative;
  552. z-index:1;
  553. }
  554.  
  555. .header img {
  556. position:absolute;
  557. margin-top:-7px;
  558. top:0;
  559. left:0;
  560. padding:5px;
  561. border:3px solid {color:border};
  562. width:1000px;
  563. height:300px;
  564. -webkit-filter: -webkit-filter: blur(9px) saturate(2.1);(0%);
  565. -webkit-transition:all 0.9s ease-in-out;
  566. -moz-transition:all 0.9s ease-in-out;
  567. -o-transition:all 0.9s ease-in-out;
  568. -ms-transition: all 0.9s ease-in-out;
  569. transition:all 0.9s ease-in-out;
  570. z-index:2;
  571. }
  572.  
  573. .header img:hover{
  574. -webkit-transition:all 0.9s ease-in-out;
  575. -moz-transition:all 0.9s ease-in-out;
  576. -o-transition:all 0.9s ease-in-out;
  577. -ms-transition: all 0.9s ease-in-out;
  578. transition:all 0.9s ease-in-out;
  579. -webkit-filter: blur(9px) saturate(.2);(80%);
  580. }
  581.  
  582. #title {
  583. width:400px;
  584. height:auto;
  585. margin-top:-50px;
  586. z-index:999999999999999999999999999999999999999999;
  587. }
  588.  
  589. #title a{
  590. color:{color:blog title};
  591. }
  592.  
  593. #title a:hover{
  594. color:{color:accent};
  595. -webkit-transition:all 0.9s ease-in-out;
  596. -moz-transition:all 0.9s ease-in-out;
  597. -o-transition:all 0.9s ease-in-out;
  598. -ms-transition: all 0.9s ease-in-out;
  599. transition:all 0.9s ease-in-out;
  600. }
  601.  
  602. #description {
  603. margin-top:-60px;
  604. width:250px;
  605. height:auto;
  606. font-family:calibri;
  607. text-transform:none;
  608. text-align:left;
  609. }
  610.  
  611. #perrie {
  612. width:1000px;
  613. margin-left:-140px;
  614. }
  615.  
  616. .links1 {
  617. position:fixed;
  618. font-family:times;
  619. width:58px;
  620. display:block;
  621. margin-left: 10px;
  622. margin-top: 5px;
  623. padding:10px;
  624. height:100%;
  625. float:center;
  626. }
  627.  
  628. .links1 a{
  629. padding:5px;
  630. color:{color:bg};
  631. font:bold 19px sans-serif;
  632. text-transform:Uppercase;
  633. background-color:{color:blog title};
  634. display:block;
  635. text-align:center;
  636. float:center;
  637. -moz-transition-duration:0.9s;
  638. -webkit-transition-duration:0.9s;
  639. -o-transition-duration:0.9s;
  640. }
  641.  
  642. .links1 a:hover {
  643. background-color:transparent;
  644. color:{color:accent};
  645. }
  646.  
  647. .links2 {
  648. position:fixed;
  649. font-family:times;
  650. width:58px;
  651. display:block;
  652. margin-left: 55px;
  653. margin-top: 5px;
  654. text-transform:uppercase;
  655. text-align:center;
  656. padding:10px;
  657. height:100%;
  658. float:center;
  659. }
  660.  
  661. .links2 a{
  662. padding:5px;
  663. color:{color:bg};
  664. font:bold 19px sans-serif;
  665. text-transform:Uppercase;
  666. background-color:{color:blog title};
  667. display:block;
  668. text-align:center;
  669. float:center;
  670. -moz-transition-duration:0.9s;
  671. -webkit-transition-duration:0.9s;
  672. -o-transition-duration:0.9s;
  673. }
  674.  
  675. .links2 a:hover {
  676. background-color:transparent;
  677. color:{color:accent};
  678. }
  679.  
  680. .links3 {
  681. position:fixed;
  682. font-family:times;
  683. width:58px;
  684. display:block;
  685. margin-left: 10px;
  686. margin-top: 45px;
  687. text-transform:uppercase;
  688. text-align:center;
  689. padding:10px;
  690. height:100%;
  691. float:center;
  692. }
  693.  
  694. .links3 a{
  695. padding:5px;
  696. color:{color:bg};
  697. font:bold 19px sans-serif;
  698. text-transform:Uppercase;
  699. background-color:{color:blog title};
  700. display:block;
  701. text-align:center;
  702. float:center;
  703. -moz-transition-duration:0.9s;
  704. -webkit-transition-duration:0.9s;
  705. -o-transition-duration:0.9s;
  706. }
  707.  
  708. .links3 a:hover {
  709. background-color:transparent;
  710. color:{color:accent};
  711. }
  712.  
  713. .links4 {
  714. position:fixed;
  715. font-family:times;
  716. width:58px;
  717. display:block;
  718. margin-left: 55px;
  719. margin-top: 45px;
  720. text-transform:uppercase;
  721. text-align:center;
  722. padding:10px;
  723. height:100%;
  724. float:center;
  725. }
  726.  
  727. .links4 a{
  728. padding:5px;
  729. color:{color:bg};
  730. font:bold 19px sans-serif;
  731. text-transform:Uppercase;
  732. background-color:{color:blog title};
  733. display:block;
  734. text-align:center;
  735. float:center;
  736. -moz-transition-duration:0.9s;
  737. -webkit-transition-duration:0.9s;
  738. -o-transition-duration:0.9s;
  739. }
  740.  
  741. .links4 a:hover {
  742. background-color:transparent;
  743. color:{color:accent};
  744. }
  745.  
  746. .popup_block{
  747. display:none;
  748. background:#fff;
  749. padding:20px;
  750. border:1px solid #eee;
  751. float:left;
  752. position:fixed;
  753. top:50%;left:50%;
  754. z-index: 99999;
  755. -webkit-box-shadow: 0px 0px 20px #000;
  756. -moz-box-shadow: 0px 0px 20px #000;
  757. box-shadow: 0px 0px 20px #000;
  758. }
  759.  
  760. *html #fade {position: absolute;}
  761. *html .popup_block {position: absolute;}
  762. #fade {
  763. display:none;
  764. position:fixed;
  765. left:0px;
  766. top:0px;
  767. width:100%;
  768. height:100%;
  769. z-index:9999;
  770. background:#000;
  771. opacity:0.5;
  772. }
  773.  
  774. *,
  775. *:after,
  776. *::before {
  777. -webkit-box-sizing: border-box;
  778. -moz-box-sizing: border-box;
  779. box-sizing: border-box;
  780. }
  781.  
  782. nav a {
  783. position: relative;
  784. display: inline-block;
  785. margin: 5px 5px;
  786. outline: none;
  787. color: #000;
  788. text-decoration: none;
  789. text-transform: uppercase;
  790. text-align:center;
  791. letter-spacing: 1px;
  792. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  793. font-size: 17px;
  794. margin-left:-2px;
  795. }
  796.  
  797. nav a:hover,
  798. nav a:focus {
  799. outline: none;
  800. }
  801.  
  802. /* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
  803. .cl-effect-11 a {
  804. padding: 5px 0;
  805. border-top: 2px solid {color:navi};
  806. color: {color:navi};
  807. text-shadow: none;
  808. }
  809.  
  810. .cl-effect-11 a::before {
  811. position: absolute;
  812. top: 0;
  813. left: 0;
  814. overflow: hidden;
  815. padding: 5px 0;
  816. max-width: 0;
  817. border-bottom: 2px solid {color:scrollbar};
  818. color: {color:scrollbar};
  819. content: attr(data-hover);
  820. -webkit-transition: max-width 0.5s;
  821. -moz-transition: max-width 0.5s;
  822. transition: max-width 0.5s;
  823. }
  824.  
  825. .cl-effect-11 a:hover::before,
  826. .cl-effect-11 a:focus::before {
  827. max-width: 100%;
  828. }
  829.  
  830. #navigation {
  831. margin-left:820px;
  832. margin-top:-75px;
  833. }
  834.  
  835. #faq{
  836. position:fixed !important;
  837. z-index:3;
  838. width:450px;
  839. height:120px;
  840. padding:3px;
  841. color: {color:text};
  842. background:#fff;
  843. letter-spacing:1px;
  844. font-size: 11px;
  845. overflow-y:scroll;
  846. overflow-x:hidden;
  847. font-family:calibri;
  848. }
  849.  
  850. #box1 {
  851. max-height:600px;
  852. }
  853.  
  854. #box2 {
  855. overflow-y:scroll;
  856. overflow-x:hidden;
  857. max-height:600px;
  858. }
  859.  
  860. #box3 {
  861. overflow-y:scroll;
  862. overflow-x:hidden;
  863. max-height:600px;
  864. }
  865.  
  866. .pagination { text-align:center;
  867. color:{color:text};
  868. left:213px;
  869. }
  870.  
  871. .current_page { background-color:;
  872. padding:5px;
  873. margin:5px;
  874. }
  875.  
  876. .jump_page, .next { background-color:;
  877. padding:5px;
  878. margin:5px;
  879. }
  880.  
  881.  
  882.  
  883.  
  884. {CustomCSS}</style></head><body>
  885.  
  886.  
  887. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  888. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  889. <script>
  890. (function($){
  891. $(document).ready(function(){
  892. $("a[title]").style_my_tooltips({
  893. tip_follows_cursor:true,
  894. tip_delay_time:90,
  895. tip_fade_speed:600,
  896. attribute:"title"
  897. });
  898. });
  899. })(jQuery);
  900. </script>
  901.  
  902. <div id="box1" class="popup_block">
  903.  
  904. <nav class="cl-effect-11">
  905. <center>
  906. <a href="{text:Link1 URL}" data-hover="{text:Link1}">{text:Link1}</a>
  907. <a href="{text:Link2 URL}" data-hover="{text:Link2}">{text:Link2}</a>
  908. <a href="{text:Link3 URL}" data-hover="{text:Link3}">{text:Link3}</a>
  909. <a href="{text:Link4 URL}" data-hover="{text:Link4}">{text:Link4}</a>
  910. <a href="{text:Link5 URL}" data-hover="{text:Link5}">{text:Link5}</a>
  911. <a href="http://bradley.tk" data-hover="credit">credit</a>
  912. </center>
  913. </nav>
  914.  
  915. </div>
  916. </div></div></div></div></div></div></div></div></div></div> <!-- Box1 -->
  917.  
  918. <div id="box2" class="popup_block">
  919. <div id="faq"><center><h2>FAQ</h2></center>
  920. <blockquote>
  921. <b>Question?</b> <i>Answer.</i><br>
  922. <b>Question?</b> <i>Answer.</i><br>
  923. <b>Question?</b> <i>Answer.</i><br>
  924. <b>Question?</b> <i>Answer.</i><br>
  925. <b>Question?</b> <i>Answer.</i><br>
  926. <b>Question?</b> <i>Answer.</i><br>
  927. <b>Question?</b> <i>Answer.</i><br>
  928. <b>Question?</b> <i>Answer.</i><br>
  929. <b>Question?</b> <i>Answer.</i><br>
  930. </blockquote>
  931. </div><br><br><br><br><br><br><br><br><br><br><br>
  932.  
  933. <iframe frameborder="0" height="200" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  934. <iframe frameborder="0" height="200" id="submit_form" scrolling="yes" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" width="100%"></iframe>
  935.  
  936. </div>
  937. </div></div></div></div></div></div></div></div></div></div> <!-- Box2 -->
  938.  
  939. <div id="box3" class="popup_block">
  940.  
  941. <h2>UPDATES</h2>
  942.  
  943. This is how you make words <big>BIG</big><br>
  944. This is how you make words <small>small</small><br>
  945. This is how you make words <i>italic</i><br>
  946. This is how you make words <b>bold</b><br>
  947. This is how you make words <u>underlined</u><br>
  948. <center>This is how you make words centered</center>
  949. <blockquote>Blockquote</blockquote>
  950.  
  951. </div>
  952. </div></div></div></div></div></div></div></div></div></div> <!-- Box3 -->
  953.  
  954. <div id="container">
  955.  
  956. <div class="header"><a href="/"><img src="{image:header}" /></a></div>
  957.  
  958. <div id="perrie">
  959.  
  960. <div id="title"><h3>{Title}</h3></div>
  961.  
  962. <div id="description">{Description}</div>
  963.  
  964. <div id="navigation">
  965. <div class="links1"><a href="#?w=500" rel="box1" class="poplight" title="Navigation">N</a></div>
  966. <div class="links2"><a href="#?w=500" rel="box2" class="poplight" title="Ask & Submit">A</a> </div>
  967. <div class="links3"><a href="#?w=500" rel="box3" class="poplight" title="Updates">U</a></div>
  968. <div class="links4"><a href="http://bradley.tk" title="Credit">C</a></div>
  969. </div><!-- End Navigation -->
  970.  
  971. </div><!-- End Perrie -->
  972.  
  973.  
  974. <div id="brad"><a href="http://paynsthemes.tumblr.com" title="PaynsThemes">☯</a></div>
  975.  
  976. <div id="entries"><div class = "autopagerize_page_element" >{block:Posts}{block:ContentSource}
  977. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  978. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  979. {/block:SourceLogo}
  980. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  981. {/block:ContentSource}<div class="post">
  982.  
  983. {block:Text}<h2>{block:Title}{Title}{/block:Title}</h2>{Body}{/block:Text}
  984.  
  985. {block:Quote}
  986. <div class="quote">“</div>
  987. <div id="quote"><p>{Quote}</p>{block:Source}<h1><span style="text-transform:lowercase;float:right">— <u>{Source}</u></span></h1>{/block:Source}</div><br/>{/block:Quote}
  988.  
  989. {block:Link}<h2><a href="{URL}" {Target}>{Name}</a></h2>{block:Description}{Description}{/block:Description}{/block:Link}
  990.  
  991. {block:Photo}{LinkOpenTag}<center><img src="{PhotoURL-500}"></center>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  992.  
  993. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  994.  
  995. {block:Chat}
  996. {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
  997. <div class="chat"><ul>{block:Lines}
  998. <li class="person{UserNumber}">{block:Label}
  999. <span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul></div>
  1000. {/block:Chat}
  1001.  
  1002. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1003.  
  1004. {block:Answer}<img src="{AskerPortraitURL-64}" class="ask">
  1005. <div class="asker" align="left"> {Asker} </div><p></p>
  1006. <div class="question">{Question}</div><p></p>
  1007. <div class="answer">{Answer}</div>{/block:Answer}
  1008.  
  1009. {block:Audio}
  1010. <div id="audio">
  1011. <div class="albumart"><img src="http://static.tumblr.com/4wyqgof/Dyvm2qmp1/default.jpg" width="100px" height="100px"></div>{block:AlbumArt}
  1012. <div class="albumart"><img src="{AlbumArtURL}" width="100px" height="100px"></div>{/block:AlbumArt}
  1013. <div class="playercontainer"><div class="player">{AudioPlayerwhite}</div></div>
  1014. {block:TrackName}<div class="audioinfo"><b>Title</b> {TrackName}</div><br>{/block:TrackName}
  1015. {block:Artist}<div class="audioinfo"><b>Artist</b> {Artist}</div><br>{/block:Artist}
  1016. {block:Album}<div class="audioinfo"><b>Album</b> {Album}</div>{/block:Album}
  1017. {block:PlayCount}<div class="audioinfo"><b>Played</b> {FormattedPlayCount} times</div> {/block:PlayCount}
  1018. </div>{block:Caption}{Caption}{/block:Caption}
  1019. {/block:Audio}
  1020.  
  1021. <ul class="like_and_reblog_buttons">
  1022. <li>{ReblogButton}</li>
  1023. <li>{LikeButton}</li>
  1024. </ul>
  1025. <div id="info">
  1026. {block:IndexPage}
  1027. {block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}" title="{Month} {DayOfMonth}, {Year} at {12Hour}:{Minutes} {CapitalAMPM}" >{DayOfMonthWithZero}/{MonthNumberWithZero}</a>{/block:Date}
  1028. <a href="{Permalink}" title="{NoteCount} Notes">{NoteCount}</a>
  1029. <br>{block:HasTags}<span style="text-transform:lowercase;font-size:12px;"><b>#</b> {block:Tags}<a href="{TagURL}">{Tag} &nbsp; </a>{/block:Tags}</span>{/block:HasTags}
  1030. {/block:IndexPage}
  1031.  
  1032. {block:PermalinkPage}
  1033. {block:RebloggedFrom}<b><a href="{ReblogParentURL}" title="{ReblogParentTitle}">via</a> / <a href="{ReblogRootURL}" title="{ReblogRootTitle}">source</a></b>{/block:RebloggedFrom}
  1034. <span style="text-transform:lowercase;font-size:08px;">{block:Date} &nbsp; <a href="{Permalink}">{TimeAgo}</a>{/block:Date}
  1035. {block:NoteCount} &nbsp; <a href="{Permalink}">w/ {NoteCountWithLabel}</a>{/block:NoteCount}</span></div>
  1036. {block:HasTags}<span style="text-transform:lowercase;font-size:08px;"><b>#</b> {block:Tags}<a href="{TagURL}">{Tag} &nbsp; </a>{/block:Tags}</span>{/block:HasTags}
  1037. {/block:PermalinkPage}
  1038.  
  1039. {block:PermalinkPage}
  1040. {block:PostNotes}
  1041. <div style="overflow: scroll;height: 100px;width: 500px;background-color:#c6c6c6;margin-bottom:20px;">
  1042. <div id="notes">{PostNotes}</div>
  1043. </div>{/block:PostNotes}
  1044. {/block:PermalinkPage}
  1045.  
  1046. </div>
  1047.  
  1048. {/block:Posts}</div></div></div>
  1049. </div>
  1050. </div>
  1051. </div>
  1052.  
  1053. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  1054. <script type="text/javascript">
  1055. $(function(){
  1056. var stickyRibbonTop = $('#perrie').offset().top;
  1057. $(window).scroll(function(){
  1058. if( $(window).scrollTop() > stickyRibbonTop ) {
  1059. $('#perrie').css({position: 'fixed', top: '0px'});
  1060. } else {
  1061. $('#perrie').css({position: 'static', top: '0px'});
  1062. }
  1063. });
  1064. });
  1065. </script>
  1066.  
  1067.  
  1068. <script type="text/javascript"
  1069. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  1070. <script>
  1071. $(document).ready(function() {
  1072. //
  1073. $('a.poplight[href^=#]').click(function() {
  1074. var popID = $(this).attr('rel'); //Get Popup Name
  1075. var popURL = $(this).attr('href'); //Get Popup href to define size
  1076. var query= popURL.split('?');
  1077. var dim= query[1].split('&');
  1078. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  1079. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  1080. var popMargTop = ($('#' + popID).height() + 80) / 2;
  1081. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  1082. //Apply Margin to Popup
  1083. $('#' + popID).css({
  1084. 'margin-top' : -popMargTop,
  1085. 'margin-left' : -popMargLeft
  1086. });
  1087. $('body').append('<div id="fade"></div>');
  1088. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  1089. return false;
  1090. });
  1091. $('a.close, #fade').live('click', function() {
  1092. $('#fade , .popup_block').fadeOut(function() {
  1093. $('#fade, a.close').remove(); //fade them both out
  1094. });
  1095. return false;
  1096. });
  1097. });
  1098. </script>
  1099.  
  1100.  
  1101.  
  1102. </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!