API tools faq
paste
Advertisement
bsethemes

UPDATES TAB #2

bsethemes
Jan 31st, 2015
2,702
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.78 KB | None | 0 0
raw download clone embed print report
  1. /* PASTE THIS BETWEEN <head> and </head> */
  2. <script type="text/javascript">
  3. WebFontConfig = {
  4. google: { families: [ 'VT323::latin' ] }
  5. };
  6. (function() {
  7. var wf = document.createElement('script');
  8. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  9. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  10. wf.type = 'text/javascript';
  11. wf.async = 'true';
  12. var s = document.getElementsByTagName('script')[0];
  13. s.parentNode.insertBefore(wf, s);
  14. })(); </script>
  15.  
  16.  
  17.  
  18.  
  19. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  20.  
  21. <script src="jquery.js"></script>
  22. <script>
  23. $(document).ready(function(){
  24. $("#clackyclack").click(function(){
  25. $("#inside").slideToggle("fast");
  26. });
  27. });
  28. </script>
  29.  
  30. <script src="jquery.js"></script>
  31. <script>
  32. $(document).ready(function(){
  33. $("#clackyclack2").click(function(){
  34. $("#inside2").slideToggle("fast");
  35. });
  36. });
  37. </script>
  38.  
  39. <script src="jquery.js"></script>
  40. <script>
  41. $(document).ready(function(){
  42. $("#clackyclack3").click(function(){
  43. $("#inside3").slideToggle("fast");
  44. });
  45. });
  46. </script>
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53. /* PASTE THIS UNDER <style type="text/css"> */
  54.  
  55. /*START UPDATES TAB #2 */
  56.  
  57. /* DON'T TOUCH ANYTHING THAT IS NOT ANNOTATED PLEASE!!*/
  58.  
  59. #topbar{
  60. position:absolute;
  61. margin-top:-30px;
  62. margin-left:-4px;
  63. padding:3px;
  64. padding-right:5px;
  65. text-align:right;
  66. width:150px;
  67. height:12px;
  68. background:{color:TopBar}; /*bar background*/
  69. }
  70.  
  71. #updatestab{
  72. position:fixed;
  73. width:150px;
  74. margin-top:40px;
  75. margin-left:950px;
  76. padding-top:33px;
  77. padding-left:7px;
  78. padding-right:7px;
  79. padding-bottom:4px;
  80. font-family:'VT323';
  81. font-size:13px;
  82. line-height:12px;
  83. background-color:#c0c0c0; /* the updates tab background color */
  84. border-top:1px solid white;
  85. border-left:1px solid white;
  86. border-right:1px solid black;
  87. border-bottom:1px solid black;
  88. color:#000000; /*text color, note link colors and styles will change with the theme you're using*/
  89. z-index:999;
  90. /*delete the following for no shadows*/
  91. box-shadow:rgba(0,0,0,0.07)5px 5px;
  92. }
  93.  
  94. #updatespc {
  95. content: url(http://i62.tinypic.com/28hh1ch.png);
  96. margin-top:-2px;
  97. }
  98.  
  99. #updatestitle {
  100. position:absolute;
  101. font-size:10px;
  102. margin-left:-129px;
  103. margin-top:-13px;
  104. width:200px;
  105. }
  106.  
  107. #updatesbuttons {
  108. content: url(http://i57.tinypic.com/2cqo3rl.png);
  109. position:absolute;
  110. margin-top:-13px;
  111. margin-left:117px;
  112. width:35px;
  113. }
  114.  
  115. #inside,#clackyclack{
  116. display:inline-block;
  117. }
  118.  
  119. #clackyclack{
  120. width:100px;
  121. height:17px;
  122. letter-spacing:1px;
  123. background:#c0c0c0;
  124. border-top:1px solid white;
  125. border-left:1px solid white;
  126. border-right:1px solid black;
  127. border-bottom:1px solid black;
  128. margin-top:-5px;
  129. margin-bottom:10px;
  130. margin-left:25px;
  131. box-shadow:rgba(0,0,0,0.07)3px 3px;
  132. text-transform:uppercase; /* tabs title uppercase, if you don't want it delete uppercase and type in none */
  133. text-align:center;
  134. padding:1px;
  135. display:block;
  136. -webkit-transition: all 0.1s ease;
  137. -moz-transition: all 0.1s ease;
  138. transition: all 0.1s ease;
  139. }
  140.  
  141. #clackyclack:active{
  142. background:#9f9f9f;
  143. border-right:1px solid white;
  144. border-bottom:1px solid white;
  145. border-top:1px solid black;
  146. border-left:1px solid black;
  147. box-shadow:rgba(0,0,0,0.07)0px 0px;
  148. -webkit-transition: all 0.1s ease;
  149. -moz-transition: all 0.1s ease;
  150. transition: all 0.1s ease;
  151. }
  152.  
  153. #inside{
  154. padding:1px;
  155. display:none;
  156. }
  157.  
  158. #inside2,#clackyclack2{
  159. padding:1px;
  160. display:inline-block;
  161. }
  162.  
  163. #clackyclack2 {
  164. width:100px;
  165. height:17px;
  166. letter-spacing:1px;
  167. background:#c0c0c0;
  168. border-top:1px solid white;
  169. border-left:1px solid white;
  170. border-right:1px solid black;
  171. border-bottom:1px solid black;
  172. margin-top:10px;
  173. margin-bottom:10px;
  174. margin-left:25px;
  175. box-shadow:rgba(0,0,0,0.07)3px 3px;
  176. text-transform:uppercase; /* tabs title uppercase, if you don't want it delete uppercase and type in none */
  177. text-align:center;
  178. padding:1px;
  179. display:block;
  180. -webkit-transition: all 0.1s ease;
  181. -moz-transition: all 0.1s ease;
  182. transition: all 0.1s ease;
  183. }
  184.  
  185. #clackyclack2:active{
  186. background:#9f9f9f;
  187. border-right:1px solid white;
  188. border-bottom:1px solid white;
  189. border-top:1px solid black;
  190. border-left:1px solid black;
  191. box-shadow:rgba(0,0,0,0.07)0px 0px;
  192. -webkit-transition: all 0.1s ease;
  193. -moz-transition: all 0.1s ease;
  194. transition: all 0.1s ease;
  195. }
  196.  
  197. #inside2{
  198. padding:1px;
  199. display:none;
  200. }
  201.  
  202. #inside3,#clackyclack3{
  203. padding:1px;
  204. display:inline-block;
  205. }
  206.  
  207. #clackyclack3{
  208. width:100px;
  209. height:17px;
  210. letter-spacing:1px;
  211. background:#c0c0c0;
  212. border-top:1px solid white;
  213. border-left:1px solid white;
  214. border-right:1px solid black;
  215. border-bottom:1px solid black;
  216. margin-top:10px;
  217. margin-bottom:10px;
  218. margin-left:25px;
  219. box-shadow:rgba(0,0,0,0.07)3px 3px;
  220. text-transform:uppercase; /* tabs title uppercase, if you don't want it delete uppercase and type in none */
  221. text-align:center;
  222. padding:1px;
  223. display:block;
  224. -webkit-transition: all 0.1s ease;
  225. -moz-transition: all 0.1s ease;
  226. transition: all 0.1s ease;
  227. }
  228.  
  229.  
  230. #clackyclack3:active{
  231. background:#9f9f9f;
  232. border-right:1px solid white;
  233. border-bottom:1px solid white;
  234. border-top:1px solid black;
  235. border-left:1px solid black;
  236. box-shadow:rgba(0,0,0,0.07)0px 0px;
  237. -webkit-transition: all 0.1s ease;
  238. -moz-transition: all 0.1s ease;
  239. transition: all 0.1s ease;
  240. }
  241.  
  242. #inside3{
  243. padding:1px;
  244. display:none;
  245. }
  246.  
  247.  
  248. /* END UPDATES TAB #2 */
  249.  
  250.  
  251.  
  252.  
  253. <!-- PASTE THIS UNDER <body> -->
  254.  
  255. <!-- START UPDATES TAB 2 TEXT -->
  256.  
  257.  
  258. <div id="topbar"> <!-- delete this for no top bar -->
  259. <div id="updatespc"></div><!-- delete this for no pc image -->
  260. <div id="updatestitle">c:/TITLE HERE</div><!-- delete this for no title -->
  261. <div id="updatesbuttons"></div><!-- delete this for no buttons -->
  262. </div>
  263. <!--end-->
  264.  
  265. <div id="clackyclack"><u>B</u>utton</div>
  266. <div id="inside">
  267.  
  268.  
  269. this is the first tab text!!!
  270.  
  271.  
  272. </div>
  273.  
  274. <div id="clackyclack2"><u>B</u>utton</div>
  275. <div id="inside2">
  276.  
  277.  
  278. and this is the second tab text!!!
  279. <a href="/" class="tooltip" title="AND THIS IS A TOOLTIP">also a link</a>
  280.  
  281.  
  282. </div>
  283.  
  284. <div id="clackyclack3"><u>B</u>utton</div>
  285. <div id="inside3">
  286.  
  287. and this is the third tab text!!!
  288.  
  289. </div>
  290.  
  291. </div>
  292.  
  293. <!-- END UPDATES TAB 2 TEXT -->
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!