Custom Cursor & Custom Scrollbar CSS Codes & Tutorial 💜

**THE CODES BELOW GO IN THE 'ABOUT ME' SECTION OF THE 'EDIT YOUR PROFILE' PAGE ON SPACEHEY!**

Custom Cursor CSS Code:

<style>

* {cursor: url(URL GOES HERE), auto !important;}

</style>

• To add a custom cursor to your profile, Cursors-4U.com is a great website that has a ton of cursors to choose from! Once you pick a cursor from the website that you want to add to your profile, click on the cursor & it will bring you to another page that should have the cursor of your choosing at the top. When you scroll down that page, it will show you Option #1 - Universal CSS/HTML Code & Option #2 - CSS Style Sheet Only Code. You will want to copy the URL from the textbox code of Option #2 - CSS Style Sheet Only Code as seen below:
• Next, paste the URL code you copied from textbox code of Option #2 - CSS Style Sheet Only Code into the Custom Cursor CSS Code in the area that says URL GOES HERE & save!  

Custom Scrollbar CSS Code:

<style>

/* Chrome, Edge, and Safari */

*::-webkit-scrollbar {width: 18px;}

*::-webkit-scrollbar-track {background: #HEX CODE GOES HERE;}

*::-webkit-scrollbar-thumb {

background-color: #HEX CODE GOES HERE;

border-radius: 10px;

border: 3px solid #HEX CODE GOES HERE;

}

</style>

• There are two options for creating your custom scrollbar, you can either use the Custom Scrollbar Generator website & copy the code generated from that website OR you can change the coding yourself from the CSS code above & then save. 
• You can change the width of the scrollbar by changing {width: 18px;} to {width: 10px;}, which would make it thinner or {width: 20px;} to make it wider, for example. You just need to change the number next to the px part of that code to change the width. 
• For the background color of the track, you just need to paste a hex code of the color of your choosing where it says #HEX CODE GOES HERE. For example, for a black track, you would want the hex code #000000 or for a white track, you would want the hex code #FFFFFF. 
• For the color of the scrollbar thumb, which is the scrollbar part that allows you to move the website page up and down, you just change the hex code where it says #HEX CODE GOES HERE. 
• To change whether you want the scrollbar thumb to look more rectangular or have more curved edges, you change the border-radius: 10px; to border-radius: 0px; for a rectangular scrollbar thumb or a higher number of px to have more curved edges and allow for a more oval shaped scrollbar, like border-radius: 10px; or a higher number than 10px. 
• Finally, to change the border width, style, and color, you change the border code that says border: 3px solid #HEX CODE GOES HERE. The 3px is where you decide if you want a thinner or thicker border. For example, 1px would be a thin border & 3px is a thicker border. To change the style of the border, you can either choose solid, dotted, dashed, double, groove, ridge, inset, or outset. To change the color of the border, you just change the #HEX CODE GOES HERE to the hex code of the color of your choosing.