Customize Your Wiki
Advertisement

Customizing your cursor is an easy way to theme your wiki more to its subject without needing big images or flashy colors. A cursor is also present everywhere, so will follow users around as long as they are visiting your wiki.

Step 1: Get the image

First, you will need an image that is suitable as a cursor. You can create this with any image editor (Paint, GIMP, SAI, Photoshop, ...) and then upload this to your wiki. You can also look around if the internet provides some free-to-use[1] images that can serve as cursor.

When making an image

Please pay attention to the following items:

  • 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.

Freely usable cursors

Step 2: Decide where the image is hosted

You can use images off-site by linking with full-URL or upload a local one to your wiki.

Offsite image

If you plan on using an off-site image then:

  1. Find the image somewhere on the internet.
  2. Copy the image URL to paste later on.

Local image

If you plan on using a local image (prefered) then:

  1. Upload the images you want to be displayed with Special:Upload.
  2. Copy the filename.ext of the image just uploaded to paste later on.
  3. use "/wiki/Special:FilePath/YOUR_FILENAME_WITH_EXT" as the URL in places mentioned below.

Step 3: Add the code

Where to add

  • If you are admin and intend for all viewers to see it: go to Special:CSS[2]
  • If you are not an admin or want it for personal use: go to Special:MyPage/wikia.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 the following code in the page:

/***** Custom cursor *****/
/* Global cursor */
body {
  cursor: url('_____'), pointer; 
}
/* Link cursor */
a:hover {
  cursor: url('_____'), pointer; 
}

Wikis that have this feature

Other Wikis that use this feature

Notes

  1. Images with appropriate copyright are free to use. Main examples are public domain images or images under a Creative Commons license.
  2. Some users may prefer to place it in MediaWiki:Common.css or MediaWiki:Monobook.css
Advertisement