Articles in this section

See more

Creating a custom cursor with code (hack)

  • Updated

Now available in Semplice 6 without any custom code

You can now add a custom cursor (no code needed) in Semplice 6! Just follow this guide. However, if you have a specific cursor design you'd like to use beyond what the native feature gives you, continue reading this guide.

 

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this hack.

You may wish to create a custom cursor for use in Semplice. Custom cursors are a fun way to further customize your site and add your own personal touch.

 

View live demo

animated-cursors.gif

Creating the cursor

To create the cursor, use your favorite design software and create your custom cursor as a PNG image. We recommend sizing it to 128x128 pixels.

Important: your cursor MUST not be sized any larger than 128x128. Otherwise, the browser will ignore the custom cursor.

custom-cursor-arrow.png

 

Getting your image URL

We will need to get the URL path to our custom cursor. We can upload the cursor from the Wordpress Media Library. Once you've uploaded your image, in the image's edit options, we can grab the URL path to our custom cursor.

upload-custom-cursor.gif


Adding the custom CSS

We will now use some CSS magic to add the custom cursor. You have the option to add the cursor sitewide, or only have it applied when hovering over certain content like sections or links.

To add the custom cursor sitewide, add the following under Customize > Advanced > Custom CSS:

body {
 cursor: url('your-custom-cursor-url-path.png'), auto !important;
}

To add the custom cursor to only links:

a {
 cursor: url('your-custom-cursor-url-path.png'), auto !important;
}

To add the custom cursor to a particular piece of content, such as a section with a custom class applied:

.custom-cursor-section {
 cursor: url('your-custom-cursor-url-path.png'), auto !important;
}


Setting the cursor alignment (optional)

In some cases, you may wish to adjust the cursor positioning. You can do so by adding the following numbers:

body {
 cursor: url('your-custom-cursor-url-path.png') 64 64, auto !important;
}

You can adjust the number values to get the desired results.

Related articles