API tools faq
paste
Advertisement
pro-themes

Ask Layout 1 by 5urprise

pro-themes
Dec 22nd, 2013
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.08 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Ask Layout #1 by 5urprise!
  3. -->
  4. <head>
  5. <script type="text/javascript" src="http://static.tumblr.com/gcjggdm/y0pmroxcl/infinitescrolling.js"></script>
  6. <script type="text/javascript"
  7. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  8. <script>
  9. $(document).ready(function() {
  10. //
  11. $('a.poplight[href^=#]').click(function() {
  12. var popID = $(this).attr('rel'); //Get Popup Name
  13. var popURL = $(this).attr('href'); //Get Popup href to define size
  14. var query= popURL.split('?');
  15. var dim= query[1].split('&');
  16. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  17. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"> <class="btn_close" title="Close" alt="Close" /></a>');
  18. var popMargTop = ($('#' + popID).height() + 80) / 2;
  19. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  20. //Apply Margin to Popup
  21. $('#' + popID).css({
  22. 'margin-top' : -popMargTop,
  23. 'margin-left' : -popMargLeft
  24. });
  25. $('body').append('<div id="fade"></div>');
  26. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  27. return false;
  28. });
  29. $('a.close, #fade').live('click', function() {
  30. $('#fade , .popup_block').fadeOut(function() {
  31. $('#fade, a.close').remove(); //fade them both out
  32. });
  33. return false;
  34. });
  35. });
  36. </script>
  37. <style type="text/css">
  38. #fade { /*--Transparent background layer--*/
  39. display: none; /*--hidden by default--*/
  40. background: #fff;
  41. position: fixed; left: 0; top: 0px;
  42. width: 100%; height: 100%;
  43. opacity: .5;
  44. z-index: 9999;
  45. background-image:url(http://www.hdwallpapersinn.com/wp-content/uploads/2013/10/snowflakes-christmas.jpg);
  46. }
  47. .popup_block{
  48. display: none; /*--hidden by default--*/
  49. background:#fff;
  50. padding: 15px;
  51. border: 5px solid #aaaaaa;
  52. float: left;
  53. font-family: "arial";
  54. color: #000;
  55. font-size: 13px;
  56. line-height: 20px;
  57. position: fixed;
  58. top: 50%; left: 50%;
  59. z-index: 99999;
  60. width:510px;
  61. border-right:5px solid #FF0000;
  62. border-bottom:5px solid #FF0000;
  63. border-top:5px solid #04B404;
  64. border-left:5px solid #04B404;
  65. box-shadow: 0px 0px 10px #fff;
  66. }
  67. img.btn_close {
  68. float: right;
  69. margin: -20 -20px 0 0;
  70. }
  71. /*--Making IE6 Understand Fixed Positioning--*/
  72. *html #fade {
  73. position: absolute;
  74. }
  75. *html .popup_block {
  76. position: absolute;
  77. }
  78. body {
  79. color: #6E6E6E;
  80. background-color: #f7f7f7;
  81. font-family: times new roman;
  82. line-height:13px;
  83. font-size:14px;
  84. padding: 0px;
  85. margin: 0px;
  86. background-image:url(http://i45.tinypic.com/16jhspi.png);
  87. background-attachment: fixed;
  88. background-repeat: repeat;
  89. }
  90. #blogtitle{
  91. position:fixed;
  92. color:#FF0000;
  93. text-shadow:2px 3px 2px #00FF00;
  94. font-family:neverletgo;
  95. font-size:75px;
  96. margin-top:80px;
  97. margin-left:540px;
  98. z-index:999;
  99. }
  100. #border{
  101. z-index:1;
  102. position: fixed;
  103. margin-left:180px;
  104. margin-top:20px;
  105. width: 1100px;
  106. height: 600px;
  107. box-shadow:0px 9px 10px #cdcdcd;
  108. background:#FAFAFA;
  109. border: 10px solid #fff;
  110. }
  111.  
  112. #link1{
  113. position:fixed;
  114. z-index:999;
  115. background:white;
  116. margin-top:500px;
  117. margin-left:240px;
  118. width:auto;
  119. height:50px;
  120. padding:10px;
  121. border-right:5px solid #FF0000;
  122. border-bottom:5px solid #FF0000;
  123. border-top:5px solid #04B404;
  124. border-left:5px solid #04B404;
  125. font-family:stars;
  126. font-size:25px;
  127. line-height:60px;
  128. }
  129.  
  130. #link2{
  131. position:fixed;
  132. z-index:999;
  133. background:white;
  134. margin-top:500px;
  135. margin-left:500px;
  136. width:auto;
  137. height:50px;
  138. padding:10px;
  139. border-right:5px solid #FF0000;
  140. border-bottom:5px solid #FF0000;
  141. border-top:5px solid #04B404;
  142. border-left:5px solid #04B404;
  143. font-family:stars;
  144. font-size:25px;
  145. line-height:60px;
  146. }
  147.  
  148. #link3{
  149. position:fixed;
  150. z-index:999;
  151. background:white;
  152. margin-top:500px;
  153. margin-left:760px;
  154. width:auto;
  155. height:50px;
  156. padding:10px;
  157. border-right:5px solid #FF0000;
  158. border-bottom:5px solid #FF0000;
  159. border-top:5px solid #04B404;
  160. border-left:5px solid #04B404;
  161. font-family:stars;
  162. font-size:25px;
  163. line-height:60px;
  164. }
  165.  
  166. #link4{
  167. position:fixed;
  168. z-index:999;
  169. background:white;
  170. margin-top:500px;
  171. margin-left:980px;
  172. width:auto;
  173. height:50px;
  174. padding:10px;
  175. border-right:5px solid #FF0000;
  176. border-bottom:5px solid #FF0000;
  177. border-top:5px solid #04B404;
  178. border-left:5px solid #04B404;
  179. font-family:stars;
  180. font-size:25px;
  181. line-height:60px;
  182. }
  183.  
  184. #about{
  185. position:fixed;
  186. z-index:999;
  187. background:white;
  188. padding:10px;
  189. border-right:5px solid #FF0000;
  190. border-bottom:5px solid #FF0000;
  191. border-top:5px solid #04B404;
  192. border-left:5px solid #04B404;
  193. font-family:pewp;
  194. margin-top:130px;
  195. margin-left:200px;
  196. width:300px;
  197. height:150px;
  198. overflow:auto;
  199. line-height:17px;
  200. font-size:15px;
  201. }
  202.  
  203. #will{
  204. position:fixed;
  205. z-index:999;
  206. background:white;
  207. padding:10px;
  208. border-right:5px solid #FF0000;
  209. border-bottom:5px solid #FF0000;
  210. border-top:5px solid #04B404;
  211. border-left:5px solid #04B404;
  212. font-family:pewp;
  213. margin-top:130px;
  214. margin-left:570px;
  215. width:300px;
  216. height:150px;
  217. overflow:auto;
  218. line-height:17px;
  219. font-size:15px;
  220. }
  221.  
  222. #wont{
  223. position:fixed;
  224. z-index:999;
  225. background:white;
  226. padding:10px;
  227. border-right:5px solid #FF0000;
  228. border-bottom:5px solid #FF0000;
  229. border-top:5px solid #04B404;
  230. border-left:5px solid #04B404;
  231. font-family:pewp;
  232. margin-top:130px;
  233. margin-left:940px;
  234. width:300px;
  235. height:150px;
  236. overflow:auto;
  237. line-height:17px;
  238. font-size:15px;
  239. }
  240.  
  241. #askbox{
  242. position:fixed;
  243. z-index:999;
  244. background:white;
  245. padding:10px;
  246. border-right:5px solid #FF0000;
  247. border-bottom:5px solid #FF0000;
  248. border-top:5px solid #04B404;
  249. border-left:5px solid #04B404;
  250. font-family:stars;
  251. margin-top:330px;
  252. margin-left:610px;
  253. width:auto;
  254. height:auto;
  255. color:#04B404;
  256. text-shadow:2px 3px 2px #00FF00;
  257. line-height:87px;
  258. font-size:45px;
  259. }
  260.  
  261.  
  262. a:link, a:active, a:visited{
  263. text-decoration: none;
  264. -webkit-transition: all 0.3s linear;
  265. -moz-transition: all 0.3s linear;
  266. transition: all 0.3s linear;
  267. color:#6E6E6E;
  268. }
  269.  
  270. a:hover {
  271. text-shadow:0 0 10px #000;
  272. text-decoration:none;
  273. font-style:;
  274. color: #fff;
  275. -webkit-transition: all 0.3slinear;
  276. -moz-transition: all 0.3s linear;
  277. transition: all 0.3s linear;
  278. }
  279.  
  280. ::-webkit-scrollbar-thumb{
  281. background-color: #04B404;
  282. border: 2px solid #f5f5f5;
  283. height:1px;
  284. -moz-border-radius: 20px;
  285. border-radius: 20px;
  286. }
  287.  
  288. ::-webkit-scrollbar {
  289. height:1px;
  290. width:9px;
  291. background-color: #FF0000;
  292. border: 4px solid #FFf;
  293. }
  294.  
  295. ::selection {
  296. background: #fff; /* background color of highlighted text*/
  297. color: #FF0000; /* color of highlighted text*/
  298. text-shadow: 0 0 3px #00FF00; /*shadow of highlighted text*/
  299. }
  300. ::-moz-selection {
  301. background: #fff; /* background color of highlighted
  302. text*/
  303. color: #FF0000; /* color of highlighted text*/
  304. text-shadow: 0 0 3px #00FF00; /*shadow of highlighted text*/
  305. }
  306.  
  307. #tree{
  308. position:fixed;
  309. z-index:99999999999;
  310. margin-top:500px;
  311. margin-left:170px;
  312. background-image:url(http://www.u.arizona.edu/~patricia/cute-collection/christmas-stuff/tree.gif);
  313. }
  314.  
  315. @font-face { font-family: "stars"; src: url('http://static.tumblr.com/hcfbjje/sfRlpm8t0/starsfromoureyes.ttf'); }
  316. @font-face { font-family: "neverletgo"; src: url('http://static.tumblr.com/q54tzar/o02m2jt6c/neverletgo_3_.ttf'); }
  317. @font-face { font-family: "pewp"; src: url('http://static.tumblr.com/bepad33/6M6m295eu/delius-regular.ttf'); }
  318.  
  319. @font-face { font-family: "caviardreams"; src: url('http://static.tumblr.com/4yxykdm/xXTlrecqr/caviardreams.ttf'); }
  320.  
  321. </style>
  322. <title>Talk to Me</title>
  323. <div id="blogtitle">Talk to Me</div>
  324. <div id="border"></div>
  325. <!--
  326. Put your About Me here!
  327. -->
  328. <div id="about"><br>
  329. <center><p><div style="font-family: stars; color:#FF0000;
  330. text-shadow:2px 3px 2px #00FF00;"><font size="6">About Me:</font></div><p></center>
  331. Put your about me here! If you write too much than a scrollbar will obviously come to save the day, I love this Christmas-themed ask layout, it's so cute lol. Okay okay okay so I am trying to write a lot to show you an amazing example of the scrollbar, which is so cute omg!!!
  332. </div>
  333. <!--
  334. Put your I Will's here!
  335. -->
  336. <div id="will"><br>
  337. <center><p><div style="font-family: stars; color:#FF0000;
  338. text-shadow:2px 3px 2px #00FF00;"><font size="6">I will:</font></div><p></center>
  339. Put your I Will's here! If you write too much than a scrollbar will obviously come to save the day, I love this Christmas-themed ask layout, it's so cute lol. Okay okay okay so I am trying to write a lot to show you an amazing example of the scrollbar, which is so cute omg!!!
  340. </div>
  341. <!--
  342. Put your I Wont's here!
  343. -->
  344. <div id="wont"><br>
  345. <center><p><div style="font-family: stars; color:#FF0000;
  346. text-shadow:2px 3px 2px #00FF00;"><font size="6">I won't:</font></div><p></center>
  347. Put your I Wont's here! If you write too much than a scrollbar will obviously come to save the day, I love this Christmas-themed ask layout, it's so cute lol. Okay okay okay so I am trying to write a lot to show you an amazing example of the scrollbar, which is so cute omg!!!
  348. </div>
  349. <!--
  350. Place your links here.
  351. Replace "Link 1", etc. with the link title. Replace the / with the link. *remember to begin the link with http://
  352. -->
  353. <div id="link1">
  354. <a href="/">Link 1</a>
  355. </div>
  356. <div id="link2">
  357. <a href="/">Link 2</a>
  358. </div>
  359. <div id="link3">
  360. <a href="/">Link 3</a>
  361. </div>
  362. <div id="link4">
  363. <a href="/">Link 4</a>
  364. </div>
  365.  
  366. <div id="tree"></div>
  367.  
  368. <div id="askbox">
  369. <a href="#?w=420"rel="03" class="poplight">Askbox</a>
  370. </div>
  371. <body onkeydown="return false">
  372. </body>
  373. <div style="position:fixed; z-index:9999999999999;bottom:5px; right:5px; background:white; border: 1px solid #cdcdcd; padding: 3px; padding-top: 0px; font-size: 15px; line-height: 20px;"><a href="http://5urprise.tumblr.com"title="Layout by 5urprise!!!">✿</a></div>
  374. <div id="03" class="popup_block">
  375. <div style="
  376. width:auto;height:auto;padding:20px;font-family:caviardreams;font-size:32px;margin-top:-8px;line-height:12px;color:#FF0000;
  377. text-shadow:2px 3px 2px #00FF00; text-align:center;" >
  378. Did you read the FAQ?
  379. </div>
  380.  
  381.  
  382.  
  383. <div style="padding:10px;margin-top:-45px;margin-left:-10px"><br><br><p></font><iframe frameborder="0" scrolling="no" width="430" height="190" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  384. </center></div></iframe></div>
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!