API tools faq
paste
odeysseus_thm

updates tab / HEART

odeysseus_thm
Apr 17th, 2017
4,576
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.93 KB | None | 0 0
raw download clone embed print report
  1. TAB ONE
  2. shown on the left in the preview
  3.  
  4. paste the following under <style type="text/css">
  5.  
  6.  
  7. .updatestab {
  8. top:40px; /* how far from the top the tab is*/
  9. left:40px; /* how far from the updatestab the tab is; you can change this to right if you like */
  10. position:fixed;
  11. width:170px; /* how wide the tab is */
  12. }
  13.  
  14. .t {
  15. color:#555; /* you can use colorpicker.com to find a new color */
  16. font-weight:700;
  17. padding:5px 0px;
  18. display:inline-block;
  19. border-bottom:1px solid #eee; /* you can use colorpicker.com to change the #eee if you want the border to show as something other than light gray */
  20. }
  21. .bod {
  22. opacity:0;
  23. margin-top:10px;
  24. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  25. }
  26. .updatestab:hover .bod {
  27. opacity:1;
  28. }
  29.  
  30. h9 {
  31. display:block;margin:5px 0px;
  32. color:#555; /* color of subheadings, use colorpicker.com if you want to change this */
  33. font-style:italic;
  34. }
  35.  
  36.  
  37. paste the following under <body>
  38.  
  39. <!--start updates tab-->
  40. <div class="updatestab">
  41. <div class="t">updates</div> <!--main heading-->
  42. <div class="bod">
  43. <!--start editing updates text-->
  44.  
  45.  
  46. <h9>subheading</h9> <!--subheading: you can have as many of these as you want-->
  47.  
  48. this is ur updates text! <b>bold</b>, <i>italics,</i> even a <a href="link url">super fancy link.</a>
  49.  
  50. <p>
  51.  
  52. this is a paragraph! use < p > but without the spaces to break your text up into chunks so it's more readable.
  53.  
  54.  
  55. <h9>another subheading</h9>
  56.  
  57. <li> perhaps you could
  58. <li> go for some
  59. <li> bullet points ?
  60.  
  61. <!--end editing updates text: don't edit beyond this point-->
  62. <p><a href="http://odeysseus.tumblr.com">O</a>
  63. </div>
  64. </div>
  65. <!--end updates tab-->
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72.  
  73. TAB TWO
  74. shown in the middle of the preview
  75.  
  76.  
  77. paste the following under <style type="text/css">
  78.  
  79. .mid {
  80. top:40px; /* how far from the top the tab is*/
  81. left:40px; /* how far from the left the tab is; you can change this to right if you like */
  82. width:160px;
  83. position:fixed;
  84. }
  85.  
  86. .h {
  87. color:#444; /* color of the main heading */
  88. }
  89. .h i {
  90. background:#fafafa; /* background of the main heading */
  91. padding:5px;display:block;
  92. border:1px solid transparent;
  93. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  94. }
  95. .h:after,.c:before {
  96. width:100%;
  97. content:'';
  98. display:block;
  99. height:1px;
  100. margin-top:5px;
  101. background:#eee; /* background of border underneath main heading */
  102. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  103. }
  104.  
  105. .c:before {
  106. background:#22898e; /* color of the border underneath main heading on hover, you can use colorpicker.com to change this */
  107. margin-top:-6px;position:absolute;z-index:5;
  108. width:0;opacity:.3;
  109. }
  110. .mid:hover .c:before {
  111. width:100%;}
  112.  
  113. .c {
  114. width:0;opacity:0;
  115. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  116. }
  117.  
  118. .mid:hover .h i {
  119. background:#fff; /* background of main heading on hover */
  120. border:1px solid #eee; /* #eee is the color of the border of the main heading on hover */
  121. }
  122. .mid:hover .c{
  123. width:100%;opacity:1;
  124. }
  125. h7 {
  126. margin:5px 0px;
  127. display:block;
  128. font-weight:700;
  129. color:#555; /* color of subheadings */
  130. }
  131.  
  132.  
  133. paste the following under <body>
  134.  
  135.  
  136. <!--start updates tab-->
  137. <div class="mid">
  138. <div class="h"><i>updates</i></div> <!--main heading-->
  139.  
  140. <div class="c"> <!--start editing updates text-->
  141.  
  142. <h7>subheading</h7> <!--subheading, you can have as many of these as you like-->
  143.  
  144. this is ur updates text! <b>bold</b>, <i>italics,</i> even a <a href="link url">super fancy link.</a>
  145.  
  146. <p>
  147.  
  148. this is a paragraph! use < p > but without the spaces to break your text up into chunks so it's more readable.
  149.  
  150. <h7>another subheading</h7>
  151.  
  152. <li> perhaps you could
  153. <li> go for some
  154. <li> bullet points ?
  155.  
  156. <!--end editing text: dont edit beyond this point-->
  157. <p><a href="http://odeysseus.tumblr.com">O</a>
  158. </div>
  159. </div>
  160. <!--end updates tab-->
  161.  
  162.  
  163.  
  164.  
  165.  
  166. TAB THREE
  167. shown on the right of the preview
  168.  
  169. paste the following under <style type="text/css">
  170.  
  171.  
  172. .update {
  173. top:40px; /* how far from top */
  174. right:40px; /* how far from the right: can change this to left if you want */
  175. position:fixed;
  176. width:63px; /* if your main heading has been cut off you might need to increase this width */
  177. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  178. }
  179. .up {
  180. padding:5px;
  181. color:#22898e; /* color of main heading, use colorpicker.com to change */
  182. font-size:12px; /* font size of main heading */
  183. letter-spacing:2px;
  184. margin-bottom:-15px!important;z-index:15;position:relative;
  185. border-top:1px solid #eee; /* change the #eee of this line and the line below if you want the borders to be a different color */
  186. border-bottom:1px solid #eee;
  187. background:#fff;
  188. text-align:center;
  189. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  190. }
  191. .date {
  192. opacity:0;
  193. background:#fff;
  194. padding-top:10px;
  195. transition: .4s ease-in-out; -webkit-transition: .4s ease-in-out;-moz-transition: .4s ease-in-out;-o-transition: .4s ease-in-out;
  196. }
  197. .update:hover {
  198. width:170px; /* width of updates tab on hover */
  199.  
  200. }
  201. .update:hover .date {
  202. opacity:1;
  203. }
  204. .update:hover .up { border-bottom:1px solid transparent; }
  205.  
  206. h8 {
  207. color:#22898e; /* color of main heading - change this using colorpicker.com */
  208. display:block;
  209. font-weight:700;
  210. text-align:center;
  211. margin:5px 0px;
  212. padding:5px;
  213. border-top:1px solid #eee;
  214. border-bottom:1px solid #eee;
  215. background:#fafafa;
  216. }
  217.  
  218.  
  219.  
  220. paste the following under <body>
  221.  
  222. <!--start updates tab-->
  223. <div class="update">
  224. <div class="up">updates</div> <!--main heading-->
  225. <div class="date">
  226.  
  227.  
  228. <h8>subheading</h8> <!--subheading: you can have as many of these as you want-->
  229.  
  230.  
  231. this is ur updates text! <b>bold</b>, <i>italics,</i> even a <a href="link url">super fancy link.</a>
  232.  
  233.  
  234. <p>
  235.  
  236.  
  237. this is a paragraph! use < p > but without the spaces to break your text up into chunks so it's more readable.
  238.  
  239.  
  240. <h8>another subheading</h8>
  241.  
  242.  
  243. <li> perhaps you could
  244. <li> go for some
  245. <li> bullet points ?
  246.  
  247. <!--pls dont edit beyond this point-->
  248. <p><a href="http://odeysseus.tumblr.com">O</a>
  249. </div>
  250. </div>
  251. <!--end updates tab-->
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!