How to Create a Custom Mouse Pointer in Showit Using CSS

If you want to make your Showit website stand out and reflect your unique style, you can consider creating a custom mouse pointer using CSS. By replacing the standard mouse cursor with a personalized design or icon, you can enhance the visual appeal and branding of your website.

You can have pointers that look like….

This tutorial will guide you through the step-by-step process of creating a custom mouse pointer in Showit

Whether you want to showcase your logo, add an interactive feature, or simply inject some creativity into your website’s navigation, this tutorial will provide you with the necessary steps to create a custom mouse pointer and make your Showit website truly one-of-a-kind.

Let’s get started!

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.

Step 2: Resizing Your Image

To ensure that your custom mouse pointer image fits perfectly, you will need to resize it to 24×24 pixels. Using an image editing tool like Photoshop, you can adjust the dimensions to 24×24 pixels. In case your image has varying height and width, you can set the longer side to 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 3: Implementing the Custom Mouse Pointer in Showit

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.

Done!

By following these steps, you will successfully implement the custom mouse pointer using the uploaded image in the Showit media library, and it will dynamically change to the second image on hover.

If you liked the post, share it with your fellow ShowIt designers and developers. You can leave a comment if you have questions/suggestions.

Follow me on Instagram