API tools faq
paste
Advertisement
lacartaqueno

Tumblr Theme #09 by pinksman - FAQ (DD) Page

lacartaqueno
Apr 19th, 2014
1,484
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.64 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Theme 09 by PINKSMAN @ tumblr
  3. FAQ Page with dropdowns
  4. Please, don't remove the credit.
  5. !-->
  6.  
  7.  
  8. <html>
  9. <head>
  10.  
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  12.  
  13. <script>
  14. $(document).ready(function(){
  15.  
  16. $(".slidingDiv").hide();
  17. $(".show_hide").show();
  18.  
  19. $('.show_hide').toggle(function(){
  20. $(".slidingDiv").slideDown(
  21. function(){
  22. $("#navigation").text("navigation")
  23. }
  24. );
  25. },function(){
  26. $(".slidingDiv").slideUp(
  27. function(){
  28. $("#navigation").text("navigation")
  29. }
  30. );
  31. });
  32. });
  33. </script>
  34.  
  35. <script>
  36. $(document).ready(function(){
  37.  
  38. $(".slidingDiv1").hide();
  39. $(".show_hide1").show();
  40.  
  41. $('.show_hide1').toggle(function(){
  42. $(".slidingDiv1").slideDown(
  43. function(){
  44. $("#navigation").text("navigation")
  45. }
  46. );
  47. },function(){
  48. $(".slidingDiv1").slideUp(
  49. function(){
  50. $("#navigation").text("navigation")
  51. }
  52. );
  53. });
  54. });
  55. </script>
  56.  
  57. <script>
  58. $(document).ready(function(){
  59.  
  60. $(".slidingDiv2").hide();
  61. $(".show_hide2").show();
  62.  
  63. $('.show_hide2').toggle(function(){
  64. $(".slidingDiv2").slideDown(
  65. function(){
  66. $("#navigation").text("navigation")
  67. }
  68. );
  69. },function(){
  70. $(".slidingDiv2").slideUp(
  71. function(){
  72. $("#navigation").text("navigation")
  73. }
  74. );
  75. });
  76. });
  77. </script>
  78.  
  79. <script>
  80. $(document).ready(function(){
  81.  
  82. $(".slidingDiv3").hide();
  83. $(".show_hide3").show();
  84.  
  85. $('.show_hide3').toggle(function(){
  86. $(".slidingDiv3").slideDown(
  87. function(){
  88. $("#navigation").text("navigation")
  89. }
  90. );
  91. },function(){
  92. $(".slidingDiv3").slideUp(
  93. function(){
  94. $("#navigation").text("navigation")
  95. }
  96. );
  97. });
  98. });
  99. </script>
  100.  
  101. <script>
  102. $(document).ready(function(){
  103.  
  104. $(".slidingDiv4").hide();
  105. $(".show_hide4").show();
  106.  
  107. $('.show_hide4').toggle(function(){
  108. $(".slidingDiv4").slideDown(
  109. function(){
  110. $("#navigation").text("navigation")
  111. }
  112. );
  113. },function(){
  114. $(".slidingDiv4").slideUp(
  115. function(){
  116. $("#navigation").text("navigation")
  117. }
  118. );
  119. });
  120. });
  121. </script>
  122.  
  123.  
  124.  
  125. <title>this is the page title</title>
  126. <link rel="shortcut icon" href="{Favicon}">
  127.  
  128. <style type="text/css">
  129.  
  130.  
  131. ::selection {background: #f8f8f8; color:#444444;}
  132. ::-moz-selection {background: #f8f8f8; color:#444444;}
  133. ::-webkit-selection {background: #f8f8f8; color:#444444;}
  134.  
  135. ::-webkit-scrollbar-thumb:vertical {
  136. background-color: #000000;
  137. height:30px;
  138. }
  139.  
  140. ::-webkit-scrollbar-thumb:horizontal {
  141. background-color:#000000;
  142. height:5px;
  143. }
  144.  
  145. ::-webkit-scrollbar {
  146. color:{color:Background};
  147. height:auto;
  148. width:6px;
  149. padding-top: 30px;
  150. }
  151.  
  152.  
  153. body {
  154. background-color: #ffffff;
  155. }
  156.  
  157.  
  158. /* these are the "normal" links, you can edit the colors */
  159.  
  160. /* the dropdown links are the same color unless you set a different one in the body - instructions for this inside of the first dropdown */
  161.  
  162. a:link, a:active, a:visited {
  163. text-decoration: none;
  164. color: #8eb4c1;
  165. -webkit-transition: all 0.5s linear;
  166. -moz-transition: all 0.5s linear;
  167. -o-transition: all 0.5s linear;
  168. }
  169.  
  170. a:hover {
  171. color:#ffffff;
  172. text-decoration: none;
  173. -webkit-transition: all 0.5s linear;
  174. -moz-transition: all 0.5s linear;
  175. -o-transition: all 0.5s linear;
  176. cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;
  177. }
  178.  
  179.  
  180.  
  181. strong, b {
  182.  
  183. }
  184.  
  185. em, i {}
  186.  
  187. blockquote {
  188. text-align: justify;
  189. }
  190.  
  191.  
  192. /* this color goes in the dropdown links lines and also around the dropdown contents */
  193.  
  194. .dropdown {
  195. background-color: #f8f8f8;
  196. padding: 20px;
  197. }
  198.  
  199.  
  200. /* you can change align left to center in the following label for the dropdown links */
  201.  
  202. .dropdown a {
  203. display: inline;
  204. font-family: 'Tahoma';
  205. font-size: 10px;
  206. text-align: left;
  207. font-weight: bold;
  208. text-transform: uppercase;
  209. -moz-transition:0.2s ease-in;
  210. -webkit-transition:0.2s ease-in;
  211. -o-transition:0.2s ease-in;
  212. transition:0.2s ease-in;
  213. opacity: 1;
  214. }
  215.  
  216.  
  217. /* you can put opacity 1 here too if you don't want the dropdown links to fade away when hovering them */
  218.  
  219. .dropdown a:hover {
  220. opacity: 0;
  221. text-decoration:none;
  222. -webkit-transition: all 0.5s ease-in-out;
  223. -moz-transition: all 0.5s ease-in-out;
  224. -o-transition: all 0.5s ease-in-out;
  225. -ms-transition: all 0.5s ease-in-out;
  226. transition: all 0.5s ease-in-out;
  227. cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;
  228. }
  229.  
  230.  
  231. /* these are important, don't delete */
  232.  
  233. .show_hide {
  234. display:none;
  235. }
  236.  
  237. .show_hide1 {
  238. display:none;
  239. }
  240.  
  241. .show_hide2 {
  242. display:none;
  243. }
  244.  
  245. .show_hide3 {
  246. display:none;
  247. }
  248.  
  249. .show_hide4 {
  250. display:none;
  251. }
  252.  
  253.  
  254. /* the table color must be the same as the background color in the BODY label at the beginning of the CSS */
  255.  
  256. #table {
  257. width: 800px;
  258. background-color: #ffffff;
  259. margin-top: 10px;
  260. margin-bottom: 30px;
  261. padding: 0px;
  262. }
  263.  
  264. /* the following go in order of appearance */
  265. /* this is the main title, the line height makes the two lines be closer so modify it as you please */
  266.  
  267. #title {
  268. font-family: "Helvetica";
  269. background-color: #f3fafc;
  270. padding: 20px;
  271. text-align: center;
  272. font-size: 14px;
  273. line-height: 90%;
  274. color: #333333;
  275. }
  276.  
  277. .description {
  278. font-family: "Tahoma";
  279. font-size: 10px;
  280. text-decoration: none;
  281. color: #333333;
  282. text-align: justify;
  283. background-color: #f9f9f9;
  284. letter-spacing: 2px;
  285. padding: 20px;
  286. font-weight: normal;
  287. }
  288.  
  289. /* here's a dropdown as you can see, in the page theme itself i mean */
  290.  
  291. .header {
  292. font-family: "Tahoma";
  293. font-size: 8px;
  294. text-decoration: none;
  295. color: #333333;
  296. text-align: center;
  297. text-transform: uppercase;
  298. background-color: #f5f5f5;
  299. letter-spacing: 2px;
  300. padding: 10px;
  301. font-weight: bold;
  302. }
  303.  
  304. #box{
  305. background-color: #eff6f8;
  306. padding: 20px;
  307. text-align: justify;
  308. width: 800px;
  309. }
  310.  
  311. .content {
  312. font-family: "Helvetica";
  313. font-size: 11px;
  314. color: #404040;
  315. text-align: justify;
  316. }
  317.  
  318.  
  319.  
  320. </style>
  321. </head>
  322.  
  323.  
  324. <body>
  325.  
  326. <center><div id="table"><table border="0" cellspacing="0" cellpadding="0" colspan="1">
  327.  
  328. <tr><td colspan="1" id="title">here goes your title<br><small>it's not the same title as the one that'll appear in the browser tab</small></td></tr>
  329. <tr><td colspan="1" height="10"></td></tr>
  330.  
  331.  
  332.  
  333. <tr>
  334. <td colspan="1" class="description">
  335. here goes a description as long as you please. it's justified so it can contain a few lines, though you can change the alignment to centered in the css if you want to. you can also put padding: 10px; instead of 20 which is how it's now (the <em>padding</em> is the space between the text and the borders of the box)</td></tr>
  336. <tr><td colspan="1" height="10"></td></tr>
  337.  
  338.  
  339.  
  340.  
  341.  
  342. <tr>
  343. <td colspan="1" class="dropdown">
  344. <a href="#" class="show_hide" style="color: #8eb4c1;">click to see instructions</a>
  345.  
  346. <div class="slidingDiv" style="background: #ffffff; font-size: 11px; font-family: 'Tahoma'; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; text-align: justify; line-height: 16px;">
  347.  
  348. <p>1. As you can see, the dropdown-link-line background is light grey and the content background is white. Around this content, there is a grey border. This light grey is #F8F8F8 and it's set in the label <em>.dropdown {}</em> in the CSS. You can either change that to <strong>#FFFFFF</strong> (white) or change the white to grey. How to change the white to grey? Go to the theme code and find this text. Right above this text, there is a code that says <strong>class slidingDiv</strong> and next to it <strong>style background: #FFFFFF</strong> so change this code to #F8F8F8 to set the background color to light grey. All of this is optional, obviously.</p>
  349.  
  350. <p>2. The dropdown links are the same color as the "normal" links <a href="">this is a normal link.</a> It's possible to change that; you can even put a color per dropdown link and make a rainbow! See: again, search this text in the theme code. On top of this there is the Instruction #1 and then the <strong>slidingDiv</strong> code, and then <strong>class <em>show_hide</em></strong> on top, right? Next to it you'll find <em>style color: #8EB4C1;</em> and that's the same color you'll find in the CSS label for the links (a:link, a:active, a:visited). So just change that color in every dropdown link or in all of them to set different colors.</p>
  351.  
  352. <p>3. In the previous Instruction you can see that <a href="">the normal link</a> looks like the dropdown links. Unfortunately, I don't know how to change that. All you can do is change the size and the font of the dropdown links in <strong>class slidingDiv</strong> and enter a less thick font (but the dropdown links font will be modified as well).</p>
  353.  
  354. <p>4. Feel free to ask anything else - not too complicated stuff, I mean the theme is just the way it is. I separated the codes for every part of the structure so you can delete dropdowns in case five are too much, or titles, description, etc. and know exactly where every part begins and ends. You can change colors, fonts, ... please don't remove the credit though! I think that's all :) oh and remember to enter your url in the ask box code at the bottom of the page, where it says <em>YOURURLHERE.tumblr.com</em> aaaand here is a tutorial for installing dropdowns and more than one dropdown in the same page <a href="http://itsphotoshop.com/post/68286752700/tutorial-asked-by-anonymous-live-preview-of-this" target="_blank">(x)</a></p>
  355.  
  356. </div></td></tr>
  357. <tr><td colspan="1" height="20"></td></tr>
  358.  
  359.  
  360.  
  361.  
  362.  
  363. <tr><td colspan="1" class="header">
  364. here goes an optional title</td></tr>
  365. <tr><td colspan="1" height="10"></td></tr>
  366.  
  367. <tr><td colspan="1" class="content" id="box">and here goes some optional, additional, static content and <a href="">this is a link.</a> again, feel free to change alignment to centered in the css</td></tr>
  368. <tr><td colspan="1" height="20"></td></tr>
  369.  
  370.  
  371.  
  372.  
  373.  
  374. <tr><td colspan="1" class="dropdown">
  375. <a href="#" class="show_hide1" style="color: #8eb4c1;">1. title</a>
  376.  
  377. <div class="slidingDiv1" style="background: #ffffff; font-size: 11px; font-family: 'Tahoma'; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; text-align: justify; line-height: 16px;"><p>content here</p>
  378. </div></td></tr>
  379. <tr><td colspan="1" height="10"></td></tr>
  380.  
  381.  
  382.  
  383.  
  384.  
  385. <tr><td colspan="1" class="dropdown">
  386. <a href="#" class="show_hide2" style="color: #8eb4c1;">2. title</a>
  387.  
  388. <div class="slidingDiv2" style="background: #ffffff; font-size: 11px; font-family: 'Tahoma'; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; text-align: justify; line-height: 16px;"><p>content here</p>
  389. </div></td></tr>
  390. <tr><td colspan="1" height="10"></td></tr>
  391.  
  392.  
  393.  
  394.  
  395.  
  396. <tr><td colspan="1" class="dropdown">
  397. <a href="#" class="show_hide3" style="color: #8eb4c1;">3. title</a>
  398.  
  399. <div class="slidingDiv3" style="background: #ffffff; font-size: 11px; font-family: 'Tahoma'; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; text-align: justify; line-height: 16px;"><p>content here</p>
  400. </div></td></tr>
  401. <tr><td colspan="1" height="10"></td></tr>
  402.  
  403.  
  404.  
  405.  
  406.  
  407. <tr><td colspan="1" class="dropdown">
  408. <a href="#" class="show_hide4" style="color: #8eb4c1;">4. title</a>
  409.  
  410. <div class="slidingDiv4" style="background: #ffffff; font-size: 11px; font-family: 'Tahoma'; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; text-align: justify; line-height: 16px;"><p>content here</p>
  411. </div></td></tr>
  412. <tr><td colspan="1" height="20"></td></tr>
  413.  
  414.  
  415.  
  416.  
  417.  
  418.  
  419.  
  420.  
  421.  
  422.  
  423.  
  424. <tr><td colspan="1" class="header">
  425. this is a title for the ask box maybe</td></tr>
  426. <tr><td colspan="1" height="10"></td></tr>
  427.  
  428.  
  429.  
  430. <tr><td colspan="1" class="content" id="box"><p>and some text here before the ask box</p>
  431.  
  432.  
  433. <p align="center"><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOURURLHERE.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>
  434.  
  435.  
  436.  
  437. </td>
  438. </tr>
  439. </table>
  440. </div>
  441. </center>
  442.  
  443. <div style="background-color: #ffffff; border: 1px solid #ebebeb; padding: 2px; font-family: 'Times'; font-size: 6px; float: right; position: fixed; bottom: 3px; right: 3px; text-transform:uppercase;"><a href="http://bypinksman.tumblr.com">PNKSMN</a></div>
  444.  
  445. </body>
  446.  
  447. </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!