API tools faq
paste
Advertisement
cleanful

Fossil / Dark

cleanful
Jan 12th, 2014
222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <!-- Fossil : Dark version (ask + Faq) by Cleanful / Synics. Please do not redistribute or remove credit. -->
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.  
  6. <title>{Title}</title>
  7.  
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  10. <link rel="shortcut icon" href="{Favicon}" />
  11. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  12. <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800,900,500' rel='stylesheet' type='text/css'>
  13.  
  14.  
  15. <style type="text/css">
  16.  
  17. ::-webkit-scrollbar-thumb:vertical {background-color:#2c6096; height: 30px;}::-webkit-scrollbar-thumb:horizontal {
  18. background-color:#2c6096; height: 3px; width: 30px;}
  19. ::-webkit-scrollbar { background-color:#ccc;height: 3px;width: 5px;}::selection {background:#fff;color:#2c6096;}
  20.  
  21. body {
  22. color:#666666;
  23. background:#fff;
  24. font-family: 'Open Sans', sans-serif;
  25. overflow:hidden;
  26. /* this is the background image */
  27. background-image: url(http://31.media.tumblr.com/tumblr_mb17flFV9j1rer207o1_500.jpg);
  28. background-repeat: repeat;
  29. }
  30.  
  31. a {
  32. text-decoration:none;
  33. }
  34. #container {
  35. top:50%;
  36. left:50%;
  37. position:fixed;
  38. }
  39.  
  40. /* navigation customizations; don't touch this stuff unless you want to change the width of the sidebar or background */
  41. #nav {
  42. position:fixed;
  43. top:0px;
  44. height:100%;
  45. background:#eee;
  46. width:100px;
  47. padding-top:35%;
  48. background-image: url(http://24.media.tumblr.com/tumblr_mb17flFV9j1rer207o2_500.jpg);
  49. background-repeat: repeat;
  50. -webkit-transition: all 0.6s ease-in-out;
  51. -moz-transition: all 0.6s ease-in-out;
  52. -o-transition: all 0.6s ease-in-out;
  53. }
  54.  
  55. /* actual navigation formating; you can change the font, color, etc of the links*/
  56.  
  57. #nav a {
  58. background:#fff;
  59. margin-top:2px;
  60. display:block;
  61. text-transform:uppercase;
  62. font-family:calibri;
  63. font-size:9px;
  64. text-align:center;
  65. color:#fff;
  66. background-image: url(http://24.media.tumblr.com/tumblr_mb17flFV9j1rer207o2_500.jpg);
  67. background-repeat: repeat;
  68. opacity:.9;
  69. padding:2px;
  70. -webkit-transition: 0.3s ease-in-out;
  71. -moz-transition: 0.3s ease-in-out;
  72. -o-transition: 0.3sease-in-out;
  73. }
  74.  
  75. #nav a:hover {
  76. background-image: url(http://25.media.tumblr.com/tumblr_lshzwhKCeM1qc99duo1_500.gif);
  77. background-repeat: repeat;
  78. }
  79.  
  80. #nav:hover {
  81. background-position:-20px;
  82. }
  83.  
  84. /* formating of the askbox; don't touch unless you know what you're doing*/
  85. #ask {
  86. position:absolute;
  87. margin-left:-300px;}
  88.  
  89. /* color of the askbox*/
  90. #inboxt {
  91. background:#2f4058;
  92. border:3px double #fff;
  93. opacity:.7;
  94. color:#fff;
  95. padding:10px;
  96. position:absolute;
  97. font-family: 'Raleway';
  98. -webkit-transition: all 0.6s ease-in-out;
  99. -moz-transition: all 0.6s ease-in-out;
  100. -o-transition: all 0.6s ease-in-out;
  101. }
  102.  
  103. #ask:hover #inboxt{
  104. opacity:0;
  105. }
  106.  
  107. #ask:hover #inbox {
  108. opacity:.9;
  109. }
  110.  
  111. /* color of the askbox*/
  112. #inbox {
  113. background:#2f4058;
  114. position:absolute;
  115. opacity:0;
  116. margin-left:-70px;
  117. width:260px;
  118. border-radius:10px;
  119. -webkit-transition: all 0.6s ease-in-out;
  120. -moz-transition: all 0.6s ease-in-out;
  121. -o-transition: all 0.6s ease-in-out;
  122. }
  123.  
  124. /*formatting of the faq */
  125. #faq {
  126. position:absolute;
  127. margin-left:300px;
  128. }
  129.  
  130. /* faq title customizations, font, etc */
  131. #faqt {
  132. background:#2f4058;
  133. border:3px double #fff;
  134. opacity:.7;
  135. color:#fff;
  136. padding:10px;
  137. position:absolute;
  138. font-family: 'Raleway';
  139. -webkit-transition: all 0.6s ease-in-out;
  140. -moz-transition: all 0.6s ease-in-out;
  141. -o-transition: all 0.6s ease-in-out;
  142. }
  143.  
  144. /* faq information; the stuff that appears on hover */
  145. #info {
  146. background:#2f4058;
  147. position:absolute;
  148. opacity:0;
  149. margin-left:-70px;
  150. width:260px;
  151. padding:10px;
  152. color:#fafafa;
  153. font-size:11px;
  154. border-radius:10px;
  155. font-family:calibri;
  156. max-height:200px;
  157. overflow:auto;
  158. -webkit-transition: all 0.6s ease-in-out;
  159. -moz-transition: all 0.6s ease-in-out;
  160. -o-transition: all 0.6s ease-in-out;
  161. }
  162.  
  163. #faq:hover #faqt {opacity:0;}
  164. #faq:hover #info {opacity:.9;}
  165.  
  166. /* a customized title tag you can use for questions */
  167. h1 {
  168. color:#fff;
  169. font-family: 'Raleway';
  170. font-size:15px;
  171. text-transform:uppercase;
  172. font-weight: 400;
  173. }
  174. </style></head>
  175. <body>
  176.  
  177. <div id="container">
  178.  
  179. <!-- here is the faq stuff! -->
  180. <div id="faq">
  181. <div id="faqt">
  182. <!-- faq title -->
  183. faq
  184. </div>
  185.  
  186. <div id="info">
  187. <!-- faq content; use the formating <h1> for the questions </h1> and normal stuff for the answers-->
  188. <h1> This is a question?</h1>
  189. This is thy answer.
  190. <h1> Romeo, Romeo, where thou art thy Romeo?</h1>
  191. No clue google it.
  192. <h1> WHAT IS LOREM IPSUM?</h1>
  193. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  194. <h1> WHAT IS LOREM IPSUM?</h1>
  195. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  196. </div>
  197.  
  198.  
  199.  
  200. </div>
  201.  
  202. <!-- here is the ask stuff! -->
  203. <div id="ask">
  204. <div id="inboxt">
  205. <!-- here is the ask title -->
  206. askbox
  207. </div>
  208.  
  209. <div id="inbox"> <!-- this is important!! where you see OFFICIALSUPPORT / CHANGE IT, AND ADD YOUR URL SO ALL MSGS WILL GO TO YOUR INBOX -->
  210. <p><iframe frameborder="0" scrolling="auto" width="250px" height="250px" src="http://www.tumblr.com/ask_form/officialsupport.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  211.  
  212. </div>
  213.  
  214. </div>
  215.  
  216. <div id="nav">
  217. <!-- these are the navigation links, add more or less! no removing the theme credit! -->
  218. <a href="/">return</a>
  219. <a href="/archive">history</a>
  220. <a href="http://synics.tumblr.com">theme</a>
  221. </div>
  222.  
  223. </div>
  224. </body>
  225. </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!