API tools faq
paste
alydae

faq i

alydae
Oct 15th, 2017 (edited)
4,231
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. FAQ I
  7. by alydae
  8.  
  9. released: october 15, 2017
  10. last updated: november 19, 2024
  11.  
  12. - do not steal any part of this code
  13. - do not even TOUCH the credit
  14. - direct questions to enchantedthemes.tumblr.com
  15.  
  16. thank you for using!!!
  17.  
  18. -->
  19.  
  20. <title>faq</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22.  
  23. <!-- scripts - DO NOT TOUCH -->
  24.  
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.  
  27. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  28. <script>
  29. (function($){
  30. $(document).ready(function(){
  31. $("[title]").style_my_tooltips({
  32. tip_follows_cursor:true,
  33. tip_delay_time:200,
  34. tip_fade_speed:300
  35. }
  36. );
  37. });
  38. })(jQuery);
  39. </script>
  40.  
  41. <script>
  42. $(document).ready(function(){
  43. $(".askbox").click(function(){
  44. $(".boxes").slideToggle();
  45. });
  46. });
  47. </script>
  48.  
  49. <!-- custom font -->
  50.  
  51. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  52.  
  53. <link href=“//use.fontawesome.com/releases/v6.5.1/css/all.css” rel=“stylesheet”>
  54. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  55. <link rel="stylesheet" href="https://static.tumblr.com/p0knose/GQToiq7ub/outicons.css" type="text/css">
  56.  
  57.  
  58. <style type="text/css">
  59.  
  60. @keyframes fadein {
  61. from { opacity:0; }
  62. to { opacity:1; }
  63. }
  64.  
  65. @-moz-keyframes fadein {
  66. from { opacity:0; }
  67. to { opacity:1; }
  68. }
  69.  
  70. @-webkit-keyframes fadein {
  71. from { opacity:0; }
  72. to { opacity:1; }
  73. }
  74.  
  75. @-ms-keyframes fadein {
  76. from { opacity:0; }
  77. to { opacity:1; }
  78. }
  79.  
  80. @-o-keyframes fadein {
  81. from { opacity:0; }
  82. to { opacity:1; }
  83. }
  84.  
  85. /*-- selection --*/
  86.  
  87. ::-moz-selection { background:var(--accent); color:var(--title); }
  88. ::selection { background:var(--accent); color:var(--title); }
  89.  
  90. /*-- scrollbar --*/
  91.  
  92. ::-webkit-scrollbar {
  93. width:1px;
  94. height:2px;
  95. }
  96.  
  97. ::-webkit-scrollbar-thumb { background-color:var(--text); }
  98.  
  99. /*-- tooltips --*/
  100.  
  101. #s-m-t-tooltip {
  102. color:var(--text);
  103. background-color:var(--accent);
  104. font-size:calc(var(--font-size) - 2px);
  105. font-family:'Open Sans', helvetica, sans-serif;
  106. letter-spacing:1px;
  107. text-transform:uppercase;
  108. text-align:center;
  109. position:absolute;
  110. padding:0px 5px 0px 5px;
  111. margin-top:30px;
  112. border:1px solid var(--borders);
  113. z-index:9999;
  114. }
  115.  
  116. /*-- tumblr controls --*/
  117.  
  118. .tmblr-iframe, .iframe-controls–desktop {
  119. display:none!important;
  120. }
  121.  
  122. /*-- change all variables here --*/
  123.  
  124. :root {
  125. --background:#fff;
  126. --accent:#fafafa;
  127. --text:#666;
  128. --links:#444;
  129. --links-hover:#bad1e7;
  130. --title:#222;
  131. --borders:#eee;
  132. --font-size:10px;
  133. }
  134.  
  135. /*-- common --*/
  136.  
  137. body, #title span, #links, .question i, .answer i {
  138. background-color:var(--background);
  139. }
  140.  
  141. table { border:1px solid var(--background); }
  142. tr { border-bottom:50px solid var(--background); }
  143.  
  144. .question i { border:1px solid var(--borders); }
  145. #title:after { border-top:1px solid var(--borders); }
  146. .answer h1, .answer h2 { border-bottom:1px solid var(--borders); }
  147. .question, .answer {
  148. border-left:1px solid var(--borders);
  149. border-right:1px solid var(--borders);
  150. }
  151.  
  152. /*-- general customisation --*/
  153.  
  154. body {
  155. color:var(--text);
  156. font-style:normal;
  157. font-family:'Open Sans', helvetica, sans-serif;
  158. font-size:var(--font-size);
  159. font-weight:400;
  160. text-decoration:none;
  161. line-height:180%;
  162. -moz-osx-font-smoothing: grayscale;
  163. -webkit-font-smoothing: antialiased;
  164. font-smoothing: antialiased;
  165. -webkit-animation: fadein 1.5s;
  166. -moz-animation: fadein 1.5s;
  167. -o-animation: fadein 1.5s;
  168. animation: fadein 1.5s;
  169. }
  170.  
  171. a { text-decoration:none; color:var(--links); }
  172. a:hover { color:var(--links-hover); cursor:pointer; }
  173.  
  174. a, a:hover {
  175. transition-duration: 0.6s;
  176. -moz-transition-duration: 0.6s;
  177. -webkit-transition-duration: 0.6s;
  178. -o-transition-duration: 0.6s;
  179. }
  180.  
  181. b, strong { font-weight:600; color:var(--title); }
  182. i, em { font-style:italic; }
  183.  
  184. /*-- header --*/
  185.  
  186. header {
  187. position:relative;
  188. margin:150px auto 0;
  189. width:600px;
  190. height:40px;
  191. }
  192.  
  193. header img {
  194. float:left;
  195. width:40px;
  196. height:40px;
  197. border-radius:5px;
  198. }
  199.  
  200. #title {
  201. float:left;
  202. margin-left:20px;
  203. line-height:40px;
  204. text-transform:uppercase;
  205. font-size:calc(var(--font-size) + 4px);
  206. font-weight:bold;
  207. letter-spacing:2px;
  208. color:var(--title);
  209. }
  210.  
  211. #title span { padding-right:20px; }
  212.  
  213. #title:after {
  214. content:"";
  215. position:absolute;
  216. top:20px;
  217. bottom:0;
  218. left:60px;
  219. right:0;
  220. height:1px;
  221. z-index:-1;
  222. }
  223.  
  224. #links {
  225. float:right;
  226. line-height:40px;
  227. padding-left:13px;
  228. font-style:italic;
  229. }
  230.  
  231. #links a { margin-left:7px; }
  232.  
  233. /*-- content --*/
  234.  
  235. #content {
  236. position:relative;
  237. width:600px;
  238. margin:50px auto 150px;
  239. }
  240.  
  241. /*-- questions --*/
  242.  
  243. table {
  244. position:relative;
  245. width:100%;
  246. margin-bottom:0px;
  247. border-collapse:collapse;
  248. }
  249.  
  250. td { padding:10px; width:50%; }
  251.  
  252. .question {
  253. font-style:italic;
  254. font-weight:600;
  255. font-size:calc(var(--font-size) + 1px);
  256. color:var(--title);
  257. background:var(--accent);
  258. }
  259.  
  260. .question i {
  261. color:var(--title);
  262. font-size:calc(var(--font-size) + 8px);
  263. text-align:center;
  264. font-size:calc(var(--font-size) + 8px);
  265. padding:7px;
  266. margin-right:10px;
  267. float:left;
  268. }
  269.  
  270. .answer { vertical-align:top; }
  271.  
  272. .answer h1, .answer h2 {
  273. margin-top:-10px;
  274. margin-bottom:5px;
  275. margin-right:-10px;
  276. padding-bottom:5px;
  277. font-style:italic;
  278. font-weight:600;
  279. font-size:calc(var(--font-size) + 1px);
  280. color:var(--title);
  281. }
  282.  
  283. .answer h2 {
  284. margin-left:-10px;
  285. margin-right:0px;
  286. padding-left:10px;
  287. }
  288.  
  289. /*-- ask and submit boxes --*/
  290.  
  291. .askbox { text-align:center; font-style:italic; }
  292. .askbox:hover { cursor:pointer; }
  293.  
  294. .boxes { display:none; }
  295.  
  296. /*-- credit - DO NOT TOUCH --*/
  297.  
  298. .credit a {
  299. font-size:10px;
  300. bottom:15px;
  301. right:20px;
  302. position:fixed;
  303. text-transform:uppercase;
  304. }
  305.  
  306. </style>
  307. </head>
  308.  
  309.  
  310. <body>
  311.  
  312.  
  313. <header>
  314. <!-- the default is your icon. if you want to change it, remove {PortraitURL-128} and replace it with the image url of the one you want. -->
  315. <img src="{PortraitURL-128}"/>
  316. <div id="title"><span>questions and answers</span></div> <!-- title -->
  317. <div id="links">
  318. <!-- feel free to add more! -->
  319. <a href="/">index</a>
  320. <a href="/">link</a>
  321. <a href="/archive">archive</a>
  322. </div>
  323. </header>
  324.  
  325.  
  326. <div id="content">
  327.  
  328. <!-- EDITING YOUR QUESTIONS AND ANSWERS
  329.  
  330. there are two layouts available and each of them have different templates.
  331.  
  332. 1. question on the left, answer on the right
  333. <tr>
  334. <td class="question">
  335. <i class="fas fa-question"></i>
  336. this is your question</td>
  337. <td class="answer">
  338. <h1>[username] answered:</h1>
  339. and this is your answer</td>
  340. </tr>
  341.  
  342. 2. answer on the left, question on the right
  343. <tr>
  344. <td class="answer">
  345. <h2>[username] answered:</h2>
  346. and this is your answer</td>
  347. <td class="question">
  348. <i class="fas fa-question"></i>
  349. this is your question</td>
  350. </tr>
  351.  
  352. with both layouts, the question mark icon and the 'username answered' header are optional - if you don't want them, just delete that line. [username] is where you put your url or your name, or if you don't like that subtitle, change it to whatever you want!
  353.  
  354. -->
  355.  
  356. <table>
  357. <tr>
  358. <td class="question">
  359. <i class="fas fa-question"></i>
  360. this is your question</td>
  361. <td class="answer">
  362. <h1>[username] answered:</h1>
  363. and this is your answer</td>
  364. </tr>
  365.  
  366. <tr>
  367. <td class="answer">
  368. <h2>[username] answered:</h2>
  369. and this is your answer</td>
  370. <td class="question">
  371. <i class="fas fa-question"></i>
  372. this is your question</td>
  373. </tr>
  374.  
  375. <tr>
  376. <td class="question">
  377. <i class="fas fa-question"></i>
  378. this is your question</td>
  379. <td class="answer">
  380. <h1>[username] answered:</h1>
  381. and this is your answer</td>
  382. </tr>
  383.  
  384. <tr>
  385. <td class="answer">
  386. <h2>[username] answered:</h2>
  387. and this is your answer</td>
  388. <td class="question">
  389. <i class="fas fa-question"></i>
  390. this is your question</td>
  391. </tr>
  392. </table>
  393.  
  394. <!-- optional description -->
  395. <p>this is an optional description</p>
  396.  
  397.  
  398. <!-- EDITING THE ASK AND SUBMIT BOXES
  399.  
  400. by default, the ask and submit boxes are hidden and will show on click. if you don't want that to happen, delete the following sections
  401.  
  402. class="askbox"
  403. <div class="boxes"> and the </div> after the submit box
  404.  
  405. -->
  406.  
  407. <p class="askbox">continue to my ask and submit boxes</p>
  408.  
  409. <div class="boxes">
  410. <!-- ask box - delete the section below if not required -->
  411. <iframe frameborder="0" border="0" scrolling="no" width="100%" height="190px" allowtransparency="true" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  412. <!-- submit box - delete the section below if not required -->
  413. <p><iframe frameborder="0" border="0" scrolling="no" width="100%" height="370px" allowtransparency="true" src="https://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  414. </div>
  415.  
  416. <p>
  417.  
  418.  
  419. </div><!-- end content -->
  420.  
  421.  
  422. <!-- credit - DO NOT TOUCH -->
  423.  
  424. <div class="credit">
  425. <a href="https://enchantedthemes.tumblr.com" title="alydae">A.</a>
  426. </div>
  427.  
  428.  
  429. </body>
  430. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!