API tools faq
paste
Advertisement
spacethemes

Askbox1 - Shooting Star

spacethemes
Jul 1st, 2014
4,283
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.25 KB | None | 0 0
raw download clone embed print report
  1. <!--*********************************************************************
  2.  
  3. 88888888888 888888888888 8888 88888888888 88888888888
  4. 88888888888 8888 8888 888888 88888888888 88888888888
  5. 8888 8888 8888 88 88 8888 8888
  6. 8888 8888 8888 888 888 8888 8888
  7. 88888888888 888888888888 888888888888 8888 88888888888
  8. 8888 8888 88888888888888 8888 8888
  9. 8888 8888 8888 8888 8888 8888
  10. 88888888888 8888 8888 8888 88888888888 88888888888
  11. 88888888888 8888 88888 88888 88888888888 88888888888
  12.  
  13.  
  14. SPACETHEMES - BY HOXTONHEROS & ALIENSFROMHELL
  15. HTTP://SPACETHEMES.TUMBLR.COM
  16. HTTP://HOXTONHEROS.TUMBLR.COM & HTTP://ALIENSFROMHELL.TUMBLR.COM
  17.  
  18. DON'T REMOVE CREDIT!
  19. ***************************************************************************
  20.  
  21. HOW TO INSTALL THIS ASKBOX ?
  22.  
  23. -> First you will have to go to click on edit theme or customize.
  24. -> Scroll down till you are at the bottom and click on "Add a page".
  25. -> There you'll see "Standard Layout", click on that and select "Custom Layout".
  26. -> Give your page a url such as message, msg, askbox or even unicorn. Hower do not use "ask" or "submit" as the name of the page because this will cause the page to stop working.
  27. -> Paste this code on the custom layout page and edit the code however you like. We left instructions inside the code.
  28. -> Save the page and make a link from your blog to the page. Example a link to http://www.spacethemes.tumblr/com/askbox1
  29.  
  30. HOPE THIS HELPED, ENJOY USING OUR ASKBOX!
  31. DON'T REMOVE CREDIT
  32. -->
  33.  
  34.  
  35.  
  36. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  37.  
  38. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  39.  
  40. <head>
  41.  
  42.  
  43. <title>{Title}</title>
  44.  
  45. <link rel="shortcut icon" href="{favicon}">
  46.  
  47. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  48.  
  49. <meta name="description" content="{MetaDescription}" />
  50.  
  51. <head>
  52.  
  53. <script src="http://static.tumblr.com/kcrxiw3/LDBlqq9ia/jquerry.js"></script>
  54. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  55.  
  56. <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
  57.  
  58. <link href='http://fonts.googleapis.com/css?family=Quicksand:300' rel='stylesheet' type='text/css'>
  59.  
  60. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  61.  
  62. <script src="http://static.tumblr.com/7u4rsen/zyLmzgpre/jqueryinfintescroll.js"></script>
  63.  
  64. <script>
  65.  
  66. (function($){
  67.  
  68. $(document).ready(function(){
  69.  
  70. $("a[title]").style_my_tooltips({
  71.  
  72. tip_follows_cursor:true,
  73.  
  74. tip_delay_time:90,
  75.  
  76. tip_fade_speed:600,
  77.  
  78. attribute:"title"
  79.  
  80. });
  81.  
  82. });
  83.  
  84. })(jQuery);
  85.  
  86. </script>
  87.  
  88.  
  89. <style type="text/css">
  90.  
  91. ::-webkit-scrollbar {
  92. /*This is where you change the scrollbar width*/
  93. width: 4px;
  94. height:auto;
  95. background:{color:background}
  96. }
  97.  
  98. ::-webkit-scrollbar-corner {
  99. background:#ffffff
  100. }
  101.  
  102. ::-webkit-scrollbar-thumb:vertical {
  103. /*This is where you change the scrollbar color*/
  104. background: #f3f3f3;
  105. };
  106.  
  107.  
  108. body {
  109. padding:0px;
  110. margin:0px;
  111. }
  112.  
  113. .wrapper {
  114. margin: 0px auto;
  115. width:500px;
  116. }
  117.  
  118. .background {
  119. position:fixed;
  120. left:0px;
  121. top:0px;
  122.  
  123. /*This is where you can change background color*/
  124. background-color:#f2f2f2;
  125.  
  126. /*This is where you can insert a background image*/
  127. background-image:url(IMAGE URL HERE);
  128.  
  129. /*This is a link to the background we use in the preview, place it in background-image to use it --> http://static.tumblr.com/4969b983f856b55be3699e917b368dc4/7u4rsen/tm0n70zqh/tumblr_static_69ljhuyhfdkw8sgokw0w4gwk0.png */
  130. width:100%;
  131. Height:100%;
  132. background-attachment: fixed !important;
  133.  
  134. /*Remove this if you want your background image to repeat*/
  135. background-size: cover;
  136.  
  137. }
  138.  
  139. #box {
  140. position:fixed;
  141. width:470px;
  142. height:370px;
  143. padding:8px;
  144. margin-left:5px;
  145. top:20%;
  146.  
  147. /*Change box background color here*/
  148. background-color:#FFFFFF;
  149.  
  150. /*By increasing the number the radius of the box will increase giving the box round borders*/
  151. border-radius:0px;
  152.  
  153. /* This is where you change the shadow, by putting everything on 0 the shadow will dissapear*/
  154. box-shadow:rgba(0,0,0,0.07) 6px 6px;
  155. }
  156.  
  157. #icon img{
  158. position:relative;
  159. float:left;
  160. width:100px;
  161. height:100px;
  162. padding:8px;
  163.  
  164. /*By decreasing the number the radius of the icon will decrease*/
  165. border-radius:60px;
  166. }
  167.  
  168. #title {
  169. width:470px;
  170. height:auto;
  171. font-size:65px;
  172. text-align:center;
  173. line-height:90%;
  174.  
  175. /*This is where you change the font of the title*/
  176. font-family: 'Quicksand', sans-serif;
  177.  
  178. /*This is where you change the color of the title*/
  179. color:black;
  180. }
  181.  
  182. #faq {
  183. position:relative;
  184. width:340px;
  185. float:left;
  186. height:auto;
  187. padding:5px;
  188. text-align: left;
  189. font-size:12px;
  190. line-height:110%;
  191. max-height:100px;
  192. overflow-x:hidden;
  193. overflow-y:scroll;
  194.  
  195. /*This is where you change the text color*/
  196. color:#000000;
  197.  
  198. /*This is where you change the font*/
  199. font-family:Inconsolata;
  200.  
  201. /*This is where you change the font size*/
  202. font-size:10px;
  203. }
  204.  
  205. #linkbox {
  206. position:fixed;
  207. width:auto;
  208. padding:5px;
  209. height:auto;
  210. margin-left:438px;
  211. margin-top:110px;
  212. text-align:center;
  213. }
  214.  
  215. .links {
  216. width:15px;
  217. height:15px;
  218. color:black;
  219. margin:5px 0 5px 0;
  220.  
  221. /*This is where you change the border of the Main links*/
  222. border:1px solid black;
  223.  
  224. /*This is where you change the color of the Main links*/
  225. background-color:black;
  226.  
  227. /*By increasing the number the radius of the links will increase giving it round borders*/
  228. border-radius:0px;
  229.  
  230. text-align:center;
  231. font-size:12px;
  232. display:block;
  233. -webkit-transition: all 0.5s linear;
  234. -moz-transition: all 0.5s linear;
  235. -o-transition: all 0.5s linear;
  236. }
  237.  
  238. .links:hover {
  239. /*This is where you change the border on hover of the Main links*/
  240. border:1px solid black;
  241.  
  242. /*This is where you change the color of the Main links on hover*/
  243. background-color:transparent;
  244.  
  245. -webkit-transition: all 0.5s linear;
  246. -moz-transition: all 0.5s linear;
  247. -o-transition: all 0.5s linear;
  248. }
  249.  
  250. a {
  251. /*This is where you change the color of the links*/
  252. color:gray;
  253.  
  254. text-decoration:none;
  255. outline:none;
  256. opacity:1 ;
  257. -webkit-transition: all 0.8s;
  258. -moz-transition: all 0.8s;
  259. transition: all 0.8s;
  260. }
  261.  
  262. a:hover {
  263. /*This is where you change the color of the links on hover*/
  264. color:#1d1d1d;
  265.  
  266. -webkit-transition: all 0.8s;
  267. -moz-transition: all 0.8s;
  268. transition: all 0.8s;
  269. }
  270.  
  271. #s-m-t-tooltip {
  272. max-width:200px;
  273. z-index:99999999999999;
  274. padding:3px;
  275. font-size:11px;
  276. line-height:10px;
  277. margin:10px 14px 7px 17px;
  278. font-family:Inconsolata;
  279.  
  280. /*This is where you change the color of your tooltips*/
  281. color:gray;
  282.  
  283. /*This is where you change the background color of your tooltips*/
  284. background:#FFFFFF
  285.  
  286. /*Remove these 3 lines if you don't want a tooltip shadow*/
  287. -moz-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255 ,0.3);
  288. -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255 ,255,0.3);
  289. box-shadow:2px 2px 0 rgba(0,0,0,0.15),-1px -1px 0 rgba(255,255,255,0.3 );
  290. }
  291.  
  292. #ask_form {
  293. /*By increasing the number the radius of the askbox will increase giving the askbox round borders*/
  294. border-radius:0px;
  295. }
  296.  
  297. </style>
  298.  
  299.  
  300.  
  301. </head>
  302.  
  303. <body>
  304.  
  305. <div class="background"></div>
  306.  
  307.  
  308. <!--Picture 1 used in the preview get rid of the arrows around the code to use it, you can change position of it by changing the top, bottom, left & right features, you can change the picture by replacing link with the link of picture you want to use -->
  309.  
  310. <!--
  311. <div style="position:fixed; bottom:0px; z-index:0; left:15px;"> <img src="http://static.tumblr.com/4abdab4fa96a456d80ee57d7b0d7802d/xidqzyp/W1lmvlese/tumblr_static_eiffel_tower_with_birds.png" width=360px ></div>
  312. -->
  313.  
  314. <!--Picture 2 (Eiffel Tower)-->
  315.  
  316. <!-- <div style="position:fixed; top:-5px; z-index:0; right:-2px; "> <img src="https://38.media.tumblr.com/a0344a77752fc2f1816557da02b3a487/tumblr_mo7rmwEuYX1rgpyeqo1_500.png" style="-webkit-filter: grayscale(100%);" width=380px ></div> -->
  317.  
  318.  
  319.  
  320. <div class="wrapper">
  321.  
  322. <div id="box">
  323. <!--This is where you change the title-->
  324. <div id="title">TITLE HERE</div>
  325. <!--This is where you change the icon image-->
  326. <div id="icon"><img src="URL HERE"></div>
  327. <div id="faq">
  328.  
  329. This is where your text can go and you can make it as long as you want because it has a scrollbar!
  330.  
  331. </div>
  332. <div id="linkbox">
  333.  
  334. <a href="FIRST LINK GOES HERE" title="FIRST LINK TITLE GOES HERE"><div class="links" style="opacity:0.9"></div></a>
  335.  
  336. <a href="SECOND LINK GOES HERE" title="SECOND LINK TITLE GOES HERE"><div class="links" style="opacity:0.8"></div></a>
  337.  
  338. <a href="THIRD LINK GOES HERE" title="THIRD LINK TITLE GOES HERE"><div class="links" style="opacity:0.7"></div></a>
  339.  
  340. <a href="FOURTH LINK GOES HERE" title="FOURTH LINK TITLE GOES HERE"><div class="links" style="opacity:0.6"></div></a>
  341.  
  342. <a href="FIFTH LINK GOES HERE" title="FIFTH LINK TITLE GOES HERE"><div class="links" style="opacity:0.5"></div></a>
  343.  
  344. <a href="SIXTH LINK GOES HERE" title="SIXTH LINK TITLE GOES HERE"><div class="links" style="opacity:0.4"></div></a>
  345.  
  346. </div>
  347. <iframe frameborder="0" scrolling="no" width="430" height="190" src="http://www.tumblr.com/ask_form/<!--URL GOES HERE-->.tumblr.com" style="background-color:transparent; overflow:hidden; margin-bottom: 5px;" id="ask_form">
  348. </div>
  349.  
  350. </center>
  351.  
  352. </div>
  353.  
  354.  
  355.  
  356.  
  357.  
  358.  
  359. </body>
  360. </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!