API tools faq
paste
sexycullen

j.

sexycullen
Mar 30th, 2020
232
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.85 KB | None | 0 0
raw download clone embed print report
  1. /* CSS PART */
  2. /* the main box wraping everything, you can change the width if it's too big */
  3. .update-container {
  4. width:180px;
  5. margin:55px 5px;
  6. padding:5px;
  7. position: fixed;
  8. text-align:right;
  9. top:0;
  10. right:0;
  11. background-color:#FCFCFC;
  12. border:1px solid #F3F3F3;
  13. z-index:99999999999;
  14. box-sizing: border-box;
  15. transition: 0.5s;
  16. }
  17.  
  18. /* the width it's the size that's gonna increase in the hover */
  19. .update-container:hover {
  20. width:250px;
  21. transition: 0.5s;
  22. }
  23.  
  24. /* the title that appears on each update, it will match the one in the theme, but you can custom here if you want */
  25. .update h1 {
  26. text-align:right;
  27. padding-bottom:5px;
  28. border-bottom:1px solid #F3F3F3;
  29. transition: 0.5s;
  30. }
  31.  
  32. .update h1:hover {
  33. padding-bottom:5px;
  34. border-bottom:1px solid #F3F3F3;
  35. transition: 0.5s;
  36. }
  37.  
  38. /* this is each update, the height is 35px only to show the title, but you can decrease or increase a little more depending on the title you use */
  39. .update {
  40. margin:10px;
  41. height:35px;
  42. overflow:hidden;
  43. transition: 0.5s;
  44. }
  45.  
  46. .update:hover {
  47. transition: 0.5s;
  48. }
  49.  
  50.  
  51. /* this is how big each update will get when you hover, each one will have a different size, adjust according to the content inside them
  52.  
  53. each new update 'section' you create, you need to add a new update hover here and adjust the size */
  54. .update1:hover {
  55. height:55px;
  56. }
  57.  
  58. .update2:hover {
  59. height:200px;
  60. }
  61.  
  62. .update3:hover {
  63. height:100px;
  64. }
  65.  
  66. .update4:hover {
  67. height:100px;
  68. }
  69.  
  70. .update5:hover {
  71. height:55px;
  72. }
  73.  
  74.  
  75.  
  76. .item {
  77. padding:7px 0;
  78. }
  79.  
  80.  
  81. /* this is for the list, but the list itself will match the theme you're using */
  82. .item ul {
  83. margin:10px;
  84. }
  85.  
  86. .item-box {
  87. margin:5px;
  88. }
  89.  
  90.  
  91. /* this is the inside title you can use inside the updates, i used h2 so it won't look like the h1 that already have. but you can add customizations here too */
  92. .item h2 {
  93. margin:10px 0 0 0;
  94. padding:2px 0;
  95. text-align:right;
  96. }
  97.  
  98.  
  99. /* the box with the description on the about part, you can delete or edit as you want */
  100. .item-box .item-description {
  101. padding:7px;
  102. border:1px solid #F3F3F3;
  103. }
  104.  
  105.  
  106. /* the links will match the theme too, size will be the same size of the theme body text, but you can customize here too */
  107. .item-links a {
  108. margin:10px;
  109. }
  110.  
  111.  
  112.  
  113.  
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121. <!-- HTML PART, this goes just after <body> -->
  122. <div class="update-container"> <!-- the main div that wraps everything -->
  123.  
  124. <div class="update update1"> <!-- the one you need to copy to add more, change the update1 to a new number -->
  125. <h1>title here yay</h1>
  126. <div class="item item-text">
  127. <div class="item-description">
  128. description or anything, it's like a paragraph
  129. </div>
  130. </div>
  131. </div> <!-- and it ends here -->
  132.  
  133. <div class="update update2"> <!-- the one you need to copy to add more, change the update2 to a new number -->
  134. <h1>more stuff</h1>
  135. <div class="item item-text">
  136. <div class="item-description">
  137. and more description
  138. </div>
  139. <h2>inside title</h2>
  140. <div class="item item-links">
  141. <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a>
  142. </div>
  143. <div class="item item-list">
  144. <h2>and list!</h2>
  145. <ul>
  146. <li>item</li>
  147. <li>item</li>
  148. <li>item</li>
  149. </ul>
  150. </div>
  151. </div>
  152. </div> <!-- and it ends here -->
  153.  
  154.  
  155.  
  156. <div class="update update3"> <!-- the one you need to copy to add more, change the update3 to a new number -->
  157. <h1>about</h1>
  158. <div class="item item-box">
  159. <div class="item-description">
  160. at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. lorem ipsum dolor sit amet, consectetuer at, nisi. aenean id massa ut lacus</div>
  161. </div>
  162. </div> <!-- and it ends here -->
  163.  
  164.  
  165. <div class="update update4"> <!-- the one you need to copy to add more, change the update4 to a new number -->
  166. <h1>list for anything</h1>
  167. <div class="item item-list">
  168. <ul>
  169. <li>item</li>
  170. <li>item</li>
  171. <li>item</li>
  172. </ul>
  173. </div>
  174. </div> <!-- and it ends here -->
  175.  
  176. <div class="update update5"> <!-- the one you need to copy to add more, change the update5 to a new number -->
  177. <h1>and links!</h1>
  178. <div class="item item-links">
  179. <a href="#">link 1</a> <a href="#">link 2</a> <a href="#">link 3</a>
  180. </div>
  181. </div>
  182. </div> <!-- and it ends here -->
  183.  
  184.  
  185. </div> <!-- the main div that wraps everything ends here -->
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!