How to add a Custom Mouse to your Showit Website 

There's just a little bit of coding but you GOT THiS!!

Follow the steps below 

TUTORIAL

Step 1

Let’s begin with the first step: selecting your image
Feel free to choose your desired image for your custom mouse pointer. Ensure that the image you select is in the transparent PNG format. If you don’t have a specific PNG image in mind, don’t worry! You can explore a vast collection of PNG icons available on platforms like Flaticon. This way, you’ll have plenty of options to find the perfect icon for your custom mouse pointer.

Furthermore, consider selecting an additional image that complements your main image. This way, when users hover over clickable links, the mouse pointer will seamlessly transition to the selected image, adding an engaging and interactive element to your website. So, let your creativity flow and choose an image that harmonizes with your custom mouse pointer, delivering an enhanced user experience.

To ensure that your custom mouse pointer image fits perfectly, you will need to resize it to 24×24 pixels.

If you are downloading the image from Flaticon, you can take advantage of the platform’s built-in function that allows you to directly download your image in the desired 24×24 size in PNG format.

Step 2

After resizing your image to 24×24 pixels, upload it to the Showit media library. Follow these steps to add the custom mouse pointer functionality using custom CSS:

  1. Go to your Showit dashboard and navigate to the media library section.
  2. Click on the “Upload Media” button and select the resized PNG image file from your computer to upload it.
  3. Once the image is uploaded, find it in the media library. Hover over the image and click on the chain icon that appears.
  4. A prompt will appear, stating that the link has been copied. Make a note of this copied link.


Now, click on the Advanced Settings tab on the right pane of the ShowIt builder. Click on the Custom CSS box, and enter the following code:

body{
  cursor: url('path/to/your/image.png'), auto;
}
body a:hover{
cursor:url('path/to/your/second-image.png'), auto;
}

Make sure to replace path/to/your/image.png with the file path or URL of your uploaded image, and replace path/to/your/second-image.png with the file path or URL of the second image you want to use when hovering over the element.

Hit Preview and see your counter in action!

Here is a step by step guide

 There is a  Step by step guide at the bottom of the page!