API tools faq
paste
Advertisement
spaqhetti-tacos

Ask layout 2 by spaqhetti-tacos

spaqhetti-tacos
Jul 23rd, 2013
980
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.09 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Layout for ask page by spaqhetti-tacos, keep the credit please i worked hard on this!
  3. -->
  4.  
  5. <html>
  6. <head>
  7.  
  8. <script type="text/javascript"
  9. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  10. <script>
  11. $(document).ready(function() {
  12. //
  13. $('a.poplight[href^=#]').click(function() {
  14. var popID = $(this).attr('rel'); //Get Popup Name
  15. var popURL = $(this).attr('href'); //Get Popup href to define size
  16. var query= popURL.split('?');
  17. var dim= query[1].split('&');
  18. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  19. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  20. var popMargTop = ($('#' + popID).height() + 80) / 2;
  21. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  22. //Apply Margin to Popup
  23. $('#' + popID).css({
  24. 'margin-top' : -popMargTop,
  25. 'margin-left' : -popMargLeft
  26. });
  27. $('body').append('<div id="fade"></div>');
  28. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  29. return false;
  30. });
  31. $('a.close, #fade').live('click', function() {
  32. $('#fade , .popup_block').fadeOut(function() {
  33. $('#fade, a.close').remove(); //fade them both out
  34. });
  35. return false;
  36. });
  37. });
  38. </script>
  39.  
  40. <script type="text/javascript">
  41. </script>
  42.  
  43.  
  44. <style type="text/css">
  45.  
  46. #fade { /*--Transparent background layer--*/
  47. display: none; /*--hidden by default--*/
  48. background: #000;
  49. position: fixed; left: 0; top: 0;
  50. width: 100%; height: 100%;
  51. opacity: 0;
  52. z-index: 9999;
  53. }
  54. .popup_block{
  55. display: none; /*--hidden by default--*/
  56. padding: 20px;
  57. box-shadow: 0px 0px 1px #333;
  58. border: 5px solid #fff;
  59. background-color: #eee;
  60. float: left;
  61. font-family: "calibri";
  62. color: #000;
  63. font-size: 15px;
  64. position: fixed;
  65. top: 60%; left: 55.5%;
  66. z-index: 999999999999999999999999999999999999999999;
  67. transition: all 0.4s ease-out;
  68. -o-transition-transition: all 0.4s ease-out;
  69. -webkit-transition: all 0.4s ease-out;
  70. -moz-transition: all 0.4s ease-out;
  71. /*--CSS3 Box Shadows--*/
  72. -webkit-box-shadow: 0px 0px 0px #fff;
  73. -moz-box-shadow: 0px 0px 0px #fff;
  74. box-shadow: 0px 0px 3px #333;
  75. /*--CSS3 Rounded Corners--*/
  76. }
  77.  
  78. img.btn_close {
  79. float: right;
  80. margin: 5 0px 0 0;
  81. }
  82.  
  83. /*--Making IE6 Understand Fixed Positioning--*/
  84.  
  85. *html #fade {
  86.  
  87. position: absolute;
  88.  
  89. }
  90.  
  91. *html .popup_block {
  92.  
  93. position: absolute;
  94.  
  95. }
  96.  
  97. ::-webkit-scrollbar {width: 2px; height: 4px; background: #fff; }
  98.  
  99. ::-webkit-scrollbar-thumb { background-color: #919191; -webkit-border-radius: 1ex; }
  100.  
  101.  
  102.  
  103. a:link, a:active, a:visited{
  104. color: #000;
  105. text-decoration: none;
  106. -webkit-transition: color 0.3s ease-in;
  107. -moz-transition: color 0.3s ease-in;
  108. }
  109.  
  110. a:hover {
  111. text-decoration: none;
  112. text-shadow: 0px 0px 6px #fff;
  113. font-style:;
  114. color: #ddd;
  115. }
  116.  
  117.  
  118.  
  119. @font-face { font-family: "rose"; src: url('http://static.tumblr.com/zux19tj/NaYmhkpum/anjelika_rose_1_.ttf'); }
  120.  
  121.  
  122. @font-face { font-family: "ekhlas"; src: url('http://static.tumblr.com/vtg00tr/lLzmopqqe/dandelion_in_the_spring.ttf'); }
  123.  
  124.  
  125.  
  126. #title {
  127. position:fixed !important;
  128. z-index: 2;
  129. overflow: hidden;
  130. opacity: 1;
  131. width: 850px;
  132. height: 30px;
  133. color: #000;
  134. background: #fff; /*--change background color for title box--*/
  135. padding: 10px;
  136. margin-left: 190px;
  137. margin-top: 20px;
  138. text-align: center;
  139. letter-spacing: 3px;
  140. font-size: 37px; /*--change font size--*/
  141. font-family: "ekhlas";
  142. border: 1px solid #ddd;
  143. box-shadow: 0px 0px 3px #333;
  144. text-transform: uppercase;
  145. -webkit-border-top-right-radius: 6px;
  146. -webkit-border-bottom-right-radius: 6px;
  147. -webkit-border-bottom-left-radius: 6px;
  148. -webkit-border-top-left-radius: 6px;
  149. -webkit-transition: all .5s ease-in-out;
  150. -moz-transition: all .5s ease-in-out;
  151. -o-transition: all .5s ease-in-out;
  152. transition: all .5s ease-in-out;
  153. }
  154.  
  155.  
  156. #aboutme {
  157. position:fixed !important;
  158. overflow: hidden;
  159. z-index:3;
  160. opacity: 3;
  161. width: 460px;
  162. height: 120px;
  163. color: ;
  164. box-shadow: 0px 0px 1px #333; /*--color for the shadow change it if you want (behind the #)--*/
  165. border: 5px solid #fff; /*--increase the px number to make the border bigger or change the color after #--*/
  166. background-color: #eee; /*--change the background color--*/
  167. padding: 6px;
  168. margin-left: 480px;
  169. margin-top: 140px;
  170. font-family: "calibri";
  171. font-size: 15px;
  172. overflow-y: scroll;
  173. overflow-x: hidden;
  174. }
  175.  
  176.  
  177. #picture {
  178. position:fixed !important;
  179. overflow: hidden;
  180. opacity: 3;
  181. z-index: 3;
  182. width: 150px;
  183. height: 150px;
  184. color: ;
  185. border: 2px solid #fff; /*--increase the px number to make the border bigger or change the color after #--*/
  186. background-color: #eee; /*--change the background color--*/
  187. padding: 6px;
  188. margin-left: 230px;
  189. margin-top: 130px;
  190. font-family: "consolas";
  191. font-size: 13px;
  192. }
  193.  
  194.  
  195. #msg {
  196. position:fixed !important;
  197. overflow: hidden;
  198. z-index:3;
  199. opacity: 3;
  200. width: 460px;
  201. height: 160px;
  202. color: ;
  203. box-shadow: 0px 0px 1px #333; /*--color for the shadow change it if you want (behind the #)--*/
  204. border: 5px solid #fff;/*--increase the px number to make the border bigger or change the color after #--*/
  205. background-color: #eee;/*--change the background color--*/
  206. padding: 6px;
  207. margin-left: 480px;
  208. margin-top: 300px;
  209. font-family: "calibri";
  210. font-size: 15px;
  211. overflow-y: scroll;
  212. overflow-x: hidden;
  213. }
  214.  
  215.  
  216. #ask {
  217. position:fixed !important;
  218. z-index: 3;
  219. overflow: hidden;
  220. opacity: 1;
  221. width: 460px;
  222. line-height:35px;
  223. height: 28px;
  224. padding: 0px;
  225. padding-left:15px;
  226. text-align:center;
  227. box-shadow: 0px 0px 1px #333; /*--color for the shadow change it if you want (behind the #)--*/
  228. border: 5px solid #fff;/*--increase the px number to make the border bigger or change the color after #--*/
  229. background-color: #eee; /*--change the background color--*/
  230. margin-left: 480px;
  231. margin-top: 505px;
  232. font-family: ekhlas;
  233. font-size:22px;
  234. }
  235.  
  236.  
  237.  
  238. #link1 {
  239. position:fixed !important;
  240. overflow: hidden;
  241. z-index:3;
  242. opacity: 2;
  243. width: 125px;
  244. height: 24px;
  245. color: #ddd:
  246. padding: 4px;
  247. padding-top:3px;
  248. text-align: center;
  249. border: 1px solid #ddd; /*--increase the px number to make the border bigger or change the color after #--*/
  250. background-color:#fff; /*--change the background color--*/
  251. margin-left: 250px;
  252. margin-top: 320px;
  253. font-family: "rose";
  254. font-size: 20px;
  255. line-height: 20px;
  256. border-radius: 5px;
  257. }
  258.  
  259. #link2 {
  260. position:fixed !important;
  261. overflow: hidden;
  262. z-index:3;
  263. opacity: 2;
  264. width: 125px;
  265. height: 24px;
  266. color: #ddd:
  267. padding: 4px;
  268. padding-top:3px;
  269. text-align: center;
  270. border: 1px solid #ddd; /*--increase the px number to make the border bigger or change the color after #--*/
  271. background-color:#fff; /*--change the background color--*/
  272. margin-left: 250px;
  273. margin-top: 370px;
  274. font-family: "rose";
  275. font-size: 20px;
  276. line-height: 20px;
  277. border-radius: 5px;
  278. }
  279.  
  280. #link3 {
  281. position:fixed !important;
  282. overflow: hidden;
  283. z-index:3;
  284. opacity: 2;
  285. width: 125px;
  286. height: 24px;
  287. color: #ddd:
  288. padding: 4px;
  289. padding-top:3px;
  290. text-align: center;
  291. border: 1px solid #ddd; /*--increase the px number to make the border bigger or change the color after #--*/
  292. background-color:#fff; /*--change the background color!--*/
  293. margin-left: 250px;
  294. margin-top: 420px;
  295. font-family: "rose";
  296. font-size: 20px;
  297. line-height: 20px;
  298. border-radius: 5px;
  299. }
  300.  
  301. #link4 {
  302. position:fixed !important;
  303. overflow: hidden;
  304. z-index:3;
  305. opacity: 2;
  306. width: 125px;
  307. height: 24px;
  308. color: #ddd:
  309. padding: 4px;
  310. padding-top:3px;
  311. text-align: center;
  312. border: 1px solid #ddd; /*--increase the px number to make the border bigger or change the color after #--*/
  313. background-color:#fff; /*--change the background color--*/
  314. margin-left: 250px;
  315. margin-top: 470px;
  316. font-family: "rose";
  317. font-size: 20px;
  318. line-height: 20px;
  319. border-radius: 5px;
  320. }
  321.  
  322. #link5{
  323. position:fixed !important;
  324. overflow: hidden;
  325. z-index:3;
  326. opacity: 2;
  327. width: 125px;
  328. height: 24px;
  329. color: #ddd:
  330. padding: 4px;
  331. padding-top:3px;
  332. text-align: center;
  333. border: 1px solid #ddd; /*--increase the px number to make the border bigger or change the color after #--*/
  334. background-color:#fff; /*--change the background color--*/
  335. margin-left: 250px;
  336. margin-top: 520px;
  337. font-family: "rose";
  338. font-size: 20px;
  339. line-height: 20px;
  340. border-radius: 5px;
  341. }
  342.  
  343.  
  344. /*--DONT TOUCH PLEASE--*/
  345. #credit {
  346. position:fixed !important;
  347. overflow: hidden;
  348. opacity: 1;
  349. width: 20px;
  350. height: 15px;
  351. color: #000:
  352. padding: 0px;
  353. padding-top: 7px;
  354. border: 1px solid #ddd;
  355. background-color:white;
  356. margin-left: -16px;
  357. margin-top: -16px;
  358. font-family: "calibri";
  359. font-size: 15px;
  360. line-height: 8px;
  361. text-align: center;
  362. border-radius:2p;
  363. }
  364.  
  365. .sideback{
  366. position:fixed;
  367. margin-left:210px;
  368. top: 130px;
  369. background: #ddd;
  370. background-image:url("http://24.media.tumblr.com/c86b9569b947d5b82d8cdd0ec8996c9f/tumblr_moxg7kiXC81rec3f5o1_500.jpg");/*--change the background image by putting another url between the two " " or keep it!--*/
  371. height:455px;
  372. border: 3px solid #fff;
  373. -moz-box-shadow:10px 10px 5px #ddd;
  374. -webkit-box-shadow:10px 10px 5px #ddd;
  375. box-shadow:0px 0px 2px #333;
  376. opacity:5;
  377. width:200px;
  378. border-bottom:3px solid #fff;
  379. border-left: 3px solid #fff;
  380. border-right: 3px solid #fff;
  381. }
  382.  
  383. .sideback1{
  384. position:fixed;
  385. margin-left:450px;
  386. top: 130px;
  387. background-image:url("http://24.media.tumblr.com/c86b9569b947d5b82d8cdd0ec8996c9f/tumblr_moxg7kiXC81rec3f5o1_500.jpg");/*--change the background image by putting another url between the two " " or keep it!--*/
  388. background-size:cover;
  389. height:455px;
  390. border: 3px solid #fff;
  391. -moz-box-shadow:10px 10px 5px #ddd;
  392. -webkit-box-shadow:10px 10px 5px #ddd;
  393. box-shadow:0px 0px 2px #333;
  394. opacity:5;
  395. width:530px;
  396. border-bottom:3px solid #fff;
  397. border-left: 3px solid #fff;
  398. border-right: 3px solid #fff;
  399. }
  400.  
  401.  
  402.  
  403. body {
  404. background-image:url("http://static.tumblr.com/ko3o6ju/OC6lsn1qx/wood.jpg"); /*--change the background image by putting another url between the two " " or keep it!--*/
  405. background-size: cover;
  406. margin: 0;
  407. padding: 20px;
  408. }
  409.  
  410. /*I RECCOMMEND TO NOT TOUCH ANY OF THIS LOLz*/
  411. #infscr-loading{
  412. bottom: -70px;
  413. position: absolute;
  414. left: 50%;
  415. margin-left:-8px;
  416. width:16px;
  417. height:11px;
  418. overflow:hidden;
  419. margin-bottom: 50px;
  420. }
  421.  
  422. #postnotes{
  423. text-align: justify;}
  424.  
  425. #postnotes blockquote{
  426. border: 0px;}
  427.  
  428. blockquote{
  429. padding:0px 0px 2px 5px;
  430. margin:0px 0px 2px 10px;
  431. border-left: 1px dotted #555555;
  432. }
  433.  
  434. blockquote p, ul{
  435. margin:0px;
  436. padding:0px;
  437. }
  438.  
  439. a img{border: 0px;}
  440.  
  441.  
  442. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  443.  
  444. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  445. .user_7 .label, .user_8 .label, .user_9 .label {color:{color:text};}
  446.  
  447. .notes img{width:20px; position:relative; top:3px;}
  448. <--ses-->
  449. small{font-size: 90%;}
  450.  
  451.  
  452.  
  453. </style>
  454.  
  455.  
  456.  
  457. <div id="title">
  458. PUT YOUR TITLE HERE
  459. </div>
  460.  
  461.  
  462. <div id="link1">
  463. <a href="PUT LINK1 HERE">link1 title</a>
  464. </div>
  465.  
  466.  
  467. <div id="link2">
  468. <a href="PUT LINK2 HERE">link2 title</a>
  469. </div>
  470.  
  471. <div id="link3">
  472. <a href="PUT LINK3 HERE">link3 title</a>
  473. </div>
  474.  
  475. <div id="link4">
  476. <a href="PUT LINK4 HERE">link4 title</a>
  477. </div>
  478.  
  479. <div id="link5">
  480. <a href="http://spaqhetti-tacos.tumblr.com">Credit</a>
  481. </div>
  482.  
  483. <div id="credit">
  484. <a href="http://spaqhetti-tacos.tumblr.com">©</a>
  485. </div>
  486.  
  487.  
  488. <div id="aboutme"> TYPE YOUR ABOUT ME here woot woot use < br > without spaces to create a new paragraph<br>
  489. like<br>
  490. this<br></div>
  491.  
  492.  
  493. <div id="picture">
  494. <a href="/"><img src="PICTURE URL HERE" align="left" style="width:147px; height:147px; border:2px solid #fff"></a></p></center>
  495. </div>
  496.  
  497. <div id="msg">
  498.  
  499. type in your faq here. if it's too long then a scrollbar will be provided yay.
  500.  
  501. </div>
  502.  
  503.  
  504. <div id="ask">
  505. <a href='#?w=435' rel='02' class='poplight'">Click for ask box!</a>
  506. </div>
  507.  
  508.  
  509.  
  510. <div class="sideback"></div>
  511. <div class="sideback1"></div>
  512.  
  513. </body>
  514.  
  515. <div id="02" class="popup_block">
  516.  
  517. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/PUT YOUR USER NAME HERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
  518. <!--[if IE]>
  519. <script type="text/javascript">
  520. document.getElementById('ask_form').allowTransparency = true;
  521. </script>
  522. <![endif]-->
  523.  
  524. </div></div></div></div></div></div></div></div></div></div>
  525.  
  526. </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!