Unable to `customize` cursor

[realhackcraft]

I have a completely white UI and want to change the cursor colour to rgb(175, 175, 175)(grey). I used the cdn.min.js file, and changed the magic-mouse.css. The changes do not reflect on my page.

[dshongphuc]

hi @realhackcraft , all you need to do is change style for the body #magicPointer and body #magicMouseCursor

[realhackcraft]

There is no effect if I do that on the newest version. However, when I copy the magic-cursor.js from https://www.lucammello.com, I can get it to work.

[realhackcraft]

magic_mouse.js.zip This one works, and the one included in your repo does not.

[realhackcraft]

I cannot customize the colour because at the beginning there is const STYLE and you set the style of the cursor there, I think.

[realhackcraft]

from 5:255 to 5:1215

[dshongphuc]

@realhackcraft Thank you for sharing, did you try to add !important to your styles?

[realhackcraft]

can you show me an example? im bad at css

[dshongphuc]

@realhackcraft For example if you want to change the border & background of the cursor to red color:

body #magicMouseCursor {
  border: 1px solid red !important;
}
body #magicPointer {
  background: red !important;
}

[realhackcraft]

what does !important mean?

[dshongphuc]

@realhackcraft well, in css, we have priority of selector. So if a selector has an !important property, it will have the highest priority. Basically you use that to override my CSS in magicmouse.js file

[realhackcraft]