This is for PERSONAL use only!
You are free to use this for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:Common.js or MediaWiki:Common.css), as it would violate Fandom's Terms of Use.
See the customization policy on Community Central
This feature is not recommended
Custom cursors can have accessibility issues as it isn't clear where the click point is on the cursor which can frustrate and deter users from the wiki. They can also detract from the user experience as they can be irritating, gimmicky, superfluous, and just plain unpleasant.[1]
Customizing the cursor used to be allowed in sitewide CSS as a way to theme a wiki, but it's no longer allowed in the current Customization policy[2]. However, users can still add custom cursors for their own experience via their personal CSS.
Step 1: Get the image
- Use a transparent-background image (for instance .png), so that way you don't accidentally upload a white square!
- Do not make it too big. Images around 18px are usually of a good size.
- Make the visible part touch the top left corner: that's where the user will click.
- Pay attention that the shape doesn't distract; arrow shapes, triangles or similar are always a good idea.
Step 2: Decide where the image is hosted
You can use off-site images by linking with the full URL or upload the image locally to your wiki.
Offsite image
If you plan on using an off-site image then:
- Find the image somewhere on the internet.
- Copy the image URL to paste later on.
Local image
If you plan on using a local image (preferred) then:
- Upload the images you want to be displayed with Special:Upload.
- Copy the
filename.extof the image just uploaded to paste later on. - use
"/wiki/Special:FilePath/YOUR_FILENAME_WITH_EXT"as the URL in places mentioned below.
Step 3: Add the code
Where to add
Special:MyPage/common.css
What to add
Fill in the _____ with the URL (usually ending in .png) of the image that you want to use as a cursor.
Add the following code in the page:
/*** Custom cursor ***/
/* Global cursor */
body {
cursor: url('_____'), pointer;
}
/* Link cursor */
a:hover {
cursor: url('_____'), pointer;
}