grrxxargh

Side Bar #1, ver. #2

Sep 24th, 2021 (edited)
16
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.50 KB | None | 0 0
  1. The font I chose for the links is Josefin Sans, I've included the google fonts code for it.
  2.  
  3. The colors are labeled as black and grey.
  4.  
  5. When applying this to your theme, I put it in my 435px box. Also, you will need to add a margin-left to this area of coding for your layout: .mygen { Background Properties }
  6.  
  7. Example:
  8. .mygen { Background Properties }
  9. table, tr, td { background-color:transparent; border:none; border-width:0;}
  10. body {
  11. background-color:000000;
  12. background-image:url(https://i.imgur.com/26GSIbU.jpg);
  13. background-attachment: fixed;
  14. background-position:center center;
  15. background-repeat:no-repeat;
  16. margin-left: 75px;
  17. }
  18.  
  19.  
  20.  
  21. ////////////////////////////////////////////////////////
  22.  
  23. <style>
  24. #atj-sidebar{
  25. float: left;
  26. position: fixed;
  27. width: 300px;
  28. height: 100%;
  29. background-color: black;
  30. top: 0px;
  31. left: 20px;
  32. }
  33.  
  34. #atj-sb{
  35. position: fixed;
  36. width: 280px;
  37. height: 100%;
  38. background-color: grey;
  39. top: 0px;
  40. left: 30px;
  41. }
  42.  
  43. .atj-sbimg{
  44. margin-top: 30px;
  45. margin-left: 81px;
  46.  
  47. }
  48.  
  49. .atj-sbimg img{
  50. width: 110px;
  51. height: 110px;
  52. border-radius: 50%;
  53. border: 4px solid black;
  54. }
  55.  
  56. #atj-links{
  57. margin-left: 58px;
  58. margin-top: 30px;
  59. }
  60.  
  61. .atj-links1{
  62. margin-left: 0px;
  63.  
  64. }
  65.  
  66. .atj-links2{
  67. margin-left: 85px;
  68. margin-top: -105px;
  69. }
  70.  
  71. #atj-links a{
  72. font-family: 'Josefin Sans', sans-serif;
  73. font-size: 8px;
  74. background-color: black;
  75. color: grey;
  76. text-decoration: none;
  77. font-weight: 700;
  78. letter-spacing: 1px;
  79. width: 70px;
  80. height: 20px;
  81. padding: 5px;
  82. line-height: 20px;
  83. text-align: center;
  84. display:block;
  85. margin-bottom: 5px;
  86. }
  87.  
  88. #atj-links a:hover{
  89. background-color: grey;
  90. color: black;
  91. -webkit-transition: all 0.7s ease;
  92. -moz-transition: all 0.7s ease;
  93. -o-transition: all 0.7s ease
  94. }
  95. </style>
  96.  
  97.  
  98.  
  99.  
  100. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">
  101.  
  102.  
  103.  
  104.  
  105.  
  106. <div id="atj-sidebar">
  107. <div id="atj-sb">
  108. <div class="atj-sbimg"><img src="https://via.placeholder.com/110x110"></div>
  109. <div id="atj-links"> <div class="atj-links1"><a href="/">HOME</a> <a href="/">MESSAGE</a> <a href="/">COMMENT</a></div>
  110. <div class="atj-links2"><a href="/">STREAM</a> <a href="/">BLOG</a> <a href="/">LINK 1</a></div>
  111. </div>
  112. </div>
  113. </div>
Add Comment
Please, Sign In to add comment