Creating a custom cursor in under two minutes

Custom cursors are all the rage in web design. Web designers are transforming the boring default cursor into unique visual device which amplifies the look and feel of their creations.


Out of the box, we can't change the default cursor in tools such as Articulate Storyline and Rise. But, with some simple lines of code from Kursor.js, we can change the cursor ourselves... in under two minutes!


In this tutorial, I'll show you how you can create a custom cursor in under two minutes for your Articulate Storyline and Articulate Rise projects. A simple and powerful effect to change the experience for your learners.


The Tutorial:



Tools and codes you'll need:


Tools

In this tutorial, I used Brackets.io, a free open source code editor with live preview options. I highly recommend Brackets.io if you're looking to do coding.


Documentation

In this demo, we're using Kursor.js to change the cursor in our projects. Kursor.js makes it super easy and simple to change your cursor, with only a few lines of code and no need to install any additional dependencies.


Codes

First, you'll need to copy the link to the CDN into your header tags of your .HTML files. I've copied it below for you. Based on when you're reading this, recommend you check out Kursor.js to include a specific version number and build to avoid unexpected breakage from newer versions.


<link rel="stylesheet" href="https://unpkg.com/kursor/dist/kursor.css">

Secondly, you'll need to copy the final script and configurations to the cursor towards the bottom of your body tags. You can customise the cursor by changing the number in type to a value between 1 and 5, remove the default cursor by changing the property to true/false and the colour of the cursor by changing the HEX code.


<script src="https://cdn.jsdelivr.net/npm/kursor@0.1.6/dist/kursor.min.js"></script>
    
<script src="https://unpkg.com/kursor"></script>
    <script>
        new kursor({
            type: 4,
            removeDefaultCursor: true,
            color: "#FFFFFF",
        })
    </script>

Accessing the code and preparing it:

If you're not familiar with accessing the Storyline or Rise codes - take a moment to read the below.


Articulate Storyline

If you're using Storyline, simply export your course into whatever format you need it in - but don't zip it. Once you've saved it, locate the folder and open the story.html file. If you're using a tool like Brackets.io, simply right-click the file and select "Open with Brackets".


Once you've made your changes to the story.html file, save the file and close it. From here, if you're publish your course to an LMS, all you need to do is zip the entire course folder so that you can upload it.


Articulate Rise

If you're using Rise, simply export your course into whatever format you need it in. Rise will automatically zip the file. Once you've received the download, unzip the file. Open folder and locate the the index.html file. If you're using a tool like Brackets.io, simply right-click the file and select "Open with Brackets".


Once you've made your changes to the index.html file, save the file and close it. From here, if you're publish your course to an LMS, all you need to do is zip the entire course folder so that you can upload it.


A word of warning

If you re-export your course, you'll loose these custom codes. So, I highly recommend saving the codes somewhere handy so that you can easily copy it back in. If you make a mistake, just click undo or re-export the course.


Wrap-up

Take some time. Get curious. Have a play with the code.


If you have any questions about getting this to work, then please feel free to get in touch. If you found this tutorial helpful, then don't forget to subscribe to keep in the know.


Until next time - keep learning.

126 views

Subscribe today and enjoy latest news fresh in your inbox.

Learning Experience Designer

Troy Ashman

  • LinkedIn Icon
  • Facebook Icon
  • Twitter Icon
  • Instagram Icon

Contact

+61 0434 043 405
troyashman@gmail.com

Wentworth Point, NSW
Australia 2127

ABN:  18 248 306 216

© 2020  Troy Ashman

Let's keep in touch