Learn how to design a visually-catching custom cursor with just a few lines of code.
• 2 min read
We’re all used to a black arrow as our primary cursor. However, in Readymag you can pretty easily swap out the arrow for any image you like. This can be a great way to emphasize the identity of a project.
💘
Since 2021, you can add custom cursors to your project directly within the UI of Readymag—this is the most easy and convenient option, available on all plans.
There are two ways to do so. To set a custom cursor for the whole project, click gear icon in the Preview (P) mode → Desktop. Enable the ‘Use custom cursor’ toggle. If you want to set such a cursor for individual widget, click on it and select 'Custom cursor' in its attributes, then upload a custom icon. The two formats can easily be combined.
Below we provide some inspiration with a few examples that we love, then explain how to set up custom cursors for your project using the Code widget, which is another implementation option. Code widget is available with Readymag Personal plan and higher. On Free plan, you can try the Code widget in Preview mode.
Examples to inspire you
Before we explain the technical part, here are some examples to get your own ideas flowing.
Typography Principles
For this thorough research of the history and theory of typography, using a gray circle as a cursor helps it stand out against black and white backgrounds. You can see another example from the same creator (Obys Agency) on their 2-year anniversary site.
Jack Towers portfolio
A portfolio with a strong Web 1.0 vibe offering a ginormous pixelated cursor, that balances with the proportions of the page and adds an extra layer of continuity.
Komnata Agency
This custom cursor allows you to draw with fluorescent lights. Take note, this style requires significantly more coding than the technique described below.
Implementing a custom cursor
When creating such a cursor with the Code widget, we recommend using the CSS cursor property. Here’s how:
1. Create a Code widget.
2. Double-click on the widget and insert the following code into its CSS section, pasting over any previously existing code:
body, html { cursor: url(*******************), auto; }
The link in parentheses after the URL field should link to any small (about 10x10 pixels) image you want to use as a cursor. The auto keyword denotes a fallback — a cursor shape that will load if the image link isn’t accessible for some reason.
3. You can also use in-browser icons with the following syntax:
body, html { cursor: move; }
The full list of options can be found here. Note that auto from the previous section is also an in-browser icon.
4. Finally, you can set the cursor to change only when a user hovers over specific page elements. Every element in Readymag has a data-id property — you can check by inspecting the element via the Browser Dev Tools.
Copy the data-id property, add it to the field below, then add the following code to your Code widget > CSS:
[data-id=”************”] { cursor: help; }
or
[data-id=”************”] { cursor: url(********), auto; }
depending on your needs (see above).
