Hello, I am new to Kirby and programming overall but I am trying to implement a custom cursor.
I downloaded a js library and included it directly in my HTML.
My problem is that I changed the css to customise the cursor (black one), but the changed cursor only shows up on the homepage, everywhere else is still the default Magic Mouse cursor (white).
As for the code:
I included the js file in the footer snippet and initialised it:
<script type="text/javascript">
options = {
"cursorOuter": "circle",
"hoverEffect": "circle-move",
"hoverItemMove": false,
"defaultCursor": false,
"outerWidth": 30,
"outerHeight": 30
};
magicMouse(options);
And the link to the css file in the head:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?></title>
<?= css('assets/css/index.css') ?>
<link rel="stylesheet" href="<?= $page->url() ?>/assets/css/pointer.css">
</head>
The js file is in the js folder in the assets folder and the css is in the css folder in assets.
This is the CSS:
body #magicMouseCursor {
position: relative;
width: 45px !important;
height: 45px !important;
border: 1px solid #000 !important;
border-radius: 10%;
z-index: 9999;
transition: transform 0.07s, width 0.3s, height 0.3s;
pointer-events: none;
}
body #magicPointer {
height: 25px !important;
width: 25px !important;
top: 8.5px !important;
left: 8.5px !important;
/*transform: translate(-50%, -50%) !important;
*/
position: relative;
background: #000 !important;
border-radius: 50%;
pointer-events: none;
transition: background 0.2s, width 0.2s, height 0.2s, box-shadow 0.2s;
}
I can’t include the js code here because it say I can’t tag any more people bc it recognises some code as tags, so I uploaded the js file to google drive:
I’d appreciate any help, thanks!