FANDOM


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 imageEdit

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 imageEdit

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 cursorsEdit

Step 2: Decide where the image is hosted Edit

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

Offsite image Edit

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 Edit

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 codeEdit

Where to addEdit

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

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 featureEdit

Other Wikis that use this feature Edit

NotesEdit

  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

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.